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所示。

圖1-1 HTML 4中的頁面結構

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

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

<header>...</header>
<nav>...</nav>
<article>
</article>
<aside>...</aside>
<footer>...</footer>

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

圖1-2 HTML 5中的頁面結構

怎么樣？看出區別來了嗎？在第一個示例中，我們可以看見，在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變得更簡潔，開發出了新的屬性、新的元素，等等。總體來說，為下一代Web平臺提供了許許多多新的功能。

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

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

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

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