HTML 编码规范

介绍

不洗碗工作室 HTML 编码规范

class、id 命名字母全小写，单词以 - 分隔。
class、id 命名有意义，需代表相应模块部件的内容或功能，不以样式信息进行命名。
1
2
3
4

<div class="sidebar"></div>

<div class="left"></div>
元素 id 保证页面唯一，在不确定情况下，换成 class。
不允许 class 只用于让 JavaScript 选择某些元素，此时可使用 id。class 具有明确的语意和样式，否则易导致 CSS class 泛滥。
同一页面，避免使用相同的 name 和 id。

属性名小写

<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>

无需自闭和标签，不允许自闭和。常见的有 input、br、img、hr 等。

<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />

HTML5 中规定允许省略的闭合标签，不允许省略，防止严苛环境中出现错误

<!-- good -->
<ul>
    <li>first</li>
    <li>second</li>
</ul>

<!-- bad -->
<ul>
    <li>first
    <li>second
</ul>

标签的使用尽量简洁，减少不必要的标签。

<!-- good -->
<img class="avatar" src="image.png">

<!-- bad -->
<span class="avatar">
    <img src="image.png">
</span>

布尔类型的属性，建议不添加属性值

1 2	<input type="text" disabled> <input type="checkbox" value="1" checked>

引入 CSS 时必须指明 rel=”stylesheet”
建议引入 CSS 和 JavaScript 时不指明 type 属性。
页面必须包含 title 标签声明标题。
title 必须作为 head 的直接子元素，并紧随 charset 声明之后。title 中如果包含 ASCII 之外的字符，浏览器需要知道字符编码类型才能进行解码，否则可能导致乱码。
保证 favicon 可访问。
禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。src 取值为空，会导致部分浏览器重新加载一次当前页面
使用 button 元素时必须指明 type 属性值。

页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。

<html>
    <head>
        <meta charset="UTF-8">
        ......
    </head>
    <body>
        ......
    </body>
</html>