HTML5新特性

一、语义标签

定义了文档的头部区域 (效果同

)

 定义了文档的尾部区域

定义文档的导航

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

定义页面独立的内容区域

定义页面的侧边栏内容
用于描述文档或文档某个部分的细节

标签包含details元素的标题

定义对话框，比如提示框

二、增强型表单

HTML5新增了多个input输入类型，提供了更好的输入控制和验证

color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC时间）
datetime-local 选择一个日期和时间（无市区）
email 包含e-mail地址的输入域
montu 选择一个月份
number 数值的输入域
range 一定范围内数字值得输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL地址的输入域
week 选择周和年

HTML5也新增一下表单元素

HTML5新增表单属性

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

三、视频和音频

四、Canvas绘图

但绘图还是要写脚本，绘制文本、图形、图片等各种各样的效果都要靠canvas来实现

五、SVG绘图

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

六、地理位置

　HTML5 Geolocation（地理定位）用于定位用户的位置。navigator.geolocation.getCurrentPosition(
 function(pos){　　　　
console.log('用户定位数据获取成功') 　　　　
//console.log(arguments); 　　　　
console.log('定位时间：',pos.timestamp) 　　　　
console.log('经度：',pos.coords.longitude) 　　　　
console.log('纬度：',pos.coords.latitude) 　　　　
console.log('海拔：',pos.coords.altitude) 　　　　
console.log('速度：',pos.coords.speed)
}, //定位成功的回调 function(err){ 　　　　
console.log('用户定位数据获取失败') 　　　　
//console.log(arguments);
} //定位失败的回调
)

七、Web Worker

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

八、Web Storage

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储, 当用户关闭浏览器窗口后，数据会被删除。

九、WebSocket

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

十、拖放API

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。　　拖放的过程分为源对象和目标对象。源对象是指你即将拖动元素，而目标对象则是指拖动之后要放置的目标位置。