1.2 HTML5的改變

HTML5草案的前身名為Web Application 1.0，于2004年被WHATWG（Web Hypertext Application Technology Working Group）提出，于2007年被W3C接納。HTML5是HTML、XHTML以及HTML DOM的新標準， HTML5之前的HTML4.01以及XHTML1.0/2.0主要把HTML限定為一種頁面標記語言，而HTML5則是第一個將Web作為開發平臺的HTML語言。

目前主流的瀏覽器一般都提供了對HTML5的支持，例如最新版本的Safari3.1+、Chrome3+、Firefox3.5+以及Opera9.5+都部分支持HTML5的新特性，Internet Explorer 9+也部分支持HTML5的新特性。

1.2.1 HTML5新增元素

HTML5中引入了很多新的標記元素。根據內容類型的不同，這些元素可以分為內嵌、流、標題、交互、元數據、短語等。

1．新增的結構元素

HTML5定義了一組新的語義化標記來描述元素的內容，可以簡化HTML頁面設計，并且在搜索引擎抓取和索引網頁時，也可以利用這些元素。新增的語義化標記元素如表1-1所示。

以上元素本身并沒有特殊的功能，使用div也可以實現以上功能，但是由新的語義化元素組成的網頁結構對于搜索引擎更加友好，能夠更好地被搜索引擎搜索和抓取。

1）article元素的使用示例可參照article.html

article.html

article.html的顯示結果如圖1-1所示。

2）aside元素的使用示例可參照aside.html

aside.html

aside.html的顯示結果如圖1-2所示。

2．新增的功能元素

HTML5中新增的功能元素包括：

● hgroup元素——用于對整個頁面或頁面中一個內容區塊的標題進行組合。

● figure元素——表示一段獨立的流內容，一般表示文檔主題流內容中的一個獨立單元。

● video元素——定義視頻，例如電影片段或其他視頻流。

● audio元素——定義音頻，例如音樂或其他音頻流。

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

● mark元素——主要用來在視覺上向用戶呈現需要突出顯示或高亮顯示的文字。

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

● canvas元素——表示圖形，如圖表和其他圖像。

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

● source元素——為媒介元素定義媒介資源。

● menu元素——表示菜單列表，當需要列出表單控件時使用該標簽。

● ruby元素——表示ruby注釋。

● rt元素——表示字符的解釋或發音。

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

● wbr元素——表示軟換行。

● command元素——表示命令按鈕，如單選按鈕、復選框或普通按鈕。

● details元素——表示用戶要求得到并且可以得到的細節信息，可與summary元素配合使用。

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

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

● keygen元素——表示生成密鑰。

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

● email——表示必須輸入E-mail地址的文本輸入框。

● url——表示必須輸入URL地址的文本輸入框。

● number——表示必須輸入數值的文本輸入框。

● range——表示必須輸入一定范圍內數字值的文本輸入框。

● Date Pickers——可供選取日期和時間的新型的文本輸入框。

1.2.2 HTML5廢除的元素

在HTML5中廢除了HTML4.01中過時的元素。

1．能夠使用CSS替代的元素

basefont、big、center、font、s、strike、tt和u這些元素都是用來表現文本效果的，而HTML5提倡把呈現效果的功能放到CSS樣式表中統一處理。其中，font元素允許由編輯器插入，s、strike可以由del元素代替，tt元素可以由CSS的font-family屬性代替。

2．不再使用frame框架

對于frameset、frame、noframes元素，由于frame框架對網頁的可用性存在負面影響，因此在HTML5中已不支持frame框架，只保留了內聯框架iframe。

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

對于applet、bgsound、blink和marquee等元素，由于只有部分瀏覽器支持，所以在HTML5中廢除。其中，applet元素可以由embed元素或者object元素代替，bgsound元素可以由audio元素代替，marquee可以由JavaScript腳本代替。

4．其他被廢除的元素

HTML5中其他被廢除的元素還包括：

● 使用ruby元素代替的rb元素。

● 使用abbr元素代替的acronym元素。

● 使用ul元素代替的dir元素。

● 使用form元素與input元素相結合代替的isindex元素。

● 使用pre元素代替的listing元素。

● 使用code元素代替的xmp元素。

● 使用GUIDS代替的nextid元素。

● 使用“text/plain”MIME類型代替的plaintext元素。

1.2.3 HTML5新增的屬性

HTML5中新增的屬性包括表單屬性、鏈接屬性以及其他屬性。

1．表單屬性

1）autofocus屬性

對input元素的所有類型以及由select、textarea與button元素指定的autofocus屬性，則在頁面加載后元素會自動獲得焦點，正常情況下，一個頁面只有一個元素有autofocus屬性，如果設置多個，則第一個有效。

2）placeholder屬性

對input元素的text、search、url、telephone、email以及password類型，以及textarea元素指定placeholder屬性，可以對用戶的輸入進行提示。該提示會在輸入字段為空時顯示，并會在輸入框獲取焦點時顯示。

3）form屬性

對input元素的所有類型以及由output、select、textarea、button與fieldset指定的form屬性，聲明元素屬于哪個表單，則不論元素位于頁面的什么位置，都在表單之內。一個輸入元素可以屬于一個或多個表單，多個表單使用空格隔開。輸入元素的form屬性值必須是所屬表單的id值。form屬性可以為頁面布局帶來一定的便利。

4）required屬性

為input元素的text、search、url、telephone、email、password、Date pickers、number、checkbox、radio、file類型指定required屬性，則表示用戶提交時該元素的輸入值不能為空。

5）autocomplete屬性

為form元素和input元素的text、search、url、telephone、email、password、Date pickers、range、color類型指定autocomplete屬性的值為"on"，允許瀏覽器預測對輸入域的輸入，當用戶在輸入域內開始輸入時，瀏覽器基于之前輸入的值顯示出推薦選項。如果autocomplete屬性值為"off"，則不允許元素啟用自動完成功能。

6）重置表單默認行為的新屬性

在HTML4.01中一個表單內的所有元素通過表單的action屬性統一提交到動態處理程序，HTML5中可以通過formaction屬性實現單擊不同的提交按鈕，將表單提交到不同的動態處理程序。另外，在HTML4.01中一個表單只有一個method屬性指定統一的提交方法，在HTML5中可以通過formmethod實現單擊不同的按鈕使用不同的提交方法。

HTML5中的表單非常靈活，因為HTML5中input元素的submit和image類型，以及button元素增加了formaction、formenctype、formmethod、formnovalidate及formtarget屬性，分別用來重寫所在表單的相應屬性，例如formaction重寫表單的action屬性，formmethod重寫表單的method屬性。

7）image提交按鈕新增width和height屬性

width和height屬性可以用來設置input元素的image類型的圖像的寬度和高度。

8）list屬性

list屬性與<datalist>標簽配合使用，datalist是輸入域的選項列表，當用戶要設定的值不在選擇列表內時，允許自行輸入。關于<datalist>標簽后面會有詳細介紹。list屬性適用于input元素的text、search、url、telephone、email、date pickers、number、range、color類型。

9）max、min和step屬性

max屬性規定輸入域所允許的最大值，min屬性規定輸入域允許的最小值，step屬性為輸入域合法的數字間隔。

10）pattern屬性

pattern屬性用于驗證輸入字段的模式，即正則表達式。在HTML4.01中如果使用正則表達式驗證還需要結合JavaScript腳本，在HTML5中直接指定pattern屬性值即可。pattern屬性適用于input元素的text、search、url、telephone、email、password等類型。

11）multiple屬性

multiple屬性允許輸入域中可選擇多個值，適用于input元素的email和file類型。

12）fieldset增加disabled屬性

HTML5為fieldset元素增加了disabled屬性，可以把它的子元素設成disabled狀態，但是不包括legend里的元素。

13）label增加control屬性

HTML5為label新增加了control屬性，在label內部放置一個表單元素，可以通過<label>的control屬性訪問該表單元素。

14）selectionDirection屬性

用戶在input元素或者textarea元素中選取部分文字時，可以使用該屬性獲取選取方向。當用戶正向選擇文字時，該屬性值為"forward"；當反向選取時值為"backward"；當用戶沒有選擇任何文字時，該屬性值為"forward"。

以上新增表單的屬性的使用方法在后面會進行詳細描述。

2．鏈接屬性

1）media屬性

為a和area增加了media屬性，規定目標URL是為哪種類型的媒介或設備進行優化的。

2）area新增hreflang、media、rel、type屬性

為了保證a元素和link元素的一致性，hreflang規定在被鏈接的文檔中的文本語言，media指定對何種設備優化，rel規定當前文檔與被鏈接的資源之間的關系，type規定目標URL的MIME類型。

3）link新增sizes屬性

sizes屬性規定被鏈接資源的尺寸。

4）base新增target屬性

為base元素增加target屬性是為了與a元素保持一致。

3．其他屬性

1）ol新增reverse屬性

reverse屬性規定有序表倒序。

2）meta新增charset屬性

charset屬性指定網頁的編碼集。

3）menu新增type和label屬性

label為menu定義標注，type使menu可以以上下文菜單、工具條、列表右鍵快捷菜單3種形式出現，但此屬性大部分瀏覽器并不支持。

4）style新增scoped屬性

scoped屬性允許樣式只應用到style元素的父元素及其子元素，在CSS中并不推薦使用。

5）script新增async屬性

async屬性指定腳本是否異步執行，但僅適用于外部腳本。

6）html新增manifest屬性

HTML5為html元素增加了manifest屬性，指向一個用于結合離線Web應用API的應用程序緩存清單。當開發離線Web應用程序時此屬性與API結合使用，定義一個URL，在URL上描述文檔的緩存信息。

7）iframe新增sandbox、seamless、srcdoc屬性

以上屬性用于提高頁面的安全性，防止執行不信任的操作。

1.2.4 HTML5的新特性和新規則

HTML5的新特性包括：

● 用于繪畫的canvas元素；

● 用于媒介播放的video元素；

● 對本地離線存儲更好的支持；

● 新的特殊內容，例如article、footer、header、nav、section等；

● 新的表單控件，例如calendar、date、time、email、url、search等。

HTML5的新規則包括：

● 新特性應該基于HTML、CSS、DOM以及JavaScript；

● 減少對外部插件的需求，例如Flash；

● 更優秀的錯誤處理；

● 更多取代腳本的標記；

● HTML5應該獨立于設備；

● 開發進程透明。

1.2.5 HTML5開發工具

任何一款文本編輯工具都可以用來開發HTML5，以下列舉幾種常用的HTML5開發工具。

1．Dreamweaver CS6

Dreamweaver CS6是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用的網頁設計軟件。它支持代碼拆分、設計、實時視圖等多種方式來創建、編輯修改網頁。它使用了自適應網格版面創建頁面，在發布前使用多屏幕預覽審閱，可以大大提高工作效率。

2．Nodepad++

Nodepad++是程序員必備的文本編輯器，它小巧高效，支持27種編程語言或腳本語言，例如C、C++、Java、C#、JavaScript、PHP等，Nodepad++可以完美地代替記事本。

3．HBuilder

HBuilder是DCloud（數學天堂）推出的一款支持HTML5的Web開發的集成開發工具，它速度較快，由于是基于Eclipse的，因此兼容了Eclipse的插件。HBuilder最大的優勢就是通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升了HTML、JavaScript、CSS的開發效率。

4．Sublime Text

Sublime Text是一個代碼編輯器（Sublime Text 2是收費軟件，但可以無限期試用）。Sublime Text具有漂亮的用戶界面和強大的功能，例如代碼縮略圖、Python插件、代碼段等。Sublime Text具有自定義鍵綁定、菜單和工具欄，它的主要功能包括拼寫檢查、書簽、完整的Python API、Goto功能、即時切換項目、多選擇、多窗口等。另外，Sublime Text是一個跨平臺的編輯器，同時支持Windows、Linux、Mac OS X等操作系統。

5．WebStorm

WebStorm是Jetbrains公司旗下的一款JavaScript開發工具，目前已經被為數眾多的中國JavaScript開發者譽為“Web前端開發神器”“最強大的HTML5編輯器”“最智能的JavaScript IDE”等。

6．Visual Studio Code

Visual Studio Code是一個輕量級且功能強大的源代碼編輯器，它運行在桌面上，支持Windows、Mac OS和Linux系統。它提供了對JavaScript、TypeScript和Node.js的內置支持，并為其他語言（例如C、C#、Java、Python、PHP、GO）提供了一個豐富的擴展生態系統和運行平臺（如.NET和Unity）。