1.1 HTML5概述

隨著時代的發(fā)展，統(tǒng)一的互聯(lián)網(wǎng)通用標準顯得尤為重要。在HTML5之前，由于各個瀏覽器之間的標準不統(tǒng)一，給網(wǎng)站開發(fā)人員帶來了很大的麻煩。HTML5的目標就是將Web帶入一個成熟的應用平臺。在HTML5平臺上，視頻、音頻、圖像、動畫及同電腦的交互都被標準化。本節(jié)將針對HTML5發(fā)展歷程、優(yōu)勢、瀏覽器支持情況及如何創(chuàng)建HTML5頁面進行講解。

1.1.1 HTML5發(fā)展歷程

HTML的出現(xiàn)由來已久，1993年HTML首次以因特網(wǎng)的形式發(fā)布。20世紀90年代，HTML快速發(fā)展，從2.0版到3.2版、4.0版，再到1999年的4.01版。隨著HTML的發(fā)展，萬維網(wǎng)聯(lián)盟（World Wide Web Consortium, W3C）掌握了對HTML規(guī)范的控制權(quán)，負責后續(xù)版本的制定工作。

然而，在快速發(fā)布了HTML的4個版本后，業(yè)界普遍認為HTML已經(jīng)窮途末路，對Web標準的焦點也開始轉(zhuǎn)移到了XML和XHTML上，HTML被放在了次要位置。不過，在此期間HTML體現(xiàn)了頑強的生命力，主要的網(wǎng)站內(nèi)容還是基于HTML的。為了支持新的Web應用，克服現(xiàn)有的缺點，HTML迫切需要添加新的功能，制定新規(guī)范。

為了能繼續(xù)深入發(fā)展HTML規(guī)范，在2004年，一些瀏覽器廠商聯(lián)合成立了WHATWG工作組。它們創(chuàng)立了HTML5規(guī)范，并開始專門針對Web應用開發(fā)新功能。Web 2.0也是在那個時候被提出來的。

2006年，W3C組建了新的HTML工作組，明智地采納了WHATWG的意見，并于2008年發(fā)布了HTML5的工作草案。由于HTML5能解決實際的問題，所以在規(guī)范還未定稿的情況下，各大瀏覽器廠家已經(jīng)開始對旗下產(chǎn)品進行升級以支持HTML5的新功能。這樣，得益于瀏覽器的實驗性反饋，HTML5規(guī)范也得到了持續(xù)地完善，并以這種方式迅速融入到了對Web平臺的實質(zhì)性改進中。

2014年10月29日，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過8年的艱辛努力，HTML5標準規(guī)范終于制定完成，并公開發(fā)布。HTML5將會逐漸取代HTML 4.01、XHTML 1.0標準，以期能在互聯(lián)網(wǎng)應用迅速發(fā)展的同時，使網(wǎng)絡(luò)標準達到符合當代的網(wǎng)絡(luò)需求，為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容。

1.1.2 HTML5的優(yōu)勢

從HTML4.0、XHTML到HTML5，從某種意義上講，這是HTML描述性標記語言的一種更加規(guī)范的過程。因此，HTML5并沒有給開發(fā)者帶來多大的沖擊。但HTML5增加了很多非常實用的新功能和新特性，下面具體介紹HTML5的一些優(yōu)勢。

1．解決了跨瀏覽器問題

在HTML5之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統(tǒng)一的標準。使用不同的瀏覽器，常常看到不同的頁面效果。在HTML5中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式IE瀏覽器，只需簡單地添加JavaScript代碼就可以使用新的元素。

2．新增了多個新特性

HTML語言從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經(jīng)過多年的完善，已經(jīng)發(fā)展成為一種非常重要的標記語言。HTML5新增的特性如下。

● 新的特殊內(nèi)容元素，比如header、nav、section、article、footer。

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

● 用于繪畫的canvas元素。

● 用于媒介回放的video和audio元素。

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

● 地理位置、拖曳、攝像頭等API。

3．用戶優(yōu)先的原則

HTML5標準的制定是以用戶優(yōu)先為原則的，一旦遇到無法解決的沖突時，規(guī)范會把用戶放在第一位。另外，為了增強HTML5的使用體驗，還加強了以下兩方面的設(shè)計。

● 安全機制的設(shè)計

為確保HTML5的安全，在設(shè)計HTML5時做了很多針對安全的設(shè)計。HTML5引入了一種新的基于來源的安全模型，該模型不僅易用，而且對不同的API（Application Programming Interface，應用程序編程接口）都通用。使用這個安全模型，不需要借助于任何不安全的hack就能跨域進行安全對話。

● 表現(xiàn)和內(nèi)容分離

表現(xiàn)和內(nèi)容分離是HTML5設(shè)計中的另一個重要內(nèi)容。實際上，表現(xiàn)和內(nèi)容的分離早在HTML4.0中就有設(shè)計，但是分離的并不徹底。為了避免可訪問性差、代碼高復雜度、文件過大等問題，HTML5規(guī)范中更細致、清晰地分離了表現(xiàn)和內(nèi)容。但是考慮到HTML5的兼容性問題，一些陳舊的表現(xiàn)和內(nèi)容的代碼還是可以兼容使用的。

4．化繁為簡的優(yōu)勢

作為當下流行的通用標記語言，HTML5盡可能地簡化，嚴格遵循了“簡單至上”的原則，主要體現(xiàn)在這幾個方面：

● 新的簡化的字符集聲明；

● 新的簡化的DOCTYPE；

● 簡單而強大的HTML5 API；

● 以瀏覽器原生能力替代復雜的JavaScript代碼。

為了實現(xiàn)這些簡化操作，HTML5規(guī)范需要比以前更加細致、精確。為了避免造成誤解，HTML5對每一個細節(jié)都有著非常明確的規(guī)范說明，不允許有任何的歧義和模糊出現(xiàn)。

1.1.3 HTML5瀏覽器支持情況

現(xiàn)今瀏覽器的許多新功能都是從HTML5標準中發(fā)展而來的。目前常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，如圖1-1所示。通過對這些主流Web瀏覽器的發(fā)展策略的調(diào)查，發(fā)現(xiàn)它們都在支持HTML5上采取了措施。

1.IE瀏覽器

2010年3月16日，微軟于MIX10技術(shù)大會上宣布，其推出的IE9瀏覽器已經(jīng)支持HTML5。同時還聲稱，隨后將更多地支持HTML5新標準和CSS3新特性。

2．火狐瀏覽器

2010年7月，Mozilla基金會發(fā)布了即將推出的Firefox4瀏覽器的第一個早期測試版。該版本中的Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多HTML5形式的控制等。從官方文檔來看，F(xiàn)irefox4對HTML5是完全級別的支持。目前，包括在線視頻、在線音頻在內(nèi)的多種應用都已在該版本中實現(xiàn)。

圖1-1 常見瀏覽器圖標

3.Google瀏覽器

2010年2月19日，谷歌Gears項目經(jīng)理伊安·費特通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發(fā)HTML5項目。據(jù)費特表示，目前在谷歌看來，Gears應用與HTML5的諸多創(chuàng)新非常相似，并且谷歌一直積極發(fā)展HTML5項目。因此，只要谷歌不斷以加強新網(wǎng)絡(luò)標準的應用功能為工作重點，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出調(diào)整的重要原因。

4.Safari瀏覽器

2010年6月7日，蘋果在開發(fā)者大會的會后發(fā)布了Safari5，這款瀏覽器支持10個以上的HTML5新技術(shù)，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajax歷史和WebSocket字幕。

5.Opera瀏覽器

2010年5月5日，Opera軟件公司首席技術(shù)官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3將是全球互聯(lián)網(wǎng)發(fā)展的未來趨勢，目前包括Opera在內(nèi)的諸多瀏覽器廠商，紛紛研發(fā)HTML5相關(guān)產(chǎn)品，Web的未來屬于HTML5。

綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨。

1.1.4 創(chuàng)建第一個HTML5頁面

網(wǎng)頁制作過程中，為了開發(fā)方便，通常我們會選擇一些較便捷的工具，如Editplus、notepad++、sublime、Dreamweaver等。實際工作中，最常用的網(wǎng)頁制作工具是Dreamweaver。本書中的案例將全部使用Adobe Dreamweaver CS6。接下來使用Dreamweaver CS6來創(chuàng)建一個HTML5頁面，具體步驟如下。

（1）打開Dreamweaver CS6，選擇菜單欄中的“文件”→“新建”命令，彈出“新建文檔”對話框，如圖1-2所示。在“頁面類型”列表中選擇“HTML”選項，并在右下角的“文檔類型”下拉菜單中選擇“HTML5”，如圖1-3所示。

圖1-2 執(zhí)行“文件”→“新建”命令

圖1-3 新建HTML5默認文檔

（2）單擊“創(chuàng)建”按鈕，將會新建一個HTML5默認文檔。切換到“代碼”視圖，這時在文檔窗口中會出現(xiàn)Dreamweaver自帶的代碼，如圖1-4所示。

圖1-4 HTML5文檔代碼視圖窗口

（3）修改HTML5文檔標題，將代碼<title>與<title>標記中的“無標題文檔”，修改為“第一個網(wǎng)頁”。然后，在<body>與</body>標記之間添加一段文本“這是我的第一個HTML5頁面哦”，具體代碼如例1-1所示。

例1-1 example01.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>第一個網(wǎng)頁</title>
    6   </head>
    7   <body>
    8     這是我的第一個HTML5頁面哦
    9   </body>
    10  </html>

（4）在菜單欄中選擇【文件】→【保存】選項，其快捷鍵為Ctrl+S。接著，在彈出來的“另存為”對話框中選擇文件的保存地址并輸入文件名即可保存文件。例如，本書將文件命名為example01.html，保存在D盤“HTML5+CSS3”文件夾下“教材案例”的“chapter01”文件夾中，如圖1-5所示。

圖1-5 “另存為”對話框

（5）在谷歌瀏覽器中運行example01.html，效果如圖1-6所示。

圖1-6 第一個HTML5頁面效果

此時，瀏覽器窗口中將顯示一段文本，第一個簡單的HTML5頁面創(chuàng)建完成。

注意：

由于谷歌瀏覽器對HTML5及CSS3的兼容性支持較好，而且調(diào)試網(wǎng)頁非常方便，所以在HTML5網(wǎng)頁制作過程中谷歌瀏覽器是最常用的瀏覽器。本書涉及的案例將全部在谷歌瀏覽器中運行。