PART ONE -- HTML
1、html5 新特性,语义化?
新特性:
- 语义特性,添加 <header></header><nav></nav> 等标签。
- 多媒体,用于媒介回放的 video 和 audio 元素
- 图像效果,用于绘画的 canvas 元素, svg 元素
- 离线 & 缓存,对本地离线存储的更好的支持,localSrorage等
- 设备兼容特性,HTML5 提供了前所未有的数据与应用介入开放接口。
- 链接特性。Server-Sent Event 和 WebSockets 就是其中两个特性,这两个特性能帮助我们实现服务器将数据“推送”到客户端的功能。
- 性能与集成特性,HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速的工作。
语义化:
语义化就是用合理、正确的标签来展示内容。语义化的优点有:易于用户阅读,样式丢失的时候能让页面呈现清晰的结构;有利于 SEO,搜索引擎根据标签来确定上下文个各个关键字的权重;方便其他设备解析,如读屏器;有利于开发和维护,语义化更具有可读性,代码更好维护,与 CSS3 关系更和谐。
2、浏览器的标准模式和怪异模式
标准模式:此模式下,浏览器按照 HTML 与 CSS 标准对文档进行解析和渲染;
怪异模式:此模式下,浏览器按照就有的非标准的实现方式对文档进行解析和渲染。
3、使用 data- 的好处
- 自定义属性,可以被 js 很好的操作
- 通过 js 的 element.dataset. 或 jQuery 的 data(‘‘) 拿到,* 可以为 url 等字符
4、什么是渐进式渲染
服务端渲染局部,客户端渲染局部。(参考: https://segmentfault.com/a/11...)
PART TWO -- CSS
1、盒模型,box-sizing
盒模型:Every element in web design is a rectangular box。
CSS3 的 box-sizing 属性:
- content-box(默认):width = contentWidth + padding(left/right) + border(left/right)
- padding-box:width = contentWidth(包含padding) + border(left/right)
- border-box:width = contentWidth(包含 padding 和 border)
2、CSS3 新特性,伪类,伪元素,锚伪类
CSS3 新增特性主要有(使用比较频繁的):过渡(transition)、动画(animation)、形状转换(transform)、文字超出省略号、弹性布局(flex)、栅格布局(grid)、多列布局(column-count)、媒体查询。
(参考:https://segmentfault.com/a/11...)
3、CSS实现隐藏页面元素的方式
- opacity: 0 -> 只能从视觉上隐藏元素,元素依旧占据位置并对网页的布局起作用,也会影响用户交互。在读屏软件中不会被隐藏。
- visibility: hidden -> 被隐藏的元素依然会对网页布局起作用,但不会影响任何用户交互。在读屏软件中也会被隐藏。
- diaplsy: none -> 隐藏元素,确保元素不可见并且连盒模型也不生成,被隐藏的元素不占据任何空间,且一旦设置了 display 为 none,任何对该元素直接的用户交互操作都不肯能。读屏软件也无法被读到。
- position:absolute -> 配合 top 和 left 属性,将元素移出可视区域,不会影响布局,又能让元素保持可操作。
- clip-path:剪裁(eg: clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);)
4、CSS 实现水平居中和垂直居中
自己最常用的三种:
.box {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box {
display: flex:
align-items: center;
justify-content: center;
}
.box {
display: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
(别人写的总结:https://segmentfault.com/a/11...
5、说说 position, display
position:元素在页面中的布局遵守一套文档流的方式,默认的定位属性值为 static。它其实是未被设置定位的。元素如果被定为了,那么它的 top, left, bottom, right 值就会生效,能设置定位的属性是 relative, absolute,fixed。需要注意的是被定为的元素的层次(z-index)会得到提高。
- relative:相对定位,元素会在自身文档流所在位置上被移动,其他的元素则不会调整位置来弥补它偏离后剩下的空袭。
- absolute:绝对定位,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。
- fixed:固定定位,元素相对的偏移参考是可视窗口
display:每一个元素都有默认的 display 属性。
常见的block属性元素有:div, h1-h6, ul, li, ol, dl, dd, dt。
常见的inline属性元素有: span, a, em。
6、解释一下 css3 的 flexbox,以及适用场景
Flex 意为“弹性布局”,用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素,称为 flex 容器,简称“容器”。它的所有自元素自动成为容器成员,称为 flex 项目(flex item),简称“项目”。常规布局是基于块和内联流方向,而 flex 布局是基于 flex-flow 流,可以很方便的用来做居中,能对不同屏幕大小自适应。在布局上有了比以前更佳灵活的空间。
7、实现两栏布局有哪些方法?
-
左列定宽,右列自适应
-
margin + float
<div class="box"> <div class="left"></div> <div class="right-fix"> <div class="right"> <p>right</p><p>right</p> </div> </div> </div>
.left { float: left; width: 100px; position: relative; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 120px; // 形成 20px 间隔 }
-
absolute
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.box{ position: relative; } .left{ position: absolute; left: 0; width: 100px; } .right{ position: absolute; left: 120px; // 形成 20px 间隔 right: 0; }
-
- 左列不定宽,右列自适应
- float + BFC
这个方法主要是应用到 BFC 的一个特性
浮动元素的块状兄弟元素会五十付哦那个元素的位置,尽量占满一整行,这样该兄弟元素就会被浮动元素覆盖
若浮动元素的块状兄弟元素为BFC,则不会占满一整行,而是根据浮动元素的宽度,占据该行剩下的宽度,避免与浮动元素重叠。
*浮动元素与其块状BFC兄弟元素之间的margin可以生效,这将继续减少兄弟元素的宽度
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
.left{
float: left;
width: 100px;
margin-right: 20px; //形成 20px 的间隔
}
.right{
overflow: hidden; //通过设置overflow: hidden来触发BFC特性
}
-
table 布局
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.box{ display: table; width: 100%; table-layout: fixed; } .left, .right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; }
-
flex
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.parent{ display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; }
PART THREE -- JS
1、JS的基本类型有哪些?引用类型有哪些?null 和 undefined 的区别。
JS基本类型:null,undefined,boolean,number,string,symbol。
引用类型:Object
undefined:定义了但是没有赋初始值
null:未定义的对象
2、引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?
基本数据类型
- 基本数据类型的值是不可变的
- 基本数据类型不可以添加属性和方法
- 基本数据类型的赋值是简单赋值
- 基本数据类型的比较是值的比较
- 基本数据类型是存放在栈区的
引用类型
- 引用类型的值是可以改变的
- 引用类型可以添加属性和方法
- 引用类型的赋值是对象引用
- 引用类型的比较是引用的比较
- 引用类型是同时保存在栈区和堆区中的
3、new 一个对象具体做了什么?
新生成一个对象 -> 链接到原型 -> 绑定 this -> 返回新对象
4、箭头函数和普通函数有什么区别?
- 箭头函数不能作为构造函数,不能使用 new
- 箭头函数只能作为匿名函数使用
- 箭头函数中的 this 会捕获其上下文的 this 值
- 箭头函数不绑定 arguments, 取而代之用 rest 参数(...)解决
- 箭头函数当方法使用的时候没有定义 this 绑定
- 箭头函数不能当作 Generator 函数,不能使用 yield 关键字
- 箭头函数不能返回对象字面量
- 箭头函数不能换行
- 普通函数每个都有其自己的 this 值,构造函数的 this 指向一个新的对象;严格模式下的函数的 this 指向 undefined;如果函数是作为对象的方法被调用的,则 this 指向了那个调用它的对象
5、对闭包的的理解
6、property 和 attribute 的区别
Property 是 DOM 中的属性,是 JavaScript 里的对象;
Attribute 是 HTML 标签上的特性,它的值只能够是字符串。
7、setTimeout和promise的执行顺序
看题:
setTimeout(function() {
console.log(1)
}, 0);
new Promise(function(resolve, reject) {
console.log(2)
for (var i = 0; i < 10000; i++) {
if(i === 10) {console.log(10)}
i == 9999 && resolve();
}
console.log(3)
}).then(function() {
console.log(4)
})
console.log(5);
以上代码的输出结果为:2 10 3 5 4 1
setTimeout(fn, 0) 表示立即执行,也就是用来改变任务的执行顺序,要求浏览器“尽可能快”的进行回调;Promise 新建后立即执行,Promise 构造函数里的代码是同步执行的;then 方法指向的回调将在当前脚本所有同步任务执行完后执行
then 比 setTimeout 执行要早,是因为其实 setTimeout 又一个最小执行时间(minimun delay)为 4ms,并不是 0s 执行。
参考文章
未完待续...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。