HTML5 語義化結構化規範化

點評：HTML結構更加清晰、規範，學習HTML5優化結構的思路。 HTML5添加了一些新元素，用來標識常用的結構，是html更具語義化，可是我們無法直接使用，即使可能用到還要等他個十年八年的。那就像微格式一樣，使用class代替，或者隨意點，使用id和class名來代替，讓自己的結構更加清

HTML5添加了一些新元素，用來標識常用的結構，是html更具語義化，可是我們無法直接使用，即使可能用到還要等他個十年八年的。

那就像微格式一樣，使用class代替，或者隨意點，使用id和class名來代替，讓自己的結構更加清晰化，可以推廣為規範，讓團隊協作更加順暢。

一些新增的結構標記

◎section：這可以是書中的一章或一節，實際上可以是在HTML4中有自己的標題的任何東西

◎header：頁面上顯示的頁眉；與head元素不一樣

◎footer：頁腳；可以顯示電子郵件中的簽名

◎nav：指向其他頁面的一組鏈接

◎article：blog、雜誌、文章彙編等中的一篇文章

一些例子

HTML5的文檔結構

<header>...</header>

<nav>...</nav>

<article>

<section>...</section>

</article>

<aside>...</aside>

<footer>...</footer>

XHTML的文檔結構

<divid=header>header</div>

<divid=nav>nav</div>

<divclass=article>

<divclass=section>section</div>

</div>

<divid=aside>aside</div>

<divid=footer>footer</div>

HTML5的圖片結構

<figureid=fig2>

<legend>Figure2.InstallMozillaXFormsdialog</legend>

<imgalt=AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsignedsrc=installdialog.jpg/>

</figure>

XHTML的圖片結構

<divclass=figure>

<h4class=legend>Figure2.InstallMozillaXFormsdialog</h4>

<imgalt=AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsignedsrc=installdialog.jpg/>

</div>

HTML5的加上標記

m元素表示文本被加上標誌，但是不一定要強調。可以把它想像成書中突出顯示的一節。

Google的緩存頁面就是典型的用例。如果鏈接到一個緩存的副本，搜索詞就被加上標誌。例如，如果搜索Egret，那麼緩存的Google頁面可能像下面這樣：

TheGreat<m>Egret</m>(alsoknownastheAmerican<m>Egret</m>)isalargewhitewadingbirdfoundworldwide.TheGreat<m>Egret</m>flieswithslowwingbeats.ThescientificnameoftheGreat<m>Egret</m>isCasmerodiusalbus.XHTML的加上標記TheGreat<spanclass=m> Egret</span>(alsoknownastheAmerican<spanclass=m>Egret</span>)isalargewhitewadingbirdfoundworldwide.TheGreat<spanclass=m>Egret</span>flieswithslowwingbeats.ThescientificnameoftheGreat<spanclass=m>Egret</span>isCasmerodiusalbus.