土拨鼠实用笔记 11/22/2022 1:17:35 PM 字数：2522 阅读：91

饿了么风格指南 - 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>

实用笔记

土拨鼠共享的笔记