HTML编码规范

全栈道原创2023年9月11日大约 3 分钟

通过前面的四节，我们对HTML已经有了一个基本的认识和使用。可是，当我们写了很多的HTML时，我们会发现即使一样的展示效果，可是我们却写得全然不同。例如：

<body>
    <span style="background-color: red;">这是span</span>
    <p style="background-color: red; display: inline;">这是p</p>
</body>

通过上面的例子我们会发现，元素的样式，是可以通过css去改变的，所以变得非常灵活。*可是在真正得开发中，我们希望不同人开发的出来的代码都是尽可能一样的，包括标签的选取使用，属性的顺序等等*。

以下的规范是参考：https://codeguide.bootcss.com/ 选取的关于HTML的编码规范，之后可能会根据自身需要进行修改成符合自身的规范。

语法

HTML大小写不敏感，但是标签不要大写，DOCTYPE大写。
用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。
嵌套元素应当缩进一次（即两个空格）。
对于属性的定义，永远全部使用双引号，绝不要使用单引号。
不要在自闭合（self-closing）元素的尾部添加斜线 — HTML5 规范中明确说明斜线是可忽略的。
不要省略可选的结束标签（closing tag）（例如，</li> 或 </body>）。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- HTML大小写不敏感，但是标签不要大写，DOCTYPE大写 -->
    <!-- good -->
    <p>Hello World</p>
    <!-- not good -->
    <P>Hello World</P>

    <!-- 用两个空格来代替制表符（tab） -->
    <!-- good -->
    <div>  前面有两个空格</div>
    <!-- not good -->
    <div>   前面有一个tab</div>

    <!-- 嵌套元素应当缩进一次（即两个空格）。 -->
    <!-- good -->
    <div>
        parent
        <div>
            child
        </div>
    </div>
    <!-- not good -->
    <div>
        parent
    <div>
        child
    </div>
    </div>

    <!-- 对于属性的定义，永远全部使用双引号，绝不要使用单引号 -->
    <!-- good -->
    <img src="../../img/browser.jpg" alt="browser">
    <!-- not good -->
    <img src='../../img/browser.jpg' alt='browser'>

    <!-- 不要在自闭合（self-closing）元素的尾部添加斜线  -->
    <!-- good -->
    <br>
    <!-- not good -->
    <br />

    <!-- 不要省略可选的结束标签 -->
    <!-- good -->
    <ul>
        <li>Hello</li>
        <li>World</li>
    </ul>
    <!-- not good -->
    <ul>
        <li>Hello
        <li>World
    </ul>
</body>
</html>

属性顺序

HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。

class
id,name
data-*
scr,for,type,href,value
title,alt
role,aria-*
class 用于标识高度可复用组件，因此应该排在首位。id 用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。
示例：

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

其他

布尔型属性不用赋值
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
减少标签的数量
编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现。
尽量避免JavsScript生成的标签

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 布尔型属性不用赋值 -->
    <!-- good -->
    <input type="checkbox" checked>
    <!-- not good  -->
    <input type="checkbox" checked=true>

    <!-- 减少标签的数量 -->
    <!-- good -->
    <img class="avatar" src="...">
    <!-- not good -->
    <span class="avatar">
        <img src="...">
    </span>

    <!-- 尽量避免JavsScript生成的标签 -->
    <!-- goood -->
    <div id="append"><p>i'm child.</p></div>
    <!-- not good -->
    <div id="append"></div>
    <script>
        const element = document.querySelector('#append');
        const child = document.createElement('p');
        child.textContent = 'i\'m child.';
        element.appendChild(child);
    </script>

</body>

</html>

最后

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。