HTML 代码风格

基本设置

  • 2 空格缩进
  • UTF-8 编码

统一符号

  • 所有标签和属性名称一律小写。

    理由：如果不这么做可能导致与 Angular 的不兼容。
  • 属性值一律使用双引号。

    理由：统一是必须的，难道会有人想统一成单引号？

可省略部分

  • 在没有特殊需求的情况下不省略可选的结束标签。

    理由：这样更容易看出标签的范围，但是要注意下面这种特殊情况。
  1. <style>
  2. li { display: inline-block; }
  3. </style>
  4. <ul>
  5.   <li>1</li>
  6.   <li>2</li>
  7. </ul>
  8. <ul>
  9.   <li>1
  10.   <li>2
  11. </ul>
  • 不省略可选的自结束标签末尾斜杠。

    理由：它会影响到外部标记语言的解析。
  1. <div>
  2.   <img src="eleme.png" alt="饿了么" />
  3. </div>
  • 建议自结束标签包含属性时在结束的斜杆前面加空格。

    理由：这是 XHTML 规范？其实我只是觉得这样比较漂亮。
  1. <input type="text" />
  2. <hr/>
  • 建议无值属性不写等号和值。

    理由：这个真没必要写，不过 DOM 操作时可能会写。
  1. <input type="checkbox" checked />
  2. <script src="···" async defer></script>
  • 所有 <a> 必须有 href 属性，如果用不到可以置为 href="javascript:"。

    理由：href 不是可选属性，只是浏览器能解析而已。

最佳实践

  • 不要使用 input （<input type="button"> 、 <input type="submit">）来代替 button

    理由：给这类 input 只设置 height 属性的话，在 safari 和 chrome 下并不会出现意料中的样式。另外，button 可以内嵌 HTML，实现更灵活的结构，如：带图标的按钮。

声明相关

  • 使用 <!DOCTYPE html> 作为唯一的 DTD。

    理由：它简洁，并能在所有浏览器触发标准模式。
  • 使用 <meta charset="UTF-8" /> 指定文件编码。

    理由：只设置 charset 即可，不需要 Content-Type。
  • 所有页面必须有 <title>，并尽可能地在不同页面使用不同的标题。

    理由：传统 SEO 考量，对于单页应用也可以增加用户体验。

结构相关

  • 尽可能地简化 HTML 结构。

    理由：太复杂的结构难以维护。
  • 严格遵守标签嵌套规则，禁止让标签出现在不正确的地方。

    理由：规范没有约束，未来版本可能不兼容。
  1. <!-- 禁止 -->
  2. <dl>
  3.   <dt>...</dt>
  4.   <ul>
  5.     <li>...</li>
  6.   </ul>
  7. </dl>
  9. <!-- 允许 -->
  10. <dl>
  11.   <dt>...</dt>
  12.   <dd>
  13.     <ul>
  14.       <li>...</li>
  15.     </ul>
  16.   </dd>
  17. </dl>

DOM 相关

  • 建议不使用 Level 0 的事件绑定。

    理由：Level 0 的事件绑定是非规范的，而且容易发生冲突。
  1. <!-- 不建议 -->
  2. <button id="btn" onclick="onBtnClick()">ELE</button>
  3. <script>
  4. var onBtnClick=function() {
  5.   // ...
  6. };
  7. // 不建议
  8. btn.onclick = onBtnClick;
  9. </script>

但是，addEventListener / attachEvent 需要做兼容处理，推荐使用框架封装。

  1. // jQuery 方案
  2. $("#btn").click(function() {
  3.   // ...
  4. });
  1. <!-- Angular 方案 -->
  2. <button id="btn" ng-click="onBtnClick()">ELE</button>
  • 不在视图中处理复杂逻辑，事件处理代码过长时做成函数。

    理由：在视图中堆积逻辑会影响代码阅读和维护。
  1. <!-- 不推荐 -->
  2. <button id="btn" ng-click="'此处省略100字'">ELE</button>
  1. <!-- 推荐 -->
  2. <button id="btn" ng-click="onBtnClick()">ELE</button>
  1. module.controller('foo', ['$scope', function($scope) {
  2.   // ...
  3.   $scope.onBtnClick = function() {
  4.     '此处省略100字';
  5.   };
  6. }]);

其它建议

  • 给图片添加 alt 属性。
  • 给无文字超连接添加 title 属性。
  • 给可视听的替换型元素内添加描述。
  1. <audio>这是一段神奇的音效</audio>
  2. <canvas>这是一个神奇的效果</canvas>
  3. <iframe src="http://ele.me">这是 ele.me 的首页</iframe>