第2章 HTML 5與HTML 4的區別

HTML 5以HTML 4為基礎，對HTML 4進行了大量修改。本章從總體上概要介紹HTML 5對HTML 4進行了哪些修改，HTML 5與HTML 4之間比較大的區別是什么地方。

學習內容：

?掌握HTML 5與HTML 4在基本語法上的區別，這個基本語法區別包括DOCTYPE聲明、內容類型（ContentType）、字符編碼的指定方法、元素標記的省略、具有布爾值的屬性、引號的省略等幾個方面。

?了解在HTML 5中新增的元素，刪除了哪些HTML 4中的元素，以及為什么要刪除這些元素，用什么元素或方法來取代這些被刪除的元素。

?了解在HTML 5中新增的屬性，刪除了哪些HTML 4中的屬性，在HTML 5中用什么方法來取代這些被刪除的屬性。

?掌握什么是全局屬性，本章主要介紹幾個常用全局屬性，如contentEditable屬性、designMode屬性、hidden屬性、spellcheck屬性以及tabindex屬性。

2.1 語法的改變

2.1.1 HTML 5的語法變化

與HTML 4相比，HTML 5在語法上發生了很大的變化。可能很多人會因為“之前的HTML已經相當普及”，“如果改變基礎語法，會產生什么影響”等想法而感到不安。

但是，HTML 5中的語法變化，與其他開發語言中的語法變化在根本意義上有所不同。它的變化，正是因為在HTML 5之前幾乎沒有符合標準規范的Web瀏覽器導致的。

HTML的語法是在SGML（Standard Generalized Markup Language）語言的基礎上建立起來的。但是SGML語法非常復雜，要開發能夠解析SGML語法的程序也很不容易，因此很多瀏覽器都不包含SGML的分析器。因此，雖然HTML基本上遵從SGML的語法，但是對于HTML的執行在各瀏覽器之間并沒有一個統一的標準。

在這種情況下，各瀏覽器之間的互兼容性和互操作性在很大程度上取決于網站或網絡應用程序的開發者在開發上所做的共同努力，而瀏覽器本身始終是存在缺陷的。

如上所述，在HTML 5中提高Web瀏覽器之間的兼容性是它的一個很大的目標，為了確保兼容性，就要有一個統一的標準。因此，在HTML 5中，圍繞著這個Web標準，重新定義了一套在現有HTML的基礎上修改而來的語法，以便各瀏覽器在運行HTML的時候能夠符合一個通用標準。

因為關于HTML 5語法解析的算法也都提供了詳細的記載，所以各Web瀏覽器的供應商可以把HTML 5分析器集中封裝在自己的瀏覽器中。最新的Firefox（默認為4.0以后的版本）與WebKit瀏覽器引擎中都迅速地封裝了供HTML 5使用的分析器，IE（Internet Explorer）與Opera也在努力加快對HTML 5的支持——提高瀏覽器的兼容性指日可待。

接下來，讓我們具體看一下在HTML 5中對語法進行了哪些改變。

2.1.2 HTML 5中的標記方法

首先看一下HTML 5中的標記方法。

1. 內容類型（ContentType）

首先，HTML 5的文件擴展符與內容類型保持不變。也就是說，擴展符仍然為“.html”或“.htm”，內容類型（ContentType）仍然為“text/html”。

2. DOCTYPE聲明

DOCTYPE聲明是HTML文件中必不可少的，它位于文件第一行。在HTML 4中，它的聲明方法如下：

    ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

在HTML 5中，刻意不使用版本聲明，一份文檔將會適用所有版本的HTML。HTML 5中的DOCTYPE聲明方法（不區分大小寫）如下：

    ＜!DOCTYPE html＞

另外，當使用工具時，也可以在DOCTYPE聲明方式中加入SYSTEM識別符，聲明方法如下：

    ＜!DOCTYPE HTML SYSTEM "about:legacy-compat"＞

在HTML 5中像這樣的DOCTYPE聲明方式是允許的（不區分大小寫，引號不區分是單引號還是雙引號）。

3. 指定字符編碼

在HTML 4中，使用meta元素的形式指定文件中的字符編碼，如下所示：

    ＜meta http-equiv="Content-Type" content="text/html;charset=UTF-8"＞

在HTML 5中，可以使用對＜meta＞元素直接追加charset屬性的方式來指定字符編碼，如下所示：

    ＜meta charset="UTF-8"＞

兩種方法都有效，可以繼續使用前面一種方式（通過content元素的屬性來指定），但是不能同時混合使用兩種方式。在以前的網站代碼中可能會存在下面代碼所示的標記方式，但在HTML 5中，這種字符編碼方式將被認為是錯誤的，這一點請注意。

    ＜meta charset="UTF-8" http-equiv="Content-Type"
    content="text/html;charset=UTF-8"＞

從HTML 5開始，對于文件的字符編碼推薦使用UTF-8。

2.1.3 HTML 5確保的兼容性

HTML 5的語法是為了保證與之前的HTML語法也能夠達到最大程度的兼容而設計的。例如，符合“沒有＜p＞的結束標記”的HTML代碼隨處可見，HTML 5中并沒有把這種情況作為錯誤來處理，而是允許存在這種情況，但明確規定了這種情況應該怎么處理。

那么，針對這個問題，我們從元素標記的省略、具有boolean值的屬性、引號的省略這幾方面來詳細看一下在HTML 5中是如何確保與之前版本的HTML實現兼容的。

1.可以省略標記的元素

在HTML 5中，元素的標記可以省略。具體來說，分為“不允許寫結束標記”、“可以省略結束標記”和“開始標記和結束標記全部可以省略”三種類型。

接著，我們針對這三類情況列舉一個元素清單，其中包括本書到現在為止還沒有介紹的HTML 5中的新元素（關于這些新元素，2.2節將進行介紹）。

?不允許寫結束標記的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

?可以省略結束標記的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

?可以省略全部標記的元素有：html、head、body、colgroup、tbody。

說明

“不允許寫結束標記的元素”是指不允許使用開始標記與結束標記將元素括起來的形式，只允許使用“＜元素/＞”的形式進行書寫。例如“＜br＞...＜/br＞”的書寫方式是錯誤的，只允許“＜br/＞”的書寫形式。當然，HTML 5之前的＜br＞這種寫法可以被沿用。

“可以省略全部標記的元素”是指該元素可以完全被省略。注意，即使標記被省略了，該元素還是以隱式的方式存在的。例如省略不寫body元素時，在文檔結構中它還是存在的，可以使用document.body訪問。

2. 具有boolean值的屬性

對于具有boolean值的屬性，例如disabled與readonly等，當只寫屬性而不指定屬性值時，表示屬性值為true，如果想要將屬性值設為false，則可以不使用該屬性。另外，要想將屬性值設定為true時，也可以將屬性名設定為屬性值，或將空字符串設定為屬性值。

屬性值的設定方法可以參考下面的代碼示例：

    ＜!--只寫屬性不寫屬性值代表屬性為true--＞
    ＜input type="checkbox" checked＞
    ＜!--不寫屬性代表屬性為false--＞
    ＜input type="checkbox"＞
    ＜!--屬性值=屬性名,代表屬性為true--＞
    ＜input type="checkbox" checked="checked"＞
    ＜!--屬性值=空字符串,代表屬性為true--＞
    ＜input type="checkbox" checked=""＞

3. 省略引號

大家已經知道，在指定屬性值的時候，屬性值兩邊加引號時既可以用雙引號，也可以用單引號。

HTML 5在此基礎上做了一些改進，當屬性值不包括空字符串、“＜”、“＞”、“=”、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。如下面的代碼所示：

    ＜!-- 請注意type的屬性值兩邊的引號 --＞
    ＜input type="text"＞
    ＜input type='text'＞
    ＜input type=text＞

2.1.4 標記示例

現在，我們通過前面學到的HTML 5的語法知識來看一個關于HTML 5標記的示例。

代碼清單2-1完全是用HTML 5寫成的。其中省略了＜html＞、＜head＞、＜body＞等元素。可以通過這個示例復習一下HTML 5的DOCTYPE聲明、用＜meta＞元素的charset屬性指定字符編碼、＜p＞元素的結束標記的省略、使用＜元素/＞的方式來結束＜meta＞元素，以及

＜br＞元素等本節中所介紹的知識要點。

代碼清單2-1 HTML 5標記示例

    ＜!DOCTYPE html＞
    ＜meta charset="UTF-8"＞
    ＜title＞HTML 5標記示例＜/title＞
    ＜p＞這段代碼是根據HTML 5語法
    ＜br/＞編寫出來的。

這段代碼在Firefox 4瀏覽器中的運行結果如圖2-1所示，另外，本書中如果沒有特別說明使用什么瀏覽器，則使用的都是Firefox 4瀏覽器。

2.2 新增的元素和廢除的元素

本節將詳細介紹HTML 5中新增和廢除了哪些元素。

2.2.1 新增的結構元素

在HTML 5中，新增以下與結構相關的元素。

（1）section元素

section元素表示頁面中的一個內容區塊，比如章節、頁眉、頁腳或頁面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結合使用，標示文檔結構。

HTML 5中的代碼示例：

    ＜section＞…＜/section＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

（2）article元素

article元素表示頁面中的一塊與上下文不相關的獨立內容，譬如博客中的一篇文章或報紙中的一篇文章。

HTML 5中的代碼示例：

    ＜article＞…＜/article＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

（3）aside元素

aside元素表示article元素的內容之外的、與article元素的內容相關的輔助信息。

HTML 5中的代碼示例：

    ＜aside＞…＜/aside＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

（4）header元素

header元素表示頁面中一個內容區塊或整個頁面的標題。

HTML 5中的代碼示例：

    ＜header＞…＜/header＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

（5）footer元素

footer元素表示整個頁面或頁面中一個內容區塊的腳注。一般來說，它會包含創作者的姓名、創作日期以及創作者聯系信息。

HTML 5中的代碼示例：

    ＜footer＞＜/footer＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

（6）nav元素

nav元素表示頁面中導航鏈接的部分。

HTML 5中的代碼示例：

    ＜nav＞＜/nav＞

HTML 4中的代碼示例：

    ＜ul＞＜/ul＞

（7）figure元素

figure元素表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。

HTML 5中的代碼示例：

    ＜figure＞
    ＜figcaption＞PRC＜/figcaption＞
    ＜p＞The People's Republic of China was born in 1949...＜/p＞
    ＜/figure＞

HTML 4中的代碼示例：

    ＜dl＞
    ＜h1＞PRC＜/h1＞
    ＜p＞The People's Republic of China was born in 1949...＜/p＞
    ＜/dl＞

（8）main元素

main元素表示網頁中的主要內容。主內容區域意指與網頁標題或應用程序中本頁面主要功能直接相關或進行擴展的內容。

HTML 5中的代碼示例：

    ＜main＞…＜/main＞

HTML 4中的代碼示例：

    ＜div＞…＜/div＞

2.2.2 新增的其他元素

除了結構元素外，在HTML 5中，還新增以下元素。

（1）video元素

video元素用于定義視頻，比如電影片段或其他視頻流。

HTML 5中的代碼示例：

    ＜video src="movie.ogg" controls="controls"＞video元素＜/video＞

HTML 4中的代碼示例：

    ＜object type="video/ogg" data="movie.ogv"＞
            ＜param name="src" value="movie.ogv"＞
    ＜/object＞

（2）audio元素

audio元素用于定義音頻，比如音樂或其他音頻流。

HTML 5中的代碼示例：

    ＜audio src="someaudio.wav"＞audio元素＜/audio＞

HTML 4中的代碼示例：

    ＜object type="application/ogg" data="someaudio.wav"＞
        ＜param name="src" value="someaudio.wav"＞
    ＜/object＞

（3）embed元素

embed元素用來插入各種多媒體，格式可以是 Midi、Wav、AIFF、AU、MP3等。

HTML 5中的代碼示例：

    ＜embed src="horse.wav" /＞

HTML 4中的代碼示例：

    ＜object data="flash.swf"  type="application/x-shockwave-flash"＞＜/object＞

（4）mark元素

mark元素主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

HTML 5中的代碼示例：

    ＜mark＞＜/mark＞

HTML 4中的代碼示例：

    ＜span＞＜/span＞

（5）progress元素

progress元素表示運行中的進程，可以使用 progress元素來顯示 JavaScript 中耗費時間的函數的進程。

HTML 5中的代碼示例：

    ＜progress＞＜/progress＞

這是HTML 5中的新增功能，故無法用HTML 4代碼來實現。

（6）meter元素

meter元素表示度量衡，僅用于已知最大值和最小值的度量。必須定義度量的范圍，既可以在元素的文本中，也可以在 min/max 屬性中定義。

HTML 5中的代碼示例：

    ＜meter＞＜/meter＞

這是HTML 5中的新增功能，故無法用HTML 4代碼來實現。

（7）time元素

time元素用于表示日期或時間，也可以同時表示兩者。

HTML 5中的代碼示例：

    ＜time＞＜/time＞

HTML 4中的代碼示例：

    ＜span＞＜/span＞

（8）ruby元素

ruby元素表示 ruby 注釋（中文注音或字符）。

HTML 5中的代碼示例：

    ＜ruby＞漢 ＜rt＞＜rp＞(＜/rp＞ㄏㄢˋ＜rp＞)＜/rp＞＜/rt＞＜/ruby＞

這也是HTML 5中的新增功能。

（9）rt元素

rt元素表示字符（中文注音或字符）的解釋或發音。

HTML 5中的代碼示例：

    ＜ruby＞漢 ＜rt＞ ㄏㄢˋ ＜/rt＞＜/ruby＞

這是HTML 5中的新增功能。

（10）rp元素

rp元素在 ruby 注釋中使用，以定義不支持 ruby 元素的瀏覽器所顯示的內容。

HTML 5中的代碼示例：

    ＜ruby＞漢 ＜rt＞＜rp＞(＜/rp＞ㄏㄢˋ＜rp＞)＜/rp＞＜/rt＞＜/ruby＞

這是HTML 5中的新增功能。

（11）wbr元素

wbr元素表示軟換行。wbr元素與br元素的區別是：br元素是此處必須換行，而wbr元素意思就是瀏覽器窗口或父級元素的寬度足夠寬時（沒必要換行時），不進行換行，而當寬度不夠時，主動在此處進行換行。wbr元素好像對字符型的語言用處比較大，但是對于中文，貌似沒多大用處。

HTML 5中的代碼示例：

    ＜p＞ To learn AJAX, you must be fami＜wbr＞liar with the XMLHttp＜wbr＞
    Request Object. ＜/p＞

這是HTML 5中的新增功能。

（12）canvas元素

canvas元素表示圖形，比如圖表和其他圖像。這個元素本身沒有行為，僅提供一塊畫布，但把一個繪圖API展現給客戶端JavaScript，以使腳本能夠把想繪制的東西繪制到這塊畫布上。

HTML 5中的代碼示例：

    ＜canvas id="myCanvas" width="200" height="200"＞＜/canvas＞

HTML 4中的代碼示例：

    ＜object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"＞
    ＜/object＞

（13）command元素

command元素表示命令按鈕，比如單選按鈕、復選框或按鈕。

HTML 5中的代碼示例：

    ＜command onclick=cut()" label="cut"＞

這是HTML 5中的新增功能。

（14）details元素

details元素表示用戶要求得到并且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，用戶點擊標題時，會顯示細節信息。summary元素應該是details元素的第一個子元素。

HTML 5中的代碼示例：

    ＜details＞
        ＜summary＞HTML5＜/summary＞
        This document teaches you everything you have to learn about HTML5.
    ＜/details＞

這是HTML 5中的新增功能。

（15）datalist元素

datalist元素表示可選數據的列表，與input元素配合使用，可以制作出輸入值的下拉列表。

HTML 5中的代碼示例：

    ＜datalist＞＜/datalist＞

這是HTML 5中的新增功能。

（16）datagrid元素

datagrid元素表示可選數據的列表，它以樹形列表的形式顯示。

HTML 5中的代碼示例：

    ＜datagrid＞＜/datagrid＞

這是HTML 5中的新增功能。

（17）keygen元素

keygen元素表示生成密鑰。

HTML 5中的代碼示例：

    ＜keygen＞

這是HTML 5中的新增功能。

（18）output元素

output元素表示不同類型的輸出，比如腳本的輸出。

HTML 5中的代碼示例：

    ＜output＞＜/output＞

HTML 4中的代碼示例：

    ＜span＞＜/span＞

（19）source元素

source元素為媒介元素（比如＜video＞和＜audio＞）定義媒介資源。

HTML 5中的代碼示例：

    ＜source＞

HTML 4中的代碼示例：

    ＜param＞

（20）menu元素

menu元素表示菜單列表。當希望列出表單控件時使用該標簽。

HTML 5中的代碼示例：

    ＜menu＞
      ＜li＞＜input type="checkbox" /＞Red＜/li＞
      ＜li＞＜input type="checkbox" /＞blue＜/li＞
    ＜/menu＞

在HTML 4中，menu元素不被推薦使用。

（21）dialog元素

dialog元素表示對話框。

HTML 5中的代碼示例：

    ＜dialog＞＜/dialog＞

2.2.3 新增的input元素的類型

HTML 5中新增很多input元素的類型，現列舉如下：

?email：email類型表示必須輸入e-mail地址的文本輸入框。

?url：url類型表示必須輸入URL地址的文本輸入框。

?number：number類型表示必須輸入數值的文本輸入框。

?range：range類型表示必須輸入一定范圍內數字值的文本輸入框。

?Date Pickers：HTML 5擁有多個可供選取日期和時間的新型輸入文本框。

● date：選取日、月、年。

● month：選取月、年。

● week：選取周和年。

● time：選取時間（小時和分鐘）。

● datetime：選取時間、日、月、年（UTC時間）。

● datetime-local：選取時間、日、月、年（本地時間）。

2.2.4 廢除的元素

由于各種原因，在HTML 5中廢除了很多元素，簡單介紹如下。

1. 能使用CSS替代的元素

對于basefont、big、center、font、s、strike、tt、u等元素，由于它們的功能都是純粹為畫面展示服務的，而HTML 5中提倡把畫面展示性功能統一放在CSS樣式表中統一編輯，所以將這些元素廢除，使用編輯CSS、添加CSS樣式表的方式進行替代。其中font元素允許由“所見即所得”的編輯器進行插入，s元素、strike元素可以由del元素進行替代，tt元素可以由CSS的font-family屬性進行替代。

2. 不再使用frame框架

對于frameset元素、frame元素與noframes元素，由于frame框架對網頁可用性存在負面影響，在HTML 5中已不支持frame框架，只支持iframe框架，或者由服務器方創建的由多個頁面組成的復合頁面的形式，同時將這三個元素廢除。

3. 只有部分瀏覽器支持的元素

對于applet、bgsound、blink、marquee等元素，由于只有部分瀏覽器支持這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被廢除。其中applet元素可由embed元素或object元素進行替代，bgsound元素可由audio元素進行替代，marquee可以由JavaScript編程的方式所替代。

4. 其他被廢除的元素

其他被廢除元素還有：

?廢除rb元素，使用ruby元素替代。

?廢除acronym元素，使用abbr元素替代。

?廢除dir元素，使用ul元素替代。

?廢除isindex元素，使用form元素與input元素相結合的方式替代。

?廢除listing元素，使用pre元素替代。

?廢除xmp元素，使用code元素替代。

?廢除nextid元素，使用GUIDS替代。

?廢除plaintext元素，使用"text/plian" MIME類型替代。

2.3 新增的屬性和廢除的屬性

在HTML 5中，在增加和廢除很多元素的同時，也增加和廢除了很多屬性，本節對于這些增加和廢除的屬性進行簡單介紹。

2.3.1 新增的屬性

1. 表單相關的屬性

新增的與表單相關的元素如下：

?可以對input（type=text）、select、textarea與button元素指定autofocus屬性。它以指定屬性的方式讓元素在畫面打開時自動獲得焦點。

?可以對input元素（type=text）與textarea元素指定placeholder屬性，它會對用戶的輸入進行提示，提示用戶可以輸入的內容。

?可以對input、output、select、textarea、button與fieldset指定form屬性，聲明它屬于哪個表單，然后將其放置在頁面上任何位置，而不是表單之內。

?可以對input元素（type=text）與textarea元素指定required屬性。該屬性表示在用戶提交的時候進行檢查，檢查該元素內一定要有輸入內容。

?為input元素增加了幾個新的屬性：autocomplete、min、max、multiple、pattern與step。同時還有一個新的list元素與datalist元素配合使用。datalist元素與autocomlete屬性配合使用。multiple屬性允許在上傳文件時一次上傳多個文件。

?為input元素與button元素增加了新屬性formaction、formenctype、formmethod、formnovalidate與formtarget，它們可以重載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加了disabled屬性，用于把它的子元素設為disabled（無效）狀態。

?為input元素、button元素、form元素增加了novalidate屬性，該屬性可以取消提交時進行的有關檢查，表單可以被無條件提交。

?為所有可使用標簽（label元素）的表單元素（包括非隱藏的input元素（type屬性值不等于hidden)、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素）定義一個labels屬性，屬性值為一個NodeList對象，代表該元素所綁定的標簽元素所構成的集合。

?可以在標簽（label元素）內部放置一個表單元素，并且通過該標簽的control屬性訪問該表單元素。

?針對input元素與textarea元素，在HTML 5中增加SelectionDirection屬性。當用戶在這兩個元素中用鼠標選取部分文字時，可以使用該屬性來獲取選取方向。當用戶正向選取文字時，該屬性值為“forward”，當用戶反向選取文字時，該屬性值為“backward”。當用戶沒有選取任何文字時，該屬性值為“forward”。

?對復選框（checkbox元素）添加indeterminate屬性，以說明復選框處于“尚未明確是否選取”狀態。

?對類型為image的input元素添加用于指定圖片按鈕中圖片高度的height屬性與圖片寬度的width屬性。

?對textarea元素新增用于限定可輸入文字個數的maxlength屬性與用于指定表單提交時是否在文字換行處添加換行符的wrap屬性。

2. 鏈接相關的屬性

新增的與鏈接相關的屬性如下：

?為a與area元素增加了media屬性、download屬性以及ping屬性，其中media屬性規定目標URL是為什么類型的媒介/設備進行優化的，download屬性用于讓用戶下載目標鏈接所指向的資源，而不是直接打開該目標鏈接，這些屬性均只能在href屬性存在時使用。

?為area元素增加了href lang屬性與rel屬性，以保持與a元素、link元素的一致。

?為link元素增加了新屬性sizes。該屬性可以與icon元素結合使用（通過rel屬性），該屬性指定關聯圖標（icon元素）的大小。

?為base元素增加了target屬性，主要目的是保持與a元素的一致性。

3. 其他屬性

除了上面介紹的與表單和鏈接相關的屬性外，HTML 5還增加了下面的屬性：

?為ol元素增加start屬性與reversed屬性，其中start屬性定義列表的開始編號， reversed屬性指定列表倒序顯示。

?為meta元素增加charset屬性，因為這個屬性已經得到廣泛支持，而且為文檔的字符編碼的指定提供了一種比較良好的方式。

?為menu元素增加了兩個新的屬性——type與label。label屬性為菜單定義一個可見的標注，type屬性讓菜單可以以上下文菜單、工具條、與列表菜單三種形式出現。

?為style元素增加scoped屬性，用來規定樣式的作用范圍，譬如只對頁面上某個樹起作用。

?為script元素增加async屬性，它定義腳本是否異步執行。

?為html元素增加屬性manifest，開發離線Web應用程序時它與API結合使用，定義一個URL，在這個URL上描述文檔的緩存信息。

?為iframe元素增加三個屬性——sandbox、seamless與srcdoc，用來提高頁面安全性，防止不信任的Web頁面執行某些操作。

2.3.2 廢除的屬性

HTML 4中的一些屬性在HTML 5中不再使用，而是采用其他屬性或其他方案進行替代，具體如表2-1所示。

2.4 全局屬性

在HTML 5中，新增了一個“全局屬性”的概念。所謂全局屬性，是指可以對任何元素都使用的屬性，本節將詳細介紹幾種常用的全局屬性。

2.4.1 contentEditable屬性

contentEditable是由微軟開發的，被其他瀏覽器反編譯并投入應用的一個全局屬性。該屬性的主要功能是允許用戶編輯元素中的內容，所以該元素必須是可以獲得鼠標焦點的元素，而且在點擊鼠標后要向用戶提供一個插入符號，提示用戶該元素中的內容允許編輯。contentEditable屬性是一個布爾值屬性，可以被指定為true或false。

除此之外，該屬性還有個隱藏的inherit（繼承）狀態，當屬性值為true時，元素被指定為允許編輯；當屬性值為false時，元素被指定為不允許編輯；當未指定true或false時，則由inherit狀態來決定，如果元素的父元素是可編輯的，則該元素就是可編輯的。

另外，除了contentEditable屬性外，元素還具有一個isContentEditable屬性，當元素可編輯時，該屬性值為true；當元素不可編輯時，該屬性值為false。

代碼清單2-2中給出了一個使用contentEditable屬性的示例，當列表元素被加上contentEditable屬性后，該元素就變成可編輯的了，讀者可自行在瀏覽器中對該示例進行試驗。

代碼清單2-2 contentEditable屬性示例

    ＜!DOCTYPE html＞
    ＜head＞
    ＜meta charset="UTF-8"＞
    ＜title＞conentEditalbe屬性示例＜/title＞
    ＜/head＞
    ＜h2＞可編輯列表＜/h2＞
    ＜ul contentEditable="true"＞
    ＜li＞列表元素1＜/li＞
    ＜li＞列表元素2＜/li＞
    ＜li＞列表元素3＜/li＞
    ＜/ul＞

這段代碼運行后的結果如圖2-2所示。

在編輯完元素中的內容后，要想保存其中內容，只能把該元素的innerHTML發送到服務器端進行保存，因為改變元素內容后該元素的innerHTML內容也會隨之改變，目前還沒有特別的API來保存編輯后元素中的內容。

最后，在這里列舉一下支持contentEditable屬性的元素：defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIR、DIV、DL、DT、EM、FIELDSET、FONT、FORM、hn、I、INPUT type=button、 INPUT type=password、INPUT type=radio、INPUT type=reset、INPUT type=submit、INPUT type=text、INS、ISINDEX、KBD、LABEL。

2.4.2 designMode屬性

designMode屬性用來指定整個頁面是否可編輯，當頁面可編輯時，頁面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態。designMode屬性只能在JavaScript腳本中被編輯修改。該屬性有兩個值——“on”與“off”。當該屬性值被指定為“on”時，頁面可編輯；當該屬性值被指定為“off”時，頁面不可編輯。使用JavaScript腳本來指定designMode屬性的方法如下所示：

    document.designMode="on"

針對designMode屬性，各瀏覽器的支持情況也各不相同：

?IE 8：出于安全考慮，不允許使用designMode屬性讓頁面進入編輯狀態。

?IE 9：允許使用designMode屬性讓頁面進入編輯狀態。

?Chrome 3和Safari：使用內嵌frame的方式，該內嵌frame是可編輯的。

?Firefox和Opera：允許使用designMode屬性讓頁面進入編輯狀態。

2.4.3 hidden屬性

在HTML 5中，所有的元素都允許使用一個hidden屬性。該屬性類似于input元素中的hidden元素，功能是通知瀏覽器不渲染該元素，使該元素處于不可見狀態。但是元素中的內容還是被瀏覽器創建的，也就是說頁面裝載后允許使用JavaScript腳本將該屬性取消，取消后該元素變為可見狀態，同時元素中的內容也即時顯示出來。hidden屬性是一個布爾值的屬性，當設為true時，元素處于不可見狀態；當設為false時，元素處于可見狀態。

2.4.4 spellcheck屬性

spellcheck屬性是HTML 5針對input元素（type=text）與textarea這兩個文本輸入框提供的一個新的屬性，它的功能對用戶輸入的文本內容進行拼寫和語法檢查。spellcheck屬性是一個布爾值的屬性，具有true或false兩種值。但是它在書寫時有一個特殊的地方，就是必須明確聲明屬性值為true或false，書寫方法如下所示：

    ＜!—以下兩種書寫方法正確--＞
    ＜textarea spellcheck="true" ＞
    ＜input type=text spellcheck=false＞
    ＜!—以下書寫方法為錯誤--＞
    ＜textarea spellcheck ＞

需要注意的是，如果元素的readOnly屬性或disabled屬性設為true，則不執行拼寫檢查。

目前除了IE之外，Firefox、Chrome、Safari、Opera等瀏覽器都對該屬性提供了支持。

圖2-3為Opera瀏覽器中spellcheck屬性的表現形式。

2.4.5 tabindex屬性

tabindex是開發中的一個基本概念，當不斷敲擊Tab鍵讓窗口或頁面中的控件獲得焦點，當對窗口或頁面中的所有控件進行遍歷的時候，每一個控件的tabindex表示該控件是第幾個被訪問到的。

過去這個屬性在編輯網頁時是非常有用的，但如今控件的遍歷順序是由元素在頁面上所處位置決定的，所以就不再需要了。

但是tabindex還有另外一個作用，在默認情況下，只有鏈接元素與表單元素可以通過按鍵獲得焦點。如果對其他元素使用tabindex屬性后，也能讓該元素獲得焦點，那么當腳本中執行focus()語句的時候，就可以讓該元素獲得焦點。但這樣做會產生一個副作用：該元素也可以通過按Tab鍵獲得焦點，而這有時可能不是開發者想要的結果。

把元素的tabindex值設為負數（通常為-1）后就可以解決這個問題。tabindex值為負數后，仍然可以通過編程的方式讓元素獲得焦點，但按下Tab鍵時該元素就不能獲得焦點，這在復雜的頁面中或復雜的Web應用程序中是十分有用的。在HTML 4中，-1是一個無用的屬性值，但到了HTML 5中，通過巧妙運用可以讓該屬性值獲得極大應用。

2.5 新增的事件

HTML 5中對頁面、表單、鍵盤元素新增了各種事件，如表2-2所示（在HTML 5的新增API中使用到的部分事件將在介紹這些API時介紹）。