Html5 - 新特性

一. 语义化标签

标签名	描述
header	文档的头部区域
footer	定义 section 或 document 的页脚
nav	导航链接
summary	包含 details 元素的标题
mark	带有记号的文本
details	描述文档或文档某个部分的细节
datalist	选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
article	文章区域
aside	页面的侧边栏
dialog	定义对话框，比如提示框
section	定义文档中的节（section、区段）

二. 新表单类型和属性

• 新的input类型

input新的类型（type）	描述
color	选取颜色
time	选择一个时间
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC 时间）
datetime-local	选择一个日期和时间 (无时区)
month	选择一个月份
week	选择周和年
email	e-mail 地址
number	包含数值的输入域
range	包含一定范围内数字值的输入域
search	搜索域
tel	输入电话号码字段
url	URL 地址

• input的新属性

input新属性	描述
autocomplete	自动完成功能
autofocus	自动聚焦
form	引用form表单
formaction / formenctype / formmethod / formnovalidate / formtarget	设置form提交
height 与 width	规定用于 image 类型的 <input> 标签的图像高度和宽度
list	绑定datalist
min 与 max、step	min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range
multiple	选择多个值，适用于以下类型的 <input> 标签：email 和 file
pattern (regexp)	正则验证，适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password
placeholder	占位提示
required	提交之前不能为空

• form的新属性

input新属性	描述
autocomplete	自动完成功能
novalidate	规定在提交表单时不应该验证 form 或 input 域

• 新的表单标签

新的表单标签	描述
<datalist>	规定了 <input> 元素可能的选项列表，通过input的list属性与datalist的id绑定
<keygen>	表单的密钥对生成
<output>	用于不同类型的输出，比如计算或脚本输出

三. 音频和视频

• audio（支持三种音频格式文件: MP3, Wav, 和 Ogg）

<audio controls>
  <source src="a.ogg" type="audio/ogg">
  <source src="a.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

属性	可选值	描述
autoplay	autoplay	音频在就绪后马上播放
controls	controls	向用户显示音频控件（比如播放/暂停按钮）
loop	loop	当音频结束时重新开始播放
muted	muted	静音播放
preload	auto / metadata / none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	url	资源url

• video（支持三种视频格式：MP4、WebM、Ogg）

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

属性	可选值	描述
autoplay	autoplay	视频在就绪后马上播放
controls	controls	向用户显示控件，比如播放按钮
height / width	px	视频播放器的高度和宽度
loop	loop	循环播放
muted	muted	静音播放
poster	url	视频正在下载时显示的图像，直到用户点击播放按钮
preload	auto / metadata / none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	资源url

四. 拖放（Drag 和 Drop）

五. Canvas和SVG

Canvas	SVG
位图	矢量图（缩放不失真）
通过 JavaScript 来绘制	使用 XML 描述 2D 图形
不支持事件处理程序	支持事件处理程序
改变需要整个画布重绘	修改后自动重新渲染
文字呈现功能比较简单	最适合具有大型渲染区域地应用程序(如Google地图)
非常适合图形密集性游戏（H5游戏）	不适合游戏应用程序

• 内联SVG

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 

• Canvas（需要通过JavaScript绘制画布）

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

六. webStorage（传送门）

七. 地理位置API

navigator.geolocation.getCurrentPosition(success, error, options)

function getLocation(){
  if (navigator.geolocation){
      navigator.geolocation.getCurrentPosition(showPosition);
    }else{
      alert("浏览器不支持地理定位");
    }
  }
function showPosition(position){
    // position.coords.latitude 十进制数的纬度
    // position.coords.longitude 十进制数的经度
    // position.coords.accuracy 位置精度
    // position.coords.altitude 海拔，海平面以上以米计
    // position.coords.altitudeAccuracy 位置的海拔精度
    // position.coords.speed 速度，以米/每秒计
    // position.coords.heading 方向，从正北开始以度计
    // position.timestamp 响应的日期/时间
}

八. WebSocket

• 创建websocket连接对象（url的协议使用ws）
  var ws = new WebSocket(url, [protocol] );
• websocket事件

事件处理	描述
ws.onopen	连接建立触发
ws.onmessage	接收到服务端数据时触发
ws.onerror	通信发生错误时触发
ws.onclose	连接关闭时触发

• websocket方法

方法	描述
ws.send()	发送信息
ws.close()	主动关闭连接

九. WebWorker

• 使用new Worker(url)根据外部脚本创建一个WebWorker对象。
• web worker 是运行在后台的 JavaScript，不会影响页面的性能

十. SSE（Server-Sent Events）

• Server-Sent 事件指的是网页自动获取来自服务器的更新。

十一. 应用程序缓存（Application Cache）

• 通过创建 cache manifest 文件，告知浏览器被缓存的内容（以及不缓存的内容）