自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5的革新：結(jié)構(gòu)之美

作者：iefans
開發(fā) 前端 后端
本文從頁面的doctype說起，到用HTML 5新標(biāo)簽搭建語義化更明確的頁面的結(jié)構(gòu)，再解釋了一番與頁面結(jié)構(gòu)相關(guān)的新標(biāo)簽。相信大家對HTML 5的結(jié)構(gòu)性新標(biāo)簽有了一個新的認(rèn)知，如果你有興趣，那就打開你的IDE，寫上一段由HTML 5新標(biāo)簽搭建的代碼，然后用CSS去描繪你的宏偉藍(lán)圖吧!

HTML 5如同一場革命，正在Web2.0后時代轟轟烈烈的進(jìn)行著。

51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解

HTML 5是什么，無須我在這里贅述了。對于HTML 5的革新，按我的理解，可以總結(jié)為語義明確的標(biāo)簽體系、化繁為簡的富媒體支持、神奇的本地?cái)?shù)據(jù)存儲技術(shù)、不需要插件的富動畫(canvas)、強(qiáng)大的API支持。總之，HTML 5讓人機(jī)交互，人網(wǎng)交互變得更加舒適，貼合用戶。以往對富媒體應(yīng)用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內(nèi)容平臺推向標(biāo)準(zhǔn)化的應(yīng)用平臺，并一統(tǒng)各在平臺陣營的標(biāo)準(zhǔn)，才是HTML 5革命的初衷。

本文，我就拋磚引玉，闡述HTML 5的革新之一：語義更明確簡潔的結(jié)構(gòu)。

從”頭”說起

一個標(biāo)準(zhǔn)的XHTML頭部代碼應(yīng)該是這樣：

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
  2. “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
  3. <html xmlns=”http://www.w3.org/1999/xhtml”> 
  4. <head> 
  5. <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> 
  6. </head> 

你能記住嗎?你會去死記硬背嗎?當(dāng)然不會!我們只需要機(jī)械的復(fù)制粘貼即可。

再看看一個標(biāo)準(zhǔn)的HTML 5頭部是如何的：

  1. <!doctype html> 
  2. <meta charset=gb2312> 

孰繁孰簡，就不用我說了。是的，HTML 5的頭部可以如此簡單，可以輕易的記住!并且，可以忽略大小寫，引號以及最后一個尖括號前的反斜線。

為什么可以如此松散?其實(shí)，如果把XHTML當(dāng)成text/html發(fā)送，瀏覽器一樣可以很好的解析，瀏覽器并不在乎代碼的語法。所以，HTML 5是形而上的，它可能會破壞原有的一些標(biāo)準(zhǔn)，但仍可在瀏覽器中很好的表現(xiàn)。

當(dāng)然，為了團(tuán)隊(duì)協(xié)助與后續(xù)維護(hù)的方便，我們還是應(yīng)該統(tǒng)一一種你喜歡的風(fēng)格的寫法，比如：

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset=”gb2312″ /> 
  5. …  
  6. </head> 
  7. <body> 
  8. …  
  9. </body> 
  10. </html> 

另外，HTML 5雖然目前并不為所有瀏覽器所支持，但這個能省去100多字節(jié)(對于日PV百萬級以上的站點(diǎn)，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對瀏覽器解析模式有研究的話，你應(yīng)該知道，頁面在沒有定義doctype的情況下會觸發(fā)怪異模式，而只要定義了瀏覽器就可以在標(biāo)準(zhǔn)模式下解析頁面，而不需要指定某個類型的DTD。

新的語義化標(biāo)簽體系

語義化編碼是一個合格前端Developer必備的技能，但隨著網(wǎng)頁的日漸豐富化，僅僅用原有的xhtml標(biāo)簽去語義化顯然已經(jīng)力不從心。上帝說：”要有光!”便有了光。于是，HTML 5提供了一系列新的標(biāo)簽及相應(yīng)屬性，以反應(yīng)現(xiàn)代網(wǎng)站典型語義。實(shí)踐出真理。還是寫一個例子吧：

  1. <div id=”header”> 
  2. <div class=”hgroup”> 
  3. <h1>網(wǎng)站標(biāo)題</h1> 
  4. <h1>網(wǎng)站副標(biāo)題</h1> 
  5. </div> 
  6. <div id=”nav”> 
  7. <ul> 
  8. <li>HTML 5</li> 
  9. <li>CSS</li> 
  10. <li>JavaScript</li> 
  11. </ul> 
  12. </div> 
  13. </div> 
  14. <!–//header end–> 
  15. <div id=”left”> 
  16. <div class=”article”> 
  17. <p>這是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p> 
  18. </div> 
  19. <div class=”article”> 
  20. <p>這還是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p> 
  21. </div> 
  22. </div> 
  23. <!–//left end–> 
  24. <div id=”aside”> 
  25. <h1>作者簡介</h1> 
  26. <p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p> 
  27. </div> 
  28. <!–//side end–> 
  29. <div id=”footer”> 
  30. 頁面的底部  
  31. </div> 
  32. <!–//footer end–> 

上面是一個簡單的博客頁面部分HTML，由頭部、文章展示區(qū)、右側(cè)欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現(xiàn)。但是對瀏覽器來說，這就是一段沒有區(qū)分開權(quán)重的代碼，而不是一個讓機(jī)器也能讀懂語義的標(biāo)簽來定義相應(yīng)的區(qū)塊。比如，標(biāo)準(zhǔn)瀏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個快捷鍵可以帶引客戶直接跳轉(zhuǎn)到頁面的導(dǎo)航，但問題是所有的區(qū)塊都是用DIV定義，并且DIV的ID值是同開發(fā)者定的，所以，瀏覽器并不知道哪個應(yīng)該是導(dǎo)航鏈接所在區(qū)塊。HTML 5新標(biāo)簽的出現(xiàn)，正好彌補(bǔ)了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫：

  1. <header> 
  2. <hgroup> 
  3. <h1>網(wǎng)站標(biāo)題</h1> 
  4. <h1>網(wǎng)站副標(biāo)題</h1> 
  5. </hgroup> 
  6. <nav> 
  7. <ul> 
  8. <li>HTML 5</li> 
  9. <li>CSS</li> 
  10. <li>JavaScript</li> 
  11. </ul> 
  12. </nav> 
  13. </header> 
  14. <div id=”left”> 
  15. <article> 
  16. <p>這是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p> 
  17. </article> 
  18. <article> 
  19. <p>這還是一篇講述HTML 5新結(jié)構(gòu)標(biāo)簽的文章。</p> 
  20. </article> 
  21. </div> 
  22. <aside> 
  23. <h1>作者簡介</h1> 
  24. <p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p> 
  25. </aside> 
  26. <footer> 
  27. 網(wǎng)頁底部  
  28. </footer> 

原來，HTML的頁面結(jié)構(gòu)可以如此之美，不用注釋也能一目了然。對于瀏覽器，找到對應(yīng)的區(qū)塊也不再會茫然無措。

#p#

如何用HTML 5新標(biāo)簽結(jié)構(gòu)化元素

通過上面的示例，我們了解到HTML 5的新標(biāo)簽對結(jié)構(gòu)化的革新，但切換到實(shí)際使用中，該如何恰當(dāng)?shù)氖褂盟鼈兡?我想這也是很多HTML 5學(xué)習(xí)者想問一個問題。如同XHTML語義化一樣，HTML 5語義化標(biāo)簽的使用也應(yīng)該遵循：每個標(biāo)簽都有它特定的意義，而語義化，就是讓我們在適當(dāng)?shù)奈恢糜眠m當(dāng)?shù)臉?biāo)簽，以更好的讓人和機(jī)器(機(jī)器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標(biāo)簽一般是頁面的第一個區(qū)塊元素(header標(biāo)簽也可用于類型的頭部元素中，比如文章區(qū)塊的標(biāo)題)，包含的了頁面的主題信息;nav標(biāo)簽一般用于包裹導(dǎo)航信息;footer一般用來包裹頁面底部信息;等等。

下面是我參考HTML 5手冊列出的結(jié)構(gòu)類常用新標(biāo)簽的語義解釋及使用指引：

<header>標(biāo)簽

手冊釋義：定義 section 或 document 的頁眉。

使用指引：一般用來包含頁面頭部，也可用于其他區(qū)域頭部，比如article頭部：

  1. <header> 
  2. <hgroup> 
  3. <h1>網(wǎng)站標(biāo)題</h1> 
  4. <h1>網(wǎng)站副標(biāo)題</h1> 
  5. </hgroup> 
  6. </header> 

<hgroup>標(biāo)簽

手冊釋義：用于對網(wǎng)頁或區(qū)段(section)的標(biāo)題進(jìn)行組合。

使用指引：用于標(biāo)題類的組合，比如文章的標(biāo)題與副標(biāo)題：

  1. <hgroup> 
  2. <h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1> 
  3. <h2>HTML 5的革新</h2> 
  4. </hgroup> 

<nav>標(biāo)簽

手冊釋義：定義導(dǎo)航鏈接的部分。

使用指引：用于定義頁面的導(dǎo)航部分：

  1. <nav> 
  2. <ul> 
  3. <li>HTML 5</li> 
  4. <li>CSS</li> 
  5. <li>JavaScript</li> 
  6. </ul> 
  7. </nav> 

<aside>標(biāo)簽

定義 article 以外的內(nèi)容。aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。

使用指引：用于成節(jié)的內(nèi)容，會在文檔流中開始一個新的節(jié)，一般用于與文章內(nèi)容相關(guān)的邊欄：

  1. <aside> 
  2. <h1>作者簡介</h1> 
  3. <p>Mr.Think，專注Web前端技術(shù)的凡夫俗子。</p> 
  4. </aside> 

<section>標(biāo)簽

手冊釋義：定義文檔中的節(jié)(section)。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。

使用指引：用于成節(jié)的內(nèi)容，會在文檔流中開始一個新的節(jié)：

  1. <section> 
  2. <h1>section是什么？</h1> 
  3. <h2>一個新的章節(jié)</h2> 
  4. <article> 
  5. <h2>關(guān)于section</h1> 
  6. <p>section的介紹</p> 
  7. …  
  8. </article> 
  9. </section> 

<footer>標(biāo)簽

手冊釋義：定義 section 或 document 的頁腳。典型地，它會包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息。

使用指引：一般用來包裹整個頁面通用底部，也可用于其他區(qū)域底部，比如article底部：

  1. <footer> 
  2. COPYRIGHT@ieFans.Net  
  3. </footer> 

<article>標(biāo)簽

手冊釋義：定義外部的內(nèi)容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文

本。亦或是來自其他外部源內(nèi)容。

使用指引：顧名思義，一般用于文章區(qū)塊：

  1. <article> 
  2. <header> 
  3. <hgroup> 
  4. <h1>這是一篇介紹HTML 5結(jié)構(gòu)標(biāo)簽的文章</h1> 
  5. <h2>HTML 5的革新</h2> 
  6. </hgroup> 
  7. <time datetime=”2011-03-20″>2011.03.20</time> 
  8. </header> 
  9. <p>文章內(nèi)容詳情</p> 
  10. </article> 

<figure>標(biāo)簽

手冊釋義：用于對元素進(jìn)行組合。

使用指引：多用于圖片與圖片描述組合：

  1. <figure> 
  2. <img src=”img.gif” alt=”figure標(biāo)簽”  title=”figure標(biāo)簽” /> 
  3. <figcaption>這兒是圖片的描述信息</figcaption> 
  4. </figure> 

<menu>標(biāo)簽

手冊釋義：定義菜單列表。當(dāng)希望列出表單控件時使用該標(biāo)簽。

使用指引：使用于菜單類區(qū)塊，用來定義菜單列表或菜單選項(xiàng):

  1. <menu> 
  2. <li>HTML 5</li> 
  3. <li>CSS</li> 
  4. <li>JavaScript</li> 
  5. </menu> 

HTML 5的其他新標(biāo)簽，就不此一一解釋了，請自行查詢一下手冊。

其實(shí)，這些東西，如同XHTML的div、h1、inpu等標(biāo)簽一樣，只要平時多加實(shí)踐，運(yùn)用自如也是輕而易舉的。

關(guān)于兼容性

如果你是一個喜歡研究關(guān)注前端的人，你應(yīng)該知道淘寶的頁面結(jié)構(gòu)中已大量用到了HTML 5新標(biāo)簽。所以，我想說的是只要敢于嘗試，兼容性不是問題，兼容的方法，網(wǎng)上有很多(本文是講結(jié)構(gòu)的，哈~)。

后話

任何一門新技術(shù)，都需要一個適應(yīng)的過程。如果你準(zhǔn)備好了做一名優(yōu)秀的Web前端開發(fā)人員，那你就得不斷的嘗試并接受最新的前端技術(shù)。

孫文曾說，欲經(jīng)文明這幸福，不得不經(jīng)文明之痛苦。人類的革命如此，HTML 5的革命亦是如此。IE的日漸沒落，讓各大瀏覽器廠商以一次進(jìn)入了戰(zhàn)國時代，群雄逐鹿。而對于開發(fā)者，我們只奢求各大瀏覽器廠商盡可能的遵循同一個標(biāo)準(zhǔn)，而不是群雄逐鹿后的四分五裂。因?yàn)椋咝昝赖某尸F(xiàn)給各類用戶同樣的應(yīng)用才是我們的終極目標(biāo)。

如此，本文從頁面的doctype說起，到用HTML 5新標(biāo)簽搭建語義化更明確的頁面的結(jié)構(gòu)，再解釋了一番與頁面結(jié)構(gòu)相關(guān)的新標(biāo)簽。相信大家對HTML 5的結(jié)構(gòu)性新標(biāo)簽有了一個新的認(rèn)知，如果你有興趣，那就打開你的IDE，寫上一段由HTML 5新標(biāo)簽搭建的代碼，然后用CSS去描繪你的宏偉藍(lán)圖吧!
 

原文鏈接：http://www.iefans.net/html5-jiegou-zhimei/

【編輯推薦】

  1. 九個令人驚嘆的HTML 5和JavaScript實(shí)驗(yàn)
  2. HTML 5標(biāo)準(zhǔn)學(xué)習(xí)入門之文檔結(jié)構(gòu)
  3. HTML 5標(biāo)準(zhǔn)學(xué)習(xí)入門之DOCTYPE
  4. 學(xué)習(xí)HTML 5十佳站點(diǎn)推薦
  5. 10個超棒的HTML 5素描及繪畫設(shè)計(jì)工具
責(zé)任編輯：陳貽新 來源： iefans
HTML 5
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號