如何选择正确的标签？

读《编写高质量代码-web前端开发修炼之道》随手笔记

1、标题与文本

　　需要让代码能够清晰的透露出"标题"，"内容"，"被强调的文本"等信息；
　　当页面内标签无法满足设计需要时，才会适当的添加div和span等无语义标签来辅助实现

2、表单　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5     <title>无标题文档</title>
 6     <style type="text/css">
 7         fieldset {
 8             border: 0;
 9         }
10         legend {
11             display: none;
12         }
13     </style>
14 </head>
15 <body>
16     <form action="/" method="post">
17     <fieldset>
18         <legend>登录表单</legend>
19         <p>
20             <label for="username">
21                 帐号:</label><input type="text" id="username" /></p>
22         <p>
23             <label for="password">
24                 密码:</label><input type="text" id="password" /></p>
25         <input type="submit" value="登录" />
26     </fieldset>
27     </form>
28 </body>

View Code

3、表格

表格标题要用caption，表头thead，主题tbody，尾部用tfoot，表头和一般单元格要区分开，表头用th，一般单元格用td

 1                <table border="1">
 2                        <caption>用户信息</caption>
 3                     <thead>
 4                         <tr>
 5                             <th>编号</th>
 6                             <th>姓名</th>
 7                             <th>性别</th>
 8                             <th>年龄</th>
 9                         </tr>
10                     </thead>
11                     <tbody>
12                         <tr>
13                             <td>1</td>
14                             <td>张三</td>
15                             <td>男</td>
16                             <td>45</td>
17                         </tr>
18                         <tr>
19                             <td>2</td>
20                             <td>李四</td>
21                             <td>女</td>
22                             <td>22</td>
23                         </tr>
24                         <tr>
25                             <td>3</td>
26                             <td>王五</td>
27                             <td>男</td>
28                             <td>32</td>
29                         </tr>
30                     </tbody>
31                </table>

View Code

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

尽可能少的使用无语义标签div和span；
在语义不明显既可以用p或div的地方，尽量用p，因为p在默认情况下有上下间距，去掉样式后的可读性更好，对兼容特殊终端有利；
尽量不要使用纯样式标签，如b，font，u