HTML5新特性

总结

1. 新增语义化标签：

<header></header> <!-->头部<-->
<nav></nav>    <!-->导航<-->
<aside></aside>  <!-->侧边栏<-->
<section></section>  <!-->网页内容块<-->
<article></article> <!-->区块内的一个独立区域，自成一体的独立块<-->
<footer></footer> <!-->尾部<-->

语义化标签的好处：

• 有利于SEO(利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名)
• 方便团队的开发和维护，增加了代码的可读性，减少差异化
• 方便其他设备的解析，如屏幕阅读器，移动设备等。

2. 新增音频和视频标签

 音频,格式：wav, mp3, ogg, acc, webm
 `<audio>` 
 视频,格式： ogg，MP4，WebM
 `<video >`

3. 增强型表单：

<input type="email" /> <!-->校验邮箱<-->
<input type="number" min="3" max="10" /> <!-->校验数字,最小值3，最大值10<-->
<input type="color" /> <!-->颜色选择<-->
<input type="date"> <!-->选择日期<-->
<input type="search" placeholder="我是输入字段为空时的提示信息"> <!-->搜索框<-->
<input type="url"><!-->校验url<-->
<input type="text" required> <!-->required必填<-->
<input type="text" name="username" autocomplete><!-->autocomplete默认on, 相反off,表示是否显示填写过的历史，必须和name同时使用，否则不生效<-->

4. canvas绘图

<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
	var myCanvas = document.getElementById("myCanvas");
	var context = myCanvas.getContext("2d");
</script>

5. svg绘图

6. 地理位置

7. 拖拽API，实现

8. web Worker

前因：因为javascript是单线程。
作用：为javascript创造了多线程环境。
注意：现在主流的浏览器对web worker的兼容并不高，需要检测浏览器是否支持。

限制：

1.同源限制：分配给worker的子线程的脚本文件必须和主线程的脚本文件同源
2. DOM限制：worker线程所在的全局对象和主线程的不一样，无法获取主线程所在页面的dom对象。worker只能读取navigator对象和location对象，无法使用window，document，parent对象。
3. 通信限制：主线程和子线程无法通信，因为它们不在同一个上下环境上。
4. 脚本限制：worker不能执行alert()，confirm()，但可以使用XMLHttpRequst对象发出AJAX请求
5. 文件限制：worker线程不能读取本地文件（file：//），加载的脚本必须来源于网络。

9. web Storage

分类：localStorage、sessionStorage
前因：html4中的cookie存储大小只有4kb左右
作用：存储大小达到5Mb，用户存储在本地的数据不会与服务器发生通信
两者共同点：都在客户端保存，不参与服务通信，不同源的页面无法共享数据

区别	localStorage	sessionStorage
生命周期	永久保存，除非用户手动清除	临时保存，仅在当前会话下有效，关闭浏览器或页面会被清除
作用域不同	相同浏览器同源的不同页面，不同标签，不同窗口共用	即使同源，同浏览器，也不可在不同页面，不同标签，不同窗口共用

10. webSocket

文章来源(更详细的总结)