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