Skip to Content
HTML/CSSHTML

HTML

HTML 风格规则

文档类型(Document Type)

使用 <!doctype html>。

始终将你的 HTML 置于标准模式(no-quirks mode) 下，在文档开头添加 <!doctype html>。

没有文档类型声明的文档会以”怪异模式(quirks mode)“渲染，而使用不同文档类型的文档可能以”有限怪异模式(limited-quirks mode)“渲染。这些模式不遵循被广泛理解和记录的各种核心 HTML 和 CSS 构造行为，可能会导致细微的故障和不兼容问题，尤其是在复用期望标准模式的代码时。

HTML 有效性(HTML Validity)

尽可能使用有效的 HTML。

使用有效的 HTML 代码，除非由于文件大小方面的性能目标而无法做到。

使用诸如 W3C HTML 验证器  之类的工具进行测试。

使用有效的 HTML 是一个可衡量的基线质量指标，有助于了解技术需求和约束条件，并确保正确使用 HTML。

<!-- 不推荐 -->
<title>Test</title>
<article>This is only a test.
<!-- 推荐 -->
<!doctype html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

语义化(Semantics)

根据 HTML 的用途来使用它。

根据元素（有时被错误地称为”标签”）的设计用途来使用它们。例如，标题使用标题元素，段落使用 p 元素，锚点使用 a 元素，等等。

根据用途使用 HTML 对可访问性(Accessibility)、复用和代码效率都很重要。

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

多媒体后备方案(Multimedia Fallback)

为多媒体提供替代内容。

对于多媒体内容，如图片、视频、通过 canvas 实现的动画对象，确保提供替代访问方式。对于图片，这意味着使用有意义的替代文本（alt）；对于视频和音频，如果可能，则提供文字记录和字幕。

提供替代内容对可访问性很重要：盲人用户在没有 @alt 的情况下很难判断图片的内容，其他用户也可能无法理解视频或音频的内容。

（对于 alt 属性会引入冗余内容的图片，以及纯装饰性的、你无法立即使用 CSS 替代的图片，使用空的替代文本，即 alt=""。）

<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

关注点分离(Separation of Concerns)

将结构、表现和行为分离。

严格地将结构（标记）、表现（样式）和行为（脚本）分开，并尽量减少三者之间的交互。

也就是说，确保文档和模板只包含 HTML，且 HTML 仅用于结构目的。将所有表现相关的内容放入样式表，将所有行为相关的内容放入脚本。

此外，尽量减少从文档和模板中链接的样式表和脚本数量，使接触面尽可能小。

将结构与表现和行为分离对维护很重要。修改 HTML 文档和模板的成本总是高于更新样式表和脚本。

<!-- 不推荐 -->
<!doctype html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
I've read about this on a few sites but now I'm sure:
  <u>HTML is stupid!!1</u>
<center>I can't believe there's no way to control the styling of
  my website without doing everything all over again!</center>
<!-- 推荐 -->
<!doctype html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
I've read about this on a few sites but today I'm actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
It's awesome!

实体引用(Entity References)

不要使用实体引用。

在文件、编辑器以及团队之间使用相同编码（UTF-8）的前提下，没有必要使用实体引用，如 &mdash;、&rdquo; 或 &#x263a;。

唯一的例外是在 HTML 中有特殊含义的字符（如 < 和 &），以及控制字符或”不可见”字符（如不换行空格）。

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is "€".

可选标签(Optional Tags)

省略可选标签（可选）。

为了优化文件大小和提高可扫描性，考虑省略可选标签。HTML5 规范 定义了哪些标签可以被省略。

（这种做法可能需要一个过渡期才能成为更广泛的指南，因为它与 Web 开发者通常所学的方式有很大不同。出于一致性和简洁性的考虑，最好省略所有可选标签，而不仅仅是选择性地省略。）

<!-- 不推荐 -->
<!doctype html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    Sic.
  </body>
</html>
<!-- 推荐 -->
<!doctype html>
<title>Saving money, saving bytes</title>
Qed.

type 属性

省略样式表和脚本的 type 属性。

不要为样式表（除非不使用 CSS）和脚本（除非不使用 JavaScript）设置 type 属性。

在这些上下文中指定 type 属性是不必要的，因为 HTML5 默认将 text/css 和 text/javascript 作为默认值。即使对于较旧的浏览器，这样做也是安全的。

<!-- 不推荐 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css"
    type="text/css">
<!-- 推荐 -->
<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"
    type="text/javascript"></script>
<!-- 推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

id 属性

避免不必要的 id 属性。

样式优先使用 class 属性，脚本优先使用 data 属性。

在确实需要 id 属性的地方，始终在值中包含连字符，以确保它不会匹配 JavaScript 标识符语法，例如使用 user-profile 而不是 profile 或 userProfile。

当元素有 id 属性时，浏览器会将其作为 全局 window 原型上的命名属性 提供，这可能导致意外行为。虽然包含连字符的 id 属性值仍然可以作为属性名使用，但它们不能被引用为全局 JavaScript 变量。

<!-- 不推荐：`id` 属性值可能匹配 JavaScript 标识符 -->
<div id="userProfile"></div>
<!-- 推荐：需要 `id` 属性且其值包含连字符 -->
<div id="user-profile"></div>

HTML 格式规则

通用格式

每个块级元素、列表元素或表格元素都另起一行，并对每个子元素进行缩进。

不受元素样式的影响（因为 CSS 允许元素通过 display 属性扮演不同角色），将每个块级元素、列表元素或表格元素放在新的一行。

此外，如果它们是块级元素、列表元素或表格元素的子元素，则对它们进行缩进。

（如果你在列表项之间遇到空白问题，可以将所有 li 元素放在一行。建议代码检查工具对此发出警告而非错误。）

<blockquote>
  <em>Space</em>, the final frontier.
</blockquote>
<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Income
      <th scope="col">Taxes
  <tbody>
    <tr>
      <td>$ 5.00
      <td>$ 4.50
</table>

HTML 换行

对长行进行换行（可选）。

虽然 HTML 没有列数限制的推荐，但如果能显著提高可读性，你可以考虑对长行进行换行。

换行时，每个续行应该进行缩进，以区分换行的属性和子元素。应在项目内保持一致的换行方式，最好由自动化代码格式化工具强制执行。

<button
  mat-icon-button
  color="primary"
  class="menu-button"
  (click)="openMenu()"
>
  <mat-icon>menu</mat-icon>
</button>
<button mat-icon-button color="primary" class="menu-button"
    (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>
<button
    mat-icon-button
    color="primary"
    class="menu-button"
    (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>
<button mat-icon-button
        color="primary"
        class="menu-button"
        (click)="openMenu()">
  <mat-icon>menu</mat-icon>
</button>

HTML 引号

引用属性值时，使用双引号。

属性值应使用双引号（""）而非单引号（''）。

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>
Last updated on
通用规则CSS