HTML5基礎知識一、新特性解讀

常用縮寫詞

• API：應用程序編程接口
• CSS3：層疊樣式表 3
• GUI：圖形用戶界面
• HTML：超文本標記語言
• HTML5：HTML 版本 5
• SQL：結構化查詢語
• UI：用戶界面

解讀HTML5中補充和增加的標記：

HTML 5 全局屬性

NEW：HTML 5 中新的全局屬性。

屬性	描述
accesskey	規定訪問元素的鍵盤快捷鍵
class	規定元素的類名（用於規定樣式表中的類）。
contenteditable     (5特有)	規定是否允許用戶編輯內容。contenteditable="true"
contextmenu          (5特有)	規定元素的上下文菜單。目前沒有任何主流瀏覽器支持 contextmenu 屬性。
dir	規定元素中內容的文本方向。
draggable               (5特有)	規定是否允許用戶拖動元素。目前沒有任何主流瀏覽器支持 dropable 屬性
dropzone                (5特有)	規定當被拖動的項目/數據被拖放到元素中時會發生什麼。目前沒有任何主流瀏覽器支持 dropzone 屬性
hidden                     (5特有)	規定該元素是無關的。被隱藏的元素不會顯示。 用法：hidden="hidden"
id	規定元素的唯一 ID。
lang	規定元素中內容的語言代碼。
spellcheck              (5特有)	規定是否必須對元素進行拼寫或語法檢查。spellcheck="true"or "false"
style	規定元素的行內樣式。
tabindex	規定元素的 tab 鍵控制次序。
title	規定有關元素的額外信息。title="......." 當鼠標放上去之後會有一個懸浮框顯示title中的內容

 

HTML5 實現了以下功能：

• 1、提供了可以準確描述所包含的內容的標記 2、增強的網絡通信 3、顯著改善了一般存儲 4、用於運行後臺流程的 Web Worker
•  5、在應用程序和服務器之間建立持久連接的 WebSocket 接口  6、更好地檢索存儲的數據 7、改善了網頁保存和載入速度
•  8、支持 CSS3 管理 GUI，意味着 HTML5 具備面向內容的特性 9、改善了瀏覽器的表單處理 10、一個基於 SQL 的數據庫 API，允許客
• 戶端本地存儲畫布和視頻，無需安裝第三方插件即可添加圖形和視頻 11、Geolocation API 規範，使用智能手機位置功能來合併移動雲服
• 務和應用程序智能表單減少了下載 JavaScript 代碼的需求，在移動設備和雲服務器之間實現了更有效的通信

HTML5 創建了更加吸引人的用戶體驗，例如開發hybrid app：

使用 HTML5 設計的頁面可以提供與桌面應用程序類似的體驗。HTML5 還將 API 功能和瀏覽器結合在一起，提供了增強的多平臺開發。通過使用 HTML5，開發人員可以提供在不同平臺之間切換的現代應用程序體驗，

HTML5 實際上是一系列創新的代表。HTML5 提供了新的標記、新的方法，並通過與 CSS3 和 JavaScript 的相互作用形成了一個通用的開發框架。這是以客戶端爲中心的應用程序處理的核心。除了將 HTML5 技術的技巧和方法部署到桌面外，還可以在特性豐富的 Web 移動手機瀏覽器中實現 HTML5 —隨着 Apple iPhone、Google Android 和運行 Palm webOS 的手機的流行和普及，這注定是一個不斷增長的市場。

HTML5 的一個關鍵功能就是信息映射 —或內容阻塞（如果您喜歡的話）—可以生成更加容易理解的流程。隨着 HTML5 在 Web 處理方面的地位越來越重要，您將看到它在設計和開發方面是多麼地高效。

HTML5 標誌着更有效的文本級別的語義流程，以及對錶單構建和使用的更高級別的控制。所有這些特性和 HTML5 創新的許多其他優點是使它成爲主要範式的根本原因。許多商業的或其他代理組織（即使這些組織其中很多的主要代理行爲並不是信息處理和通信）都或多或少地反映到了這種日益增長的模式開發中。

HTML5 的成功並不是出於偶然。相反，它的技術和方法纔是它取得成功的後盾。

頁面規劃

您將創建一個簡單的 Web 頁面。在這個過程中，我將討論 HTML5 中引入的幾個新標記。要創建一個有效的、高效的 Web 頁面，必須對頁面進行規劃，考慮到需要創建的所有的組件。

創建的頁面將採用如圖 1 所示的高級設計。頁面設計包含一個 Header 區、一個 Navigation 區、一個 Article 區（包含三個部分）、一個 Aside 區和一個 Footer 區。該頁面將用於 Google Chrome 瀏覽器，消除了一些會引起感官混亂、會引起瀏覽器兼容性問題的內容，它們不利於瀏覽器理解頁面基本結構。這種結構的目的是清楚地展示新的 HTML5 標記的用法，展示如何使用它們創建構造良好的代碼和優雅的頁面設計。

圖 1. Acme United Web 頁面規劃

在創建頁面的過程中，我使用了 CSS3，需要用 CSS3 正確地呈現 HTML5 頁面。CSS3 是實現 HTML5 頁面樣式、導航和整體感官的重要工具。它的屬性組可以在 W3Schools CSS3 參考站點（見 參考資料）找到，包括一些有用的元素，如背景、字體、選框和動畫效果。

然而，在開始構建頁面前，您需要了解一些有關新的 HTML5 標記的知識。

回頁首

Header 區

示例中的 Header 區包含頁面標題和副標題。您將使用 <header>標記創建頁面的 Header區的內容。<header>標記可以包含有關<section>和 <article>的信息以及 Web 頁面本身。這裏的 Web 頁面包含頁面的 Header區以及 Article 和 Section 區的 Header區，如圖 1 所示。清單 1 提供了一個 <header> 標記示例。

清單 1. <header> 標記示例

 <header> 
    <h1>Heading Text</h1> 
    <p> Text or images can be included here</p> 
    <p> Logos are frequently placed here too</p> 
 </header>

<header>標記還可以包含 <hgroup>標記，如清單 2 所示。<hgroup>標記使用從 <h1>到 <h6>的標題級別對標題進行了分組，其中包含主標題和子標題。

清單 2. <hgroup> 標記示例

 <header> 
    <hgroup> 
          <h1>Main Heading</h1> 
          <h2>Sub-heading </h2> 
    </hgroup> 
    <p> Text or images can be included here</p> 
 </header>

Navigation 區

可以使用 <nav>標記創建頁面的 Navigation 區。<nav>元素專門爲導航功能定義了一個區域。 <nav>標記應當用於主站點的導航，而不是用於包含頁面其他區域的鏈接。Navigation 區可以包含如清單 3 所示的代碼。

清單 3. <nav> 標記示例

 <nav> 
     <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About Us</a></li> 
          <li><a href="#">Our Products</a></li> 
          <li><a href="#">Contact Us</a></li> 
     </ul> 
 </nav>

回頁首

Article 和 Section 區

您設計的頁面還包含 Article 區，其中包含頁面的實際內容。將使用 <article>標記來創建這個區域，該標記定義可獨立於其他頁面內容使用的內容。例如，如果想要創建一個 RSS 提要，可以使用 <article>來唯一地識別內容。<article>標記識別可以移除並放到另一個上下文的內容，並且非常易於理解。

Acme United 頁面規劃中的 Article 區包含了三個 Section 區。將使用 <section>標記創建這些區。<section>包含 Web 內容的相關的組件區。<section> 標記 —以及 <article>標記 —可以包含標題、頁腳或任何其他必要的組件。<section>標記用於對內容分組。

<section>標記和 <article>標記的內容通常以 <header>開頭，以 <footer>結尾，中間爲標記的內容。

<section>標記還可以包含 <article>標記，正如 <article>標記可以包含 <section>標記一樣。

<section>應用於將類似的信息劃分成組，

<article>標記應用於文章或博客等可以刪除並放到新上下文且不影響內容含義的信息。

顧名思義，<article>提供了完整的信息判斷，而 <section>標記包含了相關的信息，但是這些信息不能放到不同的上下文中，否則信息的含義就會丟失。

清單 4 顯示了 <article> 和 <section>標記的用法示例。

清單 4. <article> 標記和 <section> 標記示例

 <article> 
     <section> 
          Content 
     </section> 
     <section> 
          Content 
     </section> 
 </article> 
 <section> 
     <article> 
          Content 
     </article> 
     <article> 
          Content 
     </article> 
 </section>

圖像元素

<section>和 <article>標記以及 <header>和 <footer>標記可以包含 <figure>標記。您可以使用該標記包含圖像、圖表和照片。

<figure>標記可以包含 <figcaption>，後者包含 <figure>標記中的圖形的說明文字，允許您輸入一段描述來將圖形與內容更緊密地聯繫在一起。清單 5 提供了 <figure>和 <figcaption>標記結構的示例。

清單 5. <figure> 標記和 <figcaption> 標記示例

 <figure> 
     <img src="/figure.jpg" width="304" height="228" alt="Picture"> 
     <figcaption>Caption for the figure</figcaption> 
 </figure>

媒體元素

<section>和 <article>標記還可以包含各種媒體元素。HTML5 提供了可以快速傳達內容含義的方式。媒體元素，例如以前嵌入到頁面中的音樂和視頻，現在可以更加準確地識別出來。

<audio>標記識別聲音內容，例如音樂或任何其他的音頻流。<audio>標記的屬性控制播放音頻的時間、方式以及內容。這些屬性是src、preload、control、loop和 autoplay。在清單 6 的示例中，將在頁面加載完畢後立即播放音頻，並將爲用戶提供控件來停止或重新播放音頻。

清單 6. <audio> 標記示例

 <audio src="MyFirstMusic.ogg" controls autoplay loop"> 
     Your browser does not support the audio tag. 
 </audio>

<video>標記允許您廣播視頻片段或可視流媒體。它除了具備 <audio>標記的所有屬性外，還包含另外三個屬性：poster、width和height。poster屬性使您能夠在加載視頻時或根本不能加載視頻時識別要使用的圖像。

清單 7 提供了 <video>標記結構的示例。

清單 7. <video> 標記示例

 <video src="MyFirstMovie.ogg" controls="controls"> 
     Your browser does not support the video tag 
 </video>

<video>和 <audio>標記可以包含 <Source>標記，後者爲 <video>和 <audio> 標記定義了多媒體資源。您可以使用該元素指定其他的視頻和音頻文件，瀏覽器就可以根據它的媒體類型或編碼支持進行選擇。在清單 8 中，提供了兩種選擇。如果文件的 WMA 版本無法在當前使用的瀏覽器中播放，那麼就可以嘗試使用 MP3 版本。否者，顯示一條消息，通知客戶音頻不可用的原因。

清單 8. <source> 標記示例

 <audio> 
     <source src="/music/good_enough.wma" type="audio/x-ms-wma"> 
     <source src="/music/good_enough.mp3" type="audio/mpeg"> 
     <p>Your browser does not support the HTML 'audio' element.</p> 
 </audio>

<embed>標記定義了可以嵌入到頁面中的內容 —例如，Adobe Flash SWF 文件的插件。清單 9 包含 type屬性，該屬性將嵌入的源識別爲 Flash 文件。

清單 9. <embed> 標記示例

 <embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

除了 src和 type屬性外，<embed>標記還包含 height 和 width屬性。

回頁首

Aside 區

在 Acme United 頁面規劃中，使用 <aside>標記創建 Aside 區。該標記的作用是容納一些補充性內容，這些內容不屬於文章的一部分。在雜誌中，Aside 通常用於介紹有關文章本身的一些信息。<aside>標記包含的內容可以被移除而不會影響文章或文章所在的區段或頁面所傳達的信息。

清單 10 提供了 <aside>標記的使用示例。

清單 10. <aside> 標記示例

 <p>My family and I visited Euro Disney last year.</p> 
 <aside> 
     <h4>Disney in France</h4> 
     <p>Besides Euro Disney, there is a Disneyland in California.</p> 
 </aside>

回頁首

Footer 區

<footer>元素包含有關頁面、文章或區段的信息，比如文章的作者或發表日期。文章的頁腳可能包含版權或其他重要的法律消息，如清單 11 所示。

清單 11. <footer> 標記示例

 <footer> 
     <p>Copyright 2011 Acme United. All rights reserved.</p> 
 </footer>

回頁首

構造頁面

現在，您已經瞭解了創建一個 HTML5 頁面所需的基本標記，接下來讓我們開始正式構造頁面。我們將要爲 Acme United 構造一個 Web 頁面。圖 2 顯示了構建後的頁面，您可以下載並使用該頁面（參見 下載）。

圖 2. Acme United Web 頁面

現在，讓我們開始構造頁面吧。首先，讓我們先關注一下 <!doctype>。在 HTML5 中，對 <!doctype>進行了簡化：您只需要記住 html即可。這不僅簡化了標記的輸入，而且該標記在以後也不需要進行修改。注意，它不是 html5，而是 html。不管 HTML 以後會有多少個版本，<!doctype>只能是 html。

<html>標記包含除 <!doctype>以外的所有其他 HTML 元素。所有這些元素都應當被嵌套到 <html>和 </html>標記之間。參見清單 12。

清單 12. <!doctype> 標記示例

 <!doctype html> 
 <html lang="en">

表明文檔類型爲 html和使用語言爲英語後，將要使用 <head>元素。該元素將包含腳本、瀏覽器支持信息、樣式錶鏈接、元信息和其他初始化功能。可以在 head部分中使用以下標記：

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

<title>標記用於包含文檔的實際標題，是 <head>中必須包含的元素。您將在瀏覽頁面時在瀏覽器的頂部看到該標記包含的標題。清單 13 中的 <link>標記識別將用於呈現 HTML5 頁面的 CSS3 樣式表。調用的樣式表爲 main-stylesheet.css。

清單 13. <head> 標記示例

 <head> 
     <title>HTML5 Fundamentals Example</title> 
     <link rel="stylesheet" href="main-stylesheet.css"  /> 
 </head>

接下來將使用 <body>標記，之後是 <header>和 <hgroup> 標記，這些標記已經在前面進行了介紹。本例中的 <h1>區包含公司的名字（虛構的），即 Acme United，而 <h2>區包含的信息表明副標題爲 “一個簡單的 HTML5 示例”。清單 14 顯示了標記。

清單 14. <body> 標記和 <header> 標記示例

 <body > 
     <header> 
          <hgroup> 
               <h1>Acme United</h1> 
               <h2>A Simple HTML5 Example</h2> 
          </hgroup> 
     </header>

清單 15 顯示了目前爲止構建頁面所使用的 CSS3。首先，爲頁面定義字體，然後定義正文的細節。在定義正文的大小後，爲一級和二級標題標記設計標題段落結構。這些都是將在頁面中使用的標題。

清單 15. CSS3 示例 #1

 * { 
	 font-family: Lucida Sans, Arial, Helvetica, sans-serif; 
 } 

 body { 
	 width: 800px; 
	 margin: 0em auto; 
 } 

 header h1 { 
	 font-size: 50px; 
	 margin: 0px; 
	 color: #006; 
 } 

 header h2 { 
	 font-size: 15px; 
	 margin: 0px; 
	 color: #99f; 
	 font-style: italic; 
 }

清單 16 展示了 <nav>標記，該標記將用於處理主站點的導航。

清單 16. <nav> 示例

 <nav> 
     <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">About Us</a></li> 
          <li><a href="#">Contact Us</a></li> 
     </ul> 
 </nav>

HTML5 還包含一個 <menu>標記 —該標記一度令一些設計師和開發人員感到困惑。這是因爲導航功能常常被稱爲 “導航菜單”。HTML 版本 4.01 不贊成使用 <menu>標記，但是 HTML5 重新啓用了該標記並使用它增強交互性。它不應當用於實現主導航。唯一用於實現主導航的標記應當爲<nav>標記。您將在本示例後面的部分使用 <menu>標記。

導航的格式由 CSS3 實現。清單 17 中顯示的每個 <nav>標記的定義都表示 <nav>標記內部的 <ul>和 <li>元素的特定狀態。

清單 17. CSS3 示例 #2

 nav ul { 
	 list-style: none; 
	 padding: 0px; 
	 display: block; 
	 clear: right; 
	 background-color: #99f; 
	 padding-left: 4px; 
	 height: 24px; 
 } 
 nav ul li { 
	 display: inline; 
	 padding: 0px 20px 5px 10px; 
	 height: 24px; 
	 border-right: 1px solid #ccc; 
 } 

 nav ul li a { 
	 color: #006; 
	 text-decoration: none; 
	 font-size: 13px; 
	 font-weight: bold; 
 } 

 nav ul li a:hover { 
	 color: #fff; 
 }

接下來是 Article 區。這個區由 <article>標記定義，包含其自己的 <header>信息。<article>中的 <section>也包含它自己的<header>標記。參見清單 18。

清單 18. <article> 和 <section> 示例

 <article> 
     <header> 
          <h1> 
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a> 
          </h1> 
     </header> 
     <p> Primum non nocere ad vitam Paramus . . . </p> 
     <section> 
          <header> 
               <h1>This is the first section heading</h1> 
          </header> 
          <p>Scientia potentia est qua nocent docentp . . .> 
     </section>

清單 19 顯示了呈現頁面格式的 CSS3 標記。注意，paragraph、header和 section區的定義都是針對它們所在的 <article>標記定義的。這裏定義的 <h1>標記使用了與爲頁面級 <h1>標記定義的 <h1>標記不同的格式。

清單 19. CSS3 示例 #3

 article > header h1 { 
	 font-size: 40px; 
	 float: left; 
	 margin-left: 14px; 
 } 

 article > header h1 a { 
	 color: #000090; 
	 text-decoration: none; 
 } 

 article > section header h1 { 
	 font-size: 20px; 
	 margin-left: 25px; 
 } 

 article p { 
	 clear: both; 
	 margin-top: 0px; 
	 margin-left: 50px; 
 }

<article>中包含的第二個 <section>標記包含與第一個 <section>相同的基本信息，但是這一次將使用 <aside>、<figure>、<menu>以及 <mark>標記。參見清單 20。

<aside>標記在這裏用於顯示不屬於文本流部分的信息。<figure> 標記包含一個 Stonehenge 圖形。這個 <section> 還包含 <menu>標記，您可以用來創建帶有四個 Muse 名字的按鈕。當單擊其中一個按鈕時，它將提供有關特定 Muse 的信息。<mark>標記在 <p>標記的內部使用，用於突出顯示 veni、vidi、vici。

清單 20. <article> 和 <section> 示例

 <section> 
     <header> 
          <h1>Second section with mark, aside, menu & figure</h1> 
     </header> 
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p> 
     <aside> 
          <p>This is an aside that has multiple lines. . . .</p> 
     </aside> 
     <menu label="File"> 
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button> 
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia
          </button> 
          <button type="button" onClick="JavaScript:alert 
		                           ('Urania . . .')">Urania</button> 
          <button type="button" onClick="JavaScript:alert 
		                           ('Calliope . . .')">Calliope</button> 
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/> 
          <figcaption>Figure 1. Stonehenge</figcaption> 
     </figure> 
 </section>

本部分的 CSS3 包含了 <p>標記的新定義，該標記的寬度要比頁面的寬度小一些。這種改變允許將旁白顯示在右側，而不會與文本相互重疊。清單 21 顯示了標記。

清單 21. CSS3 示例 #4

 article p.next-to-aside { 
	 width: 500px; 
 } 

 article >  section figure { 
	 margin-left: 180px; 
	 margin-bottom: 30px; 
 } 

 article > section > menu {  
	 margin-left: 120px; 
 } 	  

 aside p {  
        position:relative; 
        left:0px; 
        top: -100px; 
		 z-index: 1; 
        width: 200px;  
    	 float: right; 
	    font-style: italic; 
       	 color: #99f; 
 }

視頻部分元素

<article>的最後一部分是 video。示例視頻是 ogg 格式，將在頁面加載的同時自動地連續循環播放，同時爲用戶提供了暫停和播放控件。在許多新的實例中，ogg 視頻採用擴展名 ogv（v表示視頻），如清單 22 所示。<audio>標記的工作原理與此相同。

清單 22. <article> 和 <section> 示例

     <section> 
          <header> 
               <h1>This is a video section</h1> 
          </header> 
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop> 
                <div class="no-html5-video"><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p> 
                </div> 
          </video></p> 
     </section> 
 </article>

清單 23 顯示了 video部分的 CSS3 定義。

清單 23. CSS3 示例 #5

 article > section video { 
	 height: 200px; 
	 margin-left: 180px; 
 } 
	
 article > section div.no-html5-video{ 
	 height: 20px; 
	 text-align: center; 
	 color: #000090; 
	 font-size: 13px; 
	 font-style: italic; 
	 font-weight: bold ; 
	 background-color: #99f; 
 }

頁面的頁腳和結束部分如清單 24 所示。

清單 24. <footer> 標記示例

          <footer> 
              <p>Copyright: 2011 Acme United. All rights reserved.</p> 
          </footer> 
     </body> 
 </html>

頁腳的 CSS3 如清單 25 所示。

清單 25. CSS3 示例 #5

 footer p { 
	 text-align: center; 
	 font-size: 12px; 
	 color: #888; 
	 margin-top: 24px; 
 }

回頁首

結束語

隨着 Web 頁面的完成，本系列的第 1 部分也就此結束。

本文的目標是介紹新的 HTML5 時代。

HTML5 不僅僅是對 HTML4 的版本升級：它代表一種全新的數字化通信方式。本系列的下一期文章將介紹如何對 HTML5 表單進行編碼和格式化。