编写高质量代码（1）

蔚落 2022-08-04 09:24 179阅读 0赞

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

附一张效果图  
![这里写图片描述][20150821163241126]

[20150821163241126]: /images/20220731/56b9f8a2fecf4d87b46f853816dd3e6f.png