读《编写高质量代码-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>
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>
语义化标签应该注意的一些其他问题：
尽可能少的使用无语义标签div和span；
在语义不明显既可以用p或div的地方，尽量用p，因为p在默认情况下有上下间距，去掉样式后的可读性更好，对兼容特殊终端有利；
尽量不要使用纯样式标签，如b，font，u