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

HTML5大綱算法對結(jié)構(gòu)的影響

作者：七寶
開發(fā) 前端 算法
這兩個都是我早期的作品了。當(dāng)時還覺得自己的結(jié)構(gòu)寫的不錯，特別是第二個，還用上了HTML5標(biāo)簽，以為自己就踏進這個新世界了?？催^HTML大綱算法之后，檢測了一下這些頁面，真的是慘不忍睹。

[[91338]]

HTML5已經(jīng)出來好長時間了，越來越多人希望并且開始把HTML5應(yīng)用到平時的工作、個站中。大家對section、article、aside、nav等新標(biāo)簽的使用也越來越上手，也許是自我感覺良好的上手。不從多個方面去認識理解這些標(biāo)簽，可能反而讓自己落入了更混亂的境地。HTML的大綱算法(outlining algorithm)就是一個很重要的切入點。

先看兩個大綱：

這兩個都是我早期的作品了。當(dāng)時還覺得自己的結(jié)構(gòu)寫的不錯，特別是第二個，還用上了HTML5標(biāo)簽，以為自己就踏進這個新世界了?？催^HTML大綱算法之后，檢測了一下這些頁面，真的是慘不忍睹。第一個各種混亂標(biāo)題不說，“主創(chuàng)陣容”居然從屬于“用戶評論”？第二個也不好發(fā)言了，那么多未命名的是什么東西？不過總是要踩在傷痛的歷史上才能往前進。

再來看幾個其他人重構(gòu)的頁面大綱：

想象你是一個有點視力障礙的用戶，需要依靠屏幕閱讀器來瀏覽這些網(wǎng)頁，閱讀器會按照層級來給你解讀這個網(wǎng)頁，你覺得上面那個網(wǎng)頁更容易讓你獲得所需要的資訊呢？也許對比完大家更想知道大綱算法到底是個怎么樣的東西了吧？

什么是HTML大綱算法？

大綱算法允許用戶代理(user agent)從一個web頁面生成一個信息結(jié)構(gòu)目錄，讓用戶對頁面有一個快速的概覽。類似書籍、PDF、幫助文檔等，都有一個清晰的目錄結(jié)構(gòu)，用戶能方便的定位所需內(nèi)容。一個良好結(jié)構(gòu)的大綱，不僅是對于搜索引擎的優(yōu)化，更是為借助于屏幕閱讀器瀏覽網(wǎng)頁的盲人（或弱視力）用戶提供了巨大的幫助。

幫助文檔的目錄結(jié)構(gòu)：

每個頁面都有大綱，先從一個簡單的例子來了解web頁面大綱吧。假設(shè)要做一個電影介紹頁面，主題是8月電影推介，頁面結(jié)構(gòu)也許如下：

  1. 1.8月電影推介  
  2.   1.國內(nèi)電影  
  3.     1.《四大名捕》  
  4.     2.《搜索》  
  5.   2.國外電影  
  6.     1.《冰川時代4》  
  7.     2.《在劫難逃》 

HTML4或者之前，我們都是采用hn（h1~h6）來生成大綱的。HTML5引入了section、article、aside、nav等新的節(jié)點元素(sectioning content)，添加了一些新的規(guī)則，后面會詳細闡述。

#p#

hn生成的大綱

也許HTML4的結(jié)構(gòu)會這樣寫：

  1. <div> 
  2.   <h1>8月電影推介</h1> 
  3.   <h2>國內(nèi)電影</h2> 
  4.   <h3>《四大名捕》</h3> 
  5.   <p>四大名捕講的是..</p> 
  6.   <h3>《搜索》</h3> 
  7.   <p>搜索講的是..</p> 
  8.   <h2>國外電影</h2> 
  9.   <h3>《冰川時代4》</h3> 
  10.   <p>冰川時代4講的是..</p> 
  11.   <h3>《在劫難逃》</h3> 
  12.   <p>在劫難逃講的是..</p> 
  13.   <p>以上內(nèi)容由迅雷看看提供</p> 
  14. <div> 

可以看出，網(wǎng)頁大綱由標(biāo)題的層級來生成。

如果想要查看這段代碼的大綱，可以試試Geoffrey Sneddon做的大綱工具Outliner（強烈推薦），上傳文件和輸入片段代碼都可以。如果想要查看在線網(wǎng)頁的大綱，可以給瀏覽器安裝插件：chrome：HTML5 Outliner（推薦）/ Web Devoloper，firefox：Web Devoloper；opera：HTML5 Outliner。（HTML5 Outliner里中文會顯示亂碼，建議換成英文測試。瀏覽器插件可以顯示中文）

每個標(biāo)題都會生成一個隱性節(jié)點(implicit section)，緊隨其后的相對層級低的標(biāo)題會成為它的子節(jié)點，層級相同或者更高的標(biāo)題則會關(guān)閉這個節(jié)點并生成新的節(jié)點?？梢詼y試一下下面的代碼：

  1. <h3>《四大名捕》</h3> 
  2. <p>四大名捕講的是..</p> 
  3. <h3>《搜索》</h3> 
  4. <p>搜索講的是..</p> 

或者：

  1. <h3>《搜索》</h3> 
  2. <p>搜索講的是..</p> 
  3. <h2>國外電影</h2> 

節(jié)點元素生成的大綱

也許HTML5的結(jié)構(gòu)會這樣寫：

  1. <div> 
  2.   <h6>8月電影推介</h6> 
  3.   <section> 
  4.     <h1>國內(nèi)電影</h1> 
  5.     <article> 
  6.       <h1>《四大名捕》</h1> 
  7.       <p>四大名捕講的是..</p> 
  8.     </article> 
  9.     <article> 
  10.       <h3>《搜索》</h3> 
  11.       <p>搜索講的是..</p> 
  12.     </article> 
  13.   </section> 
  14.   <section> 
  15.     <h5>國外電影</h5> 
  16.     <article> 
  17.       <h6>《冰川時代4》</h6> 
  18.       <p>冰川時代4講的是..</p> 
  19.     </article> 
  20.     <article> 
  21.       <h1>《在劫難逃》</h1> 
  22.       <p>在劫難逃講的是..</p> 
  23.     </article> 
  24.   </section> 
  25.  
  26.   <p>以上內(nèi)容由迅雷看看提供</p> 
  27. <div> 

（可以先注意一下上面這段代碼的各個hn）把代碼復(fù)制到Outliner工具去查看，很驚訝的發(fā)現(xiàn)，生成的大綱跟層級寫的很漂亮的HTML4一樣。為什么hn的層級在這里沒有表現(xiàn)出來？

原因是此時大綱是由節(jié)點元素生成的，而非標(biāo)題元素。HTML5的新標(biāo)簽section、article、aside、nav會生成顯性節(jié)點(explicit sections)，每個顯性節(jié)點內(nèi)部又有它自己的標(biāo)題結(jié)構(gòu)（當(dāng)然也符合HTML4、HTML5大綱算法）。這也就是為什么HTML5允許多個h1存在的原因，不過，在全部瀏覽器、屏幕閱讀器都完美支持HTML5之前，建議還是需要同時考慮標(biāo)題結(jié)構(gòu)，優(yōu)雅降級。所以上面的結(jié)構(gòu)可以改成這樣：

  1. <div> 
  2.   <h1>8月電影推介</h1> 
  3.   <section> 
  4.     <h2>國內(nèi)電影</h2> 
  5.     <article> 
  6.       <h3>《四大名捕》</h3> 
  7.       <p>四大名捕講的是..</p> 
  8.     </article> 
  9.     <article> 
  10.       <h3>《搜索》</h3> 
  11.       <p>搜索講的是..</p> 
  12.     </article> 
  13.   </section> 
  14.   <section> 
  15.     <h2>國外電影</h2> 
  16.     <article> 
  17.       <h3>《冰川時代4》</h3> 
  18.       <p>冰川時代4講的是..</p> 
  19.     </article> 
  20.     <article> 
  21.       <h3>《在劫難逃》</h3> 
  22.       <p>在劫難逃講的是..</p> 
  23.     </article> 
  24.   </section> 
  25.   <p>以上內(nèi)容由迅雷看看提供</p> 
  26. <div> 

這里有另外一個問題值得注意，就是“以上內(nèi)容由迅雷看看提供”這段話指的是上面的哪部分內(nèi)容？在HTML4結(jié)構(gòu)里，這段話是從屬于隱性節(jié)點“《在劫難逃》”的，但明顯不對。HTML5大綱算法就很好地解決了這個問題。

hn和節(jié)點元素同時生成大綱

如果頁面里既有隱性節(jié)點（h1~h6）又有顯性節(jié)點（section等），大綱又會如何生成呢？只要記住一點：顯性節(jié)點能包含隱性節(jié)點，反之則不行。

  1. <h1>8月電影推介</h1> 
  2. <section> 
  3.   <h2>國內(nèi)電影</h2> 
  4.   <h3>《四大名捕》</h3> 
  5.   <p>四大名捕講的是..</p> 
  6.   <h3>《搜索》</h3> 
  7.   <p>搜索講的是..</p> 
  8. </section> 

（代碼1）

這段代碼的大綱會是： 

  1. 1.8月電影推介  
  2.   1.國內(nèi)電影  
  3.     1.《四大名捕》  
  4.     2.《搜索》 
  1. <h1>8月電影推介</h1> 
  2. <h2>國內(nèi)電影</h2> 
  3. <article> 
  4.   <h3>《四大名捕》</h3> 
  5.   <p>四大名捕講的是..</p> 
  6. </article> 
  7. <article> 
  8.   <h3>《搜索》</h3> 
  9.   <p>搜索講的是..</p> 
  10. </article> 

然而這段代碼的大綱會是：

  1. 1.8月電影推介  
  2.   1.國內(nèi)電影  
  3.   2.《四大名捕》  
  4.   3.《搜索》  

由標(biāo)題元素生成的隱性節(jié)點遇上由節(jié)點元素生成的顯性節(jié)點就會關(guān)閉并生成下一個同級節(jié)點。

未命名節(jié)點(untitled sections)

HTML5新節(jié)點元素除了section、article還有aside、nav，我們也來使用一下。

  1. <nav> 
  2.   <ul> 
  3.     <li><a href="">首頁</a></li> 
  4.     <li><a href="">專題</a></li> 
  5.     <li><a href="">關(guān)于</a></li> 
  6.   </ul> 
  7. </nav> 
  8. <h1>8月電影推介</h1> 
  9. <section> 
  10.   <h2>國內(nèi)電影</h2> 
  11. </section> 
  12. <section> 
  13.   <h2>國外電影</h2> 
  14. </section> 

復(fù)制到outliner會發(fā)現(xiàn)， nav標(biāo)簽會產(chǎn)生一個untitled section，因為nav里并沒有給予任何標(biāo)題元素。這不是錯誤也不會被認為是不好的HTML5結(jié)構(gòu)。但是section、article還是建議給予適當(dāng)?shù)臉?biāo)題。如果不確定可以給予什么標(biāo)題，也許使用div更適合，不要忘了我們還有div啊。

根節(jié)點

前面提到一個重要的原則：顯性節(jié)點能包含隱性節(jié)點，反之則不行。也許你會注意代碼1生成的大綱：

  1. 1.8月電影推介  
  2.   1.國內(nèi)電影  
  3.     1.《四大名捕》  
  4.     2.《搜索》  

標(biāo)題元素h1（“8月電影推介”）下緊跟著的節(jié)點元素section（“國內(nèi)電影”），變成了它的一個子節(jié)點。隱性節(jié)點不是不能包含顯性節(jié)點么？這時候就需要認識一下根節(jié)點了。

根節(jié)點可以生成自己的大綱，它的標(biāo)題和節(jié)點對祖先的大綱沒有任何影響（而且不會出現(xiàn)在祖先大綱里）。目前有六個根節(jié)點：

1.body、2.blockquote、3.details、4.fieldset、5.figure、6.td

可以測試一下：

  1. <h1>我是老大 I'm the big brother</h1> 
  2. <blockquote> 
  3.   <section> 
  4.     <h1>我是blockquote里的老大，待會你看不到我了 I'm the big brother in blockquote,you'll not find me in the outliner</h1> 
  5.   </section> 
  6. </blockquote> 
  7. <h2>我是老二 I'm the younger</h2> 

定義文檔里說明了：節(jié)點元素是離它最近的祖先根節(jié)點或節(jié)點元素的子節(jié)點。代碼1里的標(biāo)題元素h1（“8月電影推介”）是body的標(biāo)題，節(jié)點元素section（“國內(nèi)電影”）是body的子節(jié)點。

還有一個很重要的：文檔的標(biāo)題是文檔中第一個且非節(jié)點元素里的標(biāo)題元素。測試一下下面的代碼就很明了了：

  1. <section> 
  2.   <h1>我很想成為文檔的標(biāo)題可惜不能 I want to be the title but I couldn't</h1> 
  3. </section> 
  4. <h6>雖然我層級最小可是我是第一個出現(xiàn)的 I'm h6 but I come first</h6> 
  5. <h1>最大也沒用順序我還是在老6下面 I'm h1 but I come after h6</h1> 

過程中我還遇到過另一個讓我迷惑的：

  1. <section> 
  2.   <h1>我很想成為文檔的標(biāo)題可惜不能 I want to be the title but I couldn't</h1> 
  3. </section> 
  4. <section> 
  5.   <h2>我也很想成為文檔的標(biāo)題可惜不能 Me either:(</h2> 
  6. </section> 
  7. <footer> 
  8.   <h3>我是footer可是為什么我成為了文檔標(biāo)題啊 I'm footer but why I become the title??</h3> 
  9. </footer> 

原因很簡單，header和footer不是節(jié)點元素。

hgroup

hgroup很好理解也很好用，它的作用就是幫你添加副標(biāo)題而不影響文檔大綱，大綱中只會出現(xiàn)層級最高的標(biāo)題，無論出現(xiàn)順序。

  1. <hgroup> 
  2.   <h3>我是副標(biāo)題，我很重要但我不會出現(xiàn)在大綱中 I'm your loved second title,I'm useful and I won't appear in the outliner</h3> 
  3.   <h2>我是大標(biāo)題，我是故意跑到下面來的 I'm the highest level of hn in the group,no matter where I am,I will be part of ouliner</h2> 
  4. </hgroup> 

總結(jié)

到寫完這篇文章為止，好像還沒有哪個瀏覽器是完美支持HTML5大綱算法的。但這不影響我們對HTML5大綱算法的學(xué)習(xí)，就像我們現(xiàn)在在努力使用HTML5+CSS3一樣。理解了HTML5大綱算法，不僅對于新標(biāo)簽的使用有更進一步的認識，而且對于最根本的頁面結(jié)構(gòu)有更優(yōu)化的理解，就算只是標(biāo)題元素生成的大綱，也能擁有完美的層級結(jié)構(gòu)，這也是語義化的一個標(biāo)志。

特別感謝一下大安仔，是他提醒我要注意這個問題的。

參考學(xué)習(xí)文章：

http://www.osmn00.com/rebuild/223.html

http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/

http://html5doctor.com/outlines/

https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document

原文鏈接：http://cued.xunlei.com/log047

【編輯推薦】

  1. Go語言和HTML5構(gòu)建一個Web聊天室
  2. 兄弟割席：HTML5標(biāo)準(zhǔn)制定組織分裂
  3. 百行HTML 5代碼實現(xiàn)四種雙人對弈游戲
  4. HTML 5帶來全新網(wǎng)絡(luò)格局
  5. Jscex和HTML 5制作的抽獎小程序
責(zé)任編輯：張偉 來源： 迅雷CUED
HTML5
相關(guān)推薦

2013-01-24 10:26:04

HTML5HTML 5HTML5的未來

2013-01-21 13:52:47

2011-05-13 17:36:05

HTML

2011-12-31 11:11:01

2023-03-16 09:00:00

HTML5HTML語言

2012-07-30 10:18:21

HTML5

2011-05-11 18:00:10

HTML5兼容性

2013-10-21 15:24:49

html5游戲

2015-12-03 15:22:01

HTML5游戲建議

2011-08-01 15:06:57

HTML5

2012-05-29 09:23:23

HTML5移動應(yīng)用框架jQTouch

2022-01-17 10:10:59

5G企業(yè)IT

2022-01-19 10:57:36

5G物聯(lián)網(wǎng)機器人

2011-05-13 17:41:40

2011-01-14 17:53:33

HTML5cssweb

2014-03-11 10:17:42

HTML5iOS

2011-05-12 15:42:16

HTML5

2017-01-03 18:09:33

HTML5本地存儲Web

2012-08-17 10:22:26

HTML5性能瀏覽器

2012-06-25 14:57:27

HTML5
點贊
收藏

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