1秒登錄
<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
<b>
</b>
Web 瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內容：
例子解釋
<html> 與 </html> 之間的文本描述網頁 <body> 與 </body> 之間的文本是可見的頁面內容 <h1> 與 </h1> 之間的文本被顯示為標題 <p> 與 </p> 之間的文本被顯示為段落
HTML 標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。
<h1>
<h6>
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>
HTML 段落是通過 <p> 標簽進行定義的。
<p>
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 鏈接是通過 <a> 標簽進行定義的。
<a>
<a href="http://www.w3school.com.cn">This is a link</a>
注釋：在 href 屬性中指定鏈接的地址，href是Hypertext Reference的縮寫。
HTML 圖像是通過 <img> 標簽進行定義的。
<img>
<img src="w3school.jpg" width="104" height="142" />
注釋：圖像的名稱和尺寸是以屬性的形式提供的。
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。
注釋：開始標簽常被稱為開放標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。
HTML 文檔實例
<html> <body> <p>This is my first paragraph.</p> </body> </html>
上面的例子包含三個 HTML 元素
<p>This is my first paragraph.</p>
<p> 元素： 這個 <p> 元素定義了 HTML 文檔中的一個段落。 這個元素擁有一個開始標簽 <p>，以及一個結束標簽 </p>。 元素內容是：This is my first paragraph。
</p>
<body> <p>This is my first paragraph.</p> </body>
<body> 元素： <body> 元素定義了 HTML 文檔的主體。 這個元素擁有一個開始標簽 <body>，以及一個結束標簽 </body>。 元素內容是另一個 HTML 元素（p 元素）。
<body>
</body>
<html> 元素： <html> <body> <p>This is my first paragraph.</p> </body> </html>
<html> 元素定義了整個 HTML 文檔。 這個元素擁有一個開始標簽 <html>，以及一個結束標簽</html>。 元素內容是另一個 HTML 元素（body 元素）。
<html>
</html>
即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：
<p>This is a paragraph <p>This is a paragraph
上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
注釋：未來的 HTML 版本不允許省略結束標簽。
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。 <br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。 在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。 在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。 即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
<br>
<br />
HTML 標簽對大小寫不敏感：<P> 等同於 <p>。許多網站都使用大寫的 HTML 標簽。
<P>
屬性為 HTML 元素提供附加信息。
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：
<html> <body> <h1 align="center">This is heading 1</h1> <p>上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。上面的標題在頁面中進行了居中排列。</p> </body> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body bgcolor="yellow"> <h2>請看: 改變了顏色的背景。</h2> </body> </html>
HTML 提示：使用小寫屬性，屬性和屬性值對大小寫不敏感。
始終為屬性值加引號
name='Bill "HelloWorld" Gates'
完整的 HTML 參考手冊
HTML 標准屬性參考手冊
在 HTML 文檔中，標題很重要。
標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。 <h1> 定義最大的標題。<h6> 定義最小的標題。
<h1> - <h6>
注釋：瀏覽器會自動地在標題的前后添加空行。 注釋：默認情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標題元素前后。
標題很重要
請確保將 HTML heading 標簽只用於標題。不要僅僅是為了產生粗體或大號的文本而使用標題。 搜索引擎使用標題為您的網頁的結構和內容編制索引。 因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。 應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。
<hr />
hr
提示：使用水平線 (<hr> 標簽) 來分隔文章中的小節是一個辦法（但並不是唯一的辦法）。
<hr>
<!-- This is a comment -->
注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。
右鍵 --> “查看源文件”（IE）||“查看頁面源代碼”（Firefox）|| 檢查元素（Safari）
<p>This is a paragraph</p> <p>This is another paragraph</p>
注釋：瀏覽器會自動地在段落的前后添加空行。（<p> 是塊級元素） 提示：使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用 <br /> 標簽代替它！但是不要用 <br /> 標簽去創建列表
<p></p>
<p>This is a paragraph <p>This is another paragraph
上面的例子在大多數瀏覽器中都沒問題，但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。
注釋：在未來的 HTML 版本中，不允許省略結束標簽。 提示：通過結束標簽來關閉 HTML 是一種經得起未來考驗的 HTML 編寫方法。清楚地標記某個元素在何處開始，並在何處結束，不論對您還是對瀏覽器來說，都會使代碼更容易理解。
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標簽：
<p>This is<br />a para<br />graph with line breaks</p> <br /> 元素是一個空的 HTML 元素。由於關閉標簽沒有任何意義，因此它沒有結束標簽。 您也許發現 <br> 與 <br /> 很相似。 在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標簽（閉合標簽）的 HTML 元素。 即使 <br> 在所有瀏覽器中的顯示都沒有問題，使用 <br /> 也是更長遠的保障。
我們無法確定 HTML 被顯示的確切效果。屏幕的大小，以及對窗口的調整都可能導致不同的結果。 對於 HTML，您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果。
當顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML 代碼中的所有連續的空行（換行）也被顯示為一個空格。
<html> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html>
<html> <body> <pre> 這是 預格式文本。 它保留了 空格 和換行。 </pre> <p>pre 標簽很適合顯示計算機代碼：</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html>
<html> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注釋：</b>這些標簽常用於顯示計算機/編程代碼。 </p> </body> </html>
<!DOCTYPE html> <html> <body> <address> Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html>
<html> <body> <abbr title="etcetera">etc.</abbr> <br /> <acronym title="World Wide Web">WWW</acronym> <p>在某些瀏覽器中，當您把鼠標移至縮略詞語上時，title 可用於展示表達的完整版本。</p> <p>僅對於 IE 5 中的 acronym 元素有效。</p> <p>對於 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> </body> </html>
<html> <body> <p> 如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)； </p> <bdo dir="rtl"> Here is some Hebrew text </bdo> </body> </html>
<html> <body> 這是長的引用： <blockquote> 這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。 </blockquote> 這是短的引用： <q> 這是短的引用。 </q> <p> 使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。 </p> </body> </html>
<html> <body> <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p> <p>大多數瀏覽器會改寫為刪除文本和下划線文本。</p> <p>一些老式的瀏覽器會把刪除文本和下划線文本顯示為普通文本。</p> </body> </html>
文本格式化標簽
計算機輸出”標簽
引用、引用和術語定義
可以使用專業的 HTML 編輯器來編輯 HTML：
不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法。 通過記事本，依照以下四步來創建您的第一張網頁。
當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名
通過使用 HTML4.0，所有的格式化代碼均可移出 HTML 文檔，然后移入一個獨立的樣式表。
本例演示如何使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
<head>
<html> <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head> <body> <h1>header 1</h1> <p>A paragraph.</p> </body> </html>
本例演示如何使用樣式屬性做一個沒有下划線的鏈接。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> </head> <body> <a href="www.baidu.com" style="text-decoration:none"> 這是一個鏈接！ </a> </body> </html>
本例演示如何<link>標簽鏈接到一個外部樣式表。
<link>
<html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通過外部樣式表進行格式化。</h1> <p>我也一樣！</p> </body> </html>
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下三種方式來插入樣式表：
1.外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2.內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。
<style>
<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
3.內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px"> This is a paragraph </p>
HTML 使用超級鏈接與網絡上的另一個文檔相連。 幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。 當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。 我們通過使用 <a> 標簽在 HTML 中創建鏈接。 有兩種使用 <a> 標簽的方式： 1.通過使用 href 屬性 - 創建指向另一個文檔的鏈接 2.通過使用 name 屬性 - 創建文檔內的書簽
鏈接的 HTML 代碼很簡單。它類似這樣：
<a href="url">Link text</a>
<a href="http://www.w3school.com.cn/">Visit W3School</a>
上面這行代碼顯示為：Visit W3School 點擊這個超鏈接會把用戶帶到 W3School 的首頁。
提示："鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
使用 Target 屬性，你可以定義被鏈接的文檔在何處顯示。 下面的這行會在新窗口打開文檔：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name 屬性規定錨（anchor）的名稱。 您可以使用 name 屬性創建 HTML 頁面中的書簽。 書簽不會以任何特殊方式顯示，它對讀者是不可見的。 當使用命名錨（named anchors）時，我們可以創建直接跳至該命名錨（比如頁面中某個小節）的鏈接，這樣使用者就無需不停地滾動頁面來尋找他們需要的信息了。
命名錨的語法：
<a name="label">錨（顯示在頁面上的文本）</a>
提示：錨的名稱可以是任何你喜歡的名字。 提示：您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。
實例
1.首先，我們在 HTML 文檔中對錨進行命名（創建一個書簽）：
<a name="tips">基本的注意事項 - 有用的提示</a>
2.然后，我們在同一個文檔中創建指向該錨的鏈接：
<a href="#tips">有用的提示</a>
3.您也可以在其他頁面中創建指向該錨的鏈接：
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代碼中，我們將 # 符號和錨名稱添加到 URL 的末端，就可以直接鏈接到 tips 這個命名錨了。
有用的提示
具體效果就是點擊“有用的提示”跳轉到相應位置，如同書簽
注釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.w3school.com.cn/html" ,就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href="http://www.w3school.com.cn/html/" 提示：命名錨經常用於在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。 提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發生。
注釋：請始終將正斜杠添加到子文件夾。假如這樣書寫鏈接：href="http://www.w3school.com.cn/html" ,就會向服務器產生兩次 HTTP 請求。這是因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href="http://www.w3school.com.cn/html/"
提示：命名錨經常用於在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。
提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發生。
<html> <body> <p> <p><a href="http://www.baidu.com/">打開百度</a> 百度</p> </body> </html>
<html> <body> <p> 您也可以使用圖像來作鏈接： <a href="http://scimg.jb51.net/allimg/160518/14-16051Q51020515.jpg"> <img border="0" src="http://scimg.jb51.net/allimg/160518/14-16051PZ1525c.jpg" /> </a> </p> </body> </html>
<html> <body> <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a> <p>如果把鏈接的 target 屬性設置為 "_blank"，該鏈接會在新窗口中打開。 </p> </body> </html>
<html> <body> <p>被鎖在框架中了嗎？</p> <a href="/index.html" target="_top">請點擊這里！</a> </body> </html>
<html> <body> <p> 這是另一個 mailto 鏈接： <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">發送郵件！</a> </p> <p> <b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。 </p> </body> </html> <html> <body> <p> 這是郵件鏈接： <a href="mailto:someone@microsoft.com?subject=Hello%20again">發送郵件</a> </p> <p> <b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文本了。 </p> </body> </html>
src
在 HTML 中，圖像由 <img> 標簽定義。 <img> 是空標簽，意思是說，它只包含屬性，並且沒有閉合標簽。 要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 "source"。源屬性的值是圖像的 URL 地址。 定義圖像的語法是：
<img src="url" />
alt
<img src="boat.gif" alt="Big Boat">
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助於更好的顯示信息，並且對於那些使用純文本瀏覽器的人來說是非常有用的。
假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
<!DOCTYPE HTML> <html> <body> <p> 一幅圖像： <img src="/i/eg_mouse.jpg" width="128" height="128" /> </p> <p> 一幅動畫圖像： <img src="/i/eg_cute.gif" width="50" height="50" /> </p> <p>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。</p> </body> </html>
來自另一個文件夾的圖像： <img src="/i/ct_netscape.jpg" /> 來自 W3School.com.cn 的圖像： <img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
<html> <body background="/i/eg_background.jpg"> <h3>圖像背景</h3> <p>gif 和 jpg 文件均可用作 HTML 背景。</p> <p>如果圖像小於頁面，圖像會進行重復。</p> </body> </html>
<html> <body> <h2>未設置對齊方式的圖像：</h2> <p>圖像 <img src ="/i/eg_cute.gif"> 在文本中</p> <h2>已設置對齊方式的圖像：</h2> <p>圖像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p> <p>圖像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p> <p>請注意，bottom 對齊方式是默認的對齊方式。</p> </body> </html>
<html> <body> <p> <img src ="/i/eg_cute.gif" align ="left"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "left"。圖像將浮動到文本的左側。 </p> <p> <img src ="/i/eg_cute.gif" align ="right"> 帶有圖像的一個段落。圖像的 align 屬性設置為 "right"。圖像將浮動到文本的右側。 </p> </body> </html>
<img src="/i/eg_mouse.jpg" width="50" height="50">
- 為圖片顯示替換文本 ```html <p>僅支持文本的瀏覽器無法顯示圖像，僅僅能夠顯示在圖像的 "alt" 屬性中指定的文本。在這里，"alt" 的文本是“向左轉”。</p> <p>請注意，如果您把鼠標指針移動到圖像上，大多數瀏覽器會顯示 "alt" 文本。</p> <img src="/i/eg_goleft.gif" alt="向左轉" /> <p>如果無法顯示圖像，將顯示 "alt" 屬性中的文本：</p>
<html> <body> <p>請點擊圖像上的星球，把它們放大。</p> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據瀏覽器），所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p> </body> </html>
<!DOCTYPE html> <html> <body> <p>請把鼠標移動到圖像上，看一下狀態欄的坐標如何變化。</p> <a href="/example/html/html_ismap.html"> <img src="/i/eg_planets.jpg" ismap /> </a> </body> </html>
你可以使用 HTML 創建表格。
<table border="1"><th>說明</th><tr><tr> 表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
<table border="1"><th>說明</th><tr><tr>
<table>
<tr>
<td>
td
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。 使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
表格的表頭使用 <th>標簽進行定義。 大多數瀏覽器會把表頭顯示為粗體居中的文本：
<th>
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
在一些瀏覽器中，沒有內容的表格單元顯示得不太好。如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td></td> <td>row 2, cell 2</td> </tr> </table>
注意：這個空的單元格的邊框沒有被顯示出來。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td> </td> <td>row 2, cell 2</td> </tr> </table>
<h4>這個表格沒有邊框：</h4> <table> /* 或則是這句<table border="0"> */ <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table>
<html> <body> <h4>表頭：</h4> <table border="1"> <tr> <th>姓名</th> <th>電話</th> <th>電話</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>垂直的表頭：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th>電話</th> <td>555 77 854</td> </tr> <tr> <th>電話</th> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> <p>正如您看到的，其中一個單元沒有邊框。這是因為它是空的。在該單元中插入一個空格后，仍然沒有邊框。</p> <p>我們的技巧是在單元中插入一個 no-breaking 空格。</p> <p>no-breaking 空格是一個字符實體。如果您不清楚什么是字符實體，請閱讀關於字符實體的章節。</p> <p>no-breaking 空格由和號開始 ("&")，然后是字符"nbsp"，並以分號結尾(";")。</p> </body> </html>
<html> <body> <h4>這個表格有一個標題，以及粗邊框：</h4> <table border="6"> <caption>我的標題</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body>
<html> <body> <h4>橫跨兩列的單元格：</h4> <table border="1"> <tr> <th>姓名</th> <th colspan="2">電話</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>橫跨兩行的單元格：</h4> <table border="1"> <tr> <th>姓名</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">電話</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
<html> <body> <table border="1"> <tr> <td> <p>這是一個段落。</p> <p>這是另一個段落。</p> </td> <td>這個單元包含一個表格： <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>這個單元包含一個列表： <ul> <li>蘋果</li> <li>香蕉</li> <li>菠蘿</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
<html> <body> <h4>沒有 cellpadding：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellpadding：</h4> <table border="1" cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
<html> <body> <h4>沒有 cellspacing：</h4> <table border="1"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>帶有 cellspacing：</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>
<h4>背景顏色：</h4> <table border="1" bgcolor="red"> <h4>背景圖像：</h4> <table border="1" background="/i/eg_bg_07.gif">
<td bgcolor="red">First</td> <td background="/i/eg_bg_07.gif"> Second</td>
<html> <body> <table width="400" border="1"> <tr> <th align="left">消費項目....</th> <th align="right">一月</th> <th align="right">二月</th> </tr> <tr> <td align="left">衣服</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">化妝品</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">食物</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">總計</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>
<html> <body> <p><b>注釋：</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
表格標簽
HTML 支持有序、無序和定義列表
無序列表始於 <ul> 標簽。每個列表項始於 <li>。
<ul>
<li>
<ul> <li>Coffee</li> <li>Milk</li> </ul>
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表始於 <ol> 標簽。每個列表項始於 <li> 標簽。
<ol>
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。 自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>
<dd>
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
列表標簽
<ol> 定義有序列表。 <ul> 定義無序列表。 <li> 定義列表項。 <dl> 定義定義列表。 <dt> 定義定義項目。 <dd> 定義定義的描述。 <dir> 已廢棄。使用 <ul> 代替它。 <menu> 已廢棄。使用 <ul> 代替它。
<table border="1"><th>舉例</th><tr><tr>
<ul type="disc"> 實心黑點 <ul type="circle"> 圓圈 <ul type="square">實心方塊
<ol></ol> 數字列表 <ol type="A"> 字母列表 <ol type="a"> 小寫字母 <ol type="I"> 羅馬字母 <ol type="i"> 小寫羅馬
<h4>一個嵌套列表：</h4> <ul> <li>咖啡</li> <li>茶 <ul> <li>紅茶</li> <li>綠茶 <ul> <li>中國茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul>
<h2>一個定義列表：</h2> <dl> <dt>計算機</dt> <dd>用來計算的儀器 ... ...</dd> <dt>顯示器</dt> <dd>以視覺方式顯示信息的裝置 ... ...</dd> </dl>
<div>
<span>
可以通過<div>和 <span> 將 HTML 元素組合起來。
大多數 HTML 元素被定義為塊級元素或內聯元素。 編者注：“塊級元素”譯為 block level element，“內聯元素”譯為 inline element。 塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。 例子：<h1>, <p>, <ul>, <table>
內聯元素在顯示時通常不會以新行開始。 例子：<b>, <td>, <a>, <img>
HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。 <div> 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前后顯示折行。 如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。 <div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
HTML <span> 元素是內聯元素，可用作文本的容器。 <span> 元素也沒有特定的含義。 當與 CSS 一同使用時，<span> 元素可用於為部分文本設置樣式屬性。
標簽 描述 <div> 定義文檔中的分區或節（division/section）。 <span> 定義 span，用來組合文檔中的行內元素。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height:200px;width:150px;float:left;} div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;} div#footer {background-color:#99bbbb;clear:both;text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0;font-size:18px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>
<!DOCTYPE html> <html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#99bbbb;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#ffff99;width:100px;text-align:top;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript </td> <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> Content goes here</td> </tr> <tr> <td colspan="2" style="background-color:#99bbbb;text-align:center;"> Copyright W3School.com.cn</td> </tr> </table> </body> </html>
提示：使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易於維護。通過編輯單一的文件，就可以改變所有頁面的布局。 提示：由於創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，並優化它們）。
HTML 布局標簽
<form>
<form> ... input 元素 ... </form>
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：
<input>
<form> First name: <input type="text" name="firstname" /> <br /> Last name: <input type="text" name="lastname" /> </form>
注意，表單本身並不可見。同時，在大多數瀏覽器中，文本域的缺省寬度是20個字符。
<form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form>
注意，只能從中選取其一。
<form> <input type="checkbox" name="bike" /> I have a bike <br /> <input type="checkbox" name="car" /> I have a car </form>
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.asp" 的頁面。該頁面將顯示出輸入的結果。
<html> <body> <form> 用戶： <input type="text" name="user"> <br /> 密碼： <input type="password" name="password"> </form> <p> 請注意，當您在密碼域中鍵入字符時，瀏覽器將使用項目符號來代替這些字符。 </p> </body> </html>
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
<html> <body> <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>
<html> <body> <p> This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea. </p> <textarea rows="10" cols="30"> The cat was playing in the garden.
<input type="button" value="Hello world!">
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，並且每個框架都獨立於其他的框架。 使用框架的壞處：
框架結構標簽（）
編者注：frameset 標簽也被某些文章和書籍譯為框架集。
Frame 標簽定義了放置在每個框架中的 HTML 文檔。
在下面的這個例子中，我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器窗口的 25%。第二列被設置為占據瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置於第一個列中，而 HTML 文檔 "frame_b.htm" 被置於第二個列中：
<frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> </frameset>
假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 標簽中加入：noresize="noresize"。 為不支持框架的瀏覽器添加 <noframes> 標簽。
<noframes>
重要提示：不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標簽，就必須將這段文字嵌套於 <body></body>標簽內。（在下面的第一個實例中，可以查看它是如何實現的。）
<body></body>
<frameset></frameset>
<html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的瀏覽器無法處理框架！</body> </noframes> </frameset> </html>
<html> <frameset rows="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </html>
<html> <frameset rows="50%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="25%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> </frameset> </html>
<html> <frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /> </frameset> </html>
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html"> <frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
<html> <body> <iframe src="/i/eg_landscape.jpg"></iframe> <p>一些老的瀏覽器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可見的。</p> </body> </html>
<iframe src="URL"></iframe>
URL 指向隔離頁面的位置。
height 和 width 屬性用於規定 iframe 的高度和寬度。 屬性值的默認單位是像素，但也可以用百分比來設定（比如 "80%"）。
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性規定是否顯示 iframe 周圍的邊框。
設置屬性值為 "0" 就可以移除邊框：
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
iframe 可用作鏈接的目標（target）。
鏈接的 target 屬性必須引用 iframe 的 name 屬性：
<iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
背景（Backgrounds）
<body> 擁有兩個配置背景的標簽。背景可以是顏色或者圖像。
背景顏色（Bgcolor）
背景顏色屬性將背景設置為某種顏色。屬性值可以是十六進制數、RGB 值或顏色名。
黑色 <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
背景（Background）
背景屬性將背景設置為圖像。屬性值為圖像的URL。如果圖像尺寸小於瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制
<body background="clouds.gif"> <body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相對地址，如第一行代碼。也可以使絕對地址，如第二行代碼。
提示：如果你打算使用背景圖片，你需要緊記一下幾點：
<body> 標簽中的背景顏色（bgcolor）、背景（background）和文本（text）屬性在最新的 HTML 標准（HTML4 和 XHTML）中已被廢棄。W3C 在他們的推薦標准中已刪除這些屬性。 應該使用層疊樣式表（CSS）來定義 HTML 元素的布局和顯示屬性。
顏色由紅色、綠色、藍色混合而成。
顏色值
顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。 每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。 這個表格給出了由三種顏色混合而成的具體效果：
顏色名
大多數的瀏覽器都支持顏色名集合。
提示：僅僅有 16 種顏色名被 W3C 的 HTML4.0 標准所支持。它們是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的顏色，需要使用十六進制的顏色值。
Web安全色
數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標准被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。 我們不確定如今這么做的意義有多大，因為越來越多的計算機有能力處理數百萬種顏色，不過做選擇還是你自己。
216 跨平台色
最初，216 跨平台 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。
顏色名和文字搭配對比
<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網頁。
<!DOCTYPE> 聲明
Web 世界中存在許多不同的文檔。只有了解文檔的類型，瀏覽器才能正確地顯示文檔。 HTML 也有多個不同的版本，只有完全明白頁面中使用的確切 HTML 版本，瀏覽器才能完全正確地顯示出 HTML 頁面。這就是 <!DOCTYPE> 的用處。 <!DOCTYPE> 不是 HTML 標簽。它為瀏覽器提供一項信息（聲明），即 HTML 是用什么版本編寫的。 提示：W3School 即將升級為最新的 HTML5 文檔類型。
帶有 HTML5 DOCTYPE 的 HTML 文檔：
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>
HTML 版本
從 Web 誕生早期至今，已經發展出多個 HTML 版本：
HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
常用的聲明
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。 以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
HTML <title> 元素
<title>
<title> 標簽定義文檔的標題
HTML <base>元素
<base>
<link> 標簽定義文檔與外部資源之間的關系。 <link> 標簽最常用於連接樣式表： <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
HTML <style> 元素
<style> 標簽用於為 HTML 文檔定義樣式信息。 您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式： <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
HTML <meta> 元素
<meta>
元數據（metadata）是關於數據的信息。 <meta> 標簽提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對於機器是可讀的。 典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。 <meta> 標簽始終位於 head 元素中。 元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。 針對搜索引擎的關鍵詞 一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。 下面的 meta 元素定義頁面的描述： <meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> 下面的 meta 元素定義頁面的關鍵詞： <meta name="keywords" content="HTML, CSS, XML" /> name 和 content 屬性的作用是描述頁面的內容。
HTML <script> 元素
<script>
<script> 標簽用於定義客戶端腳本，比如 JavaScript。 我們會在稍后的章節講解 script 元素。
HTML 頭部元素
標簽 描述 <head> 定義關於文檔的信息。 <title> 定義文檔標題。 <base> 定義頁面上所有鏈接的默認地址或默認目標。 <link> 定義文檔與外部資源之間的關系。 <meta> 定義關於 HTML 文檔的元數據。 <script> 定義客戶端腳本。 <style> 定義文檔的樣式信息。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> </head> <body> <p> 對不起。我們已經搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a> </p> <p>您將在 5 秒內被重定向到新的地址。</p> <p>如果超過 5 秒后您仍然看到本消息，請點擊上面的鏈接。</p> </body> </html>
JavaScript 使 HTML 頁面具有更強的動態和交互性。。
HTML script 元素
<script> 標簽用於定義客戶端腳本，比如 JavaScript。 script 元素既可包含腳本語句，也可通過 src 屬性指向外部腳本文件。 必需的 type 屬性規定腳本的 MIME 類型。 JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。 下面的腳本會向瀏覽器輸出“Hello World!”： <script type="text/javascript"> document.write("Hello World!") </script>
<noscript> 標簽
<noscript>
<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。 noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。 只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 noscript 元素中的內容： <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript>
如何應付老式的瀏覽器
如果瀏覽器壓根沒法識別 <script> 標簽，那么 <script> 標簽所包含的內容將以文本方式顯示在頁面上。為了避免這種情況發生，你應該將腳本隱藏在注釋標簽當中。那些老的瀏覽器（無法識別 <script> 標簽的瀏覽器）將忽略這些注釋，所以不會將標簽的內容顯示到頁面上。而那些新的瀏覽器將讀懂這些腳本並執行它們，即使代碼被嵌套在注釋標簽內。 實例 JavaScript: <script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script>
標簽 描述 <script> 定義客戶端腳本。 <noscript> 為不支持客戶端腳本的瀏覽器定義替代內容。
<html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script> </body> </html>
<!DOCTYPE html> <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> <noscript>Sorry, your browser does not support JavaScript!</noscript> <p>不支持 JavaScript 的瀏覽器將顯示 noscript 元素中的文本。</p> </body> </html>
HTML 實體
&entity_name; 或者 &#entity_number; 如需顯示小於號，我們必須這樣寫：< 或 <
提示：使用實體名而不是數字的好處是，名稱易於記憶。不過壞處是，瀏覽器也許並不支持所有實體名稱（對實體數字的支持卻很好）。
不間斷空格（non-breaking space）
HTML 中的常用字符實體是不間斷空格( )。 瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用 字符實體。
HTML 實例示例
<!DOCTYPE html> <html> <body> <h2>字符實體</h2> <p>&X;</p> <p>用實體數字（比如"#174"）或者實體名稱（比如 "pound"）替代 "X"，然后查看結果。</p> </body> </html>
HTML 中有用的字符實體
注釋：實體名稱對大小寫敏感！
顯示結果 描述 實體名稱 實體編號 空格   < 小於號 < < > 大於號 > > & 和號 & & " 引號 " " ' 撇號 ' (IE不支持) ' ￠ 分 ¢ ¢ £ 鎊 £ £ ¥ 日圓 ¥ ¥ € 歐元 € € § 小節 § § © 版權 © © ® 注冊商標 ® ® ™ 商標 ™ ™ × 乘號 × × ÷ 除號 ÷ ÷
HTML 實體符號參考手冊
http://www.w3school.com.cn/html/index.asp
scheme://host.domain:port/path/filename
遵守以下的語法規則
解釋：
以下是其中一些最流行的 scheme：
Scheme 訪問 用於... http 超文本傳輸協議 以 http:// 開頭的普通網頁。不加密。 https 安全超文本傳輸協議 安全網頁。加密所有信息交換。 ftp 文件傳輸協議 用於將文件下載或上傳至網站。 file 您計算機上的文件。
如果希望向世界發布您的網站，那么您必須把它存放在 web 服務器上。
在自己的服務器上托管網站始終是一個選項。有幾點需要考慮：
從 ISP 租用服務器也很常見。 大多數小公司會把網站存放到由 ISP 提供的服務器上。其優勢有以下幾點：
選取一家 ISP 之前，請務必閱讀 W3School 的 Web 主機教程。
Web 上的多媒體指的是音效、音樂、視頻和動畫。現代網絡瀏覽器已支持很多多媒體格式。
多媒體來自多種不同的格式。它可以是您聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。
在因特網上，您會經常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。
在本教程中，您將了解到不同的多媒體格式，以及如何在您的網頁中使用它們。
第一款因特網瀏覽器只支持文本，而且即使是對文本的支持也僅限於單一字體和單一顏色。隨后誕生了支持顏色、字體和文本樣式的瀏覽器，圖片支持也被加入。
不同的瀏覽器以不同的方式處理對音效、動畫和視頻的支持。某些元素能夠以內聯的方式處理，而某些則需要額外的插件。 您將在下面的章節學習更多有關插件的知識。
多媒體元素（比如視頻和音頻）存儲於媒體文件中。
確定媒體類型的最常用的方法是查看文件擴展名。當瀏覽器得到文件擴展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表。圖片格式則通過 .gif 或 .jpg 來識別。
多媒體元素元素也擁有帶有不同擴展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。
MP4 格式是一種新的即將普及的因特網視頻格式。HTML5 、Flash 播放器以及優酷等視頻網站均支持它。
WAVE 是因特網上最受歡迎的無壓縮聲音格式，所有流行的瀏覽器都支持它。如果您需要未經壓縮的聲音（音樂或演講），那么您應該使用 WAVE 格式。 MP3 是最新的壓縮錄制音樂格式。MP3 這個術語已經成為數字音樂的代名詞。如果您的網址從事錄制音樂，那么 MP3 是一個選項。
<object>
輔助應用程序（helper application）是可由瀏覽器啟動的程序。輔助應用程序也稱為插件。
輔助程序可用於播放音頻和視頻（以及其他）。輔助程序是使用 <object> 標簽來加載的。
使用輔助程序播放視頻和音頻的一個優勢是，您能夠允許用戶來控制部分或全部播放設置。
大多數輔助應用程序允許對音量設置和播放功能（比如后退、暫停、停止和播放）的手工（或程序的）控制。
如需了解在 HTML 中包含音視頻的最好方法，請參閱下一章節。
<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>
<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>
<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 媒體文件的推薦代碼：
<object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSI D: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>
在 HTML 中播放聲音的方法有很多種。
在 HTML 中播放音頻並不容易！ 您需要諳熟大量技巧，以確保您的音頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。
瀏覽器插件是一種擴展瀏覽器標准功能的小型計算機程序。 插件有很多用途：播放音樂、顯示地圖、驗證銀行賬號，控制輸入等等。 可使用 <object> 或 <embed> 標簽來將插件添加到 HTML 頁面。 這些標簽定義資源（通常非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。
<embed>
<embed> 標簽定義外部（非 HTML）內容的容器。（這是一個 HTML5 標簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。 下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：
<embed height="100" width="100" src="song.mp3" />
問題：
注釋：使用 <!DOCTYPE html> (HTML5) 解決驗證問題。
<object tag> 標簽也可以定義外部（非 HTML）內容的容器。 下面的代碼片段能夠顯示嵌入網頁中的 MP3 文件：
<object tag>
<object height="100" width="100" data="song.mp3">
<audio>
<audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。
<audio controls="controls"> <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio format. </audio>
上面的例子使用了一個 mp3 文件，這樣它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
為了使這段音頻在 Firefox 和 Opera 中同樣有效，添加了一個 ogg 類型的文件。如果失敗，會顯示錯誤消息。
<audio controls="controls" height="100" width="100"> <source src="song.mp3" type="audio/mp3" /> <source src="song.ogg" type="audio/ogg" /> <embed height="100" width="100" src="song.mp3" /> </audio>
上面的例子使用了兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。
向網頁添加音頻的最簡單的方法是什么？ 雅虎的媒體播放器絕對算其中之一。 使用雅虎媒體播放器是一個不同的途徑。您只需簡單地讓雅虎來完成歌曲播放的工作就好了。 它能播放 mp3 以及一系列其他格式。通過一行簡單的代碼，您就可以把它添加到網頁中，輕松地將 HTML 頁面轉變為專業的播放列表。
<a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script> 親自試一試 使用雅虎播放器是免費的。如需使用它，您需要把這段 JavaScript 插入網頁底部： <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> 然后只需簡單地把 MP3 文件鏈接到您的 HTML 中，JavaScript 會自動地為每首歌創建播放按鈕： <a href="song1.mp3">Play Song 1</a> <a href="song2.mp3">Play Song 2</a>
雅虎媒體播放器為您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。
請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。
如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用“輔助應用程序”來播放文件。
以下代碼片段顯示指向 mp3 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動“輔助應用程序”來播放該文件：
<a href="song.mp3">Play the sound</a>
當您在網頁中包含聲音，或者作為網頁的組成部分時，它被稱為內聯聲音。 如果您打算在 web 應用程序中使用內聯聲音，您需要意識到很多人都覺得內聯聲音令人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。
我們最好的建議是只在用戶希望聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶需要聽到錄音並點擊某個鏈接時，會打開頁面然后播放錄音。
HTML 4.01 多媒體標簽
標簽 描述 <applet> 不贊成。定義內嵌 applet。 <embed> HTML4 中不贊成，HTML5 中允許。定義內嵌對象。 <object> 定義內嵌對象。 <param> 定義對象的參數。
HTML 5 多媒體標簽
標簽 描述 <audio> 標簽定義聲音，比如音樂或其他音頻流。 <embed> 標簽定義嵌入的內容，比如插件。
在 HTML 中播放視頻的方法有很多種。
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>
在 HTML 中播放視頻並不容易！ 您需要諳熟大量技巧，以確保您的視頻文件在所有瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能夠播放。
標簽的作用是在 HTML 頁面中嵌入多媒體元素。
下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：
<embed src="movie.swf" height="200" width="200"/>
問題
HTML4 無法識別 <embed> 標簽。您的頁面無法通過驗證。 如果瀏覽器不支持 Flash，那么視頻將無法播放 iPad 和 iPhone 不能顯示 Flash 視頻。 如果您將視頻轉換為其他格式，那么它仍然不能在所有瀏覽器中播放。
標簽的作用是在 HTML 頁面中嵌入多媒體元素。 下面的 HTML 片段顯示嵌入網頁的一段 Flash 視頻： <object data="movie.swf" height="200" width="200"/> 問題 如果瀏覽器不支持 Flash，將無法播放視頻。 iPad 和 iPhone 不能顯示 Flash 視頻。 如果您將視頻轉換為其他格式，那么它仍然不能在所有瀏覽器中播放。 使用 <video> 標簽 <video> 是 HTML 5 中的新標簽。 <video> 標簽的作用是在 HTML 頁面中嵌入視頻元素。 以下 HTML 片段會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻： <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> 您必須把視頻轉換為很多不同的格式。 <video> 元素在老式瀏覽器中無效。 <video> 元素無法通過 HTML 4 和 XHTML 驗證。 最好的 HTML 解決方法 HTML 5 + <object> + <embed> <video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video> 上例中使用了 4 中不同的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。 問題 您必須把視頻轉換為很多不同的格式 <video> 元素無法通過 HTML 4 和 XHTML 驗證。 <embed> 元素無法通過 HTML 4 和 XHTML 驗證。 注釋：使用 (HTML5) 解決驗證問題。 優酷解決方案 在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。 如果您希望在網頁中播放視頻，那么您可以把視頻上傳到優酷等視頻網站，然后在您的網頁中插入 HTML 代碼即可播放視頻：``` ```html <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed> 使用超鏈接 如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用“輔助應用程序”來播放文件。 以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動“輔助應用程序”，比如 Windows Media Player 來播放這個 AVI 文件： <a href="movie.swf">Play a video file</a> 關於內聯視頻的一段注釋 當視頻被包含在網頁中時，它被稱為內聯視頻。 如果您打算在 web 應用程序中使用內聯視頻，您需要意識到很多人都覺得內聯視頻令人惱火。 同時請注意，用戶可能已經關閉了瀏覽器中的內聯視頻選項。 我們最好的建議是只在用戶希望看到內聯視頻的地方包含它們。一個正面的例子是，在用戶需要看到視頻並點擊某個鏈接時，會打開頁面然后播放視頻。 HTML 4.01 多媒體標簽 標簽 描述 <applet> 不贊成。定義內嵌 applet。 <embed> 不贊成。定義內嵌對象。（HTML5 中允許） <object> 定義內嵌對象。 <param> 定義對象的參數。 HTML 5 多媒體標簽 標簽 描述 <video> 標簽定義聲音，比如音樂或其他音頻流。 <embed> 標簽定義嵌入的內容，比如插件。 HTML 5 教程 HTML5 簡介 HTML5 是下一代的 HTML。 什么是 HTML5？ HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標准。 HTML 的上一個版本誕生於 1999 年。自從那以后，Web 世界已經經歷了巨變。 HTML5 仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C 與 WHATWG 合作的結果。 編者注：W3C 指 World Wide Web Consortium，萬維網聯盟。 編者注：WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力於 web 表單和應用程序，而 W3C 專注於 XHTML 2.0。在 2006 年，雙方決定進行合作，來創建一個新版本的 HTML。 為 HTML5 建立的一些規則： 新特性應該基於 HTML、CSS、DOM 以及 JavaScript。 減少對外部插件的需求（比如 Flash） 更優秀的錯誤處理 更多取代腳本的標記 HTML5 應該獨立於設備 開發進程應對公眾透明 新特性 HTML5 中的一些有趣的新特性： 用於繪畫的 canvas 元素 用於媒介回放的 video 和 audio 元素 對本地離線存儲的更好的支持 新的特殊內容元素，比如 article、footer、header、nav、section 新的表單控件，比如 calendar、date、time、email、url、search 瀏覽器支持 最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。 HTML5 視頻 許多時髦的網站都提供視頻。HTML5 提供了展示視頻的標准。 Web 上的視頻 直到現在，仍然不存在一項旨在網頁上顯示視頻的標准。 今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。 HTML5 規定了一種通過 video 元素來包含視頻的標准方法。 視頻格式 當前，video 元素支持三種視頻格式： Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件 如何工作 如需在 HTML5 中顯示視頻，您所有需要的是： <video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls"> </video> control 屬性供添加播放、暫停和音量控件。 包含寬度和高度屬性也是不錯的主意。 <video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的： <video src="http://www.w3school.com.cn/i/movie.mp4" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> 上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。 要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。 video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式： <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Internet Explorer Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。 <video> 標簽的屬性 HTML 5 Video + DOM HTML5 <video> - 使用 DOM 進行控制 HTML5 <video> 元素同樣擁有方法、屬性和事件。 其中的方法用於播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。 下例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。 <!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暫停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> 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> </body> </html> HTML5 <video> - 方法、屬性以及事件 下面列出了大多數瀏覽器支持的視頻方法、屬性和事件： 方法 屬性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width 注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。 HTML 5 音頻 Web 上的音頻 直到現在，仍然不存在一項旨在網頁上播放音頻的標准。 今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。 HTML5 規定了一種通過 audio 元素來包含音頻的標准方法。 audio 元素能夠播放聲音文件或者音頻流。 音頻格式 當前，audio 元素支持三種音頻格式： 如何工作 如需在 HTML5 中播放音頻，您所有需要的是： <audio src="song.ogg" controls="controls"> </audio> control 屬性供添加播放、暫停和音量控件。 <audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：``` ```html <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio> 上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。 要確保適用於 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。 audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式： <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio> Internet Explorer **Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。 ** <audio>標簽的屬性 HTML 拖放 拖放（Drag 和 drop）是 HTML5 標准的組成部分。 拖放 拖放是一種常見的特性，即抓取對象以后拖到另一個位置。 在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。 瀏覽器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注釋：在 Safari 5.1.2 中不支持拖放。 HTML5 拖放實例 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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> 它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。 ** 設置元素為可拖放** 1.首先，為了使元素可拖動，把 draggable 屬性設置為 true ： <img draggable="true" /> 拖動什么 - ondragstart 和 setData() 2.然后，規定當元素被拖動時，會發生什么。 在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。 dataTransfer.setData() 方法設置被拖數據的數據類型和值： function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } 在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。 放到何處 - ondragover 3.ondragover 事件規定在何處放置被拖動的數據。 默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 這要通過調用 ondragover 事件的 event.preventDefault() 方法： event.preventDefault()``` **進行放置 - ondrop** 4.當放置被拖數據時，會發生 drop 事件。 > 在上面的例子中，ondrop 屬性調用了一個函數，drop(event)： ```html 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") 把被拖元素追加到放置元素（目標元素）中 來回拖放圖片 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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)"> <img src="http://pic.qqtn.com/file/2012/2012-12/2012122114312932657.gif" draggable="true" ondragstart="drag(evnt)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html> HTML5 畫布 canvas 元素用於在網頁上繪制圖形。 什么是 Canvas？ HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。 畫布是一個矩形區域，您可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。 創建 Canvas 元素 向 HTML5 頁面添加 canvas 元素。 規定元素的 id、寬度和高度： <canvas id="myCanvas" width="200" height="100"></canvas> 通過 JavaScript 來繪制 canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成： <script type="text/javascript"> 1.JavaScript 使用 id 來尋找 canvas 元素： var c=document.getElementById("myCanvas"); 2.然后，創建 context 對象： 2.1 getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法 var cxt=c.getContext("2d"); 3.下面的兩行代碼繪制一個紅色的矩形： 3.1 fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> 理解坐標 上面的 fillRect 方法擁有參數 (0,0,150,75)。 意思是：在畫布上繪制 150x75 的矩形，從左上角開始 (0,0)。 畫布的 X 和 Y 坐標用於在畫布上對繪畫進行定位。 把鼠標懸停在下面的矩形上可以看到坐標 <!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body style="margin:0px;"> <p>把鼠標懸停在下面的矩形上可以看到坐標：</p> <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> <br /> <br /> <div id="xycoordinates"></div> </body> </html> 實線 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html> 圓形 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html> 漸變 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html> 圖像 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="http://t2.27270.com/uploads/tu/mx/180/2.jpg" cxt.drawImage(img,0,0); </script> </body> </html> HTML5 SVG HTML5 內聯 SVG 什么是SVG？ SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用於定義用於網絡的基於矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失 SVG 是萬維網聯盟的標准 SVG 的優勢 與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於： SVG 圖像可通過文本編輯器來創建和修改 SVG 圖像可被搜索、索引、腳本化或壓縮 SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印 SVG 可在圖像質量不下降的情況下被放大 瀏覽器支持 Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 SVG。 把 SVG 直接嵌入 HTML 頁面 在 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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg> </body> </html> HTML5 Canvas vs SVG Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。 SVG SVG 是一種使用 XML 描述 2D 圖形的語言。 SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以為某個元素附加 JavaScript 事件處理器。 在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。 Canvas Canvas 通過 JavaScript 來繪制 2D 圖形。 Canvas 是逐像素進行渲染的。 在 canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。 Canvas 與 SVG 的比較不同之處 Canvas 依賴分辨率 不支持事件處理器 弱的文本渲染能力 能夠以 .png 或 .jpg 格式保存結果圖像 最適合圖像密集型的游戲，其中的許多對象會被頻繁重繪 SVG 不依賴分辨率 支持事件處理器 最適合帶有大型渲染區域的應用程序（比如谷歌地圖） 復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快） 不適合游戲應用 HTML5 地理定位 HTML5 Geolocation（地理定位）用於定位用戶的位置。 定位用戶的位置 HTML5 Geolocation API 用於獲得用戶的地理位置。 鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。 瀏覽器支持 Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。 注釋：對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確。 HTML5 - 使用地理定位 請使用 getCurrentPosition() 方法來獲得用戶的位置。 下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。 <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> 例子解釋： 檢測是否支持地理定位 如果支持，則運行 getCurrentPosition() 方法。如果不支持，則向用戶顯示一段消息。 如果getCurrentPosition()運行成功，則向參數showPosition中規定的函數返回一個coordinates對象 showPosition() 函數獲得並顯示經度和緯度 上面的例子是一個非常基礎的地理定位腳本，不含錯誤處理。 處理錯誤和拒絕 function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }``` 舉例 ```html <!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的坐標：</p> <button onclick="getLocation()">試一下</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 錯誤代碼： Permission denied - 用戶不允許地理定位 Position unavailable - 無法獲取當前位置 Timeout - 操作超時 在地圖中顯示結果 如需在地圖中顯示結果，您需要訪問可使用經緯度的地圖服務，比如谷歌地圖或百度地圖： 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+"' />"; }``` **舉例** ```html <!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的位置：</p> <button onclick="getLocation()">試一下</button> <div id="mapholder"></div> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } 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+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 在上例中，我們使用返回的經緯度數據在谷歌地圖中顯示位置（使用靜態圖像）。 谷歌地圖腳本 <!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的位置：</p> <button onclick="getLocation()">試一下</button> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html> 給定位置的信息 本頁演示的是如何在地圖上顯示用戶的位置。不過，地理定位對於給定位置的信息同樣很有用處。 案例： 更新本地信息 顯示用戶周圍的興趣點 交互式車載導航系統 (GPS) getCurrentPosition() 方法 - 返回數據 若成功，則 getCurrentPosition() 方法返回對象。始終會返回 latitude、longitude 以及 accuracy 屬性。如果可用，則會返回其他下面的屬性。 屬性 描述 coords.latitude 十進制數的緯度 coords.longitude 十進制數的經度 coords.accuracy 位置精度 coords.altitude 海拔，海平面以上以米計 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向，從正北開始以度計 coords.speed 速度，以米/每秒計 Geolocation 對象 - 其他有趣的方法 watchPosition() - 返回用戶的當前位置，並繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。 clearWatch() - 停止 watchPosition() 方法 下面的例子展示 watchPosition() 方法。您需要一台精確的 GPS 設備來測試該例（比如 iPhone）： <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script> HTML 5 Web 存儲 在客戶端存儲數據 HTML5 提供了兩種在客戶端存儲數據的新方法： localStorage - 沒有時間限制的數據存儲 sessionStorage - 針對一個 session 的數據存儲 之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。 對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。 HTML5 使用 JavaScript 來存儲和訪問數據。 localStorage 方法 localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。 如何創建和訪問 localStorage： <script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script> 下面的例子對用戶訪問頁面的次數進行計數： <script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script> sessionStorage 方法 sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。 如何創建並訪問一個 sessionStorage： <script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script> 下面的例子對用戶在當前 session 中訪問頁面的次數進行計數： <script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script> HTML 5 應用程序緩存 **使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。 ** 什么是應用程序緩存（Application Cache）？ HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。 應用程序緩存為應用帶來三個優勢： 離線瀏覽 - 用戶可在應用離線時使用它們 速度 - 已緩存資源加載得更快 減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。 瀏覽器支持 所有主流瀏覽器均支持應用程序緩存，除了 Internet Explorer。 HTML5 Cache Manifest 實例 下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）： <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> 例子 <!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> <body> <script type="text/javascript" src="/example/html5/demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">獲得日期和事件</button></p> <p><img src="/i/w3school_banner.gif" /></p> <p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，然后脫機瀏覽，重新加載頁面。頁面中的腳本和圖像依然可用。</p> </body> </html> Cache Manifest 基礎 如需啟用應用程序緩存，請在文檔的 <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 頁面） CACHE MANIFEST 第一行，CACHE MANIFEST，是必需的： CACHE MANIFEST /theme.css /logo.gif /main.js 上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載后，瀏覽器會從網站的根目錄下載這三個文件。然后，無論用戶何時與因特網斷開連接，這些資源依然是可用的。 NETWORK 下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的： NETWORK: login.asp 可以使用星號來指示所有其他資源/文件都需要因特網連接： NETWORK: * FALLBACK 下面的 FALLBACK 小節規定如果無法建立因特網連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件： FALLBACK: /html5/ /404.html 注釋：第一個 URI 是資源，第二個是替補。 更新緩存 一旦應用被緩存，它就會保持緩存直到發生下列情況： 用戶清空瀏覽器緩存 manifest 文件被修改（參閱下面的提示） 由程序來更新應用緩存 實例 - 完整的 Manifest 文件 CACHE MANIFEST ## 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: 重要的提示：以 "#" 開頭的是注釋行，但也可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。 關於應用程序緩存的注釋 一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。為了確保瀏覽器更新緩存，您需要更新 manifest 文件。 注釋：瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）。 HTML5 Web Workers web worker 是運行在后台的 JavaScript，不會影響頁面的性能。 什么是 Web Worker？ 當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。 web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。 瀏覽器支持 所有主流瀏覽器均支持 web worker，除了 Internet Explorer。 HTML5 Web Workers 實例 下面的例子創建了一個簡單的 web worker，在后台計數： 計數： <!DOCTYPE html> <html> <body> <p>計數: <output id="result"></output></p> <button onclick="startWorker()">開始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html> A.檢測 Web Worker 支持 在創建 web worker 之前，請檢測用戶的瀏覽器是否支持它： if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. } B. **創建 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 資源的任務。 C.創建 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 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。 D.終止 Web Worker 當我們創建 web worker 對象后，它會繼續監聽消息（即使在外部腳本完成之后）直到其被終止為止。 如需終止 web worker，並釋放瀏覽器/計算機資源，請使用terminate() 方法： w.terminate(); **完整的 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, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html> Web Workers 和 DOM 由於 web worker 位於外部文件中，它們無法訪問下例 JavaScript 對象： window 對象 document 對象 parent 對象 HTML 5 服務器發送事件 HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。 Server-Sent 事件 - 單向消息傳遞 Server-Sent 事件指的是網頁自動獲取來自服務器的更新。 以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。 例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。 瀏覽器支持 所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。 接收 Server-Sent 事件通知 EventSource 對象用於接收服務器發送事件通知： var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; };``` ```html <!DOCTYPE html> <html> <body> <h1>獲得服務器更新</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script> </body> </html> 例子解釋： 創建一個新的 EventSource 對象，然后規定發送更新的頁面的 URL（本例中是 "demo_sse.php"） 每接收到一次更新，就會發生 onmessage 事件 當 onmessage 事件發生時，把已接收的數據推入 id 為 "result" 的元素中 檢測 Server-Sent 事件支持 在上面的 TIY 實例中，我們編寫了一段額外的代碼來檢測服務器發送事件的瀏覽器支持情況： if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. } 服務器端代碼實例 為了讓上面的例子可以運行，您還需要能夠發送數據更新的服務器（比如 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: " & now()) Response.Flush() %> 代碼解釋： 把報頭 "Content-Type" 設置為 "text/event-stream" 規定不對頁面進行緩存 輸出發送日期（始終以 "data: " 開頭） 向網頁刷新輸出數據 HTML5 表單 HTML5 輸入類型 HTML5 新的 Input 類型 HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。 本章全面介紹這些新的輸入類型： email url number range Date pickers (date, month, week, time, datetime, datetime-local) search color 瀏覽器支持 注釋：Opera 對新的輸入類型的支持最好。不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文本域。 Input 類型 - email email 類型用於應該包含 e-mail 地址的輸入域。 在提交表單時，會自動驗證 email 域的值。 E-mail: <input type="email" name="user_email" /> 提示：iPhone 中的 Safari 瀏覽器支持 email 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項）。 Input 類型 - url url 類型用於應該包含 URL 地址的輸入域。 在提交表單時，會自動驗證 url 域的值。 Homepage: <input type="url" name="user_url" /> 提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 .com 選項）。 Input 類型 - number number 類型用於應該包含數值的輸入域。 您還能夠設定對所接受的數字的限定： Points: <input type="number" name="points" min="1" max="10" /> 請使用下面的屬性來規定對數字類型的限定： 屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值 提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，並通過改變觸摸屏鍵盤來配合它（顯示數字）。 Input 類型 - range range 類型用於應該包含一定范圍內數字值的輸入域。 range 類型顯示為滑動條。 您還能夠設定對所接受的數字的限定： <input type="range" name="points" min="1" max="10" /> 請使用下面的屬性來規定對數字類型的限定： 屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值 Input 類型 - Date Pickers（日期選擇器） HTML5 擁有多個可供選取日期和時間的新輸入類型： date - 選取日、月、年 month - 選取月、年 week - 選取周和年 time - 選取時間（小時和分鍾） datetime - 選取時間、日、月、年（UTC 時間） datetime-local - 選取時間、日、月、年（本地時間） Date: <input type="date" name="user_date" /> Date: <input type="date" name="user_date" /> 輸入類型 "month": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Month: <input type="month" name="user_date" /> <input type="submit" /> </form> </body> </html> 輸入類型 "week": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Week: <input type="week" name="user_date" /> <input type="submit" /> </form> </body> </html> 輸入類型 "time": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Time: <input type="time" name="user_date" /> <input type="submit" /> </form> </body> </html> 輸入類型 "datetime": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime" name="user_date" /> <input type="submit" /> </form> </body> </html> 輸入類型 "datetime-local": <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime-local" name="user_date" /> <input type="submit" /> </form> </body> </html> Input 類型 - search search 類型用於搜索域，比如站點搜索或 Google 搜索。 search 域顯示為常規的文本域。 HTML5 表單元素 HTML5 的新的表單元素： HTML5 擁有若干涉及表單的元素和屬性。 本章介紹以下新的表單元素： datalist keygen output 瀏覽器支持 Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No datalist 元素 datalist 元素規定輸入域的選項列表。 列表是通過 datalist 內的 option 元素創建的。 如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id： <!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> </body> </html> 提示：option 元素永遠都要設置 value 屬性。 keygen 元素 keygen 元素的作用是提供一種驗證用戶的可靠方法。 keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。 私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到服務器。公鑰可用於之后驗證用戶的客戶端證書（client certificate）。 目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標准。 <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> output 元素 output 元素用於不同類型的輸出，比如計算或腳本輸出： <output id="result" onforminput="resCalc()"></output> 簡易計算器 <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的簡易計算器：</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html> HTML5 表單屬性 HTML5 的新的表單屬性 本章講解涉及 <form> 和 <input> 元素的新屬性。 新的 form 屬性： autocomplete novalidate 新的 input 屬性： autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple pattern (regexp) placeholder required 瀏覽器支持 autocomplete 屬性 autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。 注釋：autocomplete 適用於 <form> 標簽，以及以下類型的 <input>標簽：text, search, url, telephone, email, password, datepickers, range 以及 color。 當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項： <form action="demo_form.asp" method="get" 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> 注釋：在某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。 autofocus 屬性 autofocus 屬性規定在頁面加載時，域自動地獲得焦點。 注釋：autofocus 屬性適用於所有 標簽的類型。 User name: <input type="text" name="user_name" autofocus="autofocus" /> form 屬性 form 屬性規定輸入域所屬的一個或多個表單。 注釋：form 屬性適用於所有 <input> 標簽的類型。 form 屬性必須引用所屬表單的 id： <form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" /> 注釋：如需引用一個以上的表單，請使用空格分隔的列表。 表單重寫屬性 表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。 表單重寫屬性有： formaction - 重寫表單的 action 屬性 formenctype - 重寫表單的 enctype 屬性 formmethod - 重寫表單的 method 屬性 formnovalidate - 重寫表單的 novalidate 屬性 formtarget - 重寫表單的 target 屬性 注釋：表單重寫屬性適用於以下類型的 標簽：submit 和 image。 <form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form> height 和 width 屬性 height 和 width 屬性規定用於 image 類型的 input 標簽的圖像高度和寬度。 注釋：height 和 width 屬性只適用於 image 類型的 標簽。 <input type="image" src="img_submit.gif" width="99" height="99" /> list 屬性 list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。 注釋：list 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email, date pickers, number, range 以及 color。 Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> min、max 和 step 屬性 min、max 和 step 屬性用於為包含數字或日期的 input 類型規定限定（約束）。 max 屬性規定輸入域所允許的最大值。 min 屬性規定輸入域所允許的最小值。 step 屬性為輸入域規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）。 注釋：min、max 和 step 屬性適用於以下類型的 <input> 標簽：date pickers、number 以及 range。 下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）： Points: <input type="number" name="points" min="0" max="10" step="3" /> multiple 屬性 multiple 屬性規定輸入域中可選擇多個值。 注釋：multiple 屬性適用於以下類型的 <input> 標簽：email 和 file。 Select images: <input type="file" name="img" multiple="multiple" /> novalidate 屬性 novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。 注釋：novalidate 屬性適用於 <form> 以及以下類型的 <input> 標簽：text, search, url, telephone, email, password, date pickers, range 以及 color. <form action="demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> pattern 屬性 pattern 屬性規定用於驗證 input 域的模式（pattern）。 模式（pattern） 是正則表達式。您可以在 JavaScript 中學習到有關正則表達式的內容。 注釋：pattern 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email 以及 password。 下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）： Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" /> placeholder 屬性 placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。 注釋：placeholder 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email 以及 password。 提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失： <input type="search" name="user_search" placeholder="Search W3School" /> required 屬性 required 屬性規定必須在提交之前填寫輸入域（不能為空）。 注釋：required 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 Name: <input type="text" name="usr_name" required="required" /> HTML 參考手冊 標簽列表（字母排序） 標簽列表（功能排序） HTML 屬性 HTML 事件 HTML 視頻/音頻 HTML 畫布 HTML 文檔類型 HTML 顏色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符號 HTML URL 編碼 HTML 語言代碼 HTML 消息 HTML5 參考手冊 標簽列表（字母排序） 標簽列表（功能排序） HTML 屬性 HTML 事件 HTML 視頻/音頻 HTML 畫布 HTML 文檔類型 HTML 顏色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符號 HTML URL 編碼 HTML 語言代碼 HTTP 消息 HTTP 方法 posted @ 2019-08-27 12:07 superxjhw 閱讀( 384) 評論( 0) 編輯 收藏 刷新評論 刷新頁面 返回頂部
<object data="movie.swf" height="200" width="200"/>
如果瀏覽器不支持 Flash，將無法播放視頻。 iPad 和 iPhone 不能顯示 Flash 視頻。 如果您將視頻轉換為其他格式，那么它仍然不能在所有瀏覽器中播放。
<video>
<video> 是 HTML 5 中的新標簽。 <video> 標簽的作用是在 HTML 頁面中嵌入視頻元素。 以下 HTML 片段會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻：
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video>
您必須把視頻轉換為很多不同的格式。 <video> 元素在老式瀏覽器中無效。 <video> 元素無法通過 HTML 4 和 XHTML 驗證。
HTML 5 + <object> + <embed>
上例中使用了 4 中不同的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp4、ogg 或 webm 格式中的一種來播放視頻。如果均失敗，則回退到 <embed> 元素。
您必須把視頻轉換為很多不同的格式 <video> 元素無法通過 HTML 4 和 XHTML 驗證。 <embed> 元素無法通過 HTML 4 和 XHTML 驗證。
注釋：使用 (HTML5) 解決驗證問題。
在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。 如果您希望在網頁中播放視頻，那么您可以把視頻上傳到優酷等視頻網站，然后在您的網頁中插入 HTML 代碼即可播放視頻：``` ```html <embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" width="480" height="400" type="application/x-shockwave-flash"> </embed>
如果網頁包含指向媒體文件的超鏈接，大多數瀏覽器會使用“輔助應用程序”來播放文件。 以下代碼片段顯示指向 AVI 文件的鏈接。如果用戶點擊該鏈接，瀏覽器會啟動“輔助應用程序”，比如 Windows Media Player 來播放這個 AVI 文件：
<a href="movie.swf">Play a video file</a>
當視頻被包含在網頁中時，它被稱為內聯視頻。 如果您打算在 web 應用程序中使用內聯視頻，您需要意識到很多人都覺得內聯視頻令人惱火。 同時請注意，用戶可能已經關閉了瀏覽器中的內聯視頻選項。 我們最好的建議是只在用戶希望看到內聯視頻的地方包含它們。一個正面的例子是，在用戶需要看到視頻並點擊某個鏈接時，會打開頁面然后播放視頻。
標簽 描述 <applet> 不贊成。定義內嵌 applet。 <embed> 不贊成。定義內嵌對象。（HTML5 中允許） <object> 定義內嵌對象。 <param> 定義對象的參數。
標簽 描述 <video> 標簽定義聲音，比如音樂或其他音頻流。 <embed> 標簽定義嵌入的內容，比如插件。
HTML5 是下一代的 HTML。
HTML5 中的一些有趣的新特性：
用於繪畫的 canvas 元素
用於媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section 新的表單控件，比如 calendar、date、time、email、url、search
許多時髦的網站都提供視頻。HTML5 提供了展示視頻的標准。
直到現在，仍然不存在一項旨在網頁上顯示視頻的標准。 今天，大多數視頻是通過插件（比如 Flash）來顯示的。然而，並非所有瀏覽器都擁有同樣的插件。 HTML5 規定了一種通過 video 元素來包含視頻的標准方法。
當前，video 元素支持三種視頻格式：
Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
如需在 HTML5 中顯示視頻，您所有需要的是：
<video src="http://www.w3school.com.cn/i/movie.mp4" controls="controls"> </video>
control 屬性供添加播放、暫停和音量控件。 包含寬度和高度屬性也是不錯的主意。 <video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：
<video src="http://www.w3school.com.cn/i/movie.mp4" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video>
上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。 要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。 video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式：
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。
HTML5 <video> - 使用 DOM 進行控制 HTML5 <video> 元素同樣擁有方法、屬性和事件。 其中的方法用於播放、暫停以及加載等。其中的屬性（比如時長、音量等）可以被讀取或設置。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。 下例中簡單的方法，向我們演示了如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。
<!DOCTYPE html> <html> <body> <div style="text-align:center;"> <button onclick="playPause()">播放/暫停</button> <button onclick="makeBig()">大</button> <button onclick="makeNormal()">中</button> <button onclick="makeSmall()">小</button> <br /> <video id="video1" width="420" style="margin-top:15px;"> <source src="/example/html5/mov_bbb.mp4" type="video/mp4" /> <source src="/example/html5/mov_bbb.ogg" type="video/ogg" /> Your browser does not support HTML5 video. </video> </div> <script type="text/javascript"> 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> </body> </html>
下面列出了大多數瀏覽器支持的視頻方法、屬性和事件：
方法 屬性 事件 play() currentSrc play pause() currentTime pause load() videoWidth progress canPlayType videoHeight error duration timeupdate ended ended error abort paused empty muted emptied seeking waiting volume loadedmetadata height width
注釋：在所有屬性中，只有 videoWidth 和 videoHeight 屬性是立即可用的。在視頻的元數據已加載后，其他屬性才可用。
直到現在，仍然不存在一項旨在網頁上播放音頻的標准。 今天，大多數音頻是通過插件（比如 Flash）來播放的。然而，並非所有瀏覽器都擁有同樣的插件。 HTML5 規定了一種通過 audio 元素來包含音頻的標准方法。 audio 元素能夠播放聲音文件或者音頻流。
當前，audio 元素支持三種音頻格式：
如需在 HTML5 中播放音頻，您所有需要的是：
<audio src="song.ogg" controls="controls"> </audio>
control 屬性供添加播放、暫停和音量控件。 <audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：``` ```html <audio src="song.ogg" controls="controls"> Your browser does not support the audio tag. </audio>
上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。 要確保適用於 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。 audio 元素允許多個 source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式：
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio tag. </audio>
**Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。 **
拖放（Drag 和 drop）是 HTML5 標准的組成部分。
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 注釋：在 Safari 5.1.2 中不支持拖放。
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> 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>
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
** 設置元素為可拖放**
1.首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true" />
拖動什么 - ondragstart 和 setData()
2.然后，規定當元素被拖動時，會發生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。 dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
3.ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。 這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()``` **進行放置 - ondrop** 4.當放置被拖數據時，會發生 drop 事件。 > 在上面的例子中，ondrop 屬性調用了一個函數，drop(event)： ```html function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代碼解釋：
來回拖放圖片
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> 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)"> <img src="http://pic.qqtn.com/file/2012/2012-12/2012122114312932657.gif" draggable="true" ondragstart="drag(evnt)" id="drag1" /> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html>
canvas 元素用於在網頁上繪制圖形。
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript"> 1.JavaScript 使用 id 來尋找 canvas 元素： var c=document.getElementById("myCanvas"); 2.然后，創建 context 對象： 2.1 getContext("2d") 對象是內建的 HTML5 對象，擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法 var cxt=c.getContext("2d"); 3.下面的兩行代碼繪制一個紅色的矩形： 3.1 fillStyle 方法將其染成紅色，fillRect 方法規定了形狀、位置和尺寸。 cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>
把鼠標懸停在下面的矩形上可以看到坐標
<!DOCTYPE HTML> <html> <head> <style type="text/css"> body { font-size:70%; font-family:verdana,helvetica,arial,sans-serif; } </style> <script type="text/javascript"> function cnvs_getCoordinates(e) { x=e.clientX; y=e.clientY; document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")"; } function cnvs_clearCoordinates() { document.getElementById("xycoordinates").innerHTML=""; } </script> </head> <body style="margin:0px;"> <p>把鼠標懸停在下面的矩形上可以看到坐標：</p> <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div> <br /> <br /> <br /> <div id="xycoordinates"></div> </body> </html>
實線
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.lineTo(10,50); cxt.stroke(); </script> </body> </html>
圓形
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.beginPath(); cxt.arc(70,18,15,0,Math.PI*2,true); cxt.closePath(); cxt.fill(); </script> </body> </html>
漸變
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,175,50); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,175,50); </script> </body> </html>
圖像
<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); var img=new Image() img.src="http://t2.27270.com/uploads/tu/mx/180/2.jpg" cxt.drawImage(img,0,0); </script> </body> </html>
HTML5 內聯 SVG
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持內聯 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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" /> </svg> </body> </html>
Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。
HTML5 Geolocation（地理定位）用於定位用戶的位置。
HTML5 Geolocation API 用於獲得用戶的地理位置。
鑒於該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。
Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。
注釋：對於擁有 GPS 的設備，比如 iPhone，地理定位更加精確。
請使用 getCurrentPosition() 方法來獲得用戶的位置。 下例是一個簡單的地理定位實例，可返回用戶位置的經度和緯度。
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
上面的例子是一個非常基礎的地理定位腳本，不含錯誤處理。
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }``` 舉例 ```html <!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的坐標：</p> <button onclick="getLocation()">試一下</button> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
錯誤代碼：
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+"' />"; }``` **舉例** ```html <!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的位置：</p> <button onclick="getLocation()">試一下</button> <div id="mapholder"></div> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } 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+"' />"; } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
在上例中，我們使用返回的經緯度數據在谷歌地圖中顯示位置（使用靜態圖像）。
谷歌地圖腳本
<!DOCTYPE html> <html> <body> <p id="demo">點擊這個按鈕，獲得您的位置：</p> <button onclick="getLocation()">試一下</button> <div id="mapholder"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='500px'; var myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder"),myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } } </script> </body> </html>
本頁演示的是如何在地圖上顯示用戶的位置。不過，地理定位對於給定位置的信息同樣很有用處。
案例：
屬性 描述 coords.latitude 十進制數的緯度 coords.longitude 十進制數的經度 coords.accuracy 位置精度 coords.altitude 海拔，海平面以上以米計 coords.altitudeAccuracy 位置的海拔精度 coords.heading 方向，從正北開始以度計 coords.speed 速度，以米/每秒計
下面的例子展示 watchPosition() 方法。您需要一台精確的 GPS 設備來測試該例（比如 iPhone）：
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>
HTML5 提供了兩種在客戶端存儲數據的新方法：
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，數據不是由每個服務器請求傳遞的，而是只有在請求時使用數據。它使在不影響網站性能的情況下存儲大量數據成為可能。
對於不同的網站，數據存儲於不同的區域，並且一個網站只能訪問其自身的數據。
HTML5 使用 JavaScript 來存儲和訪問數據。
localStorage 方法存儲的數據沒有時間限制。第二天、第二周或下一年之后，數據依然可用。 如何創建和訪問 localStorage：
<script type="text/javascript"> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>
下面的例子對用戶訪問頁面的次數進行計數：
<script type="text/javascript"> if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits "+ localStorage.pagecount + " time(s)."); </script>
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。
如何創建並訪問一個 sessionStorage：
<script type="text/javascript"> sessionStorage.lastname="Smith"; document.write(sessionStorage.lastname); </script>
下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：
<script type="text/javascript"> if (sessionStorage.pagecount) { sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; } else { sessionStorage.pagecount=1; } document.write("Visits "+sessionStorage.pagecount+" time(s) this session."); </script>
**使用 HTML5，通過創建 cache manifest 文件，可以輕松地創建 web 應用的離線版本。 **
HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網連接時進行訪問。
應用程序緩存為應用帶來三個優勢：
離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。
所有主流瀏覽器均支持應用程序緩存，除了 Internet Explorer。
下面的例子展示了帶有 cache manifest 的 HTML 文檔（供離線瀏覽）：
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
例子
<!DOCTYPE html> <html manifest="/example/html5/demo_html.appcache"> <body> <script type="text/javascript" src="/example/html5/demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">獲得日期和事件</button></p> <p><img src="/i/w3school_banner.gif" /></p> <p>請打開<a href="/example/html5/html5_html_manifest.html" target="_blank">這個頁面</a>，然后脫機瀏覽，重新加載頁面。頁面中的腳本和圖像依然可用。</p> </body> </html>
<!DOCTYPE HTML> <html manifest="demo.appcache"> </html>
請注意，manifest 文件需要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。
manifest 文件可分為三個部分：
CACHE MANIFEST
第一行，CACHE MANIFEST，是必需的：
CACHE MANIFEST /theme.css /logo.gif /main.js
上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載后，瀏覽器會從網站的根目錄下載這三個文件。然后，無論用戶何時與因特網斷開連接，這些資源依然是可用的。
NETWORK
下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的：
NETWORK: login.asp
可以使用星號來指示所有其他資源/文件都需要因特網連接：
NETWORK: *
FALLBACK
下面的 FALLBACK 小節規定如果無法建立因特網連接，則用 "offline.html" 替代 /html5/ 目錄中的所有文件：
FALLBACK: /html5/ /404.html
注釋：第一個 URI 是資源，第二個是替補。
一旦應用被緩存，它就會保持緩存直到發生下列情況：
實例 - 完整的 Manifest 文件
CACHE MANIFEST ## 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK:
重要的提示：以 "#" 開頭的是注釋行，但也可滿足其他用途。應用的緩存會在其 manifest 文件更改時被更新。如果您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被重新緩存。更新注釋行中的日期和版本號是一種使瀏覽器重新緩存文件的辦法。
一旦文件被緩存，則瀏覽器會繼續展示已緩存的版本，即使您修改了服務器上的文件。為了確保瀏覽器更新緩存，您需要更新 manifest 文件。
注釋：瀏覽器對緩存數據的容量限制可能不太一樣（某些瀏覽器設置的限制是每個站點 5MB）。
web worker 是運行在后台的 JavaScript，不會影響頁面的性能。
當在 HTML 頁面中執行腳本時，頁面的狀態是不可響應的，直到腳本已完成。
web worker 是運行在后台的 JavaScript，獨立於其他腳本，不會影響頁面的性能。您可以繼續做任何願意做的事情：點擊、選取內容等等，而此時 web worker 在后台運行。
所有主流瀏覽器均支持 web worker，除了 Internet Explorer。
下面的例子創建了一個簡單的 web worker，在后台計數：
計數：
<!DOCTYPE html> <html> <body> <p>計數: <output id="result"></output></p> <button onclick="startWorker()">開始 Worker</button> <button onclick="stopWorker()">停止 Worker</button> <br /><br /> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") { if(typeof(w)=="undefined") { w=new Worker("/example/html5/demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html>
A.檢測 Web Worker 支持
在創建 web worker 之前，請檢測用戶的瀏覽器是否支持它：
if(typeof(Worker)!=="undefined") { // Yes! Web worker support! // Some code..... } else { // Sorry! No Web Worker support.. }
B. **創建 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 資源的任務。
C.創建 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 傳遞消息時，會執行事件監聽器中的代碼。event.data 中存有來自 event.data 的數據。
D.終止 Web Worker
當我們創建 web worker 對象后，它會繼續監聽消息（即使在外部腳本完成之后）直到其被終止為止。
如需終止 web worker，並釋放瀏覽器/計算機資源，請使用terminate() 方法：
w.terminate();
**完整的 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, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html>
HTML5 服務器發送事件（server-sent event）允許網頁獲得來自服務器的更新。
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。
所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。
EventSource 對象用於接收服務器發送事件通知：
var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; };``` ```html <!DOCTYPE html> <html> <body> <h1>獲得服務器更新</h1> <div id="result"></div> <script> if(typeof(EventSource)!=="undefined") { var source=new EventSource("/example/html5/demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br />"; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events..."; } </script> </body> </html>
例子解釋：
if(typeof(EventSource)!=="undefined") { // Yes! Server-sent events support! // Some code..... } else { // Sorry! No server-sent events support.. }
為了讓上面的例子可以運行，您還需要能夠發送數據更新的服務器（比如 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: " & now()) Response.Flush() %>
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
注釋：Opera 對新的輸入類型的支持最好。不過您已經可以在所有主流的瀏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文本域。
Input 類型 - email
email 類型用於應該包含 e-mail 地址的輸入域。
在提交表單時，會自動驗證 email 域的值。
E-mail: <input type="email" name="user_email" />
提示：iPhone 中的 Safari 瀏覽器支持 email 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 @ 和 .com 選項）。
Input 類型 - url url 類型用於應該包含 URL 地址的輸入域。
在提交表單時，會自動驗證 url 域的值。
Homepage: <input type="url" name="user_url" />
提示：iPhone 中的 Safari 瀏覽器支持 url 輸入類型，並通過改變觸摸屏鍵盤來配合它（添加 .com 選項）。
Input 類型 - number
number 類型用於應該包含數值的輸入域。
您還能夠設定對所接受的數字的限定：
Points: <input type="number" name="points" min="1" max="10" />
請使用下面的屬性來規定對數字類型的限定：
屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值
提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，並通過改變觸摸屏鍵盤來配合它（顯示數字）。
Input 類型 - range
range 類型用於應該包含一定范圍內數字值的輸入域。
range 類型顯示為滑動條。
<input type="range" name="points" min="1" max="10" />
Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
Date: <input type="date" name="user_date" />
輸入類型 "month":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Month: <input type="month" name="user_date" /> <input type="submit" /> </form> </body> </html>
輸入類型 "week":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Week: <input type="week" name="user_date" /> <input type="submit" /> </form> </body> </html>
輸入類型 "time":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Time: <input type="time" name="user_date" /> <input type="submit" /> </form> </body> </html>
輸入類型 "datetime":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime" name="user_date" /> <input type="submit" /> </form> </body> </html>
輸入類型 "datetime-local":
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Date and time: <input type="datetime-local" name="user_date" /> <input type="submit" /> </form> </body> </html>
HTML5 擁有若干涉及表單的元素和屬性。
本章介紹以下新的表單元素：
Input type IE Firefox Opera Chrome Safari datalist No No 9.5 No No keygen No No 10.5 3.0 No output No No 9.5 No No
<!DOCTYPE HTML> <html> <body> <form action="/example/html5/demo_form.asp" method="get"> Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <input type="submit" /> </form> </body> </html>
提示：option 元素永遠都要設置 value 屬性。
keygen 元素的作用是提供一種驗證用戶的可靠方法。
keygen 元素是密鑰對生成器（key-pair generator）。當提交表單時，會生成兩個鍵，一個是私鑰，一個公鑰。
私鑰（private key）存儲於客戶端，公鑰（public key）則被發送到服務器。公鑰可用於之后驗證用戶的客戶端證書（client certificate）。
目前，瀏覽器對此元素的糟糕的支持度不足以使其成為一種有用的安全標准。
<form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>
output 元素用於不同類型的輸出，比如計算或腳本輸出：
<output id="result" onforminput="resCalc()"></output>
簡易計算器
<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function resCalc() { numA=document.getElementById("num_a").value; numB=document.getElementById("num_b").value; document.getElementById("result").value=Number(numA)+Number(numB); } </script> </head> <body> <p>使用 output 元素的簡易計算器：</p> <form onsubmit="return false"> <input id="num_a" /> + <input id="num_b" /> = <output id="result" onforminput="resCalc()"></output> </form> </body> </html>
本章講解涉及 <form> 和 <input> 元素的新屬性。
<form> 和 <input>
新的 form 屬性：
autocomplete novalidate
新的 input 屬性：
autocomplete autofocus form form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget) height 和 width list min, max 和 step multiple pattern (regexp) placeholder required
autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。 注釋：autocomplete 適用於 <form> 標簽，以及以下類型的 <input>標簽：text, search, url, telephone, email, password, datepickers, range 以及 color。
當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項：
<form action="demo_form.asp" method="get" 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>
注釋：在某些瀏覽器中，您可能需要啟用自動完成功能，以使該屬性生效。
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
注釋：autofocus 屬性適用於所有 標簽的類型。
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 屬性規定輸入域所屬的一個或多個表單。
注釋：form 屬性適用於所有 <input> 標簽的類型。
form 屬性必須引用所屬表單的 id：
<form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" />
注釋：如需引用一個以上的表單，請使用空格分隔的列表。
表單重寫屬性（form override attributes）允許您重寫 form 元素的某些屬性設定。
表單重寫屬性有：
formaction - 重寫表單的 action 屬性 formenctype - 重寫表單的 enctype 屬性 formmethod - 重寫表單的 method 屬性 formnovalidate - 重寫表單的 novalidate 屬性 formtarget - 重寫表單的 target 屬性
注釋：表單重寫屬性適用於以下類型的 標簽：submit 和 image。
<form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="Submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="Submit as admin" /> <br /> <input type="submit" formnovalidate="true" value="Submit without validation" /> <br /> </form>
height 和 width 屬性規定用於 image 類型的 input 標簽的圖像高度和寬度。
注釋：height 和 width 屬性只適用於 image 類型的 標簽。
<input type="image" src="img_submit.gif" width="99" height="99" />
list 屬性規定輸入域的 datalist。datalist 是輸入域的選項列表。
注釋：list 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email, date pickers, number, range 以及 color。
Webpage: <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3Schools" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist>
min、max 和 step 屬性用於為包含數字或日期的 input 類型規定限定（約束）。
max 屬性規定輸入域所允許的最大值。
min 屬性規定輸入域所允許的最小值。
step 屬性為輸入域規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等）。
注釋：min、max 和 step 屬性適用於以下類型的 <input> 標簽：date pickers、number 以及 range。
下面的例子顯示一個數字域，該域接受介於 0 到 10 之間的值，且步進為 3（即合法的值為 0、3、6 和 9）：
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 屬性規定輸入域中可選擇多個值。
注釋：multiple 屬性適用於以下類型的 <input> 標簽：email 和 file。
Select images: <input type="file" name="img" multiple="multiple" />
novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
注釋：novalidate 屬性適用於 <form> 以及以下類型的 <input> 標簽：text, search, url, telephone, email, password, date pickers, range 以及 color.
<form action="demo_form.asp" method="get" novalidate="true"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form>
pattern 屬性規定用於驗證 input 域的模式（pattern）。
模式（pattern） 是正則表達式。您可以在 JavaScript 中學習到有關正則表達式的內容。
注釋：pattern 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email 以及 password。
下面的例子顯示了一個只能包含三個字母的文本域（不含數字及特殊字符）：
Country code: <input type="text" name="country_code" pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
注釋：placeholder 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email 以及 password。
提示（hint）會在輸入域為空時顯示出現，會在輸入域獲得焦點時消失：
<input type="search" name="user_search" placeholder="Search W3School" />
required 屬性規定必須在提交之前填寫輸入域（不能為空）。
注釋：required 屬性適用於以下類型的 <input> 標簽：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
Name: <input type="text" name="usr_name" required="required" />
標簽列表（字母排序）
標簽列表（功能排序）
HTML 屬性
HTML 事件
HTML 視頻/音頻
HTML 畫布
HTML 文檔類型
HTML 顏色名
HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符號 HTML URL 編碼 HTML 語言代碼 HTML 消息
HTML 屬性 HTML 事件 HTML 視頻/音頻 HTML 畫布 HTML 文檔類型 HTML 顏色名 HTML 字符集 HTML ASCII HTML ISO-8859-1 HTML 符號 HTML URL 編碼 HTML 語言代碼 HTTP 消息 HTTP 方法
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
）和源屬性（src）