HTML5+jquery Mobile移動應用開發②
技術標籤：html5jquerywindows mobile
文章目錄
2.1 什麼是語義化標籤
在HTML5推出之前，開發者通常使用div來表示頁面中的各個部分，但是這些div沒有什麼實際意義（包括使用CSS樣式的id和class等內容）。這些標籤知識開發者提供給瀏覽器的指令，，用於定義一個網頁的某些部分。
以前在進行HTML開發時都會羅列一系列的div標籤，導致HTML程式碼五結構性、語義混亂。其實，HTML程式碼是非常重要的，不僅代表頁面的結構，還要讓後面的人能夠通過HTML程式碼對頁面的基本結構一目瞭然，以便後期的開發和維護。以前開發者只能使用一系列的div進行HTML結構的編寫，雖然指定了CSS中的id和class，但是命名不一定是規範的，其他開發人員也可以看不懂之前的HTML結構。
HTML5幫開發者指定了每一個語義化標籤應該使用的位置、內部結構等。這些並不是HTML語義化標籤的主要優勢，下面簡單說明HTML5語義化標籤到底可以為開發者帶來什麼好處。
1.使頁面渲染更有意義
語義化標籤為裝置提供了所需的相關資訊，無須開發人員考慮所有可能的顯示情況。無論哪種方式，一旦開發人員將文字標記為標題，就可以確信讀取裝置將根據自身的條件來顯示合適的頁面。
2.便於團隊後期維護
如果為標籤提供CSS中的id和class，很可能會出現不規範的情況。當開發者使用語義化標籤後，由於語義化標籤是規範的，因此方便了後期維護。
3.使HTML結構更加清晰
使用HTML語義化標籤可以讓頁面的結構更加清晰，按照規範定義的頁面，便於大家快速瞭解每一個結構的功能和作用。
4.為搜尋提供幫助
SEO優化等語義化標籤可以給搜尋引擎一個更清晰、更好的搜尋訊號，讓頁面更容易被搜尋到。
當然，有了語義化標籤，並不代表不需要div，div仍然是很重要的。此外，語義化標籤基本不會為開發者的頁面新增樣式，還需要使用CSS程式碼對樣式進行控制。因此，要明確HTML5語義化標籤的目的，既讓頁面的結構更加清晰、更加便於閱讀和解析。
下面我們逐一介紹HTML5為開發者提供的語義化標籤。
2.2 header標籤
header標籤主要用來定義頁面的頁首，如標籤等。如果開發者想為自己的頁面新增一個導航欄，就可以使用header標籤。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<header>
<hgroup>
<h1>網站標題</h1>
<h1>網站副標題</h1>
</hgroup>
</header>
</body>
</html>
使用div的HTML結構如下：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="top">
<ul>
<li>導航</li>
<li>導航</li>
<li>導航</li>
</ul>
</div>
<div class="nav">
<input type="search" placeholder="輸入內容"/>
</div>
</div>
</body>
</html>
對比一下，可以看出使用div的頁面結構十分混亂，並且需要開發者自己的設定元素的class等，以表明其含義。現在很多網站都流行兩個導航欄，使用div的時候，如果想定義這樣的結構，就需要用不同class的div，比如上面的nav
和top，顯然會讓人誤解。如果使用語義化標籤，那麼使用兩個<hgroup>即可將網站的導航欄分開，無疑會讓頁面的結構更加清晰。
2.3 footer標籤
footer標籤代表“網頁”或“section”的頁尾，通常含有該節的一些基本資訊，譬如作者、相關文件連結、版權資料。如果footer標籤包含整節，就會代表附錄、索引、提拔、許可協議、標籤、類別等資訊。
一般網頁下面都有一個copyright部分，這一部分就屬於footer標籤的應用。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
</body>
<footer>頁尾部分內容</footer>
</html>
在一個文件中可以使用多個footer標籤，既可以在整個網站的最下面使用footer標籤，也可以為頁面的每一個部分都指定footer標籤，讓頁面更有層次。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<header></header>
<div class="container"></div>
<footer></footer>
</div>
<div class="section">
<header></header>
<div class="container"></div>
<footer></footer>
</div>
</body>
</html>
這個模擬頁面中存在兩部分。分別為這兩個部分指定footer標籤，就可以清晰的看出頁面中的哪一部分是頁尾了。
在頁尾中，通常都會清楚的標出開發者的地址資訊，如下圖。
在HTML5中也有對應的標籤，就是<address>。W3C規範規定，在頁尾中出現的地址一定要放在<address>之中。這並沒有改變任何頁面樣式，只是為了形式一種規範，讓頁面的HTML結構看起來更清晰。<address>標籤通常會連同其他資訊包含在<footer>標籤中。
2.4 nav標籤
nav標籤用來規定哪個區域屬於導航區域。注意，nav標籤主要用來定義頁面中的主導航部分。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<nav>
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航3</li>
</ul>
</nav>
</div>
</body>
</html>
這裡使用nav標籤標示出開發者導航內容的部分。HTML5語義化標籤就是為了讓HTML程式碼有更加良好的結構以及明確的語義。試想一下，上面的程式碼如果不使用nav標籤，而使用帶有class的div標籤，是不是不太規範了呢？頁面中可能存在多個ul標籤，但是主導航只有一個。使用nav將表示導航的ul包裹起來，可以讓頁面的HTML結構更加清晰。
2.5 article標籤
article標籤用來包含一段文字內容的區域。要想知道這個標籤使用在什麼地方，最好了解一下article這個標籤是如何誕生的。
<article>元素的潛在來源包括論壇帖子、報紙文章、部落格條目、使用者評論。正是因為頁面中常常存在這些類似的區域，所以需要使用一個標籤，顯示的標明這部分是用來裝載一組文字的。這組文字的獨立的，就像一篇文章一樣。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<article>
<h3>發帖標題</h3>
<p>發帖內容</p>
<footer>帖子作者、創作時間</footer>
</article>
<article>
<h3>發帖標題</h3>
<p>發帖內容</p>
<footer>帖子作者、創作時間</footer>
</article>
</div>
</body>
</html>
本示例程式碼使用了多個article標籤，自然而然的將多個帖子分成了語義明確的幾個區塊。這些區塊之間相互獨立，每一個article區域又使用h3、p、footer來區分標題、主體內容以及頁尾區域。和滿是div的結構相比，這種結構的優勢一目瞭然。不要以為使用語義化標籤只是這一小點差異，當頁面與來越複雜的時候，語義化標籤和堆滿div的HTML頁面結構差距還是很大的。
article標籤還可以內嵌，下面給出一個例子。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<article>
<header>主內容標題</header>
<div class="content">
<article>
<h3>評論標題</h3>
<p>評論內容</p>
<footer>評論作者、釋出時間</footer>
</article>
</div>
</article>
<article>
<header>主內容標題</header>
<div class="content">
<article>
<h3>評論標題</h3>
<p>評論內容</p>
<footer>評論作者、釋出時間</footer>
</article>
</div>
</article>
</div>
</body>
</html>
這種結構十分常見，一個文章下面是一些評論內容。使用article巢狀的好處是可以讓閱讀HTML程式碼結構的人很清楚程式碼的含義，即哪些article之間是相互關聯的、哪些article之間是相互獨立的。
2.6 section標籤
section標籤定義的是文件中的區段，比如章節、頁首、頁尾或文件中的其他部分。在一段獨立的內容中，有一部分跟整體有關聯，但是又有自己的含義，這時就可以使用section。例如，在百度百科中，介紹關鍵字的時候，有的字輩標成藍色，這部分就可以使用section標籤。
在section標籤中可以指定一個cite屬性併為這個屬性傳遞一個URL。需要注意的是，這個URL並不會自動跳轉到相應的web連結，而只是一個HTML程式碼中的參照。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<article>
<header>標題</header>
<article>
<p>一部分內容</p>
<section>一個從網上摘抄的內容</section>
<p>一部分內容</p>
</article>
</article>
</div>
</body>
</html>
開發者在給article編輯內容的時候，使用了section，用於區分一塊從網站上摘抄的內容。當然最好為這個section指定cite屬性，以表明開發者從網站上引用內容的來源。
2.7 aside標籤
aside標籤定義的是所處內容之外的內容。這個概念看起來不太好理解，但是想一想平常看到過的網站，就可以理解其中的含義了。
在訪問網站的過程中，有些文章會內嵌一個廣告，這個廣告其實就屬於aside的範疇。廣告本身和這個區域的文章內容並沒有什麼關係，卻被放在了這塊區域之內，這個廣告是所處內容之外動的內容。
在頁面中，如果需要側欄、廣告位等，就可以將他們放在aside中。
【示例】
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
<style type="text/css">
</style>
</head>
<body>
<div class="main">
<article>
<header>標題</header>
<article>
<p>一部分內容</p>
<section>一個從網上摘抄的內容</section>
<p>一部分內容</p>
</article>
</article>
<article>
<header>標題</header>
<article>
<p>一部分內容</p>
<section>一個從網上摘抄的內容</section>
<p>一部分內容</p>
</article>
<aside>
<div class="ad">
廣告內容
</div>
</aside>
</article>
</div>
</body>
</html>
本章我們學習了HTML5中語義化標籤，使用這些標籤可以更輕鬆地編寫語義清晰的HTML程式碼結構。HTML程式碼是頁面的骨架，非常重要。語義化標籤在程式碼維護、規範以及移動web開發上的重要性不可小視。一個具有註腳的文字。