第1章 Web時(shí)代的變遷

自從2010年HTML 5正式推出以來，它立刻受到了世界各大瀏覽器的熱烈歡迎與支持。根據(jù)世界上各大IT界知名媒體評(píng)論，新的Web時(shí)代，HTML 5的時(shí)代馬上就要到來。本章重點(diǎn)介紹什么是HTML 5，HTML 5產(chǎn)生的時(shí)代背景，為什么HTML 5會(huì)如此深受業(yè)界歡迎，以及HTML能夠解決什么問題。

學(xué)習(xí)內(nèi)容：

?初步了解什么是HTML 5，HTML 5與之前版本的HTML大致上有哪些區(qū)別。

?了解世界各大知名瀏覽器目前的發(fā)展策略，為什么它們都不約而同地把支持HTML 5當(dāng)成目前的工作重點(diǎn)，就連微軟也把全面支持HTML 5作為新版Internet Explorer 9 （IE 9）瀏覽器的開發(fā)重點(diǎn)與主要宣傳手段。

?了解為什么說開發(fā)者今后可以放心大膽地使用HTML 5進(jìn)行Web網(wǎng)站與Web應(yīng)用程序的開發(fā)，HTML 5被正式推廣以后之前的Web網(wǎng)站與Web應(yīng)用程序怎么辦。

?了解使用HTML 5到底可以解決哪些問題。

1.1 迎接新的Web時(shí)代

1.1.1 HTML 5時(shí)代即將來臨

自從2010年HTML 5正式推出以來，它就以一種驚人的速度被迅速推廣著，就連微軟也因此為下一代IE 9做了標(biāo)準(zhǔn)上的改進(jìn)，使其能夠支持HTML 5。關(guān)于各主流瀏覽器對(duì)于HTML 5所表現(xiàn)出來的熱烈歡迎、積極支持的詳細(xì)情況，以及為什么HTML 5會(huì)如此受歡迎，我們將在后面幾節(jié)中詳細(xì)介紹，這里，筆者要告訴大家的是，目前業(yè)界全體都步調(diào)一致地朝著HTML 5的方向邁進(jìn)著，HTML 5的時(shí)代馬上就要到來了。

在全面介紹HTML 5的相關(guān)知識(shí)之前，我們先來認(rèn)識(shí)一下HTML 5中的部分代碼，對(duì)HTML 5有個(gè)初步的了解。

首先，我們來看一段HTML 4中常見的JavaScript代碼，如代碼清單1-1所示。

代碼清單1-1 HTML 4中的JavaScript代碼示例

    ＜form＞
    ＜p＞＜label＞Username:＜input name=search type="text" id="search"＞＜/label＞＜/p＞
    ＜script type="text/javascript"＞
            document.getElementById ('search').focus()
    ＜/script＞
    ＜/form＞

在HTML 5中，這段代碼將會(huì)以怎樣的形式出現(xiàn)呢？具體如代碼清單1-2所示。

代碼清單1-2 用HTML 5實(shí)現(xiàn)代碼清單1-1中的JavaScript代碼

    ＜form＞
    ＜p＞＜label＞Search:＜input name=search autofocus＞＜/label＞＜/p＞
    ＜/form＞

我們來看一下在HTML 4中常見的一種頁面結(jié)構(gòu)，代碼如代碼清單1-3所示。

代碼清單1-3 div標(biāo)簽示例（用HTML 4實(shí)現(xiàn)）

    ＜div id="header"＞...＜/div＞
    ＜div id="nav"＞...＜/div＞
    ＜div class="article"＞
    ＜/div＞
    ＜div id="side-bar"＞...＜/div＞
    ＜div id="footer"＞...＜/div＞

頁面中有關(guān)該部分的結(jié)構(gòu)示意圖如圖1-1所示。

那么，在HTML 5中，又會(huì)用怎樣的頁面代碼來描述這種結(jié)構(gòu)呢？具體如代碼清單1-4所示。

代碼清單1-4 HTML 5中的新型結(jié)構(gòu)示例

    ＜header＞...＜/header＞
    ＜nav＞...＜/nav＞
    ＜article＞
    ＜/article＞
    ＜aside＞...＜/aside＞
    ＜footer＞...＜/footer＞

頁面中有關(guān)該部分的結(jié)構(gòu)示意圖如圖1-2所示。

怎么樣？看出區(qū)別來了嗎？在第一個(gè)示例中，我們可以看見，在HTML 4中的一段JavaScript代碼，在HTML 5中消失了，取而代之的是一個(gè)在HTML 5中新出現(xiàn)的屬性。在第二個(gè)示例中，我們可以看見，在HTML 4中常見的用div來劃分頁面結(jié)構(gòu)的方法，到了HTML 5中，也被一種HTML 5中新出現(xiàn)的標(biāo)簽給替代了。那么究竟為什么HTML 5要對(duì)HTML 4的腳本以及頁面代碼做這種修改呢？做這種修改的目的又是什么呢？

1.1.2 HTML 5的目標(biāo)

HTML 5的目標(biāo)是為了能夠創(chuàng)建更簡單的Web程序，書寫出更簡潔的HTML代碼。例如，為了使Web應(yīng)用程序的開發(fā)變得更容易，提供了很多API；為了使HTML變得更簡潔，開發(fā)出了新的屬性、新的元素，等等。總體來說，為下一代Web平臺(tái)提供了許許多多新的功能。

那么讓我們先來初步接觸一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中，我們會(huì)針對(duì)這些功能做一個(gè)全面介紹。

首先，在HTML 5之前，有很多功能必須要使用JavaScript等腳本語言才能實(shí)現(xiàn)，譬如前面例子中提到，登錄畫面中經(jīng)常使用的讓文本框獲得光標(biāo)焦點(diǎn)的功能。如果使用HTML 5，同樣的功能只要使用元素的屬性標(biāo)簽就可以實(shí)現(xiàn)了。這樣的話，整個(gè)頁面就變得非常清楚直觀，容易理解。因此，Web設(shè)計(jì)者可以非常放心大膽地使用這些HTML 5中新增的屬性標(biāo)簽。由于HTML 5中提供了大量的這種可以替代腳本的屬性標(biāo)簽，使得開發(fā)出來的界面語言也變得更加簡潔易懂。

不但如此，HTML 5使頁面結(jié)構(gòu)也變得清楚明了。之前使用的div標(biāo)簽也不再使用了，而是使用前面HTML 5示例中所提到的更加語義化的結(jié)構(gòu)標(biāo)簽。這樣的話，書寫出來的界面結(jié)構(gòu)顯得非常清晰，各部位要展示什么內(nèi)容也讓人一目了然。

雖然HTML 5宣稱的立場是“非革命性的發(fā)展”，但是它所帶來的功能是讓人渴望的，使用它所進(jìn)行的設(shè)計(jì)也是很簡單的，因此，它深受Web設(shè)計(jì)者與Web開發(fā)者的歡迎。

1.2 HTML 5深受歡迎的理由

1.2.1 世界知名瀏覽器廠商對(duì)HTML 5的支持

HTML 5被說成是劃時(shí)代也好，具有革命性也好，如果不能被業(yè)界承認(rèn)并且大面積地推廣使用，這些都是沒有意義的。事實(shí)上，今后HTML 5被正式地、大規(guī)模地投入應(yīng)用的可能性是相當(dāng)高的。

通過對(duì)Internet Explore、Google、Firefox、Safari、Opera等主要的Web瀏覽器的發(fā)展策略的調(diào)查，發(fā)現(xiàn)它們都在支持HTML 5上采取了措施。

?微軟：2010年3月16日，微軟于拉斯維加斯市舉行的MIX10技術(shù)大會(huì)上宣布已推出IE9瀏覽器開發(fā)者預(yù)覽版。微軟稱，IE9完成開發(fā)后，將更多支持CSS 3、SVG和HTML 5等互聯(lián)網(wǎng)瀏覽通用標(biāo)準(zhǔn)。

?Google：2010年2月19日，谷歌Gears項(xiàng)目經(jīng)理伊安-費(fèi)特通過博客宣布，谷歌將放棄對(duì)Gears瀏覽器插件項(xiàng)目的支持，以此重點(diǎn)開發(fā)HTML 5項(xiàng)目。據(jù)費(fèi)特表示，目前，在谷歌看來，Gears面臨的主要問題是，該應(yīng)用與HTML 5的諸多創(chuàng)新非常相似，而且谷歌一直積極發(fā)展HTML 5項(xiàng)目。因此，只要谷歌不斷以加強(qiáng)新網(wǎng)絡(luò)標(biāo)準(zhǔn)的應(yīng)用功能為工作重點(diǎn)，那么為Gears增加新功能就無太大意義了。目前，多種瀏覽器將會(huì)越來越多地為GMail及其他服務(wù)提供更多脫機(jī)功能方面的支持，因此Gears面臨的需求也在日益下降，這是谷歌做出上述調(diào)整的重要原因。

?蘋果：2010年6月7日，蘋果在開發(fā)者大會(huì)的會(huì)后發(fā)布了Safari 5，這款瀏覽器支持10個(gè)以上的HTML 5新技術(shù)，包括全屏幕播放、HTML 5視頻、HTML 5地理位置、HTML 5切片元素、HTML 5的可拖動(dòng)屬性、HTML 5的形式驗(yàn)證、HTML 5的Ruby、HTML 5的AJAX歷史和WebSocket字幕。

?Opera：2010年5月5日，Opera軟件公司首席技術(shù)官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網(wǎng)等少數(shù)幾家媒體的采訪。號(hào)稱“CSS之父”的Hakon Wium Lie認(rèn)為，HTML 5與CSS 3將是全球互聯(lián)網(wǎng)發(fā)展的未來趨勢，目前包括Opera在內(nèi)的諸多瀏覽器廠商，紛紛在研發(fā)HTML 5相關(guān)產(chǎn)品，Web的未來屬于HTML 5。

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

以上證據(jù)表明，目前這些瀏覽器都紛紛地朝著支持HTML 5、結(jié)合HTML 5的方向邁進(jìn)著，因此HTML 5已經(jīng)被廣泛地推行開來了。為什么HTML 5會(huì)如此受歡迎，理由如1.2.2節(jié)和1.2.3節(jié)所示。

1.2.2 第一個(gè)理由：時(shí)代的要求

現(xiàn)在的時(shí)代已經(jīng)迫切地要求有一個(gè)統(tǒng)一的互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)。HTML 5之前的情況是，由于各瀏覽器之間的不統(tǒng)一，光是修改Web瀏覽器之間的由于兼容性而引起的bug就浪費(fèi)了大量時(shí)間。而HTML 5的目標(biāo)就是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在HTML 5平臺(tái)上，視頻、音頻、圖像、動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。

關(guān)于Web瀏覽器，網(wǎng)頁標(biāo)準(zhǔn)計(jì)劃小組設(shè)計(jì)并推出了Acid3測試，它是針對(duì)網(wǎng)頁瀏覽器及設(shè)計(jì)軟件之標(biāo)準(zhǔn)相容性的一項(xiàng)測試。它針對(duì)Web應(yīng)用程序中使用著的動(dòng)態(tài)內(nèi)容進(jìn)行檢查，測試焦點(diǎn)主要集中在ECMAScript、DOM Level 3、Media Queries和data： URL。

Acid3測試推出后，各大瀏覽器都認(rèn)真接受了它的測試并希望能夠獲得比較高的分?jǐn)?shù)。這個(gè)測試的設(shè)計(jì)者，正是在W3C開發(fā)及設(shè)計(jì)者，HTML 5的重要人物Ian Hickson。Ian Hickson是WHATWG（Web Hypertext Application Technology Working Group）開發(fā)團(tuán)體的成員，擔(dān)任Web標(biāo)準(zhǔn)規(guī)格的設(shè)計(jì)，現(xiàn)在是W3C的HTML 5工作組的負(fù)責(zé)人之一。

Ian Hickson設(shè)計(jì)Acid3測試的意圖是給聲稱“讓開發(fā)者能夠什么都不必?fù)?dān)心，可以放心大膽地進(jìn)行開發(fā)”的各大Web瀏覽器提供一個(gè)機(jī)會(huì)，讓他們能夠以此來證明自己是優(yōu)秀的。Acid3的宣傳是很重要的，要想擴(kuò)大Web瀏覽器的市場份額，宣稱遵從它所依賴的標(biāo)準(zhǔn)是最有效的宣傳方法。圖1-3為Acid3的一個(gè)測試圖。

1.2.3 第二個(gè)理由：Internet Explorer 8

Internet Explorer也積極地朝著支持HTML 5的方向邁進(jìn)著。Internet Explorer對(duì)此十分重視。雖然它的使用者依然很多，但是由于最近被Firefox等其他Web瀏覽器搶去了很多市場份額，它很不甘心。于是繼Internet Explorer 7（IE 7）發(fā)表后不久，立刻推出了Internet Explorer 8（IE 8）的Release版。

新推出的IE 8宣稱遵從互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)。雖然其他的瀏覽器由于標(biāo)榜遵從該標(biāo)準(zhǔn)而獲得了很多市場份額，但是Internet Explorer肯定是要對(duì)此采取強(qiáng)有力的對(duì)策的。因此Internet Explorer把宣稱遵從互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)看成了很重要的一件事，并且開始在IE 8里支持HTML 5。

例如，HTML 5中代替Cookie的sessionStorage功能與globalStorage功能在IE 8里都獲得了支持。使用Ajax時(shí)如果點(diǎn)擊返回按鈕也可以真正讓操作返回了（在IE 7中點(diǎn)擊返回按鈕，畫面跳轉(zhuǎn)到其他畫面）。很多Internet Explorer自己獨(dú)特的處理方法與特性，今后也會(huì)有所改變。

因?yàn)楝F(xiàn)在市場份額最高的Internet Explorer也在針對(duì)HTML 5做出積極對(duì)應(yīng)，微軟也對(duì)新的互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)表示了贊同和支持，所以可以說HTML 5在市場上大面積推廣的勢頭是非常強(qiáng)的。

1.3 可以放心使用HTML 5的三個(gè)理由

Web開發(fā)者最擔(dān)心的是新技術(shù)推出時(shí)由于其不成熟所產(chǎn)生的問題。如果能夠?qū)崿F(xiàn)互聯(lián)網(wǎng)通用標(biāo)準(zhǔn)，可以避免各瀏覽器之間的不統(tǒng)一，這一點(diǎn)已經(jīng)被明確了，但是在朝著這方面前進(jìn)的過程中會(huì)不會(huì)出現(xiàn)什么周折是令人擔(dān)心的。

雖然Web開發(fā)者普遍認(rèn)為有了HTML 5是比較好的，但是還是會(huì)很擔(dān)心諸如“它在老版本的瀏覽器上也能正常運(yùn)行嗎？”，“會(huì)不會(huì)產(chǎn)生錯(cuò)誤？”等各種問題。但是可以很高興地告訴你，請放心，HTML 5就像以前CSS剛開始普及時(shí)一樣不會(huì)存在什么問題。

有三個(gè)理由證明可以放心使用HTML 5：

?兼容性：HTML 5在老版本的瀏覽器上也可以正常運(yùn)行。

?實(shí)用性：HTML 5內(nèi)部并沒有封裝什么很復(fù)雜的、不切實(shí)際的功能，而只是封裝了簡單實(shí)用的功能。

?非革命性的發(fā)展：HTML 5的內(nèi)部功能不是革命性的，只是發(fā)展性的。

以上三點(diǎn)就是所謂的“HTML設(shè)計(jì)原則”，HTML 5也是以該設(shè)計(jì)原則為基本原則而開發(fā)出來的，各主流瀏覽器使用HTML 5的前提也就是要求HTML 5能夠符合這些原則，今后也將以其為前提來支持HTML 5。下面針對(duì)這些原則進(jìn)行介紹。

首先是兼容性問題。雖然到了HTML 5時(shí)代，但并不代表現(xiàn)在用HTML 4創(chuàng)建出來的網(wǎng)站必須全部要重建，只會(huì)要求各Web瀏覽器今后能正常運(yùn)行用HTML 5開發(fā)出來的功能。“非革命性的發(fā)展”這一點(diǎn)正是通過兼容性體現(xiàn)出來的。正是因?yàn)楸Ｕ狭思嫒菪圆拍茏屓撕敛华q豫地用HTML 5來開發(fā)網(wǎng)站。

接著是實(shí)用性。實(shí)用性是指要求能夠解決實(shí)際問題。HTML 5內(nèi)只封裝了切實(shí)有用的功能，不封裝復(fù)雜而沒有實(shí)際意義的功能。

通過以上列舉的HTML設(shè)計(jì)原則，尤其是與HTML 4相兼容的部分，基本上可以讓人放下心來，大膽地使用HTML 5。

1.4 HTML 5要解決的三個(gè)問題

HTML 5的出現(xiàn)，對(duì)于Web來說意義是非常重大的。因?yàn)樗囊鈭D是想要把目前Web上存在的各種問題一并解決掉，它是一個(gè)企圖心比較強(qiáng)的HTML版本。

那么，到底Web上存在哪些問題，HTML 5又打算怎么解決呢？

?Web瀏覽器之間的兼容性很低。

首先要提到的就是，Web瀏覽器之間的兼容性是非常低的。在某個(gè)Web瀏覽器上可以正常運(yùn)行的HTML/CSS/JavaScript等Web程序，在另一個(gè)Web瀏覽器上就不正常了的事情是非常多的。

如果用一句話來描述這個(gè)問題的原因，可以說是“規(guī)范不統(tǒng)一”。規(guī)范不統(tǒng)一，沒有被標(biāo)準(zhǔn)化，是這個(gè)問題的主要原因。

在HTML 5中，這個(gè)問題將得到解決。HTML 5的使命是詳細(xì)分析各Web瀏覽器所具有的功能，然后以此為基礎(chǔ)，要求這些瀏覽器所有內(nèi)部功能都要符合一個(gè)通用標(biāo)準(zhǔn)。

如果各瀏覽器都符合通用標(biāo)準(zhǔn)，然后以該標(biāo)準(zhǔn)為基礎(chǔ)來書寫程序，那么程序在各瀏覽器都能正常運(yùn)行的可能性就大大提高了，這對(duì)于Web開發(fā)者和Web設(shè)計(jì)者都是一件令人可喜的事情。而且，今后開發(fā)者開發(fā)出來的Web功能只要符合通用標(biāo)準(zhǔn)，Web瀏覽器也都是很愿意封裝該功能的。

?文檔結(jié)構(gòu)不夠明確。

第二個(gè)問題是，在之前的HTML版本中，文檔的結(jié)構(gòu)不夠清晰、明確。例如，為了要表示“標(biāo)題”，“正文”，之前一般都是用＜div＞元素。但是，嚴(yán)格說來，＜div＞不是一個(gè)能把文檔結(jié)構(gòu)表達(dá)得很清楚的元素，使用了過多的＜div＞要素的文章，閱讀時(shí)不仔細(xì)研究，是很難看出文檔結(jié)構(gòu)的。而且，對(duì)于搜索引擎或屏幕閱讀器等程序來說，過多使用了div元素，那么這些程序就連“從哪到哪算是重要的正文”，“這個(gè)＜ul＞要素是表示導(dǎo)航菜單，還是表示項(xiàng)目列表”等對(duì)于結(jié)構(gòu)分析來說最基本的問題的答案也都不知道。

在HTML 5中，為了解決這個(gè)問題，追加了很多跟結(jié)構(gòu)相關(guān)的元素。不僅如此，還結(jié)合了包括微格式、無障礙應(yīng)用在內(nèi)的各種各樣的周邊技術(shù)。

?Web應(yīng)用程序的功能受到了限制。

最后一個(gè)問題是，HTML與Web應(yīng)用程序的關(guān)系十分薄弱。Web應(yīng)用程序的特征是先從網(wǎng)絡(luò)下載，然后忠實(shí)運(yùn)行，因此應(yīng)該對(duì)會(huì)威脅到用戶安全的功能進(jìn)行限制。

目前安全性的保障這方面已做到了，但對(duì)于Web應(yīng)用程序來說，一直以來HTML真正所做出的貢獻(xiàn)是很少的，譬如說就連上傳文件的同時(shí)想選擇一個(gè)以上的文件都做不到。

為了彌補(bǔ)這方面的不足，HTML 5已經(jīng)開始提供各種各樣Web應(yīng)用上的新API，各瀏覽器也在快速地封裝著這些API，HTML 5已經(jīng)使富Web應(yīng)用的實(shí)現(xiàn)變成了可能。