• HTML 計算機代碼
• HTML5 代碼約定

語義學（源自古希臘）可定義為對語言意義的研究。

語義元素是擁有語義的元素。

什麼是語義元素？

語義元素清楚地向瀏覽器和開發者描述其意義。

非語義元素的例子：<div>和<span> -無法提供關於其內容的信息。

語義元素的例子：<form>、<table>以及<img> -清晰地定義其內容。

瀏覽器支持

所有現代瀏覽器均支持HTML5 語義元素。

此外，您可以“幫助”老式瀏覽器處理“未知元素”。

在HTML5 瀏覽器支持這一章學習更多知識。

HTML5 中新的語義元素

許多網站包含了指示導航、頁眉以及頁腳的HTML 代碼，例如這些：<div id=」nav」> <div class=」header」> <div id=」footer」>。

HTML5 提供了定義頁面不同部分的新語義元素：

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

HTML5 語義元素

HTML5 <section> 元素

<section> 元素定義文檔中的節。

根據W3C 的HTML 文獻：“節（section）是有主題的內容組，通常具有標題”。

可以將網站首頁劃分為簡介、內容、聯繫信息等節。

實例

<section>
   <h1>WWF</h1>
   <p>The World Wide Fund for Nature (WWF) is....</p>
</section> 

親自試一試

HTML5 <article> 元素

<article> 元素規定獨立的自包含內容。

文檔有其自身的意義，並且可以獨立於網站其他內容進行閱讀。

<article> 元素的應用場景：

• 論壇
• 博客
• 新聞

實例

<article>
   <h1>What Does WWF Do?</h1>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

親自試一試

嵌套語義元素

在HTML5 標準中，<article> 元素定義完整的相關元素自包含塊。

<section> 元素被定義為相關元素塊。

我們能夠使用該定義來決定如何嵌套元素嗎？不，我們不能！

在因特網上，您會發現<section> 元素包含<article> 元素的HTML 頁面，還有<article> 元素包含<sections> 元素的頁面。

您還會發現<section> 元素包含<section> 元素，同時<article> 元素包含<article> 元素。

HTML5 <header> 元素

<header> 元素為文檔或節規定頁眉。

<header> 元素應該被用作介紹性內容的容器。

一個文檔中可以有多個<header> 元素。

下例為一篇文章定義了頁眉：

實例

<article>
   <header>
     <h1>What Does WWF Do?</h1>
     <p>WWF's mission:</p>
   </header>
   <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article> 

親自試一試

HTML5 <footer> 元素

<footer> 元素為文檔或節規定頁腳。

<footer> 元素應該提供有關其包含元素的信息。

頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯繫信息等等。

您可以在一個文檔中使用多個<footer> 元素。

實例

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

親自試一試

HTML5 <nav> 元素

<nav> 元素定義導航鏈接集合。

<nav> 元素旨在定義大型的導航鏈接塊。不過，並非文檔中所有鏈接都應該位於<nav> 元素中！

實例

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

親自試一試

HTML5 <aside> 元素

<aside> 元素頁面主內容之外的某些內容（比如側欄）。

aside 內容應該與周圍內容相關。

實例

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

親自試一試

HTML5 <figure> 和<figcaption> 元素

在書籍和報紙中，與圖片搭配的標題很常見。

標題（caption）的作用是為圖片添加可見的解釋。

通過HTML5，圖片和標題能夠被組合在<figure>元素中：

實例

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure> 

親自試一試

<img>元素定義圖像，<figcaption>元素定義標題。

為何使用HTML5 元素？

如果使用HTML4 的話，開發者會使用他們喜愛的屬性名來設置頁面元素的樣式：

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

如此，瀏覽器便無法識別正確的網頁內容。

而通過HTML5 元素，比如：<header> <footer> <nav> <section> <article>，此問題迎刃而解。

根據W3C，語義網：

“允許跨應用程序、企業和團體對數據進行分享和重用。”

HTML5 中的語義元素

下面列出了以字母順序排列的HTML5 新語義元素。

這些鏈接指向完整的HTML 參考手冊。

• HTML5 Web Workers
• HTML 實例

Server-Sent 事件允許網頁從服務器獲得更新。

Server-Sent 事件- One Way Messaging

Server-Sent 事件指的是網頁自動從服務器獲得更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過Server-Sent 事件，更新能夠自動到達。

例如：Facebook/Twitter 更新、股價更新、新的博文、賽事結果，等等。

瀏覽器支持

表格中的數字指示完全支持server-sent 事件的首個瀏覽器。

接收Server-Sent 事件通知

EventSource 對像用於接收服務器發送事件通知：

實例

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

親自試一試

例子解釋：

• 創建一個新的EventSource 對象，然後規定發送更新的頁面的URL（本例中是」demo_sse.php」）
• 每當接收到一次更新，就會發生onmessage 事件
• 當onmessage 事件發生時，把已接收的數據推入id 為」result」 的元素中

檢測Server-Sent 事件支持

在TIY 實例中，我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服務器發送事件！
    // 一些代碼.....
} else {
    // 抱歉！不支持服務器發送事件！
}

服務器端代碼實例

為了使上例運行，您需要能夠發送數據更新的服務器（比如PHP 或ASP）。

服務器端事件流的語法非常簡單。請把」Content-Type」 報頭設置為」text/event-stream」。現在，您可以開始發送事件流了。

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 中的代碼(VB) (demo_sse.asp)：

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

代碼解釋：

• 把報頭」Content-Type」 設置為」text/event-stream」
• 規定不對頁面進行緩存
• 輸出要發送的日期（始終以」data: 」 開頭）
• 向網頁刷新輸出數據

EventSource 對象

在上例中，我們使用onmessage 事件來獲取消息。不過還可以使用其他事件：

• HTML5 应用缓存
• HTML5 SSE

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

浏览器支持

表格中的数字指示完全支持 Web Worker 的首个浏览器版本。

HTML Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

计数：

启动 Worker 停止 Worker

亲自试一试

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
} else {
    // 抱歉！不支持 Web Worker！
}

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于 「demo_workers.js」 文件中：

var i = 0;

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

timedCount();

以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 「demo_workers.js」 中的代码：

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

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 「onmessage」 事件监听器：

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

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<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 = "Sorry! No Web Worker support.";
    }
}

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

</body>
</html>

亲自试一试

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document 对象
• parent 对象

• HTML5 Web Workers
• HTML 實例

Server-Sent 事件允許網頁從服務器獲得更新。

Server-Sent 事件- One Way Messaging

Server-Sent 事件指的是網頁自動從服務器獲得更新。

以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過Server-Sent 事件，更新能夠自動到達。

例如：Facebook/Twitter 更新、股價更新、新的博文、賽事結果，等等。

瀏覽器支持

表格中的數字指示完全支持server-sent 事件的首個瀏覽器。

接收Server-Sent 事件通知

EventSource 對像用於接收服務器發送事件通知：

實例

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

親自試一試

例子解釋：

• 創建一個新的EventSource 對象，然後規定發送更新的頁面的URL（本例中是」demo_sse.php」）
• 每當接收到一次更新，就會發生onmessage 事件
• 當onmessage 事件發生時，把已接收的數據推入id 為」result」 的元素中

檢測Server-Sent 事件支持

在TIY 實例中，我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持：

if(typeof(EventSource) !== "undefined") {
    // 是的！支持服務器發送事件！
    // 一些代碼.....
} else {
    // 抱歉！不支持服務器發送事件！
}

服務器端代碼實例

為了使上例運行，您需要能夠發送數據更新的服務器（比如PHP 或ASP）。

服務器端事件流的語法非常簡單。請把」Content-Type」 報頭設置為」text/event-stream」。現在，您可以開始發送事件流了。

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 中的代碼(VB) (demo_sse.asp)：

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

代碼解釋：

• 把報頭」Content-Type」 設置為」text/event-stream」
• 規定不對頁面進行緩存
• 輸出要發送的日期（始終以」data: 」 開頭）
• 向網頁刷新輸出數據

EventSource 對象

在上例中，我們使用onmessage 事件來獲取消息。不過還可以使用其他事件：

• HTML5 应用缓存
• HTML5 SSE

Web worker 是运行在后台的 JavaScript，不会影响页面的性能。

什么是 Web Worker？

当在 HTML 页面中执行脚本时，页面是不可响应的，直到脚本已完成。

Web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 运行在后台。

浏览器支持

表格中的数字指示完全支持 Web Worker 的首个浏览器版本。

HTML Web Workers 实例

下面的例子创建了一个简单的 web worker，在后台计数：

计数：

启动 Worker 停止 Worker

亲自试一试

检测 Web Worker 支持

在创建 web worker 之前，请检测用户浏览器是否支持它：

if (typeof(Worker) !== "undefined") {
    // 是的！支持 Web worker！
    // 一些代码.....
} else {
    // 抱歉！不支持 Web Worker！
}

创建 Web Worker 文件

现在，让我们在一个外部 JavaScript 文件中创建我们的 web worker。

在此处，我们创建了计数脚本。该脚本存储于 「demo_workers.js」 文件中：

var i = 0;

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

timedCount();

以上代码中重要的部分是 postMessage() 方法 – 它用于向 HTML 页面传回一段消息。

注释: web worker 通常不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

创建 Web Worker 对象

现在我们已经有了 web worker 文件，我们需要从 HTML 页面调用它。

下面的代码行检测是否存在 worker，如果不存在，- 它会创建一个新的 web worker 对象，然后运行 「demo_workers.js」 中的代码：

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

然后我们就可以从 web worker 发生和接收消息了。

向 web worker 添加一个 「onmessage」 事件监听器：

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

当 web worker 传送消息时，会执行事件监听器中的代码。来自 web worker 的数据会存储于 event.data 中。

终止 Web Worker

当创建 web worker 后，它会继续监听消息（即使在外部脚本完成后）直到其被终止为止。

如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法：

w.terminate();

复用 Web Worker

如果您把 worker 变量设置为 undefined，在其被终止后，可以重复使用该代码：

w = undefined;

完整的 Web Worker 实例代码

我们已经看到了 .js 文件中的 Worker 代码。下面是 HTML 页面的代码：

实例

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<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 = "Sorry! No Web Worker support.";
    }
}

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

</body>
</html>

亲自试一试

Web Worker 和 DOM

由于 web worker 位于外部文件中，它们无法访问下例 JavaScript 对象：

• window 对象
• document 对象
• parent 对象