HTML5 语义化布局化标准化

HTML布局加倍清楚、标准，进修HTML5优化布局的思绪。
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.7Unsigned"src="installdialog.jpg"/>
</figure>
XHTML的图片布局<divclass="figure">
<h4class="legend">Figure2.InstallMozillaXFormsdialog</h4>
<imgalt="AWebsiteisrequestingpermissiontoinstalltheollowingitem:MozillaXForms0.7Unsigned"src="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.