一. 语义化标签
| 标签名 |
描述 |
| header |
文档的头部区域 |
| footer |
定义 section 或 document 的页脚 |
| nav |
导航链接 |
| summary |
包含 details 元素的标题 |
| mark |
带有记号的文本 |
| details |
描述文档或文档某个部分的细节 |
| datalist |
选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值 |
| article |
文章区域 |
| aside |
页面的侧边栏 |
| dialog |
定义对话框，比如提示框 |
| section |
定义文档中的节（section、区段） |
二. 新表单类型和属性
| input新的类型（type） |
描述 |
| color |
选取颜色 |
| time |
选择一个时间 |
| date |
从一个日期选择器选择一个日期 |
| datetime |
选择一个日期（UTC 时间） |
| datetime-local |
选择一个日期和时间 (无时区) |
| month |
选择一个月份 |
| week |
选择周和年 |
| email |
e-mail 地址 |
| number |
包含数值的输入域 |
| range |
包含一定范围内数字值的输入域 |
| search |
搜索域 |
| tel |
输入电话号码字段 |
| url |
URL 地址 |
| 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 |
提交之前不能为空 |
| 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 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 |
连接关闭时触发 |
| 方法 |
描述 |
| ws.send() |
发送信息 |
| ws.close() |
主动关闭连接 |
九. WebWorker
- 使用
new Worker(url)根据外部脚本创建一个WebWorker对象。
- web worker 是运行在后台的 JavaScript，不会影响页面的性能
十. SSE（Server-Sent Events）
- Server-Sent 事件指的是网页自动获取来自服务器的更新。
十一. 应用程序缓存（Application Cache）
- 通过创建 cache manifest 文件，告知浏览器被缓存的内容（以及不缓存的内容）
