编写 HTML 代码示例指南
以下指南涵盖了如何为 MDN Web 文档编写 HTML 示例代码。
HTML 代码示例的一般指南
选择格式
关于正确缩进、空格和行长的意见一直存在争议。关于这些主题的讨论分散了创建和维护内容的注意力。
在 MDN Web 文档中，我们使用 Prettier 作为代码格式化程序，以保持代码风格的一致性（并避免跑题的讨论）。您可以查阅我们的 配置文件 以了解当前规则，并阅读 Prettier 文档。
Prettier 格式化所有代码并保持样式一致。但是，您还需要遵循一些其他规则。
完整的 HTML 文档
注意：本节中的指南仅在您需要显示完整的 HTML 文档时适用。通常，代码片段足以演示一项功能。当使用 EmbedLiveSample 宏 时，只需包含 HTML 代码片段；它将在显示时自动插入完整的 HTML 文档中。
文档类型声明
您应该使用 HTML5 文档类型声明。它简短、易于记忆且向后兼容。
<!doctype html>
文档语言
文档字符集
您还应该像这样定义文档的字符集
<meta charset="utf-8" />
除非您有充分的理由不使用 UTF-8，否则请使用它；它几乎可以满足所有字符需求，无论您在文档中使用哪种语言。
视口元标记
最后，您应该始终将视口元标记添加到 HTML <head> 中，以便代码示例更有可能在移动设备上正常工作。您应该至少在文档中包含以下内容，并在需要时稍后修改
<meta name="viewport" content="width=device-width" />
有关更多详细信息，请参阅 使用视口元标记控制移动浏览器上的布局。
属性
您应该将所有属性值放在双引号中。由于 HTML5 允许省略引号，因此省略引号很诱人，但如果您包含引号，则标记会更整洁且更易于阅读。例如，这更好
<img src="images/logo.jpg" alt="A circular globe icon" class="no-border" />
…比这
<img src=images/logo.jpg alt=A circular globe icon class=no-border>
省略引号也可能导致问题。在上面的示例中，alt 属性将被解释为多个属性，因为没有引号指定“A circular globe icon”是一个单独的属性值。
布尔属性
不要为布尔属性包含值（但要为 枚举 属性包含值）；您可以只写属性名称来设置它。例如，您可以编写
<input required />
这完全可以理解并且可以正常工作。如果存在布尔 HTML 属性，则其值为 true。虽然包含值可以工作，但没有必要且不正确
<input required="required" />
大小写
对所有元素名称和属性名称/值使用小写，因为它看起来更整洁，这意味着您可以更快地编写标记。例如
<p class="nice">This looks nice and neat</p>
<P CLASS="WHOA-THERE">Why is my markup shouting?</P>
类和 ID 名称
字符引用
不要不必要地使用 字符引用 — 在可能的情况下使用文字字符（您仍然需要转义诸如尖括号和引号之类的字符）。
例如，您可以只写
<p>© 2018 Me</p>
而不是
<p>© 2018 Me</p>
HTML 元素
在 MDN Web 文档上编写有关 HTML 元素有一些规则。遵守这些规则可以生成元素及其组件的一致描述，并确保正确链接到详细文档。
-
元素名称：使用
HTMLElement宏，它会创建一个指向该元素的 MDN Web 文档页面的链接。例如，编写{{HTMLElement("title")}}会生成“<title>”。如果您不想创建链接，请将名称括在尖括号中并使用“内联代码”样式（例如，<title>）。 -
属性名称：使用“内联代码”样式将属性名称放在
代码字体中。此外，当在与属性功能说明相关联时或在页面上首次使用时，请将它们放在粗体中。 - 属性值：使用“内联代码”样式将
<code>应用于属性值，并且不要在字符串值周围使用引号，除非代码示例的语法需要。例如，“当<input>元素的type属性设置为email或tel时...”。