1.1 迎接新的Web時代

1.1.1 HTML 5時代即將來臨

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

在全面介紹HTML 5的相關(guān)知識之前，我們先來認(rèn)識一下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中，這段代碼將會以怎樣的形式出現(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所示。

圖1-1 HTML 4中的頁面結(jié)構(gòu)

那么，在HTML 5中，又會用怎樣的頁面代碼來描述這種結(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所示。

圖1-2 HTML 5中的頁面結(jié)構(gòu)

怎么樣？看出區(qū)別來了嗎？在第一個示例中，我們可以看見，在HTML 4中的一段JavaScript代碼，在HTML 5中消失了，取而代之的是一個在HTML 5中新出現(xiàn)的屬性。在第二個示例中，我們可以看見，在HTML 4中常見的用div來劃分頁面結(jié)構(gòu)的方法，到了HTML 5中，也被一種HTML 5中新出現(xiàn)的標(biāo)簽給替代了。那么究竟為什么HTML 5要對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平臺提供了許許多多新的功能。

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

首先，在HTML 5之前，有很多功能必須要使用JavaScript等腳本語言才能實(shí)現(xiàn)，譬如前面例子中提到，登錄畫面中經(jīng)常使用的讓文本框獲得光標(biāo)焦點(diǎn)的功能。如果使用HTML 5，同樣的功能只要使用元素的屬性標(biāo)簽就可以實(shí)現(xiàn)了。這樣的話，整個頁面就變得非常清楚直觀，容易理解。因此，Web設(shè)計者可以非常放心大膽地使用這些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è)計也是很簡單的，因此，它深受Web設(shè)計者與Web開發(fā)者的歡迎。