★：重要，需要进一步学习研究
本文档参照MDN的HTML5文档整理：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
1：语义化 <nav> <article> <section> <aside> <header> <footer>
html5语义化元素在非html5浏览器即不支持时，不显示它们的特定样式并且 display 为 none，需要手动设置为block。
兼容处理：
<!--[if lt IE 9]>
<script>
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("time");
</script>
<![endif]-->
<noscript>
<p>This web page requires JavaScript to be enabled.</p>
</noscript>
2：音频视频 video audio
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
<video controls width="400" height="400"
autoplay loop muted
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
var mediaElem = document.getElementById("my-media-element");
mediaElem.load();
var mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function(event) {
audioTrackAdded(event.track);
}
MP3、MP4和WebM等格式称为容器格式..它们包含组成整个歌曲或视频的不同部分-例如音频轨道、视频轨道(在视频中)，以及描述所呈现媒体的元数据。音频和视频音轨也有不同的格式，例如：
- WebM容器通常用VP8/VP 9视频打包OggVorbis音频。这主要是在Firefox和Chrome中支持的。
- MP4容器通常用H.264视频打包AAC或MP3音频。这主要在InternetExplorer和Safari中得到支持。
- 旧的Ogg容器倾向于使用OggVorbis音频和OggTheora视频。这主要是在Firefox和Chrome中支持的，但基本上已经被更高质量的WebM格式所取代。
音频播放器将倾向于直接播放音频轨道，例如MP3或OGG文件。这些不需要容器。
3：表单：
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
IE 9（更早 IE 版本）、Safari 不支持 datalist 标签，IE 不支持 keygen 、output 标签。
form新属性：autocomplete novalidate
input新属性：autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height 与 width list min 与 max multiple pattern (regexp) placeholder required step
4：拖放 ★★★★★★
HTML拖放接口为DragEvent, DataTransfer, DataTransferItem和DataTransferItemList.
这个DragEvent接口有一个构造函数和一个dataTransfer属性，它是DataTransfer对象。DataTransfer对象包括拖动事件的状态，例如正在执行的拖放类型(如copy或move)、拖动的数据(一个或多个项)以及每个项的MIME类型拖曳项目. DataTransfer对象还具有向拖动数据添加或删除项的方法。这个DragEvent和DataTransfer接口应该是向应用程序添加HTML拖放功能所需的唯一接口。然而，Firefox支持一些壁虎专用扩展到DataTransfer对象，但是这些扩展只能在Firefox上工作。
各DataTransfer对象包含items属性，它是list的DataTransferItem物品。一个DataTransferItem对象表示单个拖曳项目，每个都有一个kind财产(或string或file)和type属性，用于数据项的MIME类型。这个DataTransferItem对象还具有获取拖动项数据的方法。这个DataTransferItemList对象是DataTransferItem物品。List对象具有将拖动项添加到列表中、从列表中删除拖动项以及清除所有拖动项列表的方法。
之间的一个关键区别是DataTransfer和DataTransferItem接口是前者使用同步getData()方法访问拖动项的数据，但后者使用异步getAsString()方法。
设置元素可拖放： <img draggable="true">
拖拽事件：ondrag ondrag ondragenter ondragexit ondragleave ondragover ondragstart ondrop
setData：设置被拖数据的数据类型和值
setDragImage：设置拖动时鼠标指针图像
dropEffect：设置拖放的影响类型 copy move link
5：Canvas ★★★★★★
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script> 6：Svg ★★★★★★
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>7：webGL
WebGL通过引入一个与OpenGLES2.0非常符合的API(可在HTML 5中使用)，为Web带来3D图形。
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
uniform vec2 uScalingFactor;
uniform vec2 uRotationVector;
void main() {
vec2 rotatedPosition = vec2(
aVertexPosition.x * uRotationVector.y +
aVertexPosition.y * uRotationVector.x,
aVertexPosition.y * uRotationVector.y -
aVertexPosition.x * uRotationVector.x
);
gl_Position = vec4(rotatedPosition * uScalingFactor, 0.0, 1.0);
}
</script>8：Geolocation
<script>
var x=document.getElementById("demo");
function getLocation(){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition);
}else{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position){
x.innerHTML="纬度: " + position.coords.latitude +
"<br>经度: " + position.coords.longitude;
}
</script>9：web存储 ★★★★★★
localStorage sessionStorage
10：应用缓存 ★★★★★★
Application Cache (已不推荐使用) Service Workers
11：web Workers ★★★★★★
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：window、docment、parent。
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>12：SSE
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
服务器端把报头 "Content-Type" 设置为 "text/event-stream"，客户端监听onopen、onmessage、onerror事件
<script>
if(typeof(EventSource)!=="undefined")
{
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
}
else
{
document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>13：onLine与offLine
window.addEventListener('load', function() {
var status = document.getElementById("status");
var log = document.getElementById("log");
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";
status.className = condition;
status.innerHTML = condition.toUpperCase();
log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});14：IndexedDB
IndexedDB是一个事务性数据库系统，类似于基于SQL的RDBMS.然而，与使用固定列表的基于SQL的RDBMS不同，IndexedDB是一个基于JavaScript的面向对象数据库.IndexedDB允许存储和检索用钥匙类支持的任何对象。结构化克隆算法可以储存。您需要指定数据库架构，打开到数据库的连接，然后在一系列的数据库中检索和更新数据。
与大多数web存储解决方案一样，IndexedDB遵循同源政策..因此，虽然可以访问域内存储的数据，但不能跨不同域访问数据。
15：XHR2 ★★★★★★
XMLHttpRequest.onreadystatechange
XMLHttpRequest.readyState
0 | UNSENT | 客户端已经创建。open()还没被调用。 |
1 | OPENED | open()已经被调用了。 |
2 | HEADERS_RECEIVED | send()已被调用，并且header和status可用。 |
3 | LOADING | 正在加载数据。 |
4 | DONE | 操作完成了。 |
XMLHttpRequest.response
XMLHttpRequest.responseText
XMLHttpRequest.responseType
XMLHttpRequest.responseURL
XMLHttpRequest.responseXML
XMLHttpRequest.status
- 信息答复(
100–199), - 成功回应(
200–299), - 重定向(
300–399), - 客户端错误(
400–499), - 和服务器错误(
500–599).
常用的状态码：
200：请求成功
304：使用缓存
400：语法错误，一般是参数格式不正确 403：没有权限 404：没找到请求资源 405：请求方法名错误
500：服务器错误 502：网关不正确
XMLHttpRequest.statusText
XMLHttpRequest.timeout
XMLHttpRequestEventTarget.ontimeout
XMLHttpRequest.upload
XMLHttpRequest.withCredentials
XMLHttpRequest.abort() XMLHttpRequest.getAllResponseHeaders() XMLHttpRequest.getResponseHeader() XMLHttpRequest.open() XMLHttpRequest.overrideMimeType() XMLHttpRequest.send() XMLHttpRequest.setRequestHeader()
事件：
function addListeners(xhr) {
xhr.addEventListener('loadstart', handleEvent);
xhr.addEventListener('load', handleEvent);
xhr.addEventListener('loadend', handleEvent);
xhr.addEventListener('progress', handleEvent);
xhr.addEventListener('error', handleEvent);
xhr.addEventListener('timeout', handleEvent);
xhr.addEventListener('abort', handleEvent);
}16：History ★★★★★★
back forward go
17：内容可编辑 ★★★★★★
<div contenteditable="true">
This text can be edited by the user.
</div>18：焦点管理
var focused = document.hasFocus();
19：基于Web的协议处理程序
web应用程序使用registerProtocolHandler()将自己注册到浏览器作为给定协议的潜在处理程序
navigator.registerProtocolHandler("web+burger",
"http://www.google.co.uk/?uri=%s",
"Burger handler");20：requestAnimationFrame
控制执行或重绘动画：
window.requestAnimationFrame(callback);
var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);21：全屏
退出全屏： Document.exitFullscreen() 全屏：Element.requestFullscreen()
22：触摸
function startup() {
var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
console.log("initialized.");
}23：探测设备方向
这是一个实验性技术，兼容性不好，Android不支持
window.addEventListener("deviceorientation", handleOrientation, true);24：指针锁定
//锁定鼠标指针
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock;
canvas.requestPointerLock()
//判断是否锁定
if(document.pointerLockElement === canvas ||
document.mozPointerLockElement === canvas) {
console.log('The pointer lock status is now locked');
} else {
console.log('The pointer lock status is now unlocked');
}
//解锁
document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
document.exitPointerLock();25：FileReader
function printFile(file) {
var reader = new FileReader();
reader.onload = function(evt) {
console.log(evt.target.result);
};
reader.readAsText(file);
}26：ArrayBuffer
ArrayBuffer对象用于表示通用的、固定长度的原始二进制数据缓冲区.
它是一个字节数组，在其他语言中通常被称为“字节数组”。
不能直接操作ArrayBuffer；相反，您可以创建一个类型化数组对象或者是DataView对象，它以特定格式表示缓冲区，并使用该对象读取和写入缓冲区的内容。
27：DataView
DataView视图提供了一个低级接口，用于读取和写入二进制文件中的多个数字类型。
new DataView(buffer [, byteOffset [, byteLength]])
// create an ArrayBuffer with a size in bytes
var buffer = new ArrayBuffer(16);
// Create a couple of views
var view1 = new DataView(buffer);
var view2 = new DataView(buffer,12,4); //from byte 12 for the next 4 bytes
view1.setInt8(12, 42); // put 42 in slot 12
console.log(view2.getInt8(0));
// expected output: 4228：MathML
HTML5 可以在文档中使用 MathML 元素，对应的标签是 <math>...</math> 。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>
<msup><mi>b</mi><mn>2</mn>
</msup>
<mo>=</mo>
<msup><mi>c</mi><mn>2</mn></msup>
</mrow>
</math>29：WebSocket ★★★★★★
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值：
|
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
扫一扫
26万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
