|
|
從HTML4誕生以來，整個互聯網環境、硬件環境都發生了翻天覆地的變化，開發者期望標準統一、用戶渴望更好體驗的呼聲越來越高。20年磨一劍，HTML5作為下一代Web標準，它的新特性正在每個新式瀏覽器的版本中快速的得到支持和體現。隨著HTML5和CSS3的發展和完善，Web應用程序正在逐漸的表現出桌面應用的性能和功能，和桌面應用之間的區別將越來越模糊。未來不能用HTML5來實現的功能將越來越少，未來繪圖、視頻編輯、3D建模等也將從單機軟件轉到瀏覽器上通過Web應用程序來實現。
下文，我將結合實例，談談激動人心的HTML5之美。
1、語義之美
語義化很美，在合適的地方使用合適的標簽，把人和機器一視同仁。書寫語義化的頁面就像建造符合工業標準的建筑，閱讀語義化的頁面像閱讀一本你熟識的優美著作。
HTML5的語義化標簽包括：
- <section> - 代表文檔中的一段或者一節；
- <nav> - 用于構建導航；
- <article> - 表示文檔、頁面、應用程序或網站中一體化的內容；
- <aside> - 代表與頁面內容相關、有別于主要內容的部分；
- <hgroup> - 代表段或者節的標題；
- <header> - 頁面的頁眉；
- <footer> - 頁面的頁腳；
- <time> - 表示日期和時間；
- <mark> - 文檔中需要突出的文字。
和采用css+div進行頁面布局的方式相比，這些新標簽明確的表現了頁面元素的結構和含義。下面的代碼展示了這樣的一個示例：
<!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>
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
