编写高质量代码（1）

最近再读高质量代码-Web前端开发修行之道。顺手做一些笔记方便以后回顾！

不过看了前几章之后我就决定一定要把这本书仔细读完，因为我受益匪浅，让我很多不好的习惯的已改正

这门书更多的是说明了编写代码的道理，而非一些代码知识，

华丽的分割线

HTML

今天看的是HTML部分代码的规划，我总是对div标签乱用，看了这本书我才知道为什么要使用div，

友好的HTML代码是使代码尽量的使用语义化标签，而不是一味的用div和span，因为div和span是

无语义化标签，尽量的语义化是一种非常友好的行为。而什么时候使用div和span呢，当我们的样式

我们使用CSS无法实现时，我们采取用div或span将其归为一个整体。

对于表单部分

CSS
//取消默认样式
fieldset{
border: none;
}
legend{
display: none;
}
<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>

我发誓我从没这么规整的写过表单，我一直觉得没有必要，能把样式对好就可以了，这样增强了代码的

可读性，至少看代码时，你就知道这是什么东西，更不用说浏览器了。决定以后就这么规范着写

表格

CSS
//稍微美化一下
table {
border-spacing: 0;
width: 500px;
}
.bordered {
border: 1px solid #ccc;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
}
.bordered tr:hover {
background: #00ffff;
}
HTML
<table border="1" class="bordered">
<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>

tr是表格行 th表头 td表格单元格，表格的内容放在tbody中，表头放在thead中，一些尾部部分内容放在

tfoot中，这样全是语义化的标签就不需要多余的p或者span和div等或者是表单自带标签的乱用。。

要区分好表单属性每个的意义，要区别使用。这也是我需要规范的地方

附一张效果图