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