Skip to Content
HTML/CSS通用规则

通用规则

通用风格规则

协议(Protocol)

尽可能使用 HTTPS 引用嵌入式资源。

始终使用 HTTPS（https:）引用图片及其他媒体文件、样式表和脚本，除非相关文件无法通过 HTTPS 获取。

<!-- 不推荐：省略了协议 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
<!-- 不推荐：使用了 HTTP -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- 推荐 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
/* 不推荐：省略了协议 */
@import '//fonts.googleapis.com/css?family=Open+Sans';
 
/* 不推荐：使用了 HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';
/* 推荐 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';

通用格式规则

缩进(Indentation)

每次缩进使用 2 个空格。

不要使用制表符(Tab)或混合使用制表符和空格进行缩进。

<ul>
  <li>Fantastic
  <li>Great
</ul>
.example {
  color: blue;
}

大小写(Capitalization)

只使用小写字母。

所有代码都必须使用小写字母：包括 HTML 元素名、属性名、属性值（除 text/CDATA 外）、CSS 选择器(Selector)、属性和属性值（字符串除外）。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">
/* 不推荐 */
color: #E5E5E5;
/* 推荐 */
color: #e5e5e5;

行尾空格(Trailing Whitespace)

删除行尾空格。

行尾空格是不必要的，而且会使 diff 变得更复杂。

<!-- 不推荐 -->
What?_
<!-- 推荐 -->
Yes please.

通用元数据规则

编码(Encoding)

使用 UTF-8（无 BOM）编码。

确保你的编辑器使用 UTF-8 作为字符编码，且不带字节顺序标记(BOM)。

通过 <meta charset="utf-8"> 在 HTML 模板和文档中指定编码。不需要为样式表指定编码，因为它们默认使用 UTF-8。

（关于编码以及何时和如何指定编码的更多信息，可参见 在 HTML 和 CSS 中处理字符编码 。）

注释(Comments)

在需要时尽量解释代码。

使用注释来解释代码：它涵盖了什么内容，它的用途是什么，为什么使用或优先选择相应的解决方案？

（此条为可选项，因为要求代码始终有完整的文档注释并不现实。HTML 和 CSS 代码的注释需求差异很大，取决于项目的复杂程度。）

待办事项(Action Items)

使用 TODO 标记待办事项和行动项。

仅使用关键字 TODO 来标记待办事项，不要使用其他常见格式，如 @@。

在冒号后添加行动项，格式为 TODO: action item。

{# TODO: 重新审视居中方式。 #}
<center>Test</center>
<!-- TODO: 移除可选标签。 -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>
Last updated on
背景HTML