|
|
從HTML4誕生以來，整個(gè)互聯(lián)網(wǎng)環(huán)境、硬件環(huán)境都發(fā)生了翻天覆地的變化，開發(fā)者期望標(biāo)準(zhǔn)統(tǒng)一、用戶渴望更好體驗(yàn)的呼聲越來越高。20年磨一劍，HTML5作為下一代Web標(biāo)準(zhǔn)，它的新特性正在每個(gè)新式瀏覽器的版本中快速的得到支持和體現(xiàn)。隨著HTML5和CSS3的發(fā)展和完善，Web應(yīng)用程序正在逐漸的表現(xiàn)出桌面應(yīng)用的性能和功能，和桌面應(yīng)用之間的區(qū)別將越來越模糊。未來不能用HTML5來實(shí)現(xiàn)的功能將越來越少，未來繪圖、視頻編輯、3D建模等也將從單機(jī)軟件轉(zhuǎn)到瀏覽器上通過Web應(yīng)用程序來實(shí)現(xiàn)。
下文，我將結(jié)合實(shí)例，談?wù)劶?dòng)人心的HTML5之美。
1、語義之美
語義化很美，在合適的地方使用合適的標(biāo)簽，把人和機(jī)器一視同仁。書寫語義化的頁面就像建造符合工業(yè)標(biāo)準(zhǔn)的建筑，閱讀語義化的頁面像閱讀一本你熟識的優(yōu)美著作。
HTML5的語義化標(biāo)簽包括：
- <section> - 代表文檔中的一段或者一節(jié)；
- <nav> - 用于構(gòu)建導(dǎo)航；
- <article> - 表示文檔、頁面、應(yīng)用程序或網(wǎng)站中一體化的內(nèi)容；
- <aside> - 代表與頁面內(nèi)容相關(guān)、有別于主要內(nèi)容的部分；
- <hgroup> - 代表段或者節(jié)的標(biāo)題；
- <header> - 頁面的頁眉；
- <footer> - 頁面的頁腳；
- <time> - 表示日期和時(shí)間；
- <mark> - 文檔中需要突出的文字。
和采用css+div進(jìn)行頁面布局的方式相比，這些新標(biāo)簽明確的表現(xiàn)了頁面元素的結(jié)構(gòu)和含義。下面的代碼展示了這樣的一個(gè)示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>HTML5</title>
<link rel="stylesheet" href="html5.css">
</head>
<header>
<h1>Title</h1>
<h2>Subtitle</h2>
</header>
<aside>
<nav>
<h2>Nav1</h2>
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</nav>
<nav>
<h2>Nav2</h2>
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</nav>
</aside>
<article>
<header>
<hgroup>
<h1>HTML5 is beautiful</h1>
<h2>Semantic, Natural, Simple and Useful</h2>
</hgroup>
</header>
<section>
<h2>Semantic</h2>
<p>HTML5 is Semantic.</p>
</section>
<section>
<h2>Natural</h2>
<p>HTML5 is Natural.</p>
</section>
</atricle>
<footer>
<a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>
</footer>
</html>
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
