Web前端开发之“常见模块你真的很了解吗？”

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

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

3.4.1 标题和内容

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

图3-13 标题和内容模块

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

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

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

---

html 部分:
 

标签的语义 更多>>

段落一的内容…… 根据浏览器的默认样式
。。。

段落二的内容……

 

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 标题和内容模块实现方案一的语义

---

标签的语义更多>>锚点>分隔>
段落一的内容……根据浏览器的默认样式 范围>……分隔>
段落二的内容分隔>

---

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

---

html 部分:

标签的语义 更多>>

段落一的内容……根据浏览器的默认样式 ……

段落二的内容

 

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 标题和内容模块实现方案二的语义

---

标签的语义更多>>锚点> 二级标题>
段落一的内容……根据浏览器的默认样式 强调>……段落>
段落二的内容段落>

---

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

---

html 部分:

标签的语义

更多>>

段落一的内容……根据浏览器的默认样式 ……

段落二的内容

 

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 标题和内容模块实现方案三的语义

---

标签的语义二级标题>
更多>>锚点>
段落一的内容……根据浏览器的默认样式 强调>……段落>
段落二的内容段落>

---

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

---

html 部分:

       

标签的语义

        更多>>

段落一的内容……根据浏览器的默认样式 ……

段落二的内容

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 表单模块实现方案一

 

---

       

账号：

       

密码：

       

---

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

---

        账号 ：范围> 分隔>
        密码 ：范围> 分隔>
       
表单>

---

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

---

        
                  登录表单
                 

账号：

                 

密码 ：

                 
        

---

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

---

       
                      登录表单域集名>
                      账号 ：表单项说明> 段落>
                      密码 ：表单项说明 > 段落>
                     
        域集>
表单>

---

方案二改进了方案一的不足，语义上清晰了很多。一般来说，表单域要用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 表格模块实现方案一

 

---

几种页面实现的比较

实现方式	代码量	搜索引擎友好	特殊终端兼容
table 布局	多	差	一般
乱用标签的CSS 布局	少	一般	差
标签语义良好的CSS 布局	少	好	好

---

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

---

几种页面实现的比较分隔>

         实现方式表格单元格>代码量表格单元格>搜索引擎友好表格单元格>特殊终端兼容表格单元格>表格行>
         table 布局表格单元格>多表格单元格>差表格单元格>一般表格单元格>表格行>
         乱用标签的CSS 布局表格单元格>少表格单元格>一般表格单元格>差表格单元格>表格行>
         标签语义良好的CSS 布局少表格单元格>好表格单元格>好表格单元格>表格行>
表格>
         账号 ：范围> 分隔>
         密码 ：范围> 分隔>
        
表单>

---

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

 

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

---

几种页面实现的比较

实现方式	代码量	搜索引擎友好	特殊终端兼容
table 布局	多	差	一般
乱用标签的CSS 布局	少	一般	差
标签语义良好的CSS 布局	少	好	好

---

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

---

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

---

方案二的语义清晰了许多。虽然我们从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参与“如何编写高质量前端代码”的讨论中来。

 

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/16502878/viewspace-669503/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/16502878/viewspace-669503/