1.语义化标签：

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

3.新增表单元素：

4.新增表单属性：

5.音频和视频：

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

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

6.Canvas:

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

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的区别

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