html 代码规范整理

HTML 规范 (Vue Template 同样适用)。

HTML 类型

推荐使用 HTML5 的文档类型申明:‌

  • 规定字符编码
  • IE 兼容模式
  • doctype 大写‌

建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

缩进‌

缩进使用 2 个空格(一个 tab),嵌套的节点应该缩进。

分块注释

在每一个块状元素,列表元素和表格元素后,加上一对 HTML 注释。注释格式

<body>
  <!-- header 头部 start -->
  <header>
    <div class="container">
      <a href="#">
        <!-- 图片会把a标签给撑开,所以不用设置a标签的大小 -->
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  <!-- header 头部 end -->
</body>

语义化标签

HTML5 中新增很多语义化标签,所以优先使用语义化标签,避免一个页面都是 div 或者 p 标签

<!-- 正例 -->
<header></header>
<footer></footer>


<!-- 反例 -->
<div>
  <p></p>
</div>