饿了么风格指南 - HTML

发表于 2022-04-16 09:40:22 | 总阅读数：2704 次

目录

HTML 代码风格

基本设置

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

统一符号

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

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

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

可省略部分

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

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

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

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

    理由：这个真没必要写，不过 DOM 操作时可能会写。
<input type="checkbox" checked />
<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 结构。

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

    理由：规范没有约束，未来版本可能不兼容。
<!-- 禁止 -->
<dl>
  <dt>...</dt>
  <ul>
    <li>...</li>
  </ul>
</dl>

<!-- 允许 -->
<dl>
  <dt>...</dt>
  <dd>
    <ul>
      <li>...</li>
    </ul>
  </dd>
</dl>

DOM 相关

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

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

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

// jQuery 方案
$("#btn").click(function() {
  // ...
});

<!-- Angular 方案 -->
<button id="btn" ng-click="onBtnClick()">ELE</button>
  • 不在视图中处理复杂逻辑，事件处理代码过长时做成函数。

    理由：在视图中堆积逻辑会影响代码阅读和维护。
<!-- 不推荐 -->
<button id="btn" ng-click="'此处省略100字'">ELE</button>

<!-- 推荐 -->
<button id="btn" ng-click="onBtnClick()">ELE</button>

module.controller('foo', ['$scope', function($scope) {
  // ...
  $scope.onBtnClick = function() {
    '此处省略100字';
  };
}]);

其它建议

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