总结面试问道的一些面试题（持续更新）

1. 项目里如何实现自适应？媒体查询

1.     设置标签头：<meta  charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

①width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的 值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

②height：和 width 相对应，指定高度。

③initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

④maximum-scale：允许用户缩放到的最大比例。

⑤minimum-scale：允许用户缩放到的最小比例。

⑥user-scalable：用户是否可以手动缩放

1.   设置body，html全屏：<style>

        html, body {

            margin: 0;

            height: 100%;

            width: 100%;

            overflow: hidden;

        }

    </style>

1. 避免使用px单位 尽量使用rem/百分比单位并在屏幕发生改变和初始化页面的时候调用以下函数

    function resizeRem() {

        if (window.innerWidth < window.innerHeight)

        {

            var html = document.querySelector('html');

            var rem = html.offsetHeight / 10.80;

            html.style.fontSize = rem + "px";

        }

        else {

            var html = document.querySelector('html');

            var rem = html.offsetWidth / 19.20;

            html.style.fontSize = rem + "px";

        }

}

1. 使用@media标签做一套横屏和竖屏的适配

@media all and (orientation : portrait) 竖屏

@media all and (orientation : landscape)横屏

1. vh+vw

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

所以当我们的页面背景不是很在乎比例问题（如星空海洋），每一个页面都可以使用100vh,100vw达到始终覆盖整个可视区的效果。

优点：简单方便

缺点：适用范围小，不适用于比例固定的地方

1. 基于媒体查询的响应式设计

基于媒体查询的响应式设计，响应式设计，使得一个网站可以同时适配多种设备和多个屏幕，让网站的布局和功能随用户的使用环境（屏幕大小、输出方式、设备/浏览器）而变化，使其视觉合理，交互方式符合习惯。

css3中的@media，通过给不同分辨率的设备编写不同的样式规则实现响应式布局，使一个网站可以在不同尺寸的屏幕下显示不同的布局效果。主要用来解决不同设置不同分辨率之间的兼容问题，一般是指pc、平板、手机设备之间较大的分辨率差异。实现上不局限于具体的方案，通常是结合流式布局和弹性布局方案。比如给小屏幕手机设置@2x图，给大屏手机设置@3x图。

@media only screen and (min-width: 375px){

    /*样式1*/

}

@media only screen and (min-width: 750){

    /*样式2*/

}

①：优点：能够使网页在不同设备、不同分辨率的屏幕上呈现合理布局，不单单是样式伸缩变换。

②：缺点：如果要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大。

通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生突兀变化，用户体验不太友好。

1. 项目里前后端交互部分怎么实现的？

1. 利用cookie

• 前端通过登录来存储cookie
• 后端可以通过 req.cookies() 来获取存储的cookie信息

1. 利用ajax

node.js 之前常用的前后端交互都利用ajax和JQ中已经封装好的a j a x ; ajax ;ajax;post; $getJSON 通过创建一个XMLhttpRequest对象，来进行前后端交互；

node.js 之后我们也依赖于$http服务器搭建的http来完成get；post任何jsonp的方式来进行前后端交互

1. 服务器渲染

在node 中实现服务器渲染

利用模板引擎，node在渲染模板的时候给模板传入数据，在模板中就可以使用特定的语法来渲染dom了 例如：ejs,jade

1. 表单提交

表单（form）：表单用于收集用户输入信息，并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式

//1. action：指定表单的提交地址

//2. method:指定表单的提交方式，get/post，默认get

//3. input的数据想要提交到后台，必须指定name属性，后台通过name属性获取值

//4. 想要提交表单，不能使用input:button 必须使用input:submit

1. php获取表单数据

//$_GET是PHP系统提供的一个超全局变量，是一个数组，里面存放了表单通过get方式提交的数据。

 //$_POST是PHP系统提供的一个超全局变量，是一个数组，里面存放了表单通过post方式提交的数据。

1. get与post的区别

//1. get方式

//1.1 数据会拼接在url地址的后面?username=hcc&password=123456

//1.2 地址栏有长度限制，因此get方式提交数据大小不会超过4k

//2. post方式

//2.1 数据不会在url中显示，相比get方式，post更安全

//2.2 提交的数据没有大小限制

//根据HTTP规范，GET用于信息获取，POST表示可能修改变服务器上的资源的请求

1. Ajax

即 Asynchronous [e’sɪŋkrənəs] Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。

1. 同步与异步

同步和异步概念：

同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务

异步: 不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。

编程中：异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。

1. ajax技术的应用：

验证你的用户名是否已经存在（一边输入，一边获取你的信息，和后台比对）。

百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。

XMLHttpRequest可以以异步方式的处理程序。

1. JSON数据
2. jQuery中的ajax方法

1. 前端存储方式 localStorage、sessionStorage 存储大小限制了解吗？

1. HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。

IE 9          > 4999995 + 5 = 5000000

firefox 22.0 > 5242875 + 5 = 5242880

chrome  28.0  > 2621435 + 5 = 2621440

safari  5.1   > 2621435 + 5 = 2621440

opera   12.15 > 5M

1. HTML语义化的了解

1. 语义化的主要目的：用正确的标签做正确的事情。
2. 让页面的内容结构化
3. 提高代码的可维护和可重用性。
4. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
5. 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
6. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
7. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
8. 便团队项目的可持续运作及维护

1. CSS选择器优先级

1、第一等：代表内联样式，如: style=””，权值为1000。

2、第二等：代表ID选择器，如：#content，权值为0100。

3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

6、继承的样式没有权值。

1. @import 与 link 的区别

@import是CSS提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS，rel连接属性等；

加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载；

link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别；

可以通过JS操作DOM，来插入link标签改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式；

1. 显式原型和隐式原型

每个函数function都有一个prototype,即显式原型(属性)

每个实例对象都有一个__proto__,可称为隐式原型(属性)

1. 隐藏元素的八种方法

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。

opacity: 0; CSS3属性，设置0可以使一个元素完全透明。

position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外。

display: none; 元素会变得不可见，并且不会再占用文档的空间。

transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留。

<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态。

height: 0; 将元素高度设为 0 ，并消除边框。

filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中。

1. ECMAScript 6是新版本JavaScript语言的标准, 即 javascript的增强版
2. commonJS 是一种JavaScript的包管理规范，主要是为了解决javaScript文件中依赖和引用的问题，node应用由模块组成，采用的commonJS模块规范，webpack打包的是commonJS规范下的js文件
4. 如何判断http请求超时

catch ConnectTimeoutException异常,就是超时了

1. HTTP常见状态码（14种）

1. 200 OK：表示从客户端发送给服务器的请求被正常处理并返回；
2. 204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；
3. 206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。
4. 301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；
5. 302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；
6.  301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）
7. 303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；
8. 302与303的区别：后者明确表示客户端应当采用GET方式获取资源
9. 304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；
10. 307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；
11. 400 Bad Request：表示请求报文中存在语法错误；
12. 401 Unauthorized：未经许可，需要通过HTTP认证；
13. 403 Forbidden：服务器拒绝该次访问（访问权限出现问题）
14. 404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；
15. 500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；
16. 503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

1. HTTP与HTTPS的区别

安全性上，HTTPS是安全超文本协议，在HTTP基础上有更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议

申请证书上，HTTPS需要使用ca申请证书

传输协议上, HTTP是超文本传输协议，明文传输；HTTPS是具有安全性的 SSL 加密传输协议

连接方式与端口上，http的连接简单，是无状态的，端口是 80； https 在http的基础上使用了ssl协议进行加密传输，端口是 443

1. HTTPS的加密方式

1. 对称加密

需要对加密和解密使用相同密钥的加密算法。所谓对称，就是采用这种加密方法的双方使用方式用同样的密钥进行加密和解密。密钥是控制加密及解密过程的指令。算法是一组规则，规定如何进行加密和解密。

注意：对称加密也叫密钥加密

优点：对称加密算法的优点是算法公开、计算量小、加密速度快、加密效率高。

缺点：对称加密，密钥管理的安全性很低，因为加密和解密都使用同一个密钥，在密钥的发送过程中，密钥可能被第三方截取，导致第三方也可以破解密文。

1. 非对称加密

非对称加密算法需要两个密钥：公开密钥（publickey:简称公钥）和私有密钥（privatekey:简称私钥）。公钥与私钥是一对，如果用公钥对数据进行加密，只有用对应的私钥才能解密。如果用公钥对数据进行加密，只有用对应的私钥才能解密。因为加密和解密使用的是两个不同的密钥，所以这种算法叫作非对称加密算法。

非对称密钥的算法强度复杂（是优点也是缺点），安全性依赖于算法与密钥。
优点：安全性较高，比对称密钥安全性高很多。 非对称加密算法的保密性比较好，它消除了最终用户交换密钥的需要。
缺点：由于其算法复杂，而使得加密解密速度没有对称加密解密的速度快。

1. 事件委托的原理

首先呢,先来讲讲事件委托的起源:由于事件处理程序可以为web应用提供交互能力,因此很多开发人员会不分青红皂白的向页面中添加大量的处理程序.在js中,添加到页面的事件处理程序数量直接关系到页面的整体运维性能.导致这一问题的原因是多方面的.首先:

    1 函数都是对象,都会占用内存,内存中对象越多,性能越差

    2 事先指定所有的事件处理程序而导致dom访问次数,会延迟整个页面的交互的就绪事件.

所以:对事件处理程序过多问题的解决方案就是事件委托.

事件委托,最重要的功能就是提高程序运行效率.

  既然出来了事件委托,那咱们讲讲事件委托的原理.先来个概念:事件流.

​ 事件流分为​ 1.事件捕获​ : 当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件​

1. 事件冒泡​ :当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件那现在直接上代码,带大家来了解什么是事件捕获和事件冒泡
2. 1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。    2.动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

1. 几种数组去重方法

1. return [...new Set(arr)];
2. 利用Map数据结构去重

创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。

1. 利用递归去重
2. forEach + indexOf去重
3. hash+hasOwnProperty+JSON.stringify

1. 细谈深浅拷贝问题

1. 浅拷贝：也称位拷贝，编译器只是将对象中的值拷贝过来。如果对象中管理资源，最后就会导致多个对象共享同一份资源，当一个对象销毁时就会将该资源释放掉，而此时另一些对象不知道该资源已经被释放，以为还有效，所以当继续对资源进行操作时，就会发生了访问违规。

String(const char* pstr = "")

:_pstr(new char[strlen(pstr)+1])

{

  strcpy(_pstr,pstr);

}

void StringTest()

{

   String s1("hello world!");

   String s2(s1);//s2需要调用String类拷贝构造函数来创建，如果该类没有显示定义，则使用系统合成的默认构造函数

}

当StringTest函数结束时，需要将s1和s2销毁掉，调用系统默认的析构函数。先销毁s2，s2将_pstr所指的空间释放掉，s2成功销毁，但是s1中_pstr就成为野指针了，当销毁s1时发生错误。导致问题的原因是：s1、s2公用同一块内存空间，在释放时同一块空间被释放多次而引起程序崩溃。这种拷贝方式就称为浅拷贝。

1. 深拷贝

如果一个类中涉及资源的清理的管理，其拷贝构造函数、赋值运算符重载以及析构函数必须要显示给出，一般情况都是按照深拷贝方式提供。上面的代码可以改成：

String(const String& s)//s是s1的别名

  :_pstr(new char[strlen(s._pstr)+1])

  {

    strcpy(_pstr,s._pstr);

  }

每个String类对象都要用空间来存放字符串，而s2要用s1拷贝构造出来。因此深拷贝：给每个对象独立分配资源，保证多个对象之间不会因为共享资源而造成多次释放造成程序崩溃问题。
一般日期类是浅拷贝，而string类是深拷贝。

属性	属性值	注释
src	url	播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持）
preload	preload	预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。
loop	loop	循环播放
controls	controls	是否显示默认控制条（控制按钮）
autoplay	autoplay	自动播放

音频格式	Chrome	Firefox	IE9	Opera	Safari
OGG	支持	支持	支持	不支持	不支持
MP3	支持	不支持	支持	不支持	支持
WAV	不支持	支持	不支持	支持	不支

属性	注释
duration	获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
paused	如果媒体文件被暂停，那么paused属性返回true，反之则返回false
ended	如果媒体文件播放完毕返回true
muted	用来获取或设置静音状态。值为boolean
volume	控制音量的属性值为0-1;0为音量最小，1为音量最大
startTime	返回起始播放时间
error	返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效
currentTime	用来获取或控制当前播放的时间，单位为s。
currentSrc	以字符串形式返回正在播放或已加载的文件

函数	作用
load()	加载音频、视频软件
play()	加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()	暂停出于播放状态的音频、视频文件
canPlayType(obj)	测试是否支持给定的Mini类型的文件

事件名称	事件作用
loadstart	客户端开始请求数据
progress	客户端正在请求数据（或者说正在缓冲）
play	play()和autoplay播放时
pause	pause()方法促发时
ended	当前播放结束
timeupdate	当前播放时间发生改变的时候。播放中常用的时间处理哦
canplaythrough	歌曲已经载入完全完成
canplay	缓冲至目前可播放状态。

1. Vuex是什么

2. Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

   1）state

   state是存储的单一状态，是存储的基本数据。

   2）Getters

   getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

   3）Mutations

   mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

   4）Actions

   actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

   5）Module

   Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

   const moduleA = {

     state: { ... },

     mutations: { ... },

     actions: { ... },

     getters: { ... }

   }

   const moduleB = {

     state: { ... },

     mutations: { ... },

     actions: { ... }

   }

   const store = new Vuex.Store({

     modules: {

       a: moduleA,

       b: moduleB

     }

   })

   store.state.a // -> moduleA 的状态

   store.state.b // -> moduleB 的状态

   6）辅助函数

   Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

   2.Vuex的使用

   import Vuex from 'vuex';

   Vue.use(Vuex); // 1. vue的插件机制，安装vuex

   let store = new Vuex.Store({ // 2.实例化store，调用install方法

       state,

       getters,

       modules,

       mutations,

       actions,

       plugins

   });

   new Vue({ // 3.注入store, 挂载vue实例

       store,

       render: h=>h(app)

   }).$mount('#app');

3. Vuex的设计思想

4. Vuex的设计思想，借鉴了Flux、Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

   看了Vuex设计思想，心里难免会有这样的疑问：

   vuex的store是如何挂载注入到组件中呢？

   vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢？

5. Js中获取对象的所有key值

6. for(var key in obj){

       console.log(key,obj[key])

   }

7. Promise用法详解
8. Promise是一个构造函数，所以可以 new 出一个Promise的实例。
9. 在Promise上有两个函数 resolve(成功之后的回调函数)和 reject(失败后的回调函数)。
10. 在Promise构造函数的prototype属性上，有一个 .then() 方法。所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法。
11. Promise表示一个一步操作，每当我们new一个Promise的实例，这个实例就代表具体的异步操作。
12. Promise创建的实例，是一个异步操作，这个异步操作结果，只有两种结果。
13. 状态1：异步执行成功，需要在内部调用成功的回调函数resolve把结果返回给调用者
14. 状态2：异步执行失败，需要在内部调用失败的回调函数reject把结果返回调用者。
15. 由于Promise的实例是一个异步操作，所以内部拿到操作结果后，无法使用return把操作结果返回给调用者，这个时候只能使用回调函数的形式，把成功或失败的结果，返回给调用者。
16. 我们可以在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操作，指定成功(resolve)和失败(reject)回调函数。
17. 1.1 html标签的类型（head， body，！Doctype） 他们的作用是什么
18. 参考答案：
19. !DOCTYPE 标签：
20. 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
21. head：
22. 是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
23. 该标签下所包含的部分可加入的标签有 <base>, <link>, <meta>, <script>, <style>和<title>
24. body :
25. 用于定义文档的主体, 包含了文档的所有内容
26. 该标签支持 html 的全局属性和事件属性.
27. 1.2 h5新特性
28. 参考答案：
29. 新增选择器 document.querySelector、document.querySelectorAll
30. 拖拽释放(Drag and drop) API
31. 媒体播放的 video 和 audio
32. 本地存储 localStorage 和 sessionStorage
33. 离线应用 manifest
34. 桌面通知 Notifications
35. 语意化标签 article、footer、header、nav、section
36. 增强表单控件 calendar、date、time、email、url、search
37. 地理位置 Geolocation
38. 多任务 webworker
39. 全双工通信协议 websocket
40. 历史管理 history
41. 跨域资源共享(CORS) Access-Control-Allow-Origin
42. 页面可见性改变事件 visibilitychange
43. 跨窗口通信 PostMessage
44. Form Data 对象
45. 绘画 canvas
46. H5移除的元素：
47. 纯表现的元素：basefont、big、center、font、s、strike、tt、u
48. 对可用性产生负面影响的元素：frame、frameset、noframes
49. 1.3 伪类和伪元素
50. 参考答案：
51. 伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
52. ​ 例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为 已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。
53. 伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。
54. ​ 例如，我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。
55. 1.4 html5语义化
56. 参考答案：
57. 在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
58. <title>      <!--：页面主体内容。-->
59. <hn>         <!--：h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。-->
60. <ul>         <!--：无序列表。-->
61. <li>         <!--：有序列表。-->
62. <header>     <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
63. <nav>         <!--：标记导航，仅对文档中重要的链接群使用。-->
64. <main>         <!--：页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。-->
65. <article>    <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
66. <section>    <!--：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。-->
67. <aside>         <!--：定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。-->
68. <footer>     <!--：页脚，只有当父级是body时，才是整个页面的页脚。-->
69. <small>      <!--：呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。-->
70. <strong>     <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
71. <em>         <!--：将其中的文本表示为强调的内容，表现为斜体。-->
72. <mark>       <!--：使用黄色突出显示部分文本。-->
73. <figure>     <!--：规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。-->
74. <figcaption><!--：定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
75. <cite>       <!--：表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。-->
76. <blockquoto><!--：定义块引用，块引用拥有它们自己的空间。-->
77. <q>          <!--：短的引述（跨浏览器问题，尽量避免使用）。-->
78. <time>       <!--：datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。-->
79. <abbr>       <!--：简称或缩写。-->
80. <dfn>       <!--：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。-->
81. <address>    <!--：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。-->
82. <del>        <!--：移除的内容。-->
83. <ins>        <!--：添加的内容。-->
84. <code>       <!--：标记代码。-->
85. <meter>      <!--：定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）-->
86. <progress>    <!--：定义运行中的进度（进程）。-->
87. 扩展：
88. 语义化优点：
89. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
90. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
91. 方便其他设备解析，如盲人阅读器根据语义渲染网页
92. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。
93. 1.5 audio 标签的api
94. 参考答案：
95. audio常用属性

96. 属性	属性值	注释
    src	url	播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持）
    preload	preload	预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。
    loop	loop	循环播放
    controls	controls	是否显示默认控制条（控制按钮）
    autoplay	autoplay	自动播放

97. audio音乐格式的支持

98. 音频格式	Chrome	Firefox	IE9	Opera	Safari
    OGG	支持	支持	支持	不支持	不支持
    MP3	支持	不支持	支持	不支持	支持
    WAV	不支持	支持	不支持	支持	不支

99. audio属性

100. 属性	注释
     duration	获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
     paused	如果媒体文件被暂停，那么paused属性返回true，反之则返回false
     ended	如果媒体文件播放完毕返回true
     muted	用来获取或设置静音状态。值为boolean
     volume	控制音量的属性值为0-1;0为音量最小，1为音量最大
     startTime	返回起始播放时间
     error	返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效
     currentTime	用来获取或控制当前播放的时间，单位为s。
     currentSrc	以字符串形式返回正在播放或已加载的文件

101. 常用的控制用的函数：

102. 属性	注释
     duration	获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
     paused	如果媒体文件被暂停，那么paused属性返回true，反之则返回false
     ended	如果媒体文件播放完毕返回true
     muted	用来获取或设置静音状态。值为boolean
     volume	控制音量的属性值为0-1;0为音量最小，1为音量最大
     startTime	返回起始播放时间
     error	返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效
     currentTime	用来获取或控制当前播放的时间，单位为s。
     currentSrc	以字符串形式返回正在播放或已加载的文件

103. 常用audio的事件：

104. 属性	注释
     duration	获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN
     paused	如果媒体文件被暂停，那么paused属性返回true，反之则返回false
     ended	如果媒体文件播放完毕返回true
     muted	用来获取或设置静音状态。值为boolean
     volume	控制音量的属性值为0-1;0为音量最小，1为音量最大
     startTime	返回起始播放时间
     error	返回错误代码，为uull的时候为正常。否则可以通过Music.error.code来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL无效
     currentTime	用来获取或控制当前播放的时间，单位为s。
     currentSrc	以字符串形式返回正在播放或已加载的文件

105. CSS3有哪些新特性？
106. CSS3实现圆角（border-radius），阴影（box-shadow），
107. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
108. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
109. 增加了更多的CSS选择器 多背景 rgba
110. 在CSS3中唯一引入的伪元素是::selection.
111. 媒体查询，多栏布局
112. border-image

1. diff算法（核心）

1. vue和react的虚拟dom都采用了类似的diff算法，核心大概有两种：

①两个相同的组件产生类似的dom结构，不同的组件产生不同的dom结构；

②同一层级的一组节点，他们可以通过唯一的id进行区分。

当页面的数据发上变化的时候，Diff算法只会比较同一层级的节点：

如果节点类型不同，直接干掉前面的节点，在创建并插入新的节点，不会再比较这个节点以后的子节点了。

如果节点类型相同，则会重新设置节点的属性，从而实现节点的更新。

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上的原则。

Diff算法实现的是最小量更新虚拟DOM。这句话虽然简短，但是涉及到了两个核心要素：虚拟DOM、最小量更新。