一、写在前面
html5新增特性一直都是不明不白的，今天将总结一下html5中的十大特性。
二、总结
2.1、语义化标签 语义化标签使得页面的内容结构化，见名知义。语义化的优点:好的代码结构，有利于SEO,提升用户体验，有利于团队开发和维护，方便其他设备解析。

标签

描述

<hrader></header>

定义了文档的头部区域

<footer></footer>

定义了文档的尾部区域

<nav></nav>

定义文档的导航

<section></section>

定义文档中的节（section、区段）

<article></article>

定义页面独立的内容区域

<aside></aside>

定义页面的侧边栏内容

<detailes></detailes>

用于描述文档或文档某个部分的细节

<summary></summary>

标签包含 details 元素的标题

<dialog></dialog>

定义对话框，比如提示框

2.2、增强型表单html5拥有多个新的表单input输入类型，这些新特性提供了更好的输入控制和验证。

输入类型

描述

color

主要用于选取颜色

date

从一个日期选择器选择一个日期

datetime

选择一个日期（UTC时间）

datetime-local

选择一个日期和时间

email

包含 e-mail 地址的输入域

mouth

选择一个月份

number

数值的输入域

range

一定范围内数字值额输入域

search

用于搜索域

tel

定义输入电话号码字段

time

选择一个时间

url

url地址的输入域

week

选择周和年

HTML5 新增的表单属性

1、placeholder属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
2、required属性：是一个boolean属性。要求填写的输入域不能为空。
3、pattern属性，描述了一个正则表达式用于验证input元素的值。
4、min和max属性，设置元素的最大值和最小值。
5、step属性，为输入域规定合法的数字间隔。
6、height和width属性，用于image类型的input标签的图像高度和宽度。
7、autofocus属性，是一个boolean属性。规定在页面加载时，域自动获得焦点。
8、multiple属性，是一个boolean属性。规定input元素中可选择多个值。

2.3、视频和音频audio video source2.4、canvas--图形

1、创建一个画布，一个画布在网页中是一个矩形框，通
过 元素来绘制。默认情况下 元素没有边框和内容。
<canvas id="myCanvas"  width="200" height="100"` style="border:1px solid #000000;"></canvas>
标签通常需要指定一个id属性 (脚本中经常引用), 
width 和 height 属性定义的画布的大小，使用 
style 属性来添加边框。你可以在HTML页面中使用多个 
元素。
2、使用Javascript来绘制图像，canvas 元素本身是
没有绘图能力的。所有的绘制工作必须在 JavaScript 
内部完成。
<script>
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#FF0000";
   ctx.fillRect(0,0,150,75);
   </script>
getContext("2d") 对象是内建的 HTML5 对象，拥有
多种绘制路径、矩形、圆形、字符以及添加图像的方法。

设置 fillStyle 属性可以是CSS颜色，渐变，或图案。
fillStyle默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前
的填充方式。意思是：在画布上绘制 150x75 的矩形，
从左上角开始 (0,0)。

2.5、SVG绘图

SVG是指----可伸缩的矢量图形,且不失真

SVG 与 Canvas两者间的区别

1、SVG 是一种使用 XML描述 2D 图形的语言。
2、Canvas 通过 JavaScript 来绘制 2D 图形。
3、SVG 基于 XML，这意味着 SVG DOM 中的每个元素都
是可用的。您可以为某个元素附加 JavaScript 事件处
理器。
4、在 SVG 中，每个被绘制的图形均被视为对象。如果 
SVG 对象的属性发生变化，那么浏览器能够自动重现图
形。
5、Canvas 是逐像素进行渲染的。在 canvas 中，一旦
图形被绘制完成，它就不会继续得到浏览器的关注。如果
其位置发生变化，那么整个场景也需要重新绘制，包括任
何或许已被图形覆盖的对象。

2.6、地理位置 HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

2.7、拖放API2.8、web worker 当在html页面中执行脚本时，页面的状态是不可相应的，直到脚本已完成。
　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
2.9、Web storagelocalstorage和localstorage2.10、WebSocket

websocket是从html5开始提供的一个在单个tcp连接上进行全双工通讯的协议。在websocket api中，浏览器
和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成一个快速的通道。两者之间就直接可以数
据相互传送。浏览器通过JavaScript向服务器发出建立websocket连接请求，连接建立以后，客户端和服务器
就可以通过tcp连接直接交换数据。当你获取web socket连接以后，你可以通过send()方法来向服务器发送数
据，并通过onmessage事件来接收服务器返回的数据。