1.什么是diff算法？
我们修改了文本内容后会生成新的虚拟dom,新旧俩个虚拟dom之间是存在一定差异的，如果能快速找到这俩个对象之间的差异，就可以最小化的更新视图，"diff算法"就是专门用来比对这两个虚拟dom对象的。
diff算法的目的（本质）：找出差异，最小化的更新视图。
流程：
当数据改变时，就会触发内部的setter方法，进一步触发dep.notify方法，通知到各数据使用方，执行patch方法,patch方法接收俩个参数（新旧虚拟节点），首先在内部判断一下是不是同类标签，如果不是同类标签那就没有比对的必要了，直接替换就行，如果是同类标签那就执行pacthvnode方法，在这个方法内部也是需要判断一下新旧虚拟节点是否相等，相等的话就直接return,如果不相等那就需要分情况来比对，比对的原则是以新虚拟节点的结果为准；
情况1：
新、旧节点都有文本节点，那直接用新的文本节点来替换就行。
情况2：
旧的没有子节点，新的有子节点，那就直接添加新的子节点就行了。
情况3：
旧的有子节点，新的没有子节点，那就直接删除旧的子节点就行了。
情况4：
新旧都有字节点，那就需要比对他们的子节点（updateChildren）。
updateChildren方法
在该方法中规定了只在同级比对方法，这样可以减少比对次数，最大化的提高比对性能。而且在同级比对中采用的是首尾指针法。
首先旧虚拟节点的oldS和新虚拟节点的newS做比对，如果没有比对成功，那oldS会和newE做比对。如果依旧没有比对成功，就oldE和newS做比对，如果依旧没有比对成功，oldE会和newE做比对。
比对的原则是依照以上顺序依次做比对，当比对成功的，就退出当前比对，渲染结果会以新虚拟节点的结果为准。每次比对成功后，比对成功的start会向右侧移动，end会向左侧移动。在移动的过程中当start跑到end的右侧时九会终止比对。
如果首尾指针法以上4种情况都没有匹配成功的话，则会看新旧虚拟节点的key值，key相同的话就会复用。
2.闭包（closure）
将函数内部和外部连接起来的一个桥梁
闭包有2个特点：
1.函数嵌套函数，内部函数引用外部函数变量
2.内部函数可以访问外部函数的变量和参数
闭包有2个作用：
1.防止变量和参数被垃圾回收机制回收（变量持久化）
2.防止变量和参数被外部污染（变量只在闭包内部可访问）
3.实现数据的私有化 ，外面可以用，但没法修改。
闭包风险：
滥用可能会造成内存泄漏
闭包的应用：
1.实现js的模块化
2.封装私有变量
3.防抖和节流
防抖：用户频繁触发某个动作，但是我只想让它最后一次生效（比如用户输入）
节流：比如监听滚动条，控制多久执行一次方法，有固定的一个频率。
节流和防抖的区别：
闭包一定有return吗？,闭包一定会造成内存泄漏吗？
no
什么时候用到return?
3.什么是原型和原型链？
原型：
每个函数都有一个prototype属性,称之为原型。
因为这个属性的值是个对象，所以我们也称之为原型对象。
作用：
1.里面存放了一些属性和方法，也就是把我们的属性和方法挂载到原型身上。
2.在js中可以通过原型来实现继承
__proto__:
每个对象都有__proto__属性，这个属性指向它的原型对象。
4.css3中transition和animation的区别是什么？
transition是过渡属性
animation是动画属性
//1、动画状态不同
1.transform过渡只有开始和结束两种状态；
2.animation有开始，过程，结束多种状态
//2、动画触发方式不同:
1. CSS的transition需要借助别的方式来触发, 比如CSS的状态选择器（如:hover）或 借助JavaScript来触发 。
2. animation 不但可以使用上面的方式触发, 更重要的是可以自动触发 。
//3、功能点（属性）不同
animation 控制动效上要比 transition 强，因为它具备一些控制动效的属性，比如“播放次数”、“播放方向”、“播放状态”等。
//transform和animation的相同点
1. 从整体来看，animation 和 transition 想做的事情都是一样, 通过控制属性变化的过程也, 实现动画; 都是立足于控制本身 dom 的 css 属性变化过程, 来实现动画的视觉效果。
2. 他们都有“持续时间”、“延迟时间” 和“时间缓动函数”等概念，这些都是用来控制动效的效果。5.for...in和for...of的区别是什么？
1.循环数组：
for in 和 for of 都可以循环数组，for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。
2.循环对象:
for in 可以遍历对象，for of 不能遍历对象，只能遍历带有iterator接口的，例如Set,Map,String,Array
const object = { name: 'lx', age: 23 }
// for ... in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 lx,23
}
// for ... of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}
3.数组对象:
const list = [{ name: 'lx' }, { age: 23 }]
for (const val of list) {
console.log(val) // 输出{ name: 'lx' }, { age: 23 }
for (const key in val) {
console.log(val[key]) // 输出 lx,23
}
}
6.遍历数组的方法
1. for in
var arr = ['a', 'b', 'c', 'd'];
for (var key in arr) {
console.log(arr[key] + '---' + key);//key是遍历后的索引
}结果：
2. map()
var arr = [1,3,4,7,9,5]
arr.map ((res,index) => {
console.log(res,index)// res是数组中的每个元素，index是该元素在数组中的索引
})
3. forEach()
forEach()遍历方法写法跟map()方法一样，但是还是有很多区别的
- map 对数组的每一项进行加工，加工完成之后返回一个新的数组, 而forEach 只是简单的进行循环， 没有返回值，不可对他加工
- 性能方面map 比 forEach 执行时间短
- 创建一个新的数组时建议使用map，不需要制作一个新的数组，而是要对数据做一些事情时，就使用forEach。
var arr = [1,3,4,7,9,5]
arr.forEach ((res,index) => {
console.log(res,index)// res是数组中的每个元素，index是该元素在数组中的索引
})
4. for of （ES6）
var arr = ['a', 'b', 'c', 'd'];
for (let res of arr) {
console.log(res);//输出a b c d
}5.each（jQuery下的each方法有两种）
一种为$(' ').each(),是搭配jq选择器遍历jQuery对象获取页面元素的方法。
一种为$.each()循环方法，用于循环遍历数组、对象。
特点：这个方法需要引入jq包，each与forEach的item和index放置位置相反。
let person = {
name1:"a",
age:"1",
hobbies:{study:"code",play:"games"}
}
let arr = ['aaa','bbb','ccc']
//遍历对象
console.log("遍历对象结果：")
$.each(person,function(index,item){
if(item instanceof Object){
$.each(item,function(index,item){
console.log(index+'.'+item)
})
}else{
console.log(index+'.'+item)
}
})
//遍历数组
console.log("遍历数组结果：")
$.each(arr,function(index,item){
console.log(index+'.'+item)
})6.Array filter()
特点：不会改变原始数组，返回过滤的元素（新数组）
var arr = [73,84,56,22,100]
var newArr = arr.filter(item => item>80)7.find
find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined
var stu = [
{name: '张三',gender: '男',age: 20},
{name: '王小毛',gender: '男',age: 20},
{name: '李四',gender: '男',age: 20}
]
const result = stu.find((element) => (element.name == '李四'));7、babel-polyfill是什么？
有些项目在低版本浏览器上访问界面会白屏，是因为语法不兼容的问题，因为我们需要在项目编译时进行语法转换。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而可以在现有环境执行，所以我们可以用ES6编写，而不用考虑环境支持的问题；
有些浏览器版本的发布早于ES6的定稿和发布，因此如果在编程中使用了ES6的新特性，而浏览器没有更新版本，或者新版本中没有对ES6的特性进行兼容，那么浏览器就会无法识别ES6代码，例如IE9根本看不懂代码写的let和const是什么东西？只能选择报错，这就是浏览器对ES6的兼容性问题；
Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。举个栗子，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。
npm install babel-polyfill -s 因为是一个 polyfill （它需要在你的源代码之前运行），我们需要让它成为一个 dependency（上线时的依赖），而不是一个 devDependency（开发时的依赖）
在 Node / Browserify / Webpack 中使用
你需要在你的应用入口顶部通过 require 将 polyfill 引入进来。确保它在任何其他代码/依赖声明之前被调用！
require("babel-polyfill"); 如果你在你的应用入口使用 ES6 的 import 语法，你需要在入口顶部通过 import 将 polyfill 引入，以确保它能够最先加载：import 'babel-polyfill';在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：
module.exports = { entry: ["babel-polyfill", "./app/js"] };
8、Array.from ()是什么？
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组，也是ES6的新增方法。
那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。
1、将类数组对象转换为真正数组：
let arrayLike = {
0: 'tom',
1: '65',
2: '男',
3: ['jane','john','Mary'],
'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。
这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：
let arrayLike = {
'name': 'tom',
'age': '65',
'sex': '男',
'friends': ['jane','john','Mary'],
length: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undefined, undefined, undefined, undefined ]会发现结果是长度为4，元素均为undefined的数组
由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：
1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2、该类数组对象的属性名必须为数值型或字符串型的数字
ps: 该类数组对象的属性名可以加引号，也可以不加引号
2、将Set结构的数据转换为真正的数组：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：
let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]3、将字符串转换为数组：
let str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]像这种情况，Array.from会返回一个一模一样的新数组。
9、什么是类数组？
- 是一个普通对象，不具备数组自带丰富的内建方法， 写法上跟数组一样，但不是数组，原型是Object。
- key是以数字或者字符串数字组成
- 必须有length属性
- 字符串具有类数组得特性，但一般类数组特指对象
const arrayLike = {
0: "a",
1: "b",
2: "c",
name: "test",
length: 3
};
//由于类数组对象length属性声明了对象有多少个属性,所以可以使用for遍历对象属性:
for (let i = 0; i < arrayLike.length; i++) {
console.log(i + ":" + arrayLike[i]);
} 
常见的类数组
arguments、NodeList、HTMLCollection、DOMTokenList等
类数组如何转换成数组
1、复制遍历
const arr = [];
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
for (let i = 0; i < arrayLike.length; i++) {
arr[i] = arrayLike[i];
}
console.log(arr); // [1, 2]2、Array.from
const arrayLike = {
0: 1,
1: 2,
length: 2,
};
console.log(Array.from(arrayLike)); // [ 1, 2 ]3、扩展运算符
console.log([...document.body.childNodes]); // [div, script, script...]
// arguments
function argumentsTest() {
console.log([...arguments]); // [ 1, 2, 3 ]
}
argumentsTest(1, 2, 3);如何让类数组使用上数组丰富的内建方法
在类数组对象上直接定义数组原型的方法
运用call或者apply显示绑定this的指向
例如我想通过 filter 方法过滤出类数组中元素包含 “i” 这个字符的所有元素。
const arrayLike = {
0: "i love",
1: "you",
length: 1,
};
console.log([].filter.call(arrayLike, (item) => item.includes("i"))); // [ 'i love' ]10、new Set()的基础用法(ES6)(常用于数组去重)
1.什么是set()
Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，我们一般称为集合。Set本身是一个构造函数，用来生成 Set 数据结构
2.使用情形
new Set()生成出来的数据是Set数据结构，需要自行转换成对应结构
2.1 用于数组去重
2.2 用于字符串去重
11、display和visiblity的区别
12、微信小程序的运行环境和浏览器的有什么区别
一、文件后缀不同
普通网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互
在微信小程序中同样也有相同的角色，其中 WXML 充当的就是类似 HTML 的角色
二、运行原理不同
普通网页渲染线程和脚本线程是互斥的，二者不能同时执行，需要初次渲染完毕在去执行脚本线程
小程序的逻辑层和渲染层是分开的，分别运行在不同的线程中。逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API。
这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。
三、运行环境不同
网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。
小程序只需要面对的是两大操作系统 IOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具。
四、开发规则不同
普通网页开发，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可
小程序则需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程可完成
五、标签名不同
普通网页普遍使用的是 div、p、span 等标签
在小程序中使用的标签是 view，button，text 等等，这些标签就是小程序给开发者包装好的基本能力
13、vue框架和原生的对比有什么优势?
vue优点：
1.数据的自动绑定
2.页面参数传递和页面状态管理。
3.模块化开发、无刷新保留场景参数更新
4.代码的可阅读性（模块化开发带来的）
5.基于强大的nodejs，拥有npm包管理器，可以很好滴管理包的版本
6.各子组件样式不冲突
7.视图,数据,结构分离
8.虚拟dom，能更快速地渲染页面。9.各种指令;过滤器
vue缺点：
1、vue是单页面页面，对于搜索引擎不友好，影响seo。比如两个vue路由（页面），它的路径是这样的：index.html#aaa 和 index.html#bbb，但对于搜索引擎来说，都是同一个页面，就是index.html。这样搜索引擎就无法收录你的页面。
2、开销：Vue虽然性能良好，但其所需要的时间和资源不可避免地会造成开销。
3、 复杂性：Vue在某些方面需要更多的配置，这会导致应用程序的复杂度增加。
原生JavaScript优点：
1. 与任何库或框架都兼容：原生JavaScript可以与任何库或框架相容。 2. 可定制性：使用原生JavaScript可以很自由地构建你所需的功能。 3. 处理简单的应用程序时更快：当涉及简单应用程序时，原生JavaScript的执行速度通常更快。
原生JavaScript缺点：
1. 缺乏数据绑定：原生JavaScript没有自带的数据绑定功能，需要更多的手动操作来完成。 2. 缺少组件化：使用原生JavaScript时，我们需要自己编写组件管理。 3. 需要更多的工具和库：在处理复杂问题时，与原生JavaScript相比，我们需要更多的工具和库。
14、 NaN是什么 NaN == NaN 的结果是什么?
NaN是什么？
NaN：not a number, 表示存储的数据的数据类型，不是一个数值。 如果有非数值参与计算,结果就是 NaN。
当两个变量中存储的数据都不是数值时，执行结果就是NaN。
NaN == NaN 的结果
执行结果为false
在JavaScript中的规定, NaN表示的是非数字, 但是这个非数字也是不同的；因此 NaN 不等于 NaN，两个NaN永远不可能相等
扩展学习
1.两个变量中存储的都不是数值，执行结果就是NaN
2.有NaN参与,结果就是NaN
注意：
执行运算时 , 非带"+"号的运算 ,只要有NaN参与,执行结果都是NaN
如果是带"+"号的运算 , 有一侧是NaN、字符串,就执行字符串拼接操作
如果是带"+"号的运算,都是数值,执行加法运算
15、前端==和===的区别
3个等于表示数据类型和数值都相同。
===
三个等号我们称为等同符，当等号两边的值为相同类型的时候，直接比较等号两边的值，值相同则返回true，若等号两边的值类型不同时直接返回false。
100===“100” //返回false
abc===“abc” //返回false
‘abc’===“abc” //返回true
NaN===NaN //返回false
false===false //返回true==
两个等号我们称为等值符，当等号两边的值为相同类型时比较值是否相同，类型不同时会发生类型的自动转换，转换为相同的类型后再作比较
类型转换规则：
1）如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
2）如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等
100==“100” //返回true
1==true //返回true
“1”==“01” //返回false，此处等号两边值得类型相同，不要再转换类型了！！
NaN==NaN //返回false，NaN和所有值包括自己都不相等。
16、css3新特性有哪些
css3的新特性有：1、css3选择器；2、边框特性；3、多背景图；4、颜色与透明度；5、多列布局与弹性盒模型布局；6、盒子的变形；7、过渡与动画；8、web字体；9、媒体查询；10、阴影。作为 css 的升级版本，css3提供了更加丰富且实用的规范。
1、css3选择器
- E:last-child 匹配父元素的最后一个子元素E。
- E:nth-child(n)匹配父元素的第n个子元素E。
- E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
2、边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义。
3、多背景图
CSS3允许使用多个属性（比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等）在一个元素上添加多层背景图片。该属性的应用大大改善了以往面对多层次设计需要多层布局的问题，帮助Web前端开发者在不借助Photoshop的情况下实现对页面背景的设计，简化了背景图片的维护成本 。
4、颜色与不透明度
CSS3颜色模块的引入，实现了制作Web效果时不再局限于RGB和十六进制两种模式。CSS3增加了HSL、HSLA、RGBA几种新的颜色模式。这几种颜色模式的提出，在做开发的时候不仅可以设置元素的色彩，还能根据需要轻松地设定元素不透明度。
opacity（不透明度）：
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */5、多列布局与弹性盒模型布局
CSS3多列布局属性可以不使用多个div标签就能实现多列布局。CSS3中的多列布局模块描述了如何像报纸、杂志那样，把一个简单的区块拆成多列，并通过相应属性来实现列数、列宽、各列之间的空白间距。弹性盒模型布局方便了Web前端开发者根据复杂的前端分辨率进行弹性布局，轻松地实现页面中的某一区块在水平、垂直方向对齐，是进行响应式网站开发的一大利器。
6、盒子的变形
在CSS2.1中，想让某个元素变形必须要借助JavaScript写大量的代码实现，在CSS3中加入了变形属性，该属性在2D或3D空间里操作盒子的位置和形状，来实现例如旋转、扭曲、缩放或者移位。变形属性的出现，使Web前端中的元素展示不仅仅局限在二维空间，Web前端开发者可以通过旋转、扭曲、缩放或者移位等操作实现元素在三维控件上的展示。通过变形元素，web前端中的内容展示更加形象、真实。
7、过渡与动画
CSS3的“过渡”（transition）属性通过设定某种元素在某段时间内的变化实现一些简单的动画效果，让某些效果变得更加具有流线性与平滑性。CSS3的“动画”（animation）属性能够实现更复杂的样式变化以及一些交互效果，而不需要使用任何Flash或JavaScript脚本代码。过渡与动画的出现，使CSS在Web前端开发中不再仅仅局限于简单的静态内容展示，而是通过简单的方法使页面元素动了起来，实现了元素从静到动的变化。
8、web字体
CSS3中引入了@font-face，@font-face是链接服务器字体的一种方式，这些嵌入的字体能变成浏览器的安全字体，开发人员不用再担心用户没有这些字体而导致网页在用户浏览器无法正常显示的问题。
9、媒体查询
CSS3中引入媒体查询（mediaqueries），可为不同分辨率的设备定义不同的样式。比如，在可视区域小于480像素时，可能想让原来在右侧的网站侧栏显示在主内容的下边，以往必须通过JavaScript判断用户浏览器的分辨率，然后再通过JavaScript修改CSS。CSS3中只需要通过媒体查询就可实现上述操作。
10、阴影
阴影主要分为两种：文本阴影（text-shadow）和盒子阴影（box-shadow）。文本阴影在CSS2中已经存在，但没有得到广泛的运用（CSS2.1中删除了）。CSS3延续了这个特性，并进行了新的定义，该属性提供了一种新的跨浏览器解决方案，使文本看起来更加醒目。CSS3中的盒子阴影的引入，可轻易地为任何元素添加盒子阴影。
text-shadow:
text-shadow: [<颜色><水平偏移><纵向偏移><模糊半径>] || [<水平偏移><纵向偏移><模糊半径><颜色>];box-shadow：
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;17、html5有哪些新特性
常见的html5有以下十个新特性：1、Canvas绘图；2、表单元素；3、语义化标签；4、媒体元素；5、地理定位；6、拖放API；7、Web Worker；8、Web Storage；9、Web Socket；10、SVG绘图。Canvas元素用于在网页上绘制图形。
一、Canvas元素
Canvas元素用于在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图像的方法。Canvas通过js绘制2d图形，并逐像素进行渲染，且假若在图片完成后进行修改，整个场景就会重新绘制。
二、表单元素
（1）新增的表单元素
<datalist>：元素规定输入域的选项列表，使用<input>元素的list元素与<datalist>元素的id绑定；
<keygen>：提供一种检验用户的可靠方法，标签规定用于表单的密钥对生成器字段；
<output>：用于不用类型的输出，比如计算或脚本输出。
（2）新增的表单属性
placehoder属性：简短的提示在用户输入值前会显示在输入域上，既默认框提示；
required属性：是一个boolean属性，要求填写的输入域不为空；
pattern属性：描述了一个正则表达式用于验证<input>元素的值；
max/min属性：最大最小值；
step属性：为输入域规定合法的数字间隔；
height/width属性：用于image类型的<input>标签的图像高度和宽度；
autofocus属性：是一个boolean属性，在页面加载时自动获得焦点；
multiple属性：是一个boolean属性，规定<input>元素中选择多个值。
三、语义化标签
语义化标签既是使标签有自己的含义，语义化标签的优势：（1）使界面的代码结构清晰，方便代码的阅读和团队的合作开发；（2）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页；（3）有利于搜索引擎优化（SEO）。
四、媒体元素
播放音频文件的元素<audio>————<audio controls>
（1）control属性提供播放暂停和音量控件；
（2）<audio>和<audio/>之间插入浏览器不支持的<audio>元素的提示文本；
（3）允许使用多个<source>元素用来链接不同的音频文件，浏览器使用第一个支持的音频文件；
（4）支持三种音频格式文件：mp3、wax、ogg。
播放视屏文件的元素<video>
（1）control属性提供播放暂停和音量控件，也可以使用dom操作：play()和pause()；
（2）video元素提供了width和height控制视频的尺寸。如果设置了就会在页面加载时保留，没设置就不保留，页面根据原始视频改变。
五、地理定位
HTML5使用getCurrentPosition()方法来获取用户的位置，可以基于此实现计算位置距离。
六、拖放API
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。
拖放的源对象(可能发生移动的)可以触发的事件——3个：
- dragstart：拖动开始
- drag：拖动中
- dragend：拖动结束
整个拖动过程的组成：dragstart*1 + drag*n + dragend*1。
拖放的目标对象(不会发生移动)可以触发的事件——4个：
- dragenter：拖动着进入
- dragover：拖动着悬停
- dragleave：拖动着离开
- drop：释放
整个拖动过程的组成1：dragenter*1 + dragover*n + dragleave*1；
整个拖动过程的组成2：dragenter*1 + dragover*n + drop*1。
七、Web Worker
当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。Web Worker是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时Web Worker在后台运行。
八、Web Storage
Web Storage是H5引入的一个帮助解决cookie存储本地缓存的重要功能。早些时候，本地存储使用的是cookies。但是Web存储需要更加的安全与快速，而且Web Storage中有5M容量，cookie只有4k。
九、Web Socket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就直接可以数据互相传送。浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。当你获取Web Socket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。
十、SVG绘图
SVG是指可伸缩的矢量图形，它是一种使用XML描述2D图形的语言。在SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。