你真的懂HTML吗-从"最新闪存"说起

　　楔子

　　博客园最近正在整合闪存和博客.刚好我最近也在捣腾博皮,所以关注了下整合的结果.不得不说,园子最终的生成的html相当的不规范,语义性混乱,或者说很多冗余,也许就是所谓的div强迫症/class强迫症.

　　HTML的语义性

　　我不知道从什么时候开始,Table的布局开始为国人所唾弃,div+css的布局开始大受吹捧.不管引领潮流的是哪个,我们所追求的目标是一致的,"让html更简练,更可读."

• 更简练,意味着去除不需要的冗余,分离内容和展现,清除纯粹用于布局的tag.
• 更可读,意味着提高html本身的语义性,让html解释它本身所要表达的意思.

　　而这样子做的好处是什么呢?

• 简练,让内容和展现松耦合,利于分工,最大化利用web缓存机制,减少网路流量,加快页面渲染.
• 可读,让内容结构更清晰,利于被各种终端理解(比如盲人的屏幕阅读器,搜索引擎的爬虫).

　　Block-level Elements(块级元素) VS Inline Elements(内联元素)

　　在Html的规范中,这么说到(摘自棕熊童鞋的[Quicky] block 和 inline 的区别是？)

所有允许被 BODY 元素包含的元素，要么是块级的；要么是内联的；要么既可以算作块级的，也可以算作内联的。但是绝对不存在一个能被BODY包含，但即非块级，又非内联的元素。
常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。
常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。
另外，SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素，既可以作为块级元素，也可以作为内联元素。

　　那么块级元素和内联元素具体有什么区别呢？具体表现在以下几个方面： 

　　一般来说块级元素可以包含块级元素和内联元素；但内联元素只能包含内联元素。 要注意的是，每个特定的元素，能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。

　　比如 P 元素，只能包含内联元素，而不能包含块级元素。

code
<p><div>balalbalabaladiv>p>

<p><span>balalbalabalaspan>p>

　　具体关于这方面的知识,大家可以阅读棕熊童鞋的[Quicky] block 和 inline 的区别是？

　　为什么是div+css的布局

　　把追求语义性定义为"div+css布局",其实是狭隘的.我觉得它的完整说法应该是"无语义性tag+css做布局,语义性tag组织内容".我们知道 html的tag大部分本身都有自身的语义性的.比如p,是段落,br是换行,你不能用p来做换行,用br来做段落,这样就会导致html本身的语义产生混乱.而div和span刚好是html中两个本身不具备语义性的tag. 但是span是inline element,所以不适合做容器,div是块级元素,所以毫无疑问它成为我们做布局的最好选择,也才有了"div+css布局"一说.

　　div强迫症/class强迫症

　　在第一版本的整合中,最新闪存的html结构大致如下

code
<div class="day">
  <div class="dayTitle">
  div>
  <div class="my_ing">
      一个良好的讨论氛围,是一家好公司的最基本条件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-30 14:44a>
      <br>     
      经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-28 13:45a>
      <br>
      学习是个轮回,重新上路ing...<a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-01 21:06a>
      <br>
      <a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/">更多闪存...a>
  div>
div>

• 首先,最新闪存被放在post的列表容器内,而且使用一样的容器class标识,这就导致做css的时候很难定位它.
• 其次br被用来做列表,
• 再次more link和list item又进行混淆.

　　我本来想为自己的博皮调调css,结果发现这个结构真是很晕,然后发了条建议闪存的html位置和结构竟然和Post一样,很难修改皮肤啊.

　　不得不说,园子团队的反应速度还是可以的,昨天晚上又进行了更新,我们看下第二版本的html结构.

code
<div id="side_ing_block">
   <h3 class="catListTitle">最新闪存h3>
   <div class="side_ing_list">
     <ul>
       <li>一个良好的讨论氛围,是一家好公司的最基本条件. <a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44a>li> 
       <li>经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45a>li>
       <li>学习是个轮回,重新上路ing...  <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06a>li> 
       <li><a class="ing_lnk" href="http://home.cnblogs.com/walkingboy/ing/">更多闪存...a>li>
     ul>
  div>
div>

　　不错,语义性已经有一定的修改了,但是还是有太多的冗余tag.

原来Cat Chen有篇文章叫你有

我想我们可以说上面的html是有强烈的

强迫症+class强迫症
<div id="side_ing_block">
   <h3 class="catListTitle">最新闪存h3> 
   <div class="side_ing_list">
      <ul>
        <li>一个良好的讨论氛围,是一家好公司的最基本条件.<a class="ing_lnk" href="http://home.cnblogs.com/ing/58955/">10-3014:44a>li> 
        <li>经济危机,重新开垦一亩三分地......<a class="ing_lnk" href="http://home.cnblogs.com/ing/58457/">10-2813:45a>li>
        <li>学习是个轮回,重新上路ing... <a class="ing_lnk" href="http://home.cnblogs.com/ing/32400/">06-0121:06a>li> 
        <li><a class="ing_lnk" href=http://home.cnblogs.com/walkingboy/ing/>更多闪存...a>li>
      ul>
   div>
div>

code
<div id="side_ing_block">
   <h3>最新闪存h3>
   <ul>
     <li><a href="http://home.cnblogs.com/ing/58955/">一个良好的讨论氛围,是一家好公司的最基本条件.  10-30 14:44a>li>
     <li><a href="http://home.cnblogs.com/ing/58457/">经济危机,重新开垦一亩三分地......10-28 13:45a>li>
     <li><a href="http://home.cnblogs.com/ing/32400/">学习是个轮回,重新上路ing...06-01 21:06a>li> 
   ul>
   <span><a href=http://home.cnblogs.com/walkingboy/ing/>更多闪存...a>span>
div>