HTML5教程（學完html的，這個可以快速過一遍）

HTML5 教程
HTML5 瀏覽器支持
HTML5 新元素
HTML5 語義元素
HTML5 代碼規範
HTML5 MathML
HTML5 Web SQL數據庫
HTML5 遷移
HTML5 Canvas
HTML5 內聯 SVG
HTML5 Canvas VS svg
HTML5 多媒體
HTML5 Object元素
HTML5 Audio音頻
HTML5 Video視頻
HTML5 新的input類型
HTML5 表單元素
HTML5 表單屬性
HTML5 地理定位
HTML5 拖放
HTML5 Web存儲
HTML5 應用程序緩存
HTML5 websocket
HTML5 服務器發送事件

HTML5 教程

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。

HTML5的設計目的是爲了在移動設備上支持多媒體。

HTML5 簡單易學。

什麼是html5?

HTML5 是最新的 HTML 標準。

HTML5 是專門爲承載豐富的 web 內容而設計的，並且無需額外插件。

HTML5 擁有新的語義、圖形以及多媒體元素。

HTML5 提供的新元素和新的 API 簡化了 web 應用程序的搭建。

HTML5 是跨平臺的，被設計爲在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。

HTML5 中的一些有趣的新特性：

用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search

聲明必須位於 HTML5 文檔中的第一行,使用非常簡單:

<!Doctype html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>

<p>孫叫獸的CSDN博客</p>

</body>
</html>

html5的改進

新元素
新屬性
完全支持 CSS3
Video 和 Audio
2D/3D 製圖
本地存儲
本地 SQL 數據
Web 應用

html4多媒體

使用 HTML5 你可以簡單的在網頁中播放視頻(video)與音頻 (audio) 。

HTML5 video
HTML5 audio

html5應用

使用 HTML5 你可以簡單地開發應用

本地數據存儲
訪問本地文件
本地 SQL 數據
緩存引用
Javascript 工作者
XHTMLHttpRequest 2

使用 HTML5 你可以簡單的繪製圖形:

使用 canvas 元素。
使用內聯 SVG。
使用 CSS3 2D 轉換、CSS3 3D 轉換。

html5使用css3

新選擇器
新屬性
動畫
2D/3D 轉換
圓角
陰影效果
可下載的字體

語義元素

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用html5shiv包：

<!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->

載入後，初始化新標籤的CSS：

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

HTML5 瀏覽器支持

現在主流的瀏覽器都已經支持HTML5了，但是一些老舊的IE還是不支持的；

你可以讓一些較早的瀏覽器（不支持HTML5）支持 HTML5。

HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是塊級元素。

爲了能讓舊版本的瀏覽器正確顯示這些元素，你可以設置 CSS 的 display 屬性值爲 block:

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

你可以爲 HTML 添加新的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>孫叫獸爲html添加新的元素</title>
    <script>
        document.createElement("myFan")
    </script>
    <style>
        myFan {
            background-color: green;
            padding: 50px;
            display: block;
            font-size: 50px;
        }
    </style>
</head>
<body>

<p>孫叫獸的CSDN博客</p>

</body>
</html>

我們可以使用 Sjoerd Visscher 創建的 “HTML5 Enabling JavaScript”, “ shiv” 來解決IE瀏覽器問題。

針對IE瀏覽器 html5shiv 是比較好的解決方案。 html5shiv 主要解決HTML5提出的新的元素不被IE6-8識別，這些新元素不能作爲父節點包裹子元素，並且不能應用CSS樣式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>孫叫獸解決IE瀏覽器</title>
    
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
    <![endif]-->
    
</head>
<body>

<p>孫叫獸的CSDN博客</p>

</body>
</html>

html5shiv.js 引用代碼必須放在元素中，因爲 IE 瀏覽器在解析 HTML5 新元素時需要先加載該文件。

HTML5 新元素

自1999年以後HTML4 已經改變了很多,今天，在HTML4中的幾個已經被廢棄，這些元素在HTML5中已經被刪除或重新定義。

爲了更好地處理今天的互聯網應用，HTML5添加了很多新元素及功能，比如: 圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個api拖放元素，定位，包括網頁應用程序緩存，存儲，網絡工作者等

canvas元素

新媒體元素

新表單元素

HTML5 語義元素

一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。

無語義元素實例: <div> 和 <span> - 無需考慮內容.

語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內容.

許多現有網站都包含以下HTML代碼： <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導航鏈接, 頭部, 以及尾部.

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

<section> 標籤定義文檔中的節（section、區段）。比如章節、頁眉、頁腳或文檔中的其他部分。

根據W3C HTML5文檔: section 包含了一組內容及其標題。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8"> 
    <title>孫叫獸的博客</title>
</head>
<body>
<section>
    <h1>這是孫叫獸的博客</h1>
    <p>這個是測試section的段落</p>
</section>

</body>
</html>

<article> 標籤定義獨立的內容。.

<article> 元素使用實例:

Forum post
Blog post
News story
Comment

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<article>
    <h1>這是孫叫獸的博客</h1>
    <p>這個是測試article的段落</p>
</article>

</body>
</html>

<nav> 標籤定義導航鏈接的部分。

<nav> 元素用於定義頁面的導航鏈接部分區域，但是，不是所有的鏈接都需要包含在 <nav> 元素中!

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<nav>
    <a href="/html">html</a>
    <a href="/css">css</a>
    <a href="/html5">html5</a>
    <a href="/javaScript">javaScript</a>
</nav>

</body>
</html>

<aside>標籤定義頁面主區域內容之外的內容（比如側邊欄）。

aside 標籤的內容應與主區域的內容相關.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<p>這都是孫叫獸的粉絲</p>
<aside>
    <h2>孫叫獸的粉絲</h2>
    <p>孫叫獸粉絲的書籍</p>
</aside>
</body>
</html>

<header>元素描述了文檔的頭部區域

<header>元素主要用於定義內容的介紹展示區域.

在頁面中你可以使用多個<header> 元素.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<article>
    <p>這都是孫叫獸的粉絲</p>
    <header>
        <h2>孫叫獸的粉絲</h2>
        <p>孫叫獸粉絲的書籍</p>
    </header>
</article>

</body>
</html>

<footer> 元素描述了文檔的底部區域.

<footer> 元素應該包含它的包含元素

一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯繫信息等

文檔中你可以使用多個<footer>元素.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<footer>
    <p>版權：孫叫獸</p>
    <p><time>2020/6/18</time></p>
</footer>

</body>
</html>

<figure> 標籤規定獨立的流內容（圖像、圖表、照片、代碼等等）。

<figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。

<figcaption> 標籤定義 <figure> 元素的標題.

<figcaption> 元素應該被置於 “figure” 元素的第一個或最後一個子元素的位置。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<figure>
    <p>孫叫獸的粉絲前來關注</p>
    <figcaption>粉絲們的行爲</figcaption>
</figure>

</body>
</html>

HTML5 代碼規範

很多 Web 開發人員對 HTML 的代碼規範知之甚少。

在2000年至2010年，許多Web開發人員從 HTML 轉換到 XHTML。

使用 XHTML 開發人員逐漸養成了比較好的 HTML 編寫規範。

而針對於 HTML5 ，我們應該形成比較好的代碼規範，以下提供了幾種規範的建議。

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

混合了大小寫的風格是非常糟糕的。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

在 HTML5 中, 你不一定要關閉所有元素 (例如

元素)，但我們建議每個元素都要添加關閉標籤。

<p></p>

在 HTML5 中, 空的 HTML 元素也不一定要關閉：

<br>

在 XHTML 和 XML 中斜線 (/) 是必須的。

如果你期望 XML 軟件使用你的頁面，使用這種風格是非常好的。

HTML5 屬性名允許使用大寫和小寫字母。

我們推薦使用小寫字母屬性名:

同時使用大小寫是非常不好的習慣。
開發人員通常使用小寫 (類似 XHTML)。
小寫風格看起來更加清爽。
小寫字母容易編寫。

<h1 id="manu"></h1>

HTML5 屬性值可以不用引號。

屬性值我們推薦使用引號:

如果屬性值含有空格需要使用引號。
混合風格不推薦的，建議統一風格。
屬性值使用引號易於閱讀。

<form class="stire mmm">

圖片通常使用 alt 屬性。在圖片不能顯示時，它能替代圖片顯示。

<img src="html5.jpe" alt="html5" style="width:50px;height:50px">

定義好圖片的尺寸，在加載時可以預留指定空間，減少閃爍。

等號前後可以使用空格,建議少用空格

<meta charset="UTF-8">

使用 HTML 編輯器，左右滾動代碼是不方便的。

每行代碼儘量少於 80 個字符。

不要無緣無故添加空行。

爲每個邏輯功能塊添加空行，這樣更易於閱讀。

縮進使用兩個空格，不建議使用 TAB。

比較短的代碼間不要使用不必要的空行和縮進。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
<body>
<figure>
    <p>孫叫獸的粉絲前來關注</p>
    <figcaption>粉絲們的行爲</figcaption>
</figure>

</body>
</html>

在標準 HTML5 中， < html> 和 < body> 標籤是可以省略的。

<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
</head>
    <p>孫叫獸的粉絲前來關注</p>

元素是文檔的根元素，用於描述頁面的語言：

<!DOCTYPE html>
<html lang="En">
</html>

聲明語言是爲了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會發生錯誤。

HTML5 中 <title> 元素是必須的，標題名描述了頁面的主題，標題和語言可以讓搜索引擎很快了解你頁面的主題:

<!DOCTYPE html>
<html lang="En">
<head>
    <meta charset="UTF-8">
    <title>孫叫獸的博客</title>   
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落
</p>
</body>
</html>

註釋可以寫在  中:

<!-- 這個是註釋內容-->

樣式表使用簡潔的語法格式 ( type 屬性不是必須的):

<link rel="stylesheet" href="my.css">

<!DOCTYPE html>
<html lang="En">
<head>
    <meta charset="UTF-8">
    <title>孫叫獸的博客</title>
    <link rel="stylesheet" href="my.css">
    <style>
        body{
            background-color: green;
            font-size: 15px;
            height: 50px;
            width: 15px;
        }
        
    </style>
   
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落
</p>
</body>
</html>

長的規則可以寫成多行:

將左花括號與選擇器放在同一行。
左花括號與選擇器間添加一個空格。
使用兩個空格來縮進。
冒號與屬性值之間添加一個空格。
逗號和符號之後使用一個空格。
每個屬性與值結尾都要使用分號。
只有屬性值包含空格時才使用引號。
右花括號放在新的一行。
每行最多 80 個字符。

使用簡潔的語法來載入外部的腳本文件 ( type 屬性不是必須的 ):

<script src="my.js"></script>

大多 Web 服務器 (Apache, Unix) 對大小寫敏感： london.jpg 不能通過 London.jpg 訪問。

其他 Web 服務器 (Microsoft, IIS) 對大小寫不敏感： london.jpg 可以通過 London.jpg 或 london.jpg 訪問。

你必須保持統一的風格，我們建議統一使用小寫的文件名。

HTML 文件後綴可以是 .html (或 .htm)。

CSS 文件後綴是 .css 。

JavaScript 文件後綴是 .js 。

如果服務器只配置了 “index.html” 作爲默認文件，你必須將文件命名爲 “index.html”, 而不是 “index.htm”。

但是，通常服務器可以設置多個默認文件，你可以根據需要設置默認文件名。

HTML5 MathML

HTML5 可以在文檔中使用 MathML 元素，對應的標籤是 <math>...</math> 。

MathML 是數學標記語言，是一種基於XML（標準通用標記語言的子集）的標準，用來在互聯網上書寫數學符號和公式的置標語言。

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>孫叫獸的博客</title>
   </head>
   <body>
      <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>aaa
   </body>
</html>

一個 2×2 矩陣

HTML5 Web SQL數據庫

Web SQL 數據庫 API 並不是 HTML5 規範的一部分，但是它是一個獨立的規範，引入了一組使用 SQL 操作客戶端數據庫的 APIs。

如果你是一個 Web 後端程序員，應該很容易理解 SQL 的操作。

以下是規範中定義的三個核心方法：

openDatabase：這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。
transaction：這個方法讓我們能夠控制一個事務，以及基於這種情況執行提交或者回滾。
executeSql：這個方法用於執行實際的 SQL 查詢。

我們可以使用 openDatabase() 方法來打開已存在的數據庫，如果數據庫不存在，則會創建一個新的數據庫，使用代碼如下：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 \* 1024 \* 1024);

openDatabase() 方法對應的五個參數說明：

數據庫名稱
版本號
描述文本
數據庫大小
創建回調

第五個參數，創建回調會在創建數據庫後被調用。

執行操作使用 database.transaction() 函數：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

上面的語句執行後會在 ‘mydb’ 數據庫中創建一個名爲 LOG 的表。

在執行上面的創建表語句後，我們可以插入一些數據：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "孫叫獸的挖PI幣")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "http://bensonsun.piworker.com/?code=BensonSun")');
});

動態值來插入數據：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {  
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

實例中的 e_id 和 e_log 是外部變量，executeSql 會映射數組參數中的每個條目給 “?“。

讀取數據庫中已經存在的數據：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "孫叫獸的博客")');
   tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "http://bensonsun.piworker.com/?code=BensonSun")');
});
 
db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查詢記錄條數: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;
    
      for (i = 0; i < len; i++){
         alert(results.rows.item(i).log );
      }
    
   }, null);
});

完整實例：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
 
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "孫叫獸的博客")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "http://bensonsun.piworker.com/?code=BensonSun")');
    msg = '<p>數據表已創建，且插入了兩條數據。</p>';
    document.querySelector('#status').innerHTML =  msg;
});
 
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
    var len = results.rows.length, i;
    msg = "<p>查詢記錄條數: " + len + "</p>";
    document.querySelector('#status').innerHTML +=  msg;
 
    for (i = 0; i < len; i++){
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
        document.querySelector('#status').innerHTML +=  msg;
    }
}, null);
});

刪除記錄使用的格式如下：

db.transaction(function (tx) {
    tx.executeSql('DELETE FROM LOGS  WHERE id=1');
});

刪除指定的數據id也可以是動態的：?表示佔位符

db.transaction(function(tx) {
    tx.executeSql('DELETE FROM LOGS WHERE id=?', [id]);
});

更新記錄使用的格式如下：

db.transaction(function (tx) {
    tx.executeSql('UPDATE LOGS SET log='http://bensonsun.piworker.com/?code=BensonSun' WHERE id=2');
});

動態更新指定的數據id

db.transaction(function(tx) {
    tx.executeSql('UPDATE LOGS SET log='www.axihe.com' WHERE id=?', [id]);
});

完整實例：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
 
 db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "孫叫獸的博客")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "http://bensonsun.piworker.com/?code=BensonSun")');
    msg = '<p>數據表已創建，且插入了兩條數據。</p>';
    document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
      tx.executeSql('DELETE FROM LOGS  WHERE id=1');
      msg = '<p>刪除 id 爲 1 的記錄。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
     tx.executeSql('UPDATE LOGS SET log='http://bensonsun.piworker.com/?code=BensonSun' WHERE id=2');
      msg = '<p>更新 id 爲 2 的記錄。</p>';
      document.querySelector('#status').innerHTML =  msg;
 });
 
 db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
       var len = results.rows.length, i;
       msg = "<p>查詢記錄條數: " + len + "</p>";
       document.querySelector('#status').innerHTML +=  msg;
       
       for (i = 0; i < len; i++){
          msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
          document.querySelector('#status').innerHTML +=  msg;
       }
    }, null);
 });

HTML5 Web Worker

web worker 是運行在後臺的 JavaScript，不會影響頁面的性能。

當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。

web worker 是運行在後臺的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在後臺運行。

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 等瀏覽器都支持Web workers.

<div class="example_code" style="background-color: rgb(238, 238, 238);">
    計數: <output id="result">0</output>
    <p>
        <button onclick="startWorker()">開始 Worker</button> 
        <button onclick="stopWorker()">停止 Worker</button>
        <br>
        <br>
    </p>
    <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>
</div>

實例：

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

我們已經有了 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，並釋放瀏覽器/計算機資源，請使用 terminate() 方法：

w.terminate();

完整實例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>阿西河教程(axihe.com)</title> 
</head>
<body>
 
<p>計數： <output id="result"></output></p>
<button onclick="startWorker()">開始工作</button> 
<button onclick="stopWorker()">停止工作</button>
 
<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本瀏覽器不支持 Web Workers.</p>
 
<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>
 
</body>
</html>

由於 web worker 位於外部文件中，它們無法訪問下列 JavaScript 對象：

window 對象
document 對象
parent 對象

TML5 遷移

典型的html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML4</title>
<style>
  body {font-family:Verdana,sans-serif;font-size:0.8em;}
  div#header,div#footer,div#content,div#post 
  {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
  div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
  div#content {background-color:#ddd;}
  div#menu ul {margin:0;padding:0;}
  div#menu ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<div id="header">
  <h1>Monday Times</h1>
</div>
<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</li>
    <li>Weather</li>
  </ul>
</div>
<div id="content">
<h2>News Section</h2>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
<div id="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>
</div>
<div id="footer">
  <p>&copy; 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

HTML4 doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML5 doctype：

<!DOCTYPE html>

編碼類型html4：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

編碼類型html5:

<meta charset="utf-8">

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

此外，您可以“教授”老式瀏覽器如何處理“未知元素”。

爲 Internet Explorer 支持而添加的 shiv：

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

HTML5 語義元素添加 CSS

div#header,div#footer,div#content,div#post {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
div#header,div#footer {
    color:white;background-color:#444;margin-bottom:5px;
}
div#content {
    background-color:#ddd;
}
div#menu ul {
    margin:0;padding:0;
}
div#menu ul li {
    display:inline; margin:5px;
}
Duplicate with equal CSS styles for HTML5 semantic elements:
header,footer,section,article {
    border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;
}
header,footer {
    color:white;background-color:#444;margin-bottom:5px;
}
section {
    background-color:#ddd;
}
nav ul  {
    margin:0;padding:0;
}
nav ul li {
    display:inline; margin:5px;
}

把 id=“header” 和 id=“footer” 的 <div> 元素:

<div id="header">
  <h1>Monday Times</h1>
</div>
.
.
.
<div id="footer">
  <p>&copy; 2014 W3Schools. All rights reserved.</p>
</div>

<header>
  <h1>Monday Times</h1>
</header>
.
.
.
<footer>
  <p>© 2014 W3Schools. All rights reserved.</p>
</footer>

把 id=“menu” 的 <div> 元素修改爲 HTML5 語義元素 <nav> ：

<div id="menu">
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</div>

<nav>
  <ul>
    <li>News</li>
    <li>Sports</a></li>
    <li>Weather</li>
  </ul>
</nav>

把 id=“content” 的元素修改爲 HTML5 語義元素 <section>：

<div id="content">
.
.
.
</div>

<section>
.
.
.
</section>

把 class=“post” 的所有 <div> 元素修改爲 HTML5 語義元素:

<div class="post">
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</div>

<article>
  <h2>News Article</h2>
  <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
  lurum hurum turum.</p>
</article>

在 HTML5 標準中，<article> <section> 與 <div> 之間的差異很小，令人困惑。

在 HTML5 標準中，<section> 元素被定位爲相關元素的塊。

<article> 元素被定義爲相關元素的完整的自包含塊。

<div> 元素被定義爲子元素的塊。

如何理解呢？

在上面的例子中，我們曾使用 <section> 作爲相關 <articles> 的容器。

但是，我們也能夠把 <article> 用作文章的容器。

<article> 中的 <section> 中的 <div>：
<article>
<section>
<h2>Famous Cities</h2>
<div class="city">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
<section>
<h2>Famous Countries</h2>
<div class="country">
<h2>England</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="country">
<h2>France</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="country">
<h2>Japan</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</section>
</article>

HTML5 Canvas

<canvas> 標籤定義圖形，比如圖表和其他圖像，您必須使用腳本來繪製圖形。

在畫布上（Canvas）畫一個紅色矩形，漸變矩形，彩色矩形，和一些彩色的文字。

HTML5 canvas 元素用於圖形的繪製，通過腳本 (通常是JavaScript)來完成.

canvas標籤只是圖形容器，您必須使用腳本來繪製圖形。

你可以通過多種方法使用 canvas 繪製路徑,盒、圓、字符以及添加圖像。

瀏覽器支持：

表格中的數字表示支持

元素的第一個瀏覽器版本號。

一個畫布在網頁中是一個矩形框，通過 canvas 元素來繪製.

注意: 默認情況下

元素沒有邊框和內容。

<canvas id="myCanvas" style="height: 200px;width: 200px;"></canvas>

使用 style 屬性來添加邊框:

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

canvas 元素本身是沒有繪圖能力的。所有的繪製工作必須在 JavaScript 內部完成：

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

實例解析：

var c=document.getElementById("myCanvas");

然後，創建 context 對象：

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

getContext(“2d”) 對象是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面的兩行代碼繪製一個紅色的矩形：

繪製一個紅色的矩形：

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

設置fillStyle屬性可以是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）。

fillRect(_x,y,width,height_) 方法定義了矩形當前的填充方式。

座標：

canvas 是一個二維網格。

canvas 的左上角座標爲 (0,0)

上面的 fillRect 方法擁有參數 (0,0,150,75)。

意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

路徑：

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

moveTo(x,y) 定義線條開始座標
lineTo(x,y) 定義線條結束座標

繪製線條我們必須使用到 “ink” 的方法，就像stroke().

實例:定義開始座標(0,0), 和結束座標 (200,100)。然後使用 stroke() 方法來繪製線條:

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

在canvas中繪製圓形

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

實際上我們在繪製圓形時使用了 “ink” 的方法, 比如 stroke() 或者 fill().

實例:使用 arc() 方法繪製一個圓:

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

文本

使用 canvas 繪製文本，重要的屬性和方法如下：

font - 定義字體
fillText(text,x,y) - 在 canvas 上繪製實心的文本
strokeText(text,x,y) - 在 canvas 上繪製空心的文本

使用 fillText():

實例:使用 “Arial” 字體在畫布上繪製一個高 30px 的文字（實心）：

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

使用 strokeText():

實例:使用 “Arial” 字體在畫布上繪製一個高 30px 的文字（空心）：

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

漸變

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

以下有兩種不同的方式來設置Canvas漸變：

createLinearGradient(x,y,x1,y1) - 創建線條漸變
createRadialGradient(x,y,r,x1,y1,r1) - 創建一個徑向/圓漸變

當我們使用漸變對象，必須使用兩種或兩種以上的停止顏色。

addColorStop()方法指定顏色停止，參數使用座標來描述，可以是0至1.

使用漸變，設置fillStyle或strokeStyle的值爲漸變，然後繪製形狀，如矩形，文本，或一條線。

使用 createLinearGradient():

實例:創建一個線性漸變。使用漸變填充矩形:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 創建漸變
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);

使用 createRadialGradient():

實例:創建一個徑向/圓漸變。使用漸變填充矩形：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 創建漸變
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);

把一幅圖像放置到畫布上, 使用以下方法:

drawImage(image,x,y)

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

HTML5 內聯 SVG

HTML5 支持內聯 SVG。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="130px" width="500px">
   <defs>
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1">
                <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1">
                </stop>
            </stop>
        </linearGradient>
   </defs>
   <ellipse cx="300" cy="70" rx="85" ry="55" fill="url(#grad1)">
        <text fill="#ffffff" font-size="45" font-family="Verdana" 
            x="250" y="86" 
            data-darkreader-inline-fill="" 
            style="--darkreader-inline-fill:#ffffff;">
            SVG
        </text>
        Sorry, your browser does not support inline SVG.
    </ellipse>
</svg>

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用於定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
SVG 是萬維網聯盟的標準

與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：

SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大

HTML5 中，您能夠將 SVG 元素直接嵌入 HTML 頁面中：

<!DOCTYPE html>
<html>
<body>
 
<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>
 
</body>
</html>

SVG 與 Canvas兩者間的區別：

SVG 是一種使用 XML 描述 2D 圖形的語言。

Canvas 通過 JavaScript 來繪製 2D 圖形。

SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Canvas 是逐像素進行渲染的。在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas 與 SVG 的比較

Canvas

依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用

HTML5 Canvas VS svg

Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Canvas

Canvas 通過 JavaScript 來繪製 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

HTML5 多媒體

Web 上的多媒體指的是音效、音樂、視頻和動畫。

現代網絡瀏覽器已支持很多多媒體格式。

多媒體元素（比如視頻和音頻）存儲於媒體文件中。

確定媒體類型的最常用的方法是查看文件擴展名。當瀏覽器得到文件擴展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。

多媒體元素元素也擁有帶有不同擴展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

MP4 格式是一種新的即將普及的因特網視頻格式。HTML5 、Flash 播放器以及優酷等視頻網站均支持它。

聲音格式

WAVE 是因特網上最受歡迎的無壓縮聲音格式，所有流行的瀏覽器都支持它。如果您需要未經壓縮的聲音（音樂或演講），那麼您應該使用 WAVE 格式。

MP3 是最新的壓縮錄製音樂格式。MP3 這個術語已經成爲數字音樂的代名詞。如果您的網址從事錄製音樂，那麼 MP3 是一個選項。

HTML5 Object元素

HTML 助手（插件）

輔助應用程序（helper application）是可由瀏覽器啓動的程序。輔助應用程序也稱爲插件。

輔助程序可用於播放音頻和視頻（以及其他）。輔助程序是使用標籤來加載的。

使用輔助程序播放視頻和音頻的一個優勢是，您能夠允許用戶來控制部分或全部播放設置。

大多數輔助應用程序允許對音量設置和播放功能（比如後退、暫停、停止和播放）的手工（或程序的）控制。

使用 QuickTime 來播放 Wave 音頻

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>

使用 QuickTime 來播放 MP4 視頻

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

使用 Flash 來播放 SWF 視頻

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

使用 Windows Media Player 來播放 WMV 影片

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
 height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

HTML5 Audio音頻

HTML5 提供了播放音頻文件的標準。

直到現在，仍然不存在一項旨在網頁上播放音頻的標準。

今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。

HTML5 規定了在網頁上嵌入音頻元素的標準，即使用元素。

瀏覽器支持

Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持元素.

注意: Internet Explorer 8 及更早IE版本不支持元素.

播放音頻：

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

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

在 <audio> 與 </audio> 之間你需要插入瀏覽器不支持的<audio>元素的提示文本。

<audio> 元素允許使用多個 <source> 元素. <source> 元素可以鏈接不同的音頻文件，瀏覽器將使用第一個支持的音頻文件

元素支持三種音頻格式文件: MP3, Wav, 和 Ogg

音頻格式的MIME類型

HTML5 Audio 標籤

HTML5 Video視頻

很多站點都會使用到視頻. HTML5 提供了展示視頻的標準。

直到現在，仍然不存在一項旨在網頁上顯示視頻的標準。

今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。

HTML5 規定了一種通過 video 元素來包含視頻的標準方法。

HTML5 中顯示視頻

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持Video標籤。
</video>

video元素提供了播放、暫停和音量控件來控制視頻。

同時 video 元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設置的高度和寬度，所需的視頻空間會在頁面加載時保留。如果沒有設置這些屬性，瀏覽器不知道大小的視頻，瀏覽器就不能再加載時保留特定的空間，頁面就會根據原始視頻的大小而改變。

<video> 與 </video> 標籤之間插入的內容是提供給不支持 video 元素的瀏覽器顯示的。

<video> 元素支持多個 <source> 元素. <source>元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：

元素支持三種視頻格式： MP4, WebM, 和 Ogg:

MP4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

視頻格式

HTML5 - 使用 DOM 進行控制

HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。

<video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進行控制.

其中的方法用於播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。

例中簡單的方法，向我們演示瞭如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。

爲視頻創建簡單的播放/暫停以及調整尺寸控件：

播放/暫停放大縮小普通

<div class="example_code notranslate">
  <br>
  <div style="text-align:center"> 
  <button onclick="playPause()">播放/暫停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">縮小</button>
  <button onclick="makeNormal()">普通</button>
  <br><br> 
  <video id="video1" width="480">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    你的瀏覽器不支持 HTML5 video.
  </video>
</div> 
<script> 
    var myVideo=document.getElementById("video1"); 
    function playPause(){ 
        if (myVideo.paused) 
            myVideo.play(); 
        else 
            myVideo.pause(); 
    } 
    function makeBig() { 
        myVideo.width=600; 
    } 
    function makeSmall(){ 
        myVideo.width=320; 
    } 
    function makeNormal(){ 
        myVideo.width=480; 
    } 
</script>

HTML5 Video 標籤

HTML5 新的input類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

本章全面介紹這些新的輸入類型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

color

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

從拾色器中選擇一個顏色:

選擇你喜歡的顏色: <input type="color" name="favcolor">

date

date 類型允許你從一個日期選擇器選擇一個日期。

定義一個時間控制器:

生日: <input type="date" name="bday">

datetime

datetime 類型允許你選擇一個日期（UTC 時間）。

定義一個日期和時間控制器（本地時間）:

生日 (日期和時間): <input type="datetime" name="bdaytime">

datetime-local

datetime-local 類型允許你選擇一個日期和時間 (無時區).

生日 (日期和時間): <input type="datetime-local" name="bdaytime">

email

email 類型用於應該包含 e-mail 地址的輸入域。

在提交表單時，會自動驗證 email 域的值是否合法有效:

E-mail: <input type="email" name="email">

month

month 類型允許你選擇一個月份。

定義月與年 (無時區):

生日 (月和年): <input type="month" name="bdaymonth">

number

number 類型用於應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定：

定義一個數值輸入域(限定):

數量 ( 1 到 5 之間 ): <input type="number" name="quantity" min="1" max="5">

使用下面的屬性來規定對數字類型的限定：

range

range 類型用於應該包含一定範圍內數字值的輸入域。

range 類型顯示爲滑動條。

定義一個不需要非常精確的數值（類似於滑塊控制）:

<input type="range" name="points" min="1" max="10">

請使用下面的屬性來規定對數字類型的限定：

max - 規定允許的最大值
min - 規定允許的最小值
step - 規定合法的數字間隔
value - 規定默認值

search

search 類型用於搜索域，比如站點搜索或 Google 搜索。

定義一個搜索字段 (類似站點搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

tel

定義輸入電話號碼字段:

電話號碼: <input type="tel" name="usrtel">

time

time 類型允許你選擇一個時間。

定義可輸入時間控制器（無時區）：

選擇時間: <input type="time" name="usr_time">

url

url 類型用於應該包含 URL 地址的輸入域。

在提交表單時，會自動驗證 url 域的值。

定義輸入URL字段:

添加您的主頁: <input type="url" name="homepage">

week

week 類型允許你選擇周和年。

定義周和年 (無時區):

選擇周: <input type="week" name="week_year">

HTML5 表單元素

HTML5 有以下新的表單元素:

<datalist>
<keygen>
<output>

< datalist> 元素規定輸入域的選項列表。

< datalist>屬性規定 form 或 input 域應該擁有自動完成功能。當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：

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

<input> 元素使用<datalist>預定義值:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

< keygen> 元素的作用是提供一種驗證用戶的可靠方法。

< keygen> 標籤規定用於表單的密鑰對生成器字段。

當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。

私鑰（private key）存儲於客戶端，

公鑰（public key）則被髮送到服務器。

公鑰可用於之後驗證用戶的客戶端證書（client certificate）。

帶有keygen字段的表單:

<form action="demo_keygen.asp" method="get">
用戶名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

元素用於不同類型的輸出，比如計算或腳本輸出：

將計算結果顯示在 <output> 元素:

<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> 標籤添加了幾個新屬性.

<form>新屬性：

autocomplete
novalidate

<input> 新屬性 ：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 與 width
list
min 與 max
multiple
pattern (regexp)
placeholder
required
step

autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。

當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項。

提示: autocomplete 屬性有可能在 form元素中是開啓的，而在input元素中是關閉的。

注意: autocomplete 適用於 <form> 標籤，以及以下類型的 <input> 標籤：text, search, url, telephone, email, password, datepickers, range 以及 color。

HTML form 中開啓 autocomplete (一個 input 字段關閉 autocomplete ):

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

novalidate 屬性是一個 boolean(布爾) 屬性.

novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。

無需驗證提交的表單數據

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

autofocus 屬性是一個 boolean 屬性.

autofocus 屬性規定在頁面加載時，域自動地獲得焦點。

讓 “First name” input 輸入域在頁面載入時自動聚焦：

first name:<input  type="text"  name="fname"  autofocus\>

form 屬性規定輸入域所屬的一個或多個表單。

提示:如需引用一個以上的表單，請使用空格分隔的列表。

位於form表單外的 input 字段引用了 HTML form (該 input 表單仍然屬於form表單的一部分):

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

The formaction 屬性用於描述表單提交的URL地址.

The formaction 屬性會覆蓋元素中的action屬性.

注意: The formaction 屬性用於 type=“submit” 和 type=“image”.

以下HTMLform表單包含了兩個不同地址的提交按鈕：

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

formenctype 屬性描述了表單提交到服務器的數據編碼 (只對form表單中 method=“post” 表單)

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

主要: 該屬性與 type=“submit” 和 type=“image” 配合使用。

第一個提交按鈕已默認編碼發送表單數據，第二個提交按鈕以 “multipart/form-data” 編碼格式發送表單數據:

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

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

formmethod 屬性覆蓋了元素的 method 屬性。

注意: 該屬性可以與 type=“submit” 和 type=“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>

novalidate 屬性是一個 boolean 屬性.

novalidate屬性描述了元素在表單提交時無需被驗證。

formnovalidate 屬性會覆蓋元素的novalidate屬性.

注意: formnovalidate 屬性與type=“submit一起使用

兩個提交按鈕的表單(使用與不適用驗證 ):

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

formtarget 屬性指定一個名稱或一個關鍵字來指明表單提交數據接收後的展示。

The formtarget 屬性覆蓋

元素的target屬性.

注意: formtarget 屬性與type=“submit” 和 type=“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="提交到一個新的頁面上">
</form>

height 和 width 屬性規定用於 image 類型的標籤的圖像高度和寬度。

注意: height 和 width 屬性只適用於 image 類型的標籤。

提示:圖像通常會同時指定高度和寬度屬性。如果圖像設置高度和寬度，圖像所需的空間在加載頁時會被保留。如果沒有這些屬性，瀏覽器不知道圖像的大小，並不能預留適當的空間。圖片在加載過程中會使頁面佈局效果改變（儘管圖片已加載）。

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。

在 <datalist> 中預定義 <input> 值:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

min、max 和 step 屬性用於爲包含數字或日期的 input 類型規定限定（約束）。

注意: min、max 和 step 屬性適用於以下類型的標籤：date pickers、number 以及 range。

<input> 元素最小值與最大值設置:

nter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

multiple 屬性是一個 boolean 屬性.

multiple 屬性規定元素中可選擇多個值。

注意: multiple 屬性適用於以下類型的標籤：email 和 file:

上傳多個文件:

Select images: <input type="file" name="img" multiple>

pattern 屬性描述了一個正則表達式用於驗證元素的值。

注意:pattern 屬性適用於以下類型的標籤: text, search, url, tel, email, 和 password.

提示： 是用來全局 title 屬性描述了模式.

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

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

簡短的提示在用戶輸入值前會顯示在輸入域上。

注意: placeholder 屬性適用於以下類型的標籤：text, search, url, telephone, email 以及 password。

input 字段提示文本:

<input type="text" name="fname" placeholder="First name">

required 屬性是一個 boolean 屬性.

required 屬性規定必須在提交之前填寫輸入域（不能爲空）。

注意:required 屬性適用於以下類型的標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

不能爲空的input字段:

Username: <input type="text" name="usrname" required>

step 屬性爲輸入域規定合法的數字間隔。

如果 step=“3”，則合法的數是 -3,0,3,6 等

提示： step 屬性可以與 max 和 min 屬性創建一個區域值.

注意: step 屬性與以下type類型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

規定input step步長爲3:

<input type="number" name="points" step="3">

HTML5 地理定位

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

HTML5 Geolocation API 用於獲得用戶的地理位置。

鑑於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。

請使用 getCurrentPosition() 方法來獲得用戶的位置。

下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度:

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;

getCurrentPosition() 方法的第二個參數用於處理錯誤。它規定當獲取用戶位置失敗時運行的函數：

function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="用戶拒絕對獲取地理位置的請求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="請求用戶地理位置超時。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知錯誤。"
            break;
    }
}

如需在地圖中顯示結果，您需要訪問可使用經緯度的地圖服務，比如谷歌地圖或百度地圖：

function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。

watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一臺精確的 GPS 設備來測試該例（比如 iPhone）：

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>經度: " + position.coords.longitude; 
}

HTML5 拖放

拖放（Drag 和 drop）是 HTML5 標準的組成部分。

拖放是一種常見的特性，即抓取對象以後拖到另一個位置。

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>孫叫獸的博客</title>
        <style type="text/css">
            #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        <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>
    
    <p>拖動圖片到矩形框中:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">
    </body>
</html>

首先，爲了使元素可拖動，把 draggable 屬性設置爲 true ：

<img draggable="true">

然後，規定當元素被拖動時，會發生什麼。

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。

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

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

ondragover 事件規定在何處放置被拖動的數據。

默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。

這要通過調用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

當放置被拖數據時，會發生 drop 事件。

在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：

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

調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行爲是以鏈接形式打開）
通過 dataTransfer.getData(“Text”) 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置爲相同類型的任何數據。
被拖數據是被拖元素的 id (“drag1”)
把被拖元素追加到放置元素（目標元素）中

HTML5 Web存儲

HTML5 web 存儲,一個比cookie更好的本地存儲方式。

使用HTML5可以在本地存儲用戶的瀏覽數據。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用於用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.

數據以鍵/值對存在, web網頁的數據只允許該網頁訪問使用。

客戶端存儲數據的兩個對象爲：

localStorage - 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
sessionStorage - 用於臨時保存同一窗口(或標籤頁)的數據，在關閉窗口或標籤頁之後將會刪除這些數據。

在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

localStorage 對象存儲的數據沒有時間限制。第二天、第二週或下一年之後，數據依然可用。

localStorage.sitename="孫叫獸的博客";
document.getElementById("result").innerHTML="網站名：" + localStorage.sitename;

使用 key=“sitename” 和 value=“阿西河前端教程(www.axihe.com)” 創建一個 localStorage 鍵/值對。
檢索鍵值爲”sitename” 的值然後將數據插入 id=“result”的元素中。

以上實例也可以這麼寫：

// 存儲
localStorage.sitename = "阿西河前端教程";
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;

移除 localStorage 中的 “sitename” :

localStorage.removeItem("sitename");

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage爲例）：

保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);

提示: 鍵/值對通常以字符串存儲，你可以按自己的需要轉換該格式。

下面的實例展示了用戶點擊按鈕的次數。

代碼中的字符串值轉換爲數字類型:

if (localStorage.clickcount){
    localStorage.clickcount=Number(localStorage.clickcount)+1;
}else{
    localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已經點擊了按鈕 " + 
    localStorage.clickcount + " 次 ";

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

如何創建並訪問一個 sessionStorage：

if (sessionStorage.clickcount){
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}else{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在這個會話中你已經點擊了該按鈕 " + 
    sessionStorage.clickcount + " 次 ";

網站列表程序實現以下功能：

可以輸入網站名，網址，以網站名作爲key存入localStorage；
根據網站名，查找網址；
列出當前已保存的所有網站；

以下代碼用於保存於查找數據：

save() 與 find() 方法

//保存數據  
function save(){  
    var siteurl = document.getElementById("siteurl").value;  
    var sitename = document.getElementById("sitename").value;  
    localStorage.setItem(sitename, siteurl);
    alert("添加成功");
}
//查找數據  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var sitename = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");  
    find_result.innerHTML = search_site + "的網址是：" + sitename;  
}

完整示例：

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">     
    <label for="sitename">網站名(key)：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
    <br/>  
    <label for="siteurl">網 址(value)：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
    <br/>  
    <input type="button" onclick="save()" value="新增記錄"/>  
    <hr/>  
    <label for="search_site">輸入網站名：</label>  
    <input type="text" id="search_site" name="search_site"/>  
    <input type="button" onclick="find()" value="查找網站"/>  
    <p id="find_result"><br/></p>  
</div>

接下來我們將使用 JSON.stringify 來存儲對象數據，JSON.stringify 可以將對象轉換爲字符串。

var  site = new  Object;
... 
var  str = JSON.stringify(site); // 將對象轉換爲字符串

之後我們使用 JSON.parse 方法將字符串轉換爲 JSON 對象：

var site = JSON.parse(str);

//保存數據  
function save(){  
    var site = new Object;
    site.keyname = document.getElementById("keyname").value;
    site.sitename = document.getElementById("sitename").value;  
    site.siteurl = document.getElementById("siteurl").value;
    var str = JSON.stringify(site); // 將對象轉換爲字符串
    localStorage.setItem(site.keyname,str);  
    alert("保存成功");
}  
//查找數據  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var str = localStorage.getItem(search_site);  
    var find_result = document.getElementById("find_result");
    var site = JSON.parse(str);  
    find_result.innerHTML = search_site + "的網站名是：" + site.sitename + "，
    網址是：" + site.siteurl;  
}

完整示例

<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
    <label for="keyname">別名(key):</label>  
    <input type="text" id="keyname" name="keyname" class="text"/>  
    <br/>  
    <label for="sitename">網站名：</label>  
    <input type="text" id="sitename" name="sitename" class="text"/>  
    <br/>  
    <label for="siteurl">網 址：</label>  
    <input type="text" id="siteurl" name="siteurl"/>  
    <br/>  
    <input type="button" onclick="save()" value="新增記錄"/>  
    <hr/>  
    <label for="search_site">輸入別名(key)：</label>  
    <input type="text" id="search_site" name="search_site"/>  
    <input type="button" onclick="find()" value="查找網站"/>  
    <p id="find_result"><br/></p>  
</div>

loadAll 輸出了所有存儲的數據，你需要確保 localStorage 存儲的數據都爲 JSON 格式，否則 JSON.parse(str) 將會報錯。

HTML5 應用程序緩存

使用 HTML5，通過創建 cache manifest 文件，可以輕鬆地創建 web 應用的離線版本。

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。

應用程序緩存爲應用帶來三個優勢：

離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
文檔內容......
</body>
</html>

如需啓用應用程序緩存，請在文檔的標籤中包含 manifest 屬性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性，則頁面不會被緩存（除非在 manifest 文件中直接指定了該頁面）。

manifest 文件的建議的文件擴展名是：”.appcache”。

請注意，manifest 文件需要配置正確的 MIME-type，即 “text/cache-manifest”。必須在 web 服務器上進行配置。

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。

manifest 文件可分爲三個部分：

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）

1.第一行，CACHE MANIFEST，是必需的：

CACHE MANIFEST  
/theme.css  
/logo.gif  
/main.js

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。然後，無論用戶何時與因特網斷開連接，這些資源依然是可用的。

2.下面的 NETWORK 小節規定文件 “login.php” 永遠不會被緩存，且離線時是不可用的：

NETWORK:  
login.php

可以使用星號來指示所有其他資源/文件都需要因特網連接：

NETWORK:  
\*

3.下面的 FALLBACK 小節規定如果無法建立因特網連接，則用 “offline.html” 替代 /html5/ 目錄中的所有文件：

FALLBACK:  
/html/ /offline.html

注意: 第一個 URI 是資源，第二個是替補。

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列情況：

用戶清空瀏覽器緩存
manifest 文件被修改（參閱下面的提示）
由程序來更新應用緩存

實例 - 完整的 Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html

請留心緩存的內容。

一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。爲了確保瀏覽器更新緩存，您需要更新 manifest 文件。

HTML5 websocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站爲了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然後由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。

瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以後，客戶端和服務器端就可以通過 TCP 連接直接交換數據。

當你獲取 Web Socket 連接後，你可以通過 send() 方法來向服務器發送數據，並通過 onmessage 事件來接收服務器返回的數據。

以下 API 用於創建 WebSocket 對象。

var Socket = new WebSocket(url, [protocol] );

第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議

屬性：

事件：

方法：

WebSocket 協議本質上是一個基於 TCP 的協議。

爲了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然後產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，並且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。

目前大部分瀏覽器支持 WebSocket() 接口，你可以在以下瀏覽器中嘗試實例： Chrome, Mozilla, Opera 和 Safari。

sunjiaoshou_websocket.html 文件內容

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>孫叫獸的博客</title>
      <script type="text/javascript">
         function WebSocketTest(){
            if ("WebSocket" in window){
               alert("您的瀏覽器支持 WebSocket!");
               // 打開一個 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
               ws.onopen = function(){
                  // Web Socket 已連接上，使用 send() 方法發送數據
                  ws.send("發送數據");
                  alert("數據發送中...");
               };
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("數據已接收...");
               };
               ws.onclose = function(){ 
                  // 關閉 websocket
                  alert("連接已關閉..."); 
               };
            }else{
               // 瀏覽器不支持 WebSocket
               alert("您的瀏覽器不支持 WebSocket!");
            }
         }
      </script>
   </head>
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">運行 WebSocket</a>
      </div>
   </body>
</html>

安裝 pywebsocket

在執行以上程序前，我們需要創建一個支持 WebSocket 的服務。從 pywebsocket 下載 mod_pywebsocket ,或者使用 git 命令下載：

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 環境支持

mod_pywebsocket 是一個 Apache HTTP 的 Web Socket擴展，安裝步驟如下：

解壓下載的文件。
進入 pywebsocket 目錄。
執行命令：

$ python setup.py build
$ sudo python setup.py install

查看文檔說明:

$ pydoc mod_pywebsocket

開啓服務

在 pywebsocket/mod_pywebsocket 目錄下執行以下命令：

$ sudo python standalone.py -p 9998 -w ../example/

以上命令會開啓一個端口號爲 9998 的服務，使用 -w 來設置處理程序 echo_wsh.py 所在的目錄。

現在我們可以在 Chrome 瀏覽器打開前面創建的 sunjiaoshou_websocket.html 文件。如果你的瀏覽器支持 WebSocket(), 點擊”運行 WebSocket”，你就可以看到整個流程各個步驟彈出的窗口，

流程 Gif 演示：

在我們停止服務後，會彈出 “連接已關閉…“

HTML5 服務器發送事件

HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。

Server-Sent 事件 - 單向消息傳遞

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

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

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

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 事件支持

if(typeof(EventSource)!=="undefined"){
    // 瀏覽器支持 Server-Sent
    // 一些代碼.....
}else{
    // 瀏覽器不支持 Server-Sent..
}

服務器端代碼實例

爲了讓上面的例子可以運行，您還需要能夠發送數據更新的服務器（比如 PHP 和 ASP）。

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

<?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: " & now())
Response.Flush()
%>

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

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

HTML5教程（學完html的，這個可以快速過一遍）

SVG

Canvas

color

search

一文教你全方位揭祕Ajax指南

程序員跳槽指南

前端開發華爲鴻蒙系統應用 OpenHarmony JS

前端vue在可視化大屏領域的工作實踐

談一談Java的前生今世

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結