HTML5特性详解-优快云博客

★：重要，需要进一步学习研究

本文档参照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.&lt/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: 42

28：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 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发