HTML5新特性详解！

什么是HTML5?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

HTML5新特性

• 不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta
• 可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
• 可以省略全部标记的元素：html、head、body、colgroup、tbody
• 属性值可以使用双引号，也可以使用单引号

1.语义标签

<header>	定义了文档的头部区域
<footer>	定义了文档的尾部区域
<nav>	定义文档的导航
<article>	定义文章
<aside>	定义页面以外的内容

2.增强型表单

（1）新增5个表单元素

<datalist>	用户会在他们输入数据时看到域定义选项的下拉列表
<progress>	进度条，展示连接/下载进度
<meter>	刻度值，用于某些计量，例如温度、重量等
<keygen>	提供一种验证用户的可靠方法生成一个公钥和私钥
<output>	用于不同类型的输出比如尖酸或脚本输出

（2）新增的表单属性

属性	描述
placehoder	输入框默认提示文字
required	要求输入的内容是否可为空
pattern	描述一个正则表达式验证输入的值
min/max	设置元素最小/最大值
step	为输入域规定合法的数字间隔
height/wdith	用于image类型<input>标签图像高度/宽度
autofocus	规定在页面加载时，域自动获得焦点
multiple	规定<input>元素中可选择多个值

（3）HTML5中的 input type 类型

• file 用于选择文件
• color 用于选取颜色
• date 用于从一个日期选择器选择一个日期
• datetime 用于选择一个日期（UTC 时间）
• datetime-local 用于选择一个日期和时间 (无时区)
• email 用于应该包含 e-mail 地址的输入域
• month 用于选择一个月份
• number 用于应该包含数值的输入域
• range 用于应该包含一定范围内数字值的输入域
• search 用于搜索域
• tel 用于电话号码字段
• url 用于应该包含
• URL 地址的输入域
• week 用于选择周和年

3.视频和音频

(1) 音频 <audio></audio>

• src 音频文件的 URL
• autoplay 音频在就绪后马上播放
• controls 向用户显示音频控件（比如播放/暂停按钮）
• loop 每当音频结束时重新开始播放
• muted 音频输出为静音
• preload 当网页加载时，音频是否默认被加载以及如何被加载

(2) 视频 <video></video>

• src 音频文件的 URL
• autoplay 音频在就绪后马上播放
• controls 向用户显示音频控件（比如播放/暂停按钮）
• loop 每当音频结束时重新开始播放
• muted 音频输出为静音
• preload 当网页加载时，音频是否默认被加载以及如何被加载
• poster 视频正在下载时显示的图像，直到用户点击播放按钮
• width 视频播放器的宽度
• height 视频播放器的高度

4.Canvas绘图

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形 你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像

5.内联SVG绘图

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准

6.SVG与Canvas区别

SVG适用于描述XML中的2D图形的语言 Canvas随时随地绘制2D图形（使用javaScript） SVG是基于XML的，意味这可以操作DOM，渲染速度较慢 在SVG中每个形状都被当做是一个对象，如果SVG发生改变，页面就会发生重绘 Canvas是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
能够以.png或.jpg格式保存结果图像	复杂度会减慢搞渲染速度
文字呈现功能比较简单	适合大型渲染区域的应用程序
最合适图像密集的游戏	不适合游戏应用

7..地理定位

• 使用getCurrentPosition()方法来获取用户的位置

• 可以基于此实现计算位置距离

8..拖拉API

• draggable 属性为 true 时元素开启拖放

9.WebWorker

• Web Worker 是在主线程之外运行的

• 用于解决JS单线程中，持续较长的计算，而影响用户的交互

10.WebStorage

• Web Storage 是H5 引入的一个帮助解决cookie存储本地缓存的重要功能

• webstorage 中有5M容量，cookie只有4k

11.WebSocket

• WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
• 握手阶段采用HTTP协议，在服务端与客户端初次握手时，将HTTP协议升级成WebSocket协议当链接成功时就可以在双工模式下来回传递信息
• 没有同源限制，客户端可以与任意服务器通信
• 协议标识符为wx（如果加密为wxs）
• 除了协议定义外还有JS定义，只需要链接远程主机，并建立一个WebSocket实例链接到对端的URL即可