编写高质量代码（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等或者是表单自带标签的乱用。。
要区分好表单属性每个的意义，要区别使用。这也是我需要规范的地方

附一张效果图