HTML5 是 HTML 最新的修訂版本夹厌，2014 年 10 月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定。

HTML5 的設(shè)計(jì)目的之一是為了在移動(dòng)設(shè)備上支持多媒體掀鹅。

簡(jiǎn)介

改進(jìn)

• 新元素
• 新屬性
• 完全支持 CSS3
• Video 和 Audio
• 2D/3D 制圖
• 本地存儲(chǔ)
• Web 應(yīng)用

應(yīng)用

使用 HTML5蝉娜，可以簡(jiǎn)單地開(kāi)發(fā)應(yīng)用丙者。

• 本地?cái)?shù)據(jù)存儲(chǔ)
• 訪問(wèn)本地文件
• JavaScript 開(kāi)發(fā)
• XHTMLHttpRequest 2

圖形

使用 HTML5，可以簡(jiǎn)單地繪制圖形：

• 使用 <canvas> 元素
• 使用內(nèi)聯(lián) SVG
• 使用 CSS3 2D/CSS 3D

使用 CSS3

• 新選擇器
• 新屬性
• 動(dòng)畫
• 2D/3D 轉(zhuǎn)換
• 圓角
• 陰影效果
• 可下載的字體

新元素

為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用悬秉，HTML5 添加了很多新元素及功能澄步，比如：圖形的繪制、多媒體內(nèi)容和泌、更好的頁(yè)面結(jié)構(gòu)村缸、更好的形式處理、幾個(gè) API 拖放元素武氓、定位梯皿、存儲(chǔ)、Web Worker 等县恕。

Canvas 新元素

新多媒體元素

新表單元素

新的語(yǔ)義和結(jié)構(gòu)元素

HTML5 提供了新的元素來(lái)創(chuàng)建更好的頁(yè)面結(jié)構(gòu)：

已移除的元素

以下的 HTML 4.01 元素在 HTML5 中已經(jīng)被刪除：

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Canvas

<canvas> 元素是 HTML5 中的新元素。通過(guò)使用該元素按灶，可以在網(wǎng)頁(yè)中繪制所需的圖形症革。

標(biāo)簽定義圖形，比如圖表和其他圖像鸯旁。必須使用腳本來(lái)繪制圖形噪矛。

可以通過(guò)多種方法使用 Canvas 繪制路徑量蕊、盒、圓艇挨、字符以及添加圖像残炮。

創(chuàng)建一個(gè)畫布

一個(gè)畫布（Canvas）在網(wǎng)頁(yè)中是一個(gè)矩形框，通過(guò) <canvas> 元素來(lái)繪制缩滨。

默認(rèn)情況下 <canvas> 元素沒(méi)有邊框和內(nèi)容势就。

<canvas> 簡(jiǎn)單示例如下：

<canvas id="myCanvas" width="200" height="100"></canvas>

標(biāo)簽通常需要指定 id 屬性（腳本中經(jīng)常引用），width 和 height 屬性定義畫布的大小脉漏。

可以在 HTML 頁(yè)面中使用多個(gè) <canvas> 元素苞冯。

使用 style 屬性來(lái)添加邊框：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

使用 JavaScript 繪制圖像

canvas 元素本身是沒(méi)有繪圖能力的。所有的繪制工作必須使用腳本完成：

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

getContext("2d") 對(duì)象是內(nèi)置的 HTML5 對(duì)象侧巨，擁有多種繪制路徑舅锄、矩形、圓形司忱、字符以及添加圖像的方法皇忿。

下面的兩行代碼繪制一個(gè)紅色的矩形：

ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);

fillStyle 屬性可以是 CSS 顏色、漸變或圖案坦仍。fillStyle 默認(rèn)設(shè)置是 #000000（黑色）鳍烁。

fillRect(x, y ,width, height) 方法定義了矩形當(dāng)前的填充方式。

坐標(biāo)

Canvas 是一個(gè)二維網(wǎng)格繁扎。

Canvas 的左上角坐標(biāo)為 (0, 0)老翘。

上面的 fillRect() 方法有參數(shù) (0, 0, 150, 75)。意思是：在畫布上繪制 150×75 的矩形锻离，從左上角開(kāi)始。

如下圖所示墓怀，畫布的 X 和 Y 坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位汽纠。

Canvas 坐標(biāo)示例

路徑

在 Canvas 上畫線，下面將使用以下兩種方法：

• moveTo(x, y) 定義線條起始坐標(biāo)傀履；
• lineTo(x, y) 定義線條結(jié)束坐標(biāo)虱朵。

繪制線條必須使用到 “ink” 的方法，像 stroke()钓账。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Canvas 畫線

在 Canvas 中繪制圓形碴犬，下面將使用以下方法：

• arc(x, y, r, start, stop)

實(shí)際上在繪制圓形時(shí)使用了 “ink” 的方法，比如 stroke() 或者 fill()梆暮。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Canvas 畫圓

文本

使用 Canvas 繪制文本服协，重要的屬性和方法如下：

• font：定義字體；
• fillText(text, x, y)：在 Canvas 上繪制實(shí)心的文本啦粹；
• strokeText(text, x, y)：在 Canvas 上繪制空心的文本偿荷。

使用 fillText()：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Canvas 繪制實(shí)心文本

使用 strokeText()：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Canvas 繪制空心文本

漸變

漸變可以填充在矩形、圓形、線條盯仪、文本等等绝骚，各種形狀可以自己定義不同的顏色。

以下有兩種不同的方式來(lái)設(shè)置 Canvas 漸變：

• createLinearGradient(x, y, x1, y1)：創(chuàng)建線條漸變寺庄；
• createRadialGradient(x, y, r, x1, y1, r1)：創(chuàng)建一個(gè)徑向／圓漸變艾蓝。

當(dāng)使用漸變對(duì)象時(shí)，必須使用兩種或兩種以上的停止顏色斗塘。

addColorStop() 方法指定顏色停止赢织，參數(shù)使用坐標(biāo)來(lái)描述，可以是 0 至 1逛拱。

使用漸變敌厘，設(shè)置 fillStyle 或 strokeStyle 的值為漸變，然后繪制形狀朽合，如矩形俱两、文本或一條線。

使用 createLinearGradient()：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 創(chuàng)建漸變
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Canvas 線性漸變

使用 createRadialGradient()：

// 創(chuàng)建漸變
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// 填充漸變
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Canvas 徑向漸變

圖像

把一幅圖像放置到畫布上曹步，使用 drawImage(image, x, y) 方法宪彩。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

Canvas 圖像

內(nèi)聯(lián) SVG

SVG 表示可縮放矢量圖形，是基于可擴(kuò)展標(biāo)記語(yǔ)言（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）讲婚，用于描述二維矢量圖形的一種圖形格式尿孔。

HTML5 支持內(nèi)聯(lián) SVG。

什么是 SVG

• SVG 指可伸縮矢量圖形（Scalable Vector Graphics）筹麸；
• SVG 用于定義用于網(wǎng)絡(luò)的基于矢量的圖形活合；
• SVG 使用 XML 格式定義圖形；
• SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有損失物赶；
• SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)白指；
• SVG 與 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體。

SVG 優(yōu)勢(shì)

與其他圖像格式（比如 JPEG 和 GIF）相比酵紫，使用 SVG 的優(yōu)勢(shì)在于：

• SVG 圖像可通過(guò)文本編輯器來(lái)創(chuàng)建和修改告嘲；
• SVG 圖像可被搜索、索引奖地、腳本化或壓縮橄唬；
• SVG 是可伸縮的；
• SVG 圖像可在任何的分辨率下被高質(zhì)量地打硬未酢仰楚；
• SVG 可在圖像質(zhì)量不下降的情況下被放大。

把 SVG 直接嵌入 HTML 頁(yè)面

在 HTML5 中，能夠?qū)?SVG 元素直接嵌入 HTML 頁(yè)面中：

<svg xmlns="https://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;"></polygon>
</svg>

SVG 與 Canvas 的區(qū)別

SVG 是一種使用 XML 描述 2D 圖形的語(yǔ)言缸血。

Canvas 通過(guò) JavaScript 來(lái)繪制 2D 圖形蜜氨。

SVG 基于 XML，這意味著 SVG DOM 中的每個(gè)元素都是可用的捎泻§祝可以為某個(gè)元素附加 JavaScript 事件處理器。

在 SVG 中笆豁，每個(gè)被繪制的圖形均被視為對(duì)象郎汪。如果 SVG 對(duì)象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形闯狱。

Canvas 是逐像素進(jìn)行渲染的煞赢。在 Canvas 中，一旦圖形被繪制完成哄孤，它就不會(huì)繼續(xù)得到瀏覽器的關(guān)注照筑。如果其位置發(fā)生變化，那么整個(gè)場(chǎng)景也需要重新繪制瘦陈，包括任何或許已被圖形覆蓋的對(duì)象凝危。

MathML

MathML 指的是數(shù)學(xué)標(biāo)記語(yǔ)言晨逝，是一種基于 XML 的標(biāo)準(zhǔn)蛾默，用來(lái)在互聯(lián)網(wǎng)上書寫數(shù)學(xué)符號(hào)和公式的標(biāo)記語(yǔ)言。

MathML 與 HTML 相似度很高捉貌，但是比較繁瑣支鸡。它繼承了角括號(hào)和雙標(biāo)簽（<標(biāo)簽> 內(nèi)容 </標(biāo)簽>）的用法。

HTML5 可以在文檔中使用 MathML 元素趁窃，對(duì)應(yīng)的標(biāo)簽是 <math>…</math>牧挣。

以下是一個(gè)簡(jiǎn)單的 MathML 示例：

<math xmlns="https://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>

示例 1

以下示例添加了一些運(yùn)算符：

<math xmlns="https://www.w3.org/1998/Math/MathML">
    <mrow>
        <mrow>
            <msup>
                <mi>x</mi>
                <mn>2</mn>
            </msup>

            <mo>+</mo>

            <mrow>
                <mn>4</mn>
                <mo>?</mo>
                <mi>x</mi>
            </mrow>

            <mo>+</mo>
            <mn>4</mn>
        </mrow>

        <mo>=</mo>
        <mn>0</mn>
    </mrow>
</math>

示例 2

以下示例是一個(gè) 2×2 矩陣：

<math xmlns="https://www.w3.org/1998/Math/MathML">
    <mrow>
        <mi>A</mi>
        <mo>=</mo>

        <mfenced open="[" close="]">

            <mtable>
                <mtr>
                    <mtd>
                        <mi>x</mi>
                    </mtd>
                    <mtd>
                        <mi>y</mi>
                    </mtd>
                </mtr>

                <mtr>
                    <mtd>
                        <mi>z</mi>
                    </mtd>
                    <mtd>
                        <mi>w</mi>
                    </mtd>
                </mtr>
            </mtable>

        </mfenced>
    </mrow>
</math>

示例 3

由于數(shù)學(xué)符號(hào)和公式的結(jié)構(gòu)復(fù)雜且符號(hào)與符號(hào)之間存在多種邏輯關(guān)系，MathML 的格式十分繁瑣醒陆。因此浸踩，大多數(shù)人都不會(huì)去手寫 MathML，而是利用其它的工具來(lái)編寫统求，其中包括 TeX 到 MathML 的轉(zhuǎn)換器。

而且 MathML 的瀏覽器支持也不好据块。在現(xiàn)有的主流瀏覽器中码邻，

• 只有基于 Gecko 的瀏覽器（以 Firefox 為代表）提供最完備的原生支持；
• 基于 WebKit 的瀏覽器（以 Safari 為代表）僅包含有限的支持另假；
• 基于 Blink（以 Chrome 為代表）像屋、Trident（以 Internet Explorer 為代表）和 EdgeHTML（以 Edge 為代表）的瀏覽器則不提供支持。

拖放

拖放的目的是將某個(gè)對(duì)象放置到想要的位置边篮。

拖放（Drag 和 Drop）是 HTML5 標(biāo)準(zhǔn)的組成部分己莺。

下面的例子是一個(gè)簡(jiǎn)單的拖放示例：

<!DOCTYPE HTML>
<html>

<head>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>

</html>

它看上去也許有些復(fù)雜奏甫，不過(guò)下面會(huì)分別研究拖放事件的不同部分。

設(shè)置元素為可拖放

首先凌受，為了使元素可拖動(dòng)阵子，把 draggable 屬性設(shè)置為 true：

<img draggable="true">

拖動(dòng)什么

然后，規(guī)定當(dāng)元素被拖動(dòng)時(shí)會(huì)發(fā)生什么胜蛉。

在上面的例子中挠进，ondragstart 屬性調(diào)用了一個(gè)函數(shù) drag(event)，它規(guī)定了被拖動(dòng)的數(shù)據(jù)誊册。

dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值：

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

在這個(gè)例子中领突，數(shù)據(jù)類型是 Text，值是可拖動(dòng)元素的 id——drag1案怯。

放到何處

ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)君旦。

默認(rèn)地，無(wú)法將數(shù)據(jù)／元素放置到其他元素中嘲碱。如果需要設(shè)置允許放置金砍，必須阻止對(duì)元素的默認(rèn)處理方式。

這要通過(guò)調(diào)用 ondragover 事件的 event.preventDefault() 方法：

function allowDrop(ev) {
    ev.preventDefault();
}

進(jìn)行放置

當(dāng)放置被拖數(shù)據(jù)時(shí)悍汛，會(huì)發(fā)生 drop 事件捞魁。

在上面的例子中，ondrop 屬性調(diào)用了一個(gè)函數(shù) drop(event)：

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

• 調(diào)用 preventDefault() 來(lái)避免瀏覽器對(duì)數(shù)據(jù)的默認(rèn)處理（drop 事件的默認(rèn)行為是以鏈接形式打開(kāi)）离咐；
• 通過(guò) dataTransfer.getData("Text") 方法獲得被拖的數(shù)據(jù)谱俭。該方法將返回在 setData() 方法中設(shè)置為相同類型的任何數(shù)據(jù)；
• 被拖數(shù)據(jù)是被拖元素的 id——drag1宵蛀；
• 把被拖元素追加到放置元素（目標(biāo)元素）中昆著。

地理定位

Geolocation（地理定位）用于定位用戶的位置。

Geolocation 通過(guò)請(qǐng)求一個(gè)位置信息术陶，用戶同意后凑懂，瀏覽器會(huì)返回一個(gè)包含經(jīng)度和維度的位置信息。

使用地理定位

使用 getCurrentPosition() 方法來(lái)獲得用戶的位置梧宫。

下例是一個(gè)簡(jiǎn)單的地理定位示例接谨，可返回用戶位置的經(jīng)度和緯度：

<script>
    var x = document.getElementById("demo");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            x.innerHTML = "該瀏覽器不支持獲取地理位置。";
        }
    }

    function showPosition(position) {
        x.innerHTML = "Latitude:" + position.coords.latitude +
            "<br>Longitude:" + position.coords.longitude;
    }
</script>

• 檢測(cè)是否支持地理定位塘匣；
• 如果支持脓豪，則運(yùn)行 getCurrentPosition() 方法。如果不支持忌卤，則向用戶顯示一段消息扫夜；
• 如果 getCurrentPosition() 運(yùn)行成功，則向參數(shù) showPosition 中規(guī)定的函數(shù)返回一個(gè) coordinates 對(duì)象；
• showPosition() 函數(shù)獲得并顯示經(jīng)度和緯度笤闯。

上面的例子是一個(gè)非扯槔基礎(chǔ)的地理定位腳本，不含錯(cuò)誤處理颗味。

Geolocation 的位置信息來(lái)源可以包括 GPS超陆、IP 地址、RFID脱衙、WiFi 和藍(lán)牙的 MAC 地址侥猬、以及 GSM/CDMS 的 ID 等等。

處理錯(cuò)誤和拒絕

getCurrentPosition() 方法的第二個(gè)參數(shù)用于處理錯(cuò)誤捐韩。它規(guī)定當(dāng)獲取用戶位置失敗時(shí)運(yùn)行的函數(shù)：

function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "用戶拒絕對(duì)獲取地理位置的請(qǐng)求退唠。";
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "位置信息是不可用的。";
            break;
        case error.TIMEOUT:
            x.innerHTML = "請(qǐng)求用戶地理位置超時(shí)荤胁。";
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "未知錯(cuò)誤瞧预。";
            break;
    }
}

錯(cuò)誤代碼：

• Permission denied：用戶不允許地理定位
• Position unavailable：無(wú)法獲取當(dāng)前位置
• Timeout：操作超時(shí)

在地圖中顯示結(jié)果

如需在地圖中顯示結(jié)果，需要訪問(wèn)可使用經(jīng)緯度的地圖服務(wù)仅政，比如 Google 地圖或百度地圖：

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" +
        latlon + "&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";
}

給定位置的信息

本頁(yè)演示的是如何在地圖上顯示用戶的位置垢油。不過(guò)，地理定位對(duì)于給定位置的信息同樣很有用處圆丹。

例子：

• 更新本地信息
• 顯示用戶周圍的興趣點(diǎn)
• 交互式車載導(dǎo)航系統(tǒng)（GPS）

getCurrentPosition() 方法－返回?cái)?shù)據(jù)

若成功滩愁，則 getCurrentPosition() 方法返回對(duì)象。始終會(huì)返回 latitude辫封、longitude 以及 accuracy 屬性硝枉。如果可用，則會(huì)返回其他下面的屬性倦微。

Geolocation 對(duì)象－其他有趣的方法

• watchPosition() 返回用戶的當(dāng)前位置责球，并繼續(xù)返回用戶移動(dòng)時(shí)的更新位置（就像汽車上的 GPS）。
• clearWatch() 停止 watchPosition() 方法拓劝。

下面的例子展示 watchPosition() 方法雏逾。需要一臺(tái)精確的 GPS 設(shè)備來(lái)測(cè)試該例（比如智能手機(jī)）：

<script>
    var x = document.getElementById("demo");

    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.watchPosition(showPosition);
        } else {
            x.innerHTML = "該瀏覽器不支持獲取地理位置。";
        }
    }

    function showPosition(position) {
        x.innerHTML = "緯度：" + position.coords.latitude +
            "<br> 經(jīng)度：" + position.coords.longitude;
    }
</script>

視頻

Video 如何工作

如需在 HTML5 中顯示視頻郑临，所有需要的是：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg"> 該瀏覽器不支持 Video 標(biāo)簽校套。
</video>

<video> 元素提供了播放、暫停和音量控件來(lái)控制視頻牧抵。

同時(shí) <video> 元素也提供了 width 和 height 屬性控制視頻的尺寸。如果設(shè)置了高度和寬度，所需的視頻空間會(huì)在頁(yè)面加載時(shí)保留犀变。如果沒(méi)有設(shè)置這些屬性妹孙，瀏覽器不知道大小的視頻，瀏覽器就不能在加載時(shí)保留特定的空間获枝，頁(yè)面就會(huì)根據(jù)原始視頻的大小而改變蠢正。

與標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個(gè) <source> 元素省店。<source> 元素可以鏈接不同的視頻文件嚣崭，瀏覽器將使用第一個(gè)可識(shí)別的格式。

視頻格式

當(dāng)前懦傍，<video> 元素支持三種視頻格式：MP4雹舀、WebM 和 Ogg。

使用 DOM 進(jìn)行控制

<video> 元素同樣擁有方法粗俱、屬性和事件说榆。

<video> 元素的方法、屬性和事件可以使用 JavaScript 進(jìn)行控制寸认。

其中的方法有用于播放签财、暫停以及加載等；其中的屬性（比如時(shí)長(zhǎng)偏塞、音量等）可以被讀取或設(shè)置唱蒸；其中的 DOM 事件能夠通知，比如：視頻開(kāi)始播放灸叼、已暫停神汹，已停止，等等怜姿。

下例中通過(guò)簡(jiǎn)單的方法演示了如何使用 <video> 元素慎冤，讀取并設(shè)置屬性，以及如何調(diào)用方法沧卢。

<div style="text-align:center">
    <button onclick="playPause()">播放／暫停</button>
    <button onclick="makeBig()">放大</button>
    <button onclick="makeSmall()">縮小</button>
    <button onclick="makeNormal()">普通</button>
    <br>
    <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg"> 該瀏覽器不支持 HTML5 video 標(biāo)簽蚁堤。
    </video>
</div>

<script>
    var myVideo = document.getElementById("video1");

    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    function makeBig() {
        myVideo.width = 560;
    }

    function makeSmall() {
        myVideo.width = 320;
    }

    function makeNormal() {
        myVideo.width = 420;
    }
</script>

Video 標(biāo)簽

音頻

Audio 如何工作

如需在 HTML5 中播放音頻但狭，需要使用以下代碼：

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg"> 該瀏覽器不支持 audio 元素披诗。
</audio>

control 屬性供添加播放、暫停和音量控件立磁。

在 <audio> 標(biāo)簽內(nèi)需要插入瀏覽器不支持該元素的提示文本呈队。

<audio> 元素允許使用多個(gè) <source> 元素。<source> 元素可以鏈接不同的音頻文件唱歧，瀏覽器將使用第一個(gè)支持的音頻文件宪摧。

音頻格式

目前粒竖，<audio> 元素支持三種音頻格式文件：MP3、Wav 和 Ogg几于。

Audio 標(biāo)簽

輸入類型

HTML5 擁有多個(gè)新的表單輸入類型沿彭。這些新特性提供了更好的輸入控制和驗(yàn)證朽砰。

color

color 類型用在 input 字段主要用于選取顏色，如下所示：

<form action="demo-form.php">
    選擇喜歡的顏色：
    <input type="color" name="favcolor">
    <br/>
    <input type="submit">
</form>

date

date 類型允許從一個(gè)日期選擇器選擇一個(gè)日期喉刘。

<form action="demo-form.php">
    生日：
    <input type="date" name="bday">
    <input type="submit">
</form>

至截稿時(shí)瞧柔，Safari 尚未提供支持。

datetime-local

datetime-local 類型允許選擇一個(gè)日期和時(shí)間（無(wú)時(shí)區(qū)）睦裳。

<form action="demo-form.php">
    生日 (日期和時(shí)間)：
    <input type="datetime-local" name="bdaytime">
    <input type="submit">
</form>

至截稿時(shí)造锅，F(xiàn)irefox 和 Safari 尚未提供支持。

email

email 類型用于應(yīng)該包含電子郵件地址的輸入域推沸。

<form action="demo-form.php">
    E-mail:
    <input type="email" name="usremail">
    <input type="submit">
</form>

month

month 類型允許選擇一個(gè)月份备绽。

<form action="demo-form.php">
    生日（月和年）：
    <input type="month" name="bdaymonth">
    <input type="submit">
</form>

至截稿時(shí)，F(xiàn)irefox 和 Safari 尚未提供支持鬓催。

number

number 類型用于應(yīng)該包含數(shù)值的輸入域肺素。

還可以設(shè)定對(duì)所接受的數(shù)字的限定：

<form action="demo-form.php">
    數(shù)量（1 到 5 之間）：
    <input type="number" name="quantity" min="1" max="5">
    <input type="submit">
</form>

使用下面的屬性來(lái)規(guī)定對(duì)數(shù)字類型的限定：

• max：規(guī)定允許的最大值；
• min：規(guī)定允許的最小值宇驾；
• step：規(guī)定合法的數(shù)字間隔倍靡；
• value：規(guī)定默認(rèn)值。

range

range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域课舍。

range 類型顯示為滑動(dòng)條塌西。

<form action="demo-form.php" method="get">
    Points:
    <input type="range" name="points" min="1" max="10">
    <input type="submit">
</form>

使用下面的屬性來(lái)規(guī)定對(duì)數(shù)字類型的限定：

• max：規(guī)定允許的最大值；
• min：規(guī)定允許的最小值筝尾；
• step：規(guī)定合法的數(shù)字間隔捡需；
• value：規(guī)定默認(rèn)值。

search

search 類型用于搜索域筹淫，比如站點(diǎn)搜索或 Google 搜索站辉。

<form action="demo-form.php">
    使用 Google 搜索：
    <input type="search" name="googlesearch">
    <br/>
    <input type="submit">
</form>

tel

tel 類型用于輸入和編輯電話號(hào)碼。

<form action="demo-form.php">
    電話號(hào)碼：
    <input type="tel" name="usrtel">
    <br/>
    <input type="submit">
</form>

time

time 類型允許選擇一個(gè)時(shí)間损姜。

<form action="demo-form.php">
    選擇時(shí)間：
    <input type="time" name="usr_time">
    <input type="submit">
</form>

至截稿時(shí)饰剥，Safari 尚未提供支持。

url

url 類型用于應(yīng)該包含 URL 地址的輸入域摧阅。

在提交表單時(shí)汰蓉，會(huì)自動(dòng)驗(yàn)證 url 域的值。

<form action="demo-form.php">
    添加主頁(yè)：
    <input type="url" name="homepage">
    <br/>
    <input type="submit">
</form>

week

week 類型允許選擇周和年棒卷。

<form action="demo-form.php">
    選擇周：
    <input type="week" name="year_week">
    <input type="submit">
</form>

至截稿時(shí)顾孽，F(xiàn)irefox 和 Safari 尚未提供支持祝钢。

表單元素

HTML5 增加了如下新的表單元素：

• <datalist>
• <keygen>
• <output>

datalist

<datalist> 元素規(guī)定輸入域的選項(xiàng)列表。

<datalist> 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能若厚。當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)太颤，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)：

使用 <input> 元素的列表屬性與 <datalist> 元素綁定。

<form action="demo-form.php" method="get">
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Edge"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>
    <input type="submit">
</form>

至截稿時(shí)盹沈，Safari 尚未提供支持。

keygen

<keygen> 元素的作用是提供一種驗(yàn)證用戶的可靠方法吃谣。

<keygen> 標(biāo)簽規(guī)定用于表單的密鑰對(duì)生成器字段乞封。

當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵岗憋，一個(gè)是私鑰肃晚，一個(gè)公鑰。

私鑰（private key）存儲(chǔ)于客戶端仔戈，公鑰（public key）則被發(fā)送到服務(wù)器关串。公鑰可用于之后驗(yàn)證用戶的客戶端證書（client certificate）。

<form action="demo-form.php" method="get">
    用戶名：
    <input type="text" name="usr_name"> 加密：
    <keygen name="security">
    <input type="submit">
</form>

該特性已經(jīng)從 Web 標(biāo)準(zhǔn)中刪除监徘，請(qǐng)避免使用晋修。

Edge 不提供支持。Chrome 49 中已棄用凰盔。

output

<output> 元素用于不同類型的輸出墓卦，比如計(jì)算或腳本輸出：

<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>

HTML5 新表單元素

表單屬性

HTML5 的 <form> 和 <input> 標(biāo)簽增加了幾個(gè)新屬性。

form/input · autocomplete

autocomplete 屬性規(guī)定 form 或 input 域應(yīng)該擁有自動(dòng)完成功能尿庐。

當(dāng)用戶在自動(dòng)完成域中開(kāi)始輸入時(shí)忠怖，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)。

autocomplete 屬性有可能在 form 元素中是開(kāi)啟的抄瑟，而在 input 元素中是關(guān)閉的凡泣。

autocomplete 適用于 <form> 標(biāo)簽，以及以下類型的 <input> 標(biāo)簽：text锐借、search问麸、url、telephone钞翔、email严卖、password、datepickers布轿、range 以及 color哮笆。

<form action="demo-form.php" autocomplete="on">
    First name:
    <input type="text" name="fname" value="你好">
    <br/> Last name:
    <input type="text" name="lname">
    <br/> E-mail:
    <input type="email" name="email" autocomplete="off" placehder="nihao">
    <br/>
    <input type="submit">
</form>

form · novalidate

novalidate 是一個(gè)布爾屬性来颤。

novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。

<form action="demo-form.php" novalidate>
    E-mail:
    <input type="email" name="user_email">
    <input type="submit">
</form>

input · autofocus

autofocus 是一個(gè)布爾屬性稠肘。

autofocus 屬性規(guī)定在頁(yè)面加載時(shí)福铅，域自動(dòng)地獲得焦點(diǎn)。

<form action="demo-form.php">
    First name:
    <input type="text" name="fname" autofocus>
    <br/> Last name:
    <input type="text" name="lname">
    <br/>
    <input type="submit">
</form>

input · form

form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單项阴。

如需引用一個(gè)以上的表單滑黔，使用空格分隔的列表。

<form action="demo-form.php" id="form1">
    First name:
    <input type="text" name="fname">
    <br/>
    <input type="submit" value="提交">
</form>

input · formaction

formaction 屬性用于描述表單提交的 URL 地址环揽。

formaction 屬性會(huì)覆蓋 <form> 元素中的 action 屬性略荡。

formaction 屬性用于 input 類型中的 submit 和 image。

<form action="demo-form.php">
    First name:
    <input type="text" name="fname">
    <br/> Last name:
    <input type="text" name="lname">
    <br/>
    <input type="submit" value="提交">
    <br/>
    <input type="submit" formaction="demo-admin.php" value="以管理員提交">
</form>

input · formenctype

formenctype 屬性描述了表單提交到服務(wù)器的數(shù)據(jù)編碼（只對(duì) form 表單中 method="post" 表單）歉胶。

formenctype 屬性覆蓋 form 元素的 enctype 屬性汛兜。

該屬性與 submit 和 image 類型配合使用。

<form action="demo_post_enctype.php" method="post">
    First name:
    <input type="text" name="fname">
    <br/>
    <input type="submit" value="提交">
    <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

input · formmethod

formmethod 屬性定義了表單提交的方式通今。

formmethod 屬性覆蓋了 <form> 元素的的 method 屬性粥谬。

該屬性可以與 submit 和 image 類型配合使用。

<form action="demo-form.php" method="get">
    First name:
    <input type="text" name="fname">
    <br/> Last name:
    <input type="text" name="lname">
    <br/>
    <input type="submit" value="提交">
    <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

input · formnovalidate

formnovalidate 屬性是一個(gè)布爾屬性辫塌。

formnovalidate 屬性描述了 <input> 元素在表單提交時(shí)無(wú)需被驗(yàn)證漏策。

formnovalidate 屬性會(huì)覆蓋 <form> 元素的 novalidate 屬性。

formnovalidate 屬性與 submit 類型一起使用璃氢。

<form action="demo-form.php">
    E-mail:
    <input type="email" name="userid">
    <br/>
    <input type="submit" value="提交">
    <br/>
    <input type="submit" formnovalidate="formnovalidate" value="不驗(yàn)證提交">
</form>

input · formtarget

formtarget 屬性指定一個(gè)名稱或一個(gè)關(guān)鍵字來(lái)指明表單提交數(shù)據(jù)接收后的展示哟玷。

formtarget 屬性覆蓋 <form> 元素的 target 屬性。

formtarget 屬性與 submit 和 image 類型配合使用

<form action="demo-form.php">
    First name:
    <input type="text" name="fname">
    <br/> Last name:
    <input type="text" name="lname">
    <br/>
    <input type="submit" value="正常提交">
    <input type="submit" formtarget="_blank" value="提交到一個(gè)新的頁(yè)面上">
</form>

input · height 和 width

height 和 width 屬性規(guī)定用于 image 類型的 <input> 標(biāo)簽的圖像高度和寬度一也。

<form action="demo-form.php">
    First name:
    <input type="text" name="fname">
    <br/> Last name:
    <input type="text" name="lname">
    <br/>
    <input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>

input · list

list 屬性規(guī)定輸入域的 datalist巢寡。datalist 是輸入域的選項(xiàng)列表。

<form action="demo-form.php" method="get">
    <input list="browsers" name="browser">
    <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Edge"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
    </datalist>
    <input type="submit">
</form>

至截稿時(shí)椰苟，Safari 尚未提供支持抑月。

input · min 和 max

min、max 和 step 屬性用于為包含數(shù)字或日期的 input 類型規(guī)定限定（約束）舆蝴。

適用于以下 input 類型：number谦絮、range、date洁仗、datetime-local层皱、month、time 和 week赠潦。

<form action="demo-form.php">
    輸入 1980-01-01 之前的日期：
    <input type="date" name="bday" max="1979-12-31">
    <br/> 輸入 2000-01-01 之后的日期：
    <input type="date" name="lday" min="2000-01-02">
    <br/> 數(shù)量 (在 1 和 5 之間)：
    <input type="number" name="quantity" min="1" max="5">
    <br/>
    <input type="submit">
</form>

input · step

step 屬性為輸入域規(guī)定合法的數(shù)字間隔叫胖。

step 屬性可以與 max 和 min 屬性創(chuàng)建一個(gè)區(qū)域值。

適用于以下 input 類型：number她奥、range瓮增、date怎棱、datetime-local、month绷跑、time 和 week拳恋。

<form action="demo-form.php">
    <input type="number" name="points" step="3">
    <input type="submit">
</form>

input · multiple

multiple 是一個(gè)布爾屬性。

multiple 屬性規(guī)定 <input> 元素中可選擇多個(gè)值砸捏。

適用于 email 和 file 類型谬运。

<form action="demo-form.php">
    選擇圖片：
    <input type="file" name="img" multiple>
    <input type="submit">
</form>

input · pattern

pattern 屬性描述了一個(gè)正則表達(dá)式，用于驗(yàn)證 <input> 元素的值垦藏。

適用于以下 <input> 類型：text局嘁、date震捣、search戏阅、url徊都、tel简卧、email 和 password蜕企。

<form action="demo-form.php">
    Country code:
    <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
    <input type="submit">
</form>

input · placeholder

placeholder 屬性提供一種提示（hint）暗挑，描述輸入域所期待的值困乒。

簡(jiǎn)短的提示在用戶輸入值前會(huì)顯示在輸入域上蝗肪。

適用于以下 <input> 類型：text袜爪、search、url薛闪、tel辛馆、email 和 password。

<form action="demo-form.php">
    <input type="text" name="fname" placeholder="First name">
    <br/>
    <input type="text" name="lname" placeholder="Last name">
    <br/>
    <input type="submit" value="提交">
</form>

input · required

required 是一個(gè)布爾屬性豁延。

required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）昙篙。

適用于以下 <input> 類型：text、search诱咏、url苔可、tel、email袋狞、password焚辅、date pickers、number苟鸯、checkbox同蜻、radio 和 file。

<form action="demo-form.php">
    用戶名：
    <input type="text" name="usrname" required>
    <input type="submit">
</form>

語(yǔ)義元素

語(yǔ)義＝意義早处，語(yǔ)義元素＝元素的意義湾蔓。

一個(gè)語(yǔ)義元素能夠清楚地描述其意義給瀏覽器和開(kāi)發(fā)者。

無(wú)語(yǔ)義元素示例：<div> 和 <span>陕赃。無(wú)需考慮內(nèi)容卵蛉。

語(yǔ)義元素示例：<form>颁股、<table> 和 <img>。清楚地定義了它的內(nèi)容傻丝。

HTML5 提供了新的語(yǔ)義元素來(lái)明確一個(gè) Web 頁(yè)面的不同部分：

HTML5 新語(yǔ)義元素組成的 Web 頁(yè)面

section

<section> 標(biāo)簽定義文檔中的節(jié)甘有，例如章節(jié)、頁(yè)眉葡缰、頁(yè)腳或文檔的其他部分亏掀。

section 包含了一組內(nèi)容及其標(biāo)題。

<section>
    <h1>WWF</h1>
    <p>
        The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research
        and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.
    </p>
</section>

使用提醒：

• 如果元素內(nèi)容可以分為幾個(gè)部分的話泛释，應(yīng)該使用 article 而不是 section滤愕。
• 不要把 section 元素作為一個(gè)普通的容器來(lái)使用，這本應(yīng)該是 div 的用法（特別是當(dāng)片段僅僅是為了美化樣式的時(shí)候）怜校。一般來(lái)說(shuō)间影，一個(gè) section 應(yīng)當(dāng)出現(xiàn)在文檔大綱中。

article

<article> 標(biāo)簽表示獨(dú)立的自包含內(nèi)容茄茁。

article 本身應(yīng)當(dāng)有意義魂贬，能獨(dú)立于網(wǎng)站的其他部分。

常見(jiàn)使用場(chǎng)景：論壇帖子裙顽、博客文章付燥、新聞故事、評(píng)論愈犹。

<article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 開(kāi)發(fā)的免費(fèi)網(wǎng)絡(luò)瀏覽器键科，于 2008 年發(fā)布。</p>
</article>

nav

<nav> 標(biāo)簽定義一組導(dǎo)航鏈接漩怎。

并非文檔的所有鏈接都應(yīng)位于 <nav> 元素內(nèi)勋颖。<nav> 元素僅適用于主要導(dǎo)航鏈接塊。

<nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/jquery/">jQuery</a>
</nav>

aside

<aside> 標(biāo)簽定義頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）勋锤。

aside 標(biāo)簽的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān)牙言。

<p>My family and I visited The Epcot center this summer.</p>
<aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

header

<header> 元素表示一組引導(dǎo)性的幫助。

<header> 元素通常包含：一個(gè)或多個(gè)標(biāo)題元素（<h1>～<h6>）怪得、分節(jié)頭部咱枉、徽標(biāo)或圖標(biāo)、作者信息徒恋。

在頁(yè)面中可以使用多個(gè) <header> 元素蚕断。

<article>
    <header>
        <h1>Most important heading here</h1>
        <h3>Less important heading here</h3>
        <p>Some additional information here</p>
    </header>
    <p>Lorem Ipsum dolor set amet…</p>
</article>

footer

<footer> 元素表示文檔或一個(gè)章節(jié)的頁(yè)腳。

一個(gè)頁(yè)腳通常包含該章節(jié)作者入挣、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息亿乳。

文檔中可以使用多個(gè) <footer> 元素。

<footer>
    <p>Posted by: Hege Refsnes</p>
    <p>Contact information:
        <a href="mailto:someone@example.com">someone@example.com</a>.
    </p>
</footer>

figure 和 figcaption

<figure> 標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表葛假、照片障陶、代碼等等）。

<figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)聊训，但如果被刪除抱究，則不應(yīng)對(duì)文檔流產(chǎn)生影響。
<figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題带斑。

<figcaption> 元素應(yīng)被置于 figure 元素的第一個(gè)或最后一個(gè)子元素的位置鼓寺。

<figure>
    <img src="pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
    <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
</figure>

Web 存儲(chǔ)

在 HTML5 之前，主要使用 Cookie 存儲(chǔ)勋磕，其缺點(diǎn)有：

1. Cookie 會(huì)被附加在每個(gè) HTTP 請(qǐng)求中妈候，所以無(wú)形中增加了流量；
2. 由于在 HTTP 請(qǐng)求中的 Cookie 是明文傳遞的挂滓，所以安全性成問(wèn)題苦银，除非使用 HTTPS；
3. Cookie 的大小限制在 4 KB 左右赶站，對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的墓毒。

HTML5 Web 存儲(chǔ)，一個(gè)比 Cookie 更好的本地存儲(chǔ)方式亲怠。

什么是 HTML5 Web 存儲(chǔ)

通過(guò) Web 存儲(chǔ)，Web 應(yīng)用程序可以在用戶的瀏覽器中本地存儲(chǔ)數(shù)據(jù)柠辞。

在 HTML5 之前团秽，應(yīng)用程序數(shù)據(jù)必須存儲(chǔ)在 Cookie 中，包含在每個(gè)服務(wù)器請(qǐng)求中叭首。Web 存儲(chǔ)更安全习勤，可以在本地存儲(chǔ)大量數(shù)據(jù)，而不會(huì)影響網(wǎng)站性能焙格。

與 Cookie 不同图毕，存儲(chǔ)限制要大得多（至少 5 MB），信息永遠(yuǎn)不會(huì)傳輸?shù)椒?wù)器眷唉。

Web 存儲(chǔ)是按來(lái)源（每個(gè)域和協(xié)議）予颤。來(lái)自一個(gè)來(lái)源的所有頁(yè)面都可以存儲(chǔ)和訪問(wèn)相同的數(shù)據(jù)。

Web 存儲(chǔ)對(duì)象

HTML Web 存儲(chǔ)提供了兩種用于在客戶端上存儲(chǔ)數(shù)據(jù)的對(duì)象：

• localStorage：沒(méi)有時(shí)間限制的數(shù)據(jù)存儲(chǔ)冬阳；
• sessionStorage：針對(duì)一個(gè) Session 的數(shù)據(jù)存儲(chǔ)蛤虐。關(guān)閉瀏覽器標(biāo)簽頁(yè)時(shí)數(shù)據(jù)丟失。

localStorage

localStorage 對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制肝陪。當(dāng)瀏覽器關(guān)閉時(shí)驳庭，數(shù)據(jù)不會(huì)被刪除。第二天、第二周或下一年之后饲常，數(shù)據(jù)依然可用蹲堂。

<script>
    // 存儲(chǔ)
    localStorage.setItem("lastname", "Smith");
    // 檢索
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
</script>

• 使用 key = "lastname" 和 value = "Smith" 創(chuàng)建一個(gè) localStorage 鍵／值對(duì)；
• 檢索 lastname 的值并將其插入到 id = "result" 的元素中贝淤。

上面的例子也可以寫成：

<script>
    // 存儲(chǔ)
    localStorage.lastname = "Smith";
    // 檢索
    document.getElementById("result").innerHTML = localStorage.lastname;
</script>

移除 localStorage 中的 lastname：

localStorage.removeItem("lastname");

不管是 localStorage柒竞，還是 sessionStorage，可使用的 API 都相同霹娄，常用的有如下幾個(gè)（以 localStorage 為例）：

• 保存數(shù)據(jù)：localStorage.setItem(key, value)能犯；
• 讀取數(shù)據(jù)：localStorage.getItem(key)；
• 刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key)犬耻；
• 刪除所有數(shù)據(jù)：localStorage.clear()踩晶；
• 得到某個(gè)索引的鍵：localStorage.key(index)。

鍵／值對(duì)通常以字符串存儲(chǔ)枕磁，可以按照需要轉(zhuǎn)換該格式渡蜻。

sessionStorage

sessionStorage 針對(duì)一個(gè) Session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后计济，數(shù)據(jù)會(huì)被刪除茸苇。

創(chuàng)建并訪問(wèn)一個(gè) sessionStorage：

<script>
    function clickCounter() {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "在這個(gè)會(huì)話中你已經(jīng)點(diǎn)擊了該按鈕 " + sessionStorage.clickcount + " 次";
    }
</script>
<p>
    <button onclick="clickCounter()" type="button">點(diǎn)擊此處</button>
</p>
<div id="result"></div>

Web Worker

Web Worker 是運(yùn)行在后臺(tái)的 JavaScript，不會(huì)影響頁(yè)面的性能沦寂。更好的解釋是学密，可以使用 Web Worker 提供的一種簡(jiǎn)單的方法來(lái)為 Web 內(nèi)容在后臺(tái)線程中運(yùn)行腳本，這些線程在執(zhí)行任務(wù)的過(guò)程中并不會(huì)干擾用戶界面传藏。

什么是 Web Worker

當(dāng)在 HTML 頁(yè)面中執(zhí)行腳本時(shí)腻暮，頁(yè)面將變?yōu)闊o(wú)響應(yīng)，直到腳本完成毯侦。

Web Worker 是運(yùn)行在后臺(tái)的 JavaScript哭靖，獨(dú)立于其他腳本，不會(huì)影響頁(yè)面的性能侈离∈杂模可以繼續(xù)執(zhí)行其他操作：點(diǎn)擊、選取內(nèi)容等等卦碾。而此時(shí) Web Worker 在后臺(tái)運(yùn)行铺坞。

下面的例子創(chuàng)建了一個(gè)簡(jiǎn)單的 Web Worker，在后臺(tái)計(jì)數(shù)：

<p>計(jì)數(shù)：
    <output id="result"></output>
</p>
<button onclick="startWorker()">開(kāi)始工作</button>
<button onclick="stopWorker()">停止工作</button>

<script>
    var w;

    function startWorker() {
        if (typeof (w) == "undefined") {
            w = new Worker("demo_workers.js");
        }
        w.onmessage = function (event) {
            document.getElementById("result").innerHTML = event.data;
        };
    }

    function stopWorker() {
        w.terminate();
        w = undefined;
    }
</script>

創(chuàng)建 Web Worker 文件

在一個(gè)外部 JavaScript 中創(chuàng)建 Web Worker洲胖。

這里創(chuàng)建了計(jì)數(shù)腳本康震，該腳本存儲(chǔ)于 demo_workers.js 文件中：

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i);
    setTimeout("timedCount()", 500);
}

timedCount();

以上代碼中重要的部分是 postMessage() 方法，它用于向 HTML 頁(yè)面?zhèn)骰匾欢蜗ⅰ?/p>

通常宾濒，Web Worker 不用于如此簡(jiǎn)單的腳本腿短，而是用于更耗費(fèi) CPU 資源的任務(wù)。

創(chuàng)建 Web Worker 對(duì)象

在有了 Web Worker 文件之后，現(xiàn)在需要從 HTML 頁(yè)面調(diào)用它橘忱。

下面的代碼檢測(cè)是否存在 Worker赴魁。若不存在，則創(chuàng)建一個(gè)新的 Web Worker 對(duì)象钝诚，然后運(yùn)行 demo_workers.js 中的代碼：

if (typeof (w) == "undefined") {
    w = new Worker("demo_workers.js");
}

然后就可以從 Web Worker 發(fā)送和接收消息了颖御。

向 Web Worker 添加一個(gè) onmessage 事件監(jiān)聽(tīng)器：

w.onmessage = function (event) {
    document.getElementById("result").innerHTML = event.data;
};

當(dāng) Web Worker 傳遞消息時(shí)，會(huì)執(zhí)行事件監(jiān)聽(tīng)器中的代碼凝颇。來(lái)自 Web Worker 的數(shù)據(jù)存儲(chǔ)在 event.data 中潘拱。

終止 Web Worker

當(dāng)創(chuàng)建 Web Worker 對(duì)象后，它會(huì)繼續(xù)監(jiān)聽(tīng)消息（即使在外部腳本完成之后）直到其被終止為止拧略。

如需終止 Web Worker芦岂，并釋放瀏覽器和計(jì)算機(jī)的資源，使用 terminate() 方法：

w.terminate();

重用 Web Worker

如果將 Worker 變量設(shè)置為 undefined垫蛆，則在終止后禽最，可以重用代碼：

w = undefined;

Web Worker 和 DOM

由于 Web Worker 位于外部文件中袱饭，因此無(wú)法訪問(wèn)下列 JavaScript 對(duì)象：

• window 對(duì)象
• document 對(duì)象
• parent 對(duì)象

SSE

服務(wù)器發(fā)送事件（Server-Sent Events）是基于 WebSocket 協(xié)議的一種服務(wù)器向客戶端發(fā)送事件和數(shù)據(jù)的單向通訊川无。

HTML5 SSE 允許網(wǎng)頁(yè)獲得來(lái)自服務(wù)器的更新。

單向消息傳遞

SSE 指的是網(wǎng)頁(yè)自動(dòng)從服務(wù)器獲取更新虑乖。

之前也可以做到這一點(diǎn)懦趋，但網(wǎng)頁(yè)必須詢問(wèn)是否有可用的更新。使用 SSE疹味，更新會(huì)自動(dòng)進(jìn)行仅叫。

例子：Facebook/Twitter 更新、股票價(jià)格更新佛猛、新聞源、體育賽事結(jié)果等坠狡。

至截稿時(shí)继找，Edge 尚未提供支持。

接收 SSE 通知

EventSource 對(duì)象用于接收 SSE 通知：

var source = new EventSource("demo_sse.php");
source.onmessage = function (event) {
    document.getElementById("result").innerHTML += event.data + "<br>";
};

• 創(chuàng)建一個(gè)新的 EventSource 對(duì)象逃沿，然后規(guī)定發(fā)送更新的頁(yè)面的 URL（本例中是 demo_sse.php）婴渡；
• 每接收到一次更新，就會(huì)發(fā)生 onmessage 事件凯亮；
• 當(dāng) onmessage 事件發(fā)生時(shí)边臼，把已接收的數(shù)據(jù)放入 id 為 result 的元素中。

服務(wù)器端代碼示例

為了讓上面的例子可以運(yùn)行假消，需要能夠發(fā)送數(shù)據(jù)更新的服務(wù)器柠并。

服務(wù)器端事件流的語(yǔ)法是非常簡(jiǎn)單的。把 Content-Type 報(bào)頭設(shè)置為 text/event-stream。現(xiàn)在可以開(kāi)始發(fā)送事件流了臼予。

PHP 示例代碼（demo_sse.php）：

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

ASP 示例代碼（demo_sse.asp）：

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is:" & now())
Response.Flush()
%>

• 把報(bào)頭 Content-Type 設(shè)置為 text/event-stream鸣戴；
• 規(guī)定不對(duì)頁(yè)面進(jìn)行緩存；
• 輸出發(fā)送日期（始終以 data: 開(kāi)頭）粘拾；
• 向網(wǎng)頁(yè)刷新輸出數(shù)據(jù)窄锅。

EventSource 對(duì)象

上面的例子使用了 onmessage 事件來(lái)獲取消息。不過(guò)還可以使用其他事件：