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; //速度
}

f

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新特性，在未来的学习中会继续补充做进一步的理解。
本文如果存在错误的地方，欢迎指出批评~