HEAD
1、用制表符（tab,四个空格）来缩进代码 -- 保证一致展现的方法
2、为每个 HTML 页面的第一行添加标准模式（<!DOCTYPE html>）的声明，这样能够确保在每个浏览器中拥有一致的展现
3、IE 支持通过特定的 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式
4、通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式<meta charset="UTF-8">，可以避免在 HTML 中使用字符实体标记，从而全部与文档编码一致
5、近可能的dom层级少，尽量避免用js来动态生成dom
6、建议为 html 根元素指定 lang 属性（<html lang="zh-CN">），从而为文档设置正确的语言--------这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则
标签
7、有js操作的dom结构，以js开头，譬如jsSwitchTab，区别出有事件和无事件两种dom
是否闭合
自闭合标签，无需闭合 ( 例如： img input br hr 等 )
可选的闭合标签，需闭合 ( 例如：</li> 或 </body> )
尽量减少标签数量
<img src="https://7n.w3cschool.cn/attachments/image/cimg/google.png" alt="Google">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
<img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
Class 与 ID
class 应以功能或内容命名，不以表现形式命名
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
引号
属性的定义，统一使用双引号，和浏览器默认保持一致
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
嵌套
a 不允许嵌套 div这种约束属于语义嵌套约束，与之区别的约束还有严格嵌套约束，比如a 不允许嵌套 a
语义嵌套约束
<li> 用于 <ul> 或 <ol> 下；
<dd>, <dt> 用于 <dl> 下；
<thead>, <tbody>, <tfoot>, <tr>, <td> 用于 <table> 下；
严格嵌套约束
inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
<a>里不可以嵌套交互式元素<a>、<button>、<select>等;
<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。
布尔值属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
网友评论