楔子

博客園最近正在整合閃存和博客.剛好我最近也在搗騰博皮,所以關(guān)注了下整合的結(jié)果.不得不說(shuō),園子最終的生成的html相當(dāng)?shù)牟灰?guī)范,語(yǔ)義性混亂,或者說(shuō)很多冗余,也許就是所謂的div強(qiáng)迫癥/class強(qiáng)迫癥.

HTML的語(yǔ)義性

我不知道從什么時(shí)候開始,Table的布局開始為國(guó)人所唾棄,div+css的布局開始大受吹捧.不管引領(lǐng)潮流的是哪個(gè),我們所追求的目標(biāo)是一致的,"讓html更簡(jiǎn)練,更可讀."

• 更簡(jiǎn)練,意味著去除不需要的冗余,分離內(nèi)容和展現(xiàn),清除純粹用于布局的tag.
• 更可讀,意味著提高h(yuǎn)tml本身的語(yǔ)義性,讓html解釋它本身所要表達(dá)的意思.

而這樣子做的好處是什么呢?

• 簡(jiǎn)練,讓內(nèi)容和展現(xiàn)松耦合,利于分工,最大化利用web緩存機(jī)制,減少網(wǎng)路流量,加快頁(yè)面渲染.
• 可讀,讓內(nèi)容結(jié)構(gòu)更清晰,利于被各種終端理解(比如盲人的屏幕閱讀器,搜索引擎的爬蟲).

Block-level Elements(塊級(jí)元素) VS Inline Elements(內(nèi)聯(lián)元素)

在Html的規(guī)范中,這么說(shuō)到(摘自棕熊童鞋的[Quicky] block 和 inline 的區(qū)別是？)

所有允許被 BODY 元素包含的元素，要么是塊級(jí)的；要么是內(nèi)聯(lián)的；要么既可以算作塊級(jí)的，也可以算作內(nèi)聯(lián)的。但是絕對(duì)不存在一個(gè)能被BODY包含，但即非塊級(jí)，又非內(nèi)聯(lián)的元素。
常見(jiàn)的塊級(jí)元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常見(jiàn)的內(nèi)聯(lián)元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 這些元素，既可以作為塊級(jí)元素，也可以作為內(nèi)聯(lián)元素。

 

那么塊級(jí)元素和內(nèi)聯(lián)元素具體有什么區(qū)別呢？具體表現(xiàn)在以下幾個(gè)方面： 

一般來(lái)說(shuō)塊級(jí)元素可以包含塊級(jí)元素和內(nèi)聯(lián)元素；但內(nèi)聯(lián)元素只能包含內(nèi)聯(lián)元素。 要注意的是，每個(gè)特定的元素，能包含的元素也是特定的，所以具體到個(gè)別元素上，這條規(guī)律是不適用的。

比如 P 元素，只能包含內(nèi)聯(lián)元素，而不能包含塊級(jí)元素。

code
<!-- 這是不符合規(guī)范的 -->
<p><div>balalbalabala</div></p>
<!-- 這是規(guī)范允許的-->
<p><span>balalbalabala</span></p>

 

具體關(guān)于這方面的知識(shí),大家可以閱讀棕熊童鞋的[Quicky] block 和 inline 的區(qū)別是？

為什么是div+css的布局

把追求語(yǔ)義性定義為"div+css布局",其實(shí)是狹隘的.我覺(jué)得它的完整說(shuō)法應(yīng)該是"無(wú)語(yǔ)義性tag+css做布局,語(yǔ)義性tag組織內(nèi)容".我們知道 html的tag大部分本身都有自身的語(yǔ)義性的.比如p,是段落,br是換行,你不能用p來(lái)做換行,用br來(lái)做段落,這樣就會(huì)導(dǎo)致html本身的語(yǔ)義產(chǎn)生混亂.而div和span剛好是html中兩個(gè)本身不具備語(yǔ)義性的tag. 但是span是inline element,所以不適合做容器,div是塊級(jí)元素,所以毫無(wú)疑問(wèn)它成為我們做布局的最好選擇,也才有了"div+css布局"一說(shuō).

div強(qiáng)迫癥/class強(qiáng)迫癥

在第一版本的整合中,最新閃存的html結(jié)構(gòu)大致如下

code
<div class="day">
  <div class="dayTitle">
  </div>
  <div class="my_ing">
      一個(gè)良好的討論氛圍,是一家好公司的最基本條件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-30 14:44</a>
      <br>     
      經(jīng)濟(jì)危機(jī),重新開墾一畝三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-28 13:45</a>
      <br>
      學(xué)習(xí)是個(gè)輪回,重新上路ing...<a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-01 21:06</a>
      <br>
      <a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/</span>">更多閃存...</a>
  </div>
</div>

• 首先,最新閃存被放在post的列表容器內(nèi),而且使用一樣的容器class標(biāo)識(shí),這就導(dǎo)致做css的時(shí)候很難定位它.
• 其次br被用來(lái)做列表,
• 再次more link和list item又進(jìn)行混淆.

我本來(lái)想為自己的博皮調(diào)調(diào)css,結(jié)果發(fā)現(xiàn)這個(gè)結(jié)構(gòu)真是很暈,然后發(fā)了條建議閃存的html位置和結(jié)構(gòu)竟然和Post一樣,很難修改皮膚啊.

不得不說(shuō),園子團(tuán)隊(duì)的反應(yīng)速度還是可以的,昨天晚上又進(jìn)行了更新,我們看下第二版本的html結(jié)構(gòu).

code
<div id="side_ing_block">
   <h3 class="catListTitle">最新閃存</h3>
   <div class="side_ing_list">
     <ul>
       <li>一個(gè)良好的討論氛圍,是一家好公司的最基本條件. <a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44</a></li> 
       <li>經(jīng)濟(jì)危機(jī),重新開墾一畝三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45</a></li>
       <li>學(xué)習(xí)是個(gè)輪回,重新上路ing...  <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06</a></li> 
       <li><a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/</span>">更多閃存...</a></li>
     </ul>
  </div>
</div>

不錯(cuò),語(yǔ)義性已經(jīng)有一定的修改了,但是還是有太多的冗余tag.

原來(lái)Cat Chen有篇文章叫你有 <table /> 強(qiáng)迫癥嗎？.

我想我們可以說(shuō)上面的html是有強(qiáng)烈的<div/>強(qiáng)迫癥+class強(qiáng)迫癥. 為什么這么說(shuō)呢.

<div/>強(qiáng)迫癥+class強(qiáng)迫癥
<div id="side_ing_block">
   <h3 class="catListTitle">最新閃存</h3><!--這個(gè)class是完全多余的,h3已經(jīng)很好的顯示了它的語(yǔ)義,css定位也是明確的#side_ing_block h3 ,找不到它留下來(lái)的理由  --> 
   <div class="side_ing_list"><!--ul已經(jīng)表示了是個(gè)list,何必再一個(gè)div+class來(lái)標(biāo)識(shí)呢?css的定位也是明確的#side_ing_block ul-->
      <ul>
        <li>一個(gè)良好的討論氛圍,是一家好公司的最基本條件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44</a></li> 
        <li>經(jīng)濟(jì)危機(jī),重新開墾一畝三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45</a></li>
        <li>學(xué)習(xí)是個(gè)輪回,重新上路ing... <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06</a></li> 
        <li><a class="ing_lnk" href=http://home.cnblogs.com/walkingboy/ing/>更多閃存...</a></li><!--不是相同項(xiàng),怎么能并入相同的列表呢?即使不管語(yǔ)義性,這樣子的定義,css也不好定位啊-->
      </ul>
   </div>
</div>

我個(gè)人認(rèn)為就"最新閃存"這部分的html,更好的結(jié)構(gòu)應(yīng)該是

code
<div id="side_ing_block">
   <h3>最新閃存</h3>
   <ul>
     <li><a href="http://home.cnblogs.com/ing/58955/">一個(gè)良好的討論氛圍,是一家好公司的最基本條件.  10-30 14:44</a></li>
     <li><a href="http://home.cnblogs.com/ing/58457/">經(jīng)濟(jì)危機(jī),重新開墾一畝三分地......10-28 13:45</a></li>
     <li><a href="http://home.cnblogs.com/ing/32400/">學(xué)習(xí)是個(gè)輪回,重新上路ing...06-01 21:06</a></li> 
   </ul>
   <span><a href=http://home.cnblogs.com/walkingboy/ing/>更多閃存...</a></span>
</div>

 

當(dāng)然我們當(dāng)前是孤立的看待這段html，如果我們把它放入整個(gè)頁(yè)面的結(jié)構(gòu)中，還是需要適當(dāng)?shù)男薷牡?。比?lt;div id="side_ing_block">應(yīng)該修改為 <div id="side_ing_block" class="block">，block是頁(yè)面塊狀結(jié)構(gòu)的一個(gè)基礎(chǔ)樣式，不過(guò)園子的left menu里面的div都是獨(dú)立的，沒(méi)有抽象出一個(gè)基礎(chǔ)樣式class，所以每次新加入一個(gè)模塊，所有的博皮都得修改。而span也應(yīng)該多加一個(gè) class="more".這些已經(jīng)不是html語(yǔ)義化的范疇，而是css復(fù)用的設(shè)計(jì)問(wèn)題了，不在這篇文章的談?wù)撝畠?nèi)。

隨著<table/>強(qiáng)迫癥的逐漸消失,我們應(yīng)該警惕<div/>強(qiáng)迫癥,class強(qiáng)迫癥的不斷抬頭,追求標(biāo)準(zhǔn)我們永不止步,但是也不能迷失自我.

如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇