HTML5新特性

1.语义化标签：

标签	描述
header	定义了文档的头部区域
nav	定义导航链接的部分
section	定义文档中的节，比如章节、页眉、页脚或文档中的其他部分
article	定义一个文章区域
aside	定义页面的侧边栏内容
footer	定义 section 或 document 的页脚
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息
figure	规定独立的流内容（图像、图表、照片、代码等等）。
figcation	定义<figure> 元素的标题

2.新增表单input输入类型：这些新特性更好地提供了输入控制和验证。

输入类型	描述
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
search	定义用于输入搜索字符串的文本字段。
tel	定义用于输入电话号码的字段。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）。

3.新增表单元素：

表单元素	描述
datalist	规定了 <input> 元素可能的选项列表。
keygen	规定用于表单的密钥对生成器字段。
output	作为计算结果输出显示(比如执行脚本的输出)。

4.新增表单属性：

表单属性	描述
autocomplete	规定 <input> 元素输入字段是否应该启用自动完成功能。
autofocus	规定当页面加载时 <input> 元素应该自动获得焦点。
form	规定 <input> 元素所属的一个或多个表单。
formaction	规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
placeholder	规定可描述输入 <input> 字段预期值的简短的提示信息。
required	规定必需在提交表单之前填写输入字段。
pattern	规定用于验证 <input> 元素的值的正则表达式。
multiple	规定允许用户输入到 <input> 元素的多个值。
min	规定 <input>元素的最小值。
max	规定 <input> 元素的最大值。
height	规定 <input>元素的高度。(只针对type="image")。
width	规定 <input> 元素的宽度。 (只针对type="image")。
step	规定 <input> 元素的合法数字间隔。

5.音频和视频：

音频：audio
定义声音，比如音乐或其他音频流。
支持Mp3,Wav,Ogg三种格式

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

视频：video
定义视频，比如电影片段或其他视频流。
支持MP4,WebM,Ogg三种格式

属性	描述
autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	设置视频播放器的高度。
loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	如果出现该属性，则音频输出为静音。
poster	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	要播放的视频的 URL。
width	设置视频播放器的宽度。

6.Canvas:

通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。但该标签只是图形容器，必须使用脚本来绘制图形。

属性	描述
height	规定画布的高度。
width	规定画布的宽度。

7.SVG 与 Canvas

SVG是指可伸缩矢量图形(Scalable Verctor Graphics),是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以SVG本质上是文本文件，体积较小，并且不管放大多少倍都不会失真。

SVG:

SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

Canvas:

Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

Canvas 和 SVG的区别

Canvas

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

8.地理定位：Geolocation用于定位用户信息

HTML5 Geolocation API 用于获得用户的地理位置。
但是鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
使用 getCurrentPosition() 方法来获得用户的位置。

function getLocation(){
  if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
    }else{
      alert("浏览器不支持地理定位");
    }
  }
function showPosition(pos){
      var lat = pos.coords.latitude;  //纬度
      var lon = pos.coords.longitude;  //经度
      var time = pos.timestamp; //定位时间
      var alti = pos.coords.altitude; //海拔
      var speed = pos.coords.speed; //速度
}

9.webStorage:

是本地存储，存储在客户端，包括localStorage和sessionStorage。

localstorage:没有时间限制的数据存储（持久化的本地存储）。
sessionstorage:针对一个 session 的数据存储。

cookie

主要用途是在保存用户信息，比如登录网站记住密码。
cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

cookie、localstorage、sessionstorage的区别

特性	cookie	localstorage	sessionstorage
生命周期	只在设置cookie过期时间之前有效	除非被清除，否则永久有效	仅在当前浏览器窗口有效，关闭浏览器或窗口失效
存放数据大小	不超过4k	一般为5MB	一般为5MB
与服务器端通信	始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递	仅在客户端保存，不参与和服务器的通信	仅在客户端保存，不参与和服务器的通信
易用性	需要自己封装，源生的cookie接口并不友好	.webStorage的API接口使用更方便，如setItem、getItem等	webStorage的API接口使用更方便，如setItem、getItem等
作用域	在所有同源窗口中共享	在所有同源窗口中共享	不在不同的浏览器窗口共享，即使是同一个页面

保存数据：
localStorage.setItem(key,value);
读取数据：
localStorage.getItem(key);
删除单个数据：
localStorage.removeItem(key);
删除所有数据：
localStorage.clear();
得到某个索引的key：
localStorage.key(index);

10.websocket

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

结语:

简单的介绍一些HTML5新特性，在未来的学习中会继续补充做进一步的理解。
本文如果存在错误的地方，欢迎指出批评~

HTML5新特性

1.语义化标签：

2.新增表单input输入类型：这些新特性更好地提供了输入控制和验证。

3.新增表单元素：

4.新增表单属性：

5.音频和视频：

6.Canvas:

7.SVG 与 Canvas

SVG是指可伸缩矢量图形(Scalable Verctor Graphics),是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以SVG本质上是文本文件，体积较小，并且不管放大多少倍都不会失真。

SVG:

Canvas:

Canvas 和 SVG的区别

Canvas

SVG

8.地理定位：Geolocation用于定位用户信息

9.webStorage:

是本地存储，存储在客户端，包括localStorage和sessionStorage。

cookie

cookie、localstorage、sessionstorage的区别

10.websocket

结语:

推荐阅读更多精彩内容