HTML5 是 HTML 的最新稳定版本。
新增的布局元素
| 标签 | 语义 | display |
|---|---|---|
<nav> |
导航 | block |
<header> |
页眉 | block |
<footer> |
页脚 | block |
<section> |
和 <div> 类似。 |
block |
<aside> |
页面内容之外的内容。 | block |
<dialog> |
窗口。设置 open 属性改变可见状态 |
block |
<article> |
文章 | block |
<details> |
细节。 | block |
<summary> |
<details> 的标题。 |
block |
<figure> |
分组。 | block |
<figcaption> |
<figure> 的标题。 |
block |
<wbr> |
在换行时从何处分割。 | inline |
<time> |
日期。 | inline |
<mark> |
记号。 | inline |
<meter> |
预定义范围内的度量。 | inline-block |
<progress> |
进度条。 | inline-block |
新增的图像元素
-
<svg /><html> <head> <title>SVG</title> </head> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="YellowGreen" stroke-width="3" fill="green" /> </svg> </body> </html><svg />用于绘制矢量图形 (Scalable Vector Graphics) 。 -
<canvas /><html> <head> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="200" height="100"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById('myCanvas') var ctx = c.getContext('2d') ctx.font = '30px Arial' ctx.strokeText('Hello World', 10, 50) </script> </body> </html><canvas />用于绘制位图。但它只是图形容器，绘制图形需要使用 JavaScript 脚本。
新增的媒体元素
-
<audio /><html> <head> <title>audio</title> </head> <body> <audio src="someaudio.wav" autoplay> Your browser does not support the audio element. </audio> <div>或者</div> <audio controls> <source src="horse.ogg" type="audio/ogg" /> <source src="horse.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> </body> </html><audio />用于播放音频，支持 MP3、OGG、WAV 等格式。 -
<video /><html> <head> <title>video</title> </head> <body> <video src="movie.webm" autoplay> Your browser does not support the video element. </video> <div>或者</div> <video controls> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video element. </video> </body> </html><video />用于播放视频，支持 MP4、OGG、WEBM 等格式。 -
<embed /><html> <head> <title>embed</title> </head> <body> <embed src="movie.swf" width="320" height="240" /> </body> </html><embed />用于嵌入外部的媒体。
新增的表单相关元素、类型
-
表单类型
标签 语义 <datalist>下拉列表 <keygen>密钥 <output>输出的一些类型 -
input 类型
类型 语义 color颜色 date日期 datetime日期时间 datetime-local日期时间（本地） email邮件 month月份 number数字 range范围 search搜索 tel电话 time时间 urlURL week周 -
input 属性
属性 语义 autocomplete自动完成 autofocus自动聚焦 list列表 multiple多选 pattern正则表达式 placeholder占位符 required必填 step步长 max/min最大值/最小值 width/heighttype="image" 的宽度/高度
新增的 API
-
localStorage 和 sessionStorage
// 存储 localStorage.setItem('key', 'value') sessionStorage.setItem('key', 'value') // 读取 localStorage.getItem('key') sessionStorage.getItem('key') // 删除 localStorage.removeItem('key') sessionStorage.removeItem('key') // 清空 localStorage.clear() sessionStorage.clear()localStorage用于存储的没有截止日期的数据。在手动删除之前，都是可用的。sessionStorage用于存储的当前会话的数据。当浏览器被关闭时数据就会被删除。localStorage和sessionStorage的存储限制比cookie要大得多（至少 5MB），并且信息不会被传输到服务器。 -
WebSocket
// 创建 const ws = new WebSocket('ws://localhost:8080') // 打开 ws.onopen = function () { console.log('open') } // 收到消息 ws.onmessage = function (ev) { console.log('message', ev.data) } // 关闭 ws.onclose = function () { console.log('close') } // 发生错误 ws.onerror = function (ev) { console.log('error', ev) }在 HTML5 之前，Web 上想要推送内容，大多采用轮询的方式。在特定的的时间间隔（如每 1 秒），通过 AJAX 向服务器发出 HTTP 请求，然后由服务器返回最新的数据。
这种方案虽然可行，但存在明显的缺点。浏览器需要不断的向服务器发出请求，服务器也要不断的处理请求。而且 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
于是在这种情况下，HTML5 定义了 WebSocket 协议。它能够更实时地进行通讯，并且能更好的节省服务器资源和带宽。
-
拖放
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>DataTransfer.setData()/.getData()/.clearData()</title> <style> div { margin: 0em; padding: 2em; } #source { border: 1px solid black; } #target { border: 1px solid black; } </style> </head> <body> <section> <div> <p id="source" draggable="true" ondragstart="handleDragStart(event)"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p> </div> <div id="target" ondrop="handleDrop(event)" ondragover="handleDragOver(event)" > Drop Zone </div> </section> <script> // 开始拖拽 function handleDragStart(ev) { console.log('dragStart') // 改变拖拽元素的样式 ev.currentTarget.style.color = 'blue' ev.currentTarget.style.border = '1px dashed blue' // 将元素的 id 作为数据传输 ev.dataTransfer.setData('text/plain', ev.target.id) } // 拖拽进入目标 function handleDragOver(ev) { console.log('dragOver') // prevent Default event ev.preventDefault() } // 在目标区域松开鼠标 function handleDrop(ev) { console.log('Drop') ev.preventDefault() // 获取拖拽元素的 id var data = ev.dataTransfer.getData('text') // 将拖拽元素加到目标元素中 ev.target.appendChild(document.getElementById(data)) // 清除拖拽运输携带的数据 ev.dataTransfer.clearData() } </script> </body> </html>拖放 API 可以使用户在网页上自由的使用鼠标拖拽元素，开发者只需给元素设置
draggable属性。在用户拖拽期间、之后将会触发对应的事件。事件名称 说明 ondrag 当拖拽元素或选中的文本时触发 ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键) ondragenter 当拖拽元素或选中的文本到一个可释放目标时触发 ondragexit 当元素变得不再是拖拽操作的选中目标时触发 ondragleave 当拖拽元素或选中的文本离开一个可释放目标时触发。 ondragover 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次） ondragstart 当用户开始拖拽一个元素或选中的文本时触发） ondrop 当元素或选中的文本在可释放目标上被释放时触发 -
获取当前位置
// 获取当前位置 navigator.geolocation.getCurrentPosition( // 成功回调 pos => { const crd = pos.coords console.log('Your current position is:') console.log('Latitude : ' + crd.latitude) console.log('Longitude: ' + crd.longitude) console.log('More or less ' + crd.accuracy + ' meters.') }, // 失败回调 error => { console.warn('ERROR(' + err.code + '): ' + err.message) }, // 选项 { enableHighAccuracy: true, // 是否要求高精度 timeout: 1000 * 60 * 5, // 超时时间 maximumAge: 0, // 最大缓存时间 } )
