本文节选自《编写高质量代码--Web前端开发修炼之道

3.4 常见模块你真的很了解吗

3.4.1 标题和内容

标题和内容模块如图3-13 所示。

图3-13 标题和内容模块

这种标题配内容的模块,我们可以用如下几种方案来实现同样的效果。

方案一 实现方法如代码清单3-3 所示。

代码清单3-3 标题和内容模块实现方案一


html 部分:
  <div class="h2">标签的语义<a href="#">更多&gt;&gt;</a></div>
<div class="p">段落一的内容……<span class="strong">根据浏览器的默认样式
</span>。。。</div>
<div class="p">段落二的内容……</div>

 


CSS 部分:
.h2{position:relative;border-bottom:1px dashed #fff;}
.h2 a{position:absolute;right:0;top:0;}
.p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
.strong{color:red;}



视觉效果达到了,再来看看它的语义吧,如代码清单3-4 所示。
代码清单3-4 标题和内容模块实现方案一的语义


<分隔 class="h2">标签的语义<锚点 href="#">更多&gt;&gt;</锚点></分隔>
<分隔>段落一的内容……<范围 class="strong">根据浏览器的默认样式 </范围>……</分隔>
<分隔>段落二的内容</分隔>



我们只能看到“分隔”、“范围”这样的无语义标签,从标签上看不出结构的逻辑。这显然是不行的,我们需要用标签让代码能够清晰地透露出“标题”,“内容”,“被强调的文本”等信息。我们把它改进一下,换用第二种方案。
方案二 实现方法如代码清单3-5 所示。
代码清单3-5 标题和内容模块实现方案二


html 部分:
<h2>标签的语义 <a href="#">更多&gt;&gt;</a> </h2>
<p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p>
<p>段落二的内容</p>

 


CSS 部分:
h2{position:relative;border-bottom:1px dashed #fff;}
h2 a{position:absolute;right:0;top:0;}
p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}



再来看看方案二的语义吧,如代码清单3-6 所示。
代码清单3-6 标题和内容模块实现方案二的语义


<二级标题>标签的语义<锚点 href="#">更多&gt;&gt;</锚点> </二级标题>
<段落>段落一的内容……<强调>根据浏览器的默认样式 </强调>……</段落>
<段落>段落二的内容</段落>



方案二大有改进,从标签中能清楚地看到标题和内容的划分,也能看到“根据浏览器的默认样式”被强调了。嗯,不错。
等等,<锚点 href=“#”>更多&gt;&gt;</锚点>被包在了<二级标题>标签中,它属于二级标题吗?不对,虽然在视觉设计上它和“标签语义”是放在同一行的,但事实上它并不属于标题!嗯,让我们再改进一下,如方案三所示。
方案三 如代码清单3-7 所示。
代码清单3-7 标题和内容模块实现方案三


html 部分:
<h2>标签的语义</h2>
<a href="#">更多&gt;&gt;</a>
<p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p>
<p>段落二的内容</p>

 


CSS 部分:

h2{}
a{}p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}



方案三的语义就很理想了,如代码清单3-8 所示。
代码清单3-8 标题和内容模块实现方案三的语义


<二级标题>标签的语义</二级标题>
<锚点 href="#">更多&gt;&gt;</锚点>
<段落>段落一的内容……<强调>根据浏览器的默认样式 </强调>……</段落>
<段落>段落二的内容</段落>



语义是不错了,但根据方案三的HTML 结构,我们很难通过CSS 完成设计图中的设计。怎么办呢?还记得在3.1 节中留下的那个悬念吗?这个时候就该无意义标签派上用场了!我们在方案三的HTML 基础上添加适当的无语义标签div 和span,如代码清单3-9 所示。
代码清单3-9 标题和内容模块实现方案三的改进版


html 部分:
<div class="title">
        <h2>标签的语义</h2>
        <a href="#">更多&gt;&gt;</a>
</div>
<p>段落一的内容……<strong>根据浏览器的默认样式 </strong>……</p>
<p>段落二的内容</p>
CSS 部分:
.title{border-bottom:1px dashed #fff;text-align:right;}
.title h2{float:left;}
p{text-indent:2em;line-height:150%;margin:0 0 20px 0;}
strong{color:red;font-weight:normal}


 


OK,现在我们的代码既精简,语义又清晰。这里需要特别说明的是,当页面内标签无法满足设计需要时,才会适当添加div 和span 等无语义标签来辅助实现。

3.4.2 表单

表单模块如图3-14 所示。

图3-14 表单模块
这种表单模块,我们可以用如下两种方案实现其效果。
方案一 实现方法如代码清单3-10 所示。
代码清单3-10 表单模块实现方案一

 


<form action="" method="" class="fieldset">
        <div><span>账号:</span> <input type="text" id="name" /></div>
        <div><span>密码:</span> <input type="password" id="pw" /></div>
        <input type="submit" value="登录" class="subBtn" />
</form>



来分析一下它的语义,如代码清单3-11 所示。
代码清单3-11 表单模块实现方案一的语义


<表单 action="" method="" class="fieldset">
        <分隔><范围>账号 :</范围> <表单项 type="text" id="name" /></分隔>
        <分隔><范围>密码 :</范围> <表单项 type="password" id="pw" /></分隔>
        <表单项 type="submit" value="登录" class="subBtn" />
</表单>



这种方法虽然能实现视觉效果,但“账号:”、“密码:”和它们对应的输入框之间没有语义上的照应,表单的用途也不清楚。
我们将方案一改进一下,如方案二所示。
方案二 实现方法如代码清单3-12 所示。
代码清单3-12 表单模块实现方案二


<form action="" method="">
         <fieldset>
                  <legend>登录表单</legend>
                  <p><label for="name">账号:</label><input type="text" id="name"/></p>
                  <p><label for="pw">密码 :</label> <input type="password" id="pw" /></p>
                  <input type="submit" value="登录" class="subBtn" />
         </fieldset>
</form>


我们来看看方案二的语义,如代码清单3-13 所示。
代码清单3-13 表单模块实现方案二的语义


<表单 action="" method="" class="fieldset">
        <域集>
                      <域集名>登录表单</域集名>
                      <段落><表单项说明 for="name">账号 :</表单项说明> <表单项 type="text" id="name" /></段落>
                      <段落><表单项说明 for="pw">密码 :</表单项说明 > <表单项 type="password" id="pw" /></段落>
                      <表单项 type="submit" value="登录" class="subBtn" />
        </域集>
</表单>



方案二改进了方案一的不足,语义上清晰了很多。一般来说,表单域要用fieldset标签包起来,并用legend 标签说明表单的用途。因为fieldset 默认有边框,而legend 也有默认的样式,为满足设计需要,我们可以将fieldset 的“border”设为“none”,把legend 的“display”设为“none”,以此来兼顾语义和设计两方面的要求。每个input 标签对应的说明文本都需要使用label 标签,并且通过为input 设置id 属性,在label 标签中设置“for = someId”来让说明文本和相应的input 关联起来。

 

3.4.3 表格

表格如图3-15 所示。

图3-15 表格模块
在CSS 布局日渐流行的今天,很多人患上了“table 恐惧症”,仿佛用了table 就落后了,就是不注重语义,就是违反Web 标准,于是宁愿用ul 来模拟table 也不使用table。这从一个极端走到了另一个极端。其实,table 标签有它自己的语义和用途,虽然在CSS 布局中table 不推荐用来布局,但它仍有自己的一席之地——在二维数据展示方面它是最好的选择。
我们可以选择table 来实现图3-15 的效果,有如下两种方案。
方案一 实现方法如代码清单3-14 所示。
代码清单3-14 表格模块实现方案一

 


<div class="caption">几种页面实现的比较</div>
<table border="1">
         <tr class="thead"><td class="th">实现方式</td><td class="th">代码量</td><td class="th">搜索引擎友好</td><td class="th">特殊终端兼容</td></tr>
         <tr><td class="th">table 布局</td><td>多</td><td>差</td><td>一般</td></tr>
<tr><td class="th"> 乱用标签的CSS 布局</td><td> 少</td><td>一般</td><td>差</td></tr>
<tr><td class="th">标签语义良好的CSS 布局</td><td> 少</td><td> 好
</td><td>好</td></tr>
</table>


来分析一下它的语义,如代码清单3-15 所示。
代码清单3-15 表格模块实现方案一的语义


<分隔 class="caption">几种页面实现的比较</分隔>
<表格 border="1">
         <表格行 class="thead"><表格单元格 class="th">实现方式</表格单元格><表格单元格class="th">代码量</表格单元格><表格单元格class="th">搜索引擎友好</表格单元格><表格单元格class="th">特殊终端兼容</表格单元格></表格行>
         <表格行><表格单元格class="th">table 布局</表格单元格><表格单元格>多</表格单元格><表格单元格>差</表格单元格><表格单元格>一般</表格单元格></表格行>
         <表格行><表格单元格class="th">乱用标签的CSS 布局</表格单元格><表格单元格>少</表格单元格><表格单元格>一般</表格单元格><表格单元格>差</表格单元格></表格行>
         <表格行><表格单元格class="th">标签语义良好的CSS 布局</td><表格单元格>少</表格单元格><表格单元格>好</表格单元格><表格单元格>好</表格单元格></表格行>
</表格>
         <分隔><范围>账号 :</范围> <表单项 type="text" id="name" /></分隔>
         <分隔><范围>密码 :</范围> <表单项 type="password" id="pw" /></分隔>
         <表单项 type="submit" value="登录" class="subBtn" />
</表单>



虽然在视觉上可以看出“几种页面实现的比较”应该是该表格的标题,“实现方式”、“代码量”、“搜索引擎友好”、“特殊终端兼容”应该是几个比较特殊的单元格,“table 布局”、“乱用标签的CSS 布局”、“标签语义良好的CSS 布局”也是几个特殊的单元格,但方案一的HTML 从语义上看不到这样的描述。

 

我们将它改进一下,如方案二所示。
方案二 实现方法如代码清单3-16 所示。
代码清单3-16 表格模块实现方案二


<table border="1">
           <caption>几种页面实现的比较</caption>
           <thead>
                      <tr><th>实现方式</th><th>代码量</th><th>搜索引擎友好</th><th>特殊终端兼容</th></tr>
           </thead>
           <tbody>
                      <tr><th>table 布局</th><td> 多</td><td> 差</td><td> 一般</td></tr>
                      <tr><th>乱用标签的CSS 布局</th><td>少</td><td>一般</td><td>差</td></tr>
                      <tr><th>标签语义良好的CSS 布局</th><td>少</td><td>好</td><td>好</td></tr>
           </tbody>
</table>



我们来看看方案二的语义,如代码清单3-17 所示。
代码清单3-17 表格模块实现方案二的语义


<表格 border="1">
         <表格标题>几种页面实现的比较</表格标题>
         <表格头部>
                  <表格行> <表头>实现方式</表头><表头>代码量</表头><表头>搜索引擎友好</表头><表头>特殊终端兼容</表头></表格行>
         </表格头部>
         <表格主体>
                  <表格行><表头>table 布局</表头><表格单元格>多</表格单元格><表格单元格>差</表格单元格><表格单元格>一般</表格单元格></表格行>
                  <表格行><表头>乱用标签的CSS 布局</表头><表格单元格>少</表格单元格><表格单元格>一般</表格单元格><表格单元格>差</表格单元格></表格行>
                  <表格行><表头>标签语义良好的CSS 布局</表头><表格单元格>少</表格单元格><表格单元格>好</表格单元格><表格单元格>好</表格单元格></表格行>
         </表格主体>
</table>



方案二的语义清晰了许多。虽然我们从table 布局时×××始就已经接触了table 标签,但对table 并不一定十分了解。过去,我们在用table 布局时,常常只使用table、tr、td 标签。事实上,table 常用的标签还包括caption、thead、tbody、tfoot 和th。我们在使用表格的时候,应该注意选用合适的标签,表格标题要用caption,表头要用thead包围,主体部分用tbody 包围,尾部要用tfoot 包围,表头和一般单元格要区分开,表头用th,一般单元格用td。

 

3.4.4 语义化标签应注意的一些其他问题

为了保证网页去样式后的可读性,并且又符合Web 标准,我们应注意以下几点:

  • 尽可能少地使用无语义标签div 和span;
  • 在语义不明显,既可以用p 也可以用div 的地方,尽量用p,因为p 默认情况下有上下间距,去样式后的可读性更好,对兼容特殊终端有利;
  • 不要使用纯样式标签,例如b、font 和u 等,改用CSS 设置。语义上需要强调的文本可以包在strong 或em 标签里,strong 和em 有“强调”的语意,其中strong 的默认样式是加粗,而em 的默认样式是斜体。

【作者介绍】

曹刘阳,网名阿当,资深Web前端开发工程师,先后就职于中国雅虎和淘宝,现就职于新浪,一直从事Web前端开发工作,实战经验非常丰富,在通过提高代码质量来增强可维护性方面颇有心得。精通HTML、CSS、JavaScript等前端开发技术,对ActionScript、Flex、PHP、RoR等Web开发技术也有较深入的研究。致力于敏捷开发实践,喜欢读书,阅读过大量技术书籍;擅于总结归纳,能将各种技术融会贯通。您可以通过邮箱cly84920@gmail.com与他取得联系,也可以通过QQ群8791223参与“如何编写高质量前端代码”的讨论中来。