第1章 Web時代的變遷

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

學習內容：

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

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

?了解為什么說開發者今后可以放心大膽地使用HTML 5進行Web網站與Web應用程序的開發，HTML 5被正式推廣以后之前的Web網站與Web應用程序怎么辦。

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

1.1 迎接新的Web時代

1.1.1 HTML 5時代即將來臨

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

在全面介紹HTML 5的相關知識之前，我們先來認識一下HTML 5中的部分代碼，對HTML 5有個初步的了解。

首先，我們來看一段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中，這段代碼將會以怎樣的形式出現呢？具體如代碼清單1-2所示。

代碼清單1-2 用HTML 5實現代碼清單1-1中的JavaScript代碼

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

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

代碼清單1-3 div標簽示例（用HTML 4實現）

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

頁面中有關該部分的結構示意圖如圖1-1所示。

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

代碼清單1-4 HTML 5中的新型結構示例

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

頁面中有關該部分的結構示意圖如圖1-2所示。

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

1.1.2 HTML 5的目標

HTML 5的目標是為了能夠創建更簡單的Web程序，書寫出更簡潔的HTML代碼。例如，為了使Web應用程序的開發變得更容易，提供了很多API；為了使HTML變得更簡潔，開發出了新的屬性、新的元素，等等?？傮w來說，為下一代Web平臺提供了許許多多新的功能。

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

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

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

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

1.2 HTML 5深受歡迎的理由

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

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

通過對Internet Explore、Google、Firefox、Safari、Opera等主要的Web瀏覽器的發展策略的調查，發現它們都在支持HTML 5上采取了措施。

?微軟：2010年3月16日，微軟于拉斯維加斯市舉行的MIX10技術大會上宣布已推出IE9瀏覽器開發者預覽版。微軟稱，IE9完成開發后，將更多支持CSS 3、SVG和HTML 5等互聯網瀏覽通用標準。

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

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

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

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

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

1.2.2 第一個理由：時代的要求

現在的時代已經迫切地要求有一個統一的互聯網通用標準。HTML 5之前的情況是，由于各瀏覽器之間的不統一，光是修改Web瀏覽器之間的由于兼容性而引起的bug就浪費了大量時間。而HTML 5的目標就是將Web帶入一個成熟的應用平臺，在HTML 5平臺上，視頻、音頻、圖像、動畫，以及同電腦的交互都被標準化。

關于Web瀏覽器，網頁標準計劃小組設計并推出了Acid3測試，它是針對網頁瀏覽器及設計軟件之標準相容性的一項測試。它針對Web應用程序中使用著的動態內容進行檢查，測試焦點主要集中在ECMAScript、DOM Level 3、Media Queries和data： URL。

Acid3測試推出后，各大瀏覽器都認真接受了它的測試并希望能夠獲得比較高的分數。這個測試的設計者，正是在W3C開發及設計者，HTML 5的重要人物Ian Hickson。Ian Hickson是WHATWG（Web Hypertext Application Technology Working Group）開發團體的成員，擔任Web標準規格的設計，現在是W3C的HTML 5工作組的負責人之一。

Ian Hickson設計Acid3測試的意圖是給聲稱“讓開發者能夠什么都不必擔心，可以放心大膽地進行開發”的各大Web瀏覽器提供一個機會，讓他們能夠以此來證明自己是優秀的。Acid3的宣傳是很重要的，要想擴大Web瀏覽器的市場份額，宣稱遵從它所依賴的標準是最有效的宣傳方法。圖1-3為Acid3的一個測試圖。

1.2.3 第二個理由：Internet Explorer 8

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

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

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

因為現在市場份額最高的Internet Explorer也在針對HTML 5做出積極對應，微軟也對新的互聯網通用標準表示了贊同和支持，所以可以說HTML 5在市場上大面積推廣的勢頭是非常強的。

1.3 可以放心使用HTML 5的三個理由

Web開發者最擔心的是新技術推出時由于其不成熟所產生的問題。如果能夠實現互聯網通用標準，可以避免各瀏覽器之間的不統一，這一點已經被明確了，但是在朝著這方面前進的過程中會不會出現什么周折是令人擔心的。

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

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

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

?實用性：HTML 5內部并沒有封裝什么很復雜的、不切實際的功能，而只是封裝了簡單實用的功能。

?非革命性的發展：HTML 5的內部功能不是革命性的，只是發展性的。

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

首先是兼容性問題。雖然到了HTML 5時代，但并不代表現在用HTML 4創建出來的網站必須全部要重建，只會要求各Web瀏覽器今后能正常運行用HTML 5開發出來的功能。“非革命性的發展”這一點正是通過兼容性體現出來的。正是因為保障了兼容性才能讓人毫不猶豫地用HTML 5來開發網站。

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

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

1.4 HTML 5要解決的三個問題

HTML 5的出現，對于Web來說意義是非常重大的。因為它的意圖是想要把目前Web上存在的各種問題一并解決掉，它是一個企圖心比較強的HTML版本。

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

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

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

如果用一句話來描述這個問題的原因，可以說是“規范不統一”。規范不統一，沒有被標準化，是這個問題的主要原因。

在HTML 5中，這個問題將得到解決。HTML 5的使命是詳細分析各Web瀏覽器所具有的功能，然后以此為基礎，要求這些瀏覽器所有內部功能都要符合一個通用標準。

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

?文檔結構不夠明確。

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

在HTML 5中，為了解決這個問題，追加了很多跟結構相關的元素。不僅如此，還結合了包括微格式、無障礙應用在內的各種各樣的周邊技術。

?Web應用程序的功能受到了限制。

最后一個問題是，HTML與Web應用程序的關系十分薄弱。Web應用程序的特征是先從網絡下載，然后忠實運行，因此應該對會威脅到用戶安全的功能進行限制。

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

為了彌補這方面的不足，HTML 5已經開始提供各種各樣Web應用上的新API，各瀏覽器也在快速地封裝著這些API，HTML 5已經使富Web應用的實現變成了可能。