编写 HTML 代码示例的指南
以下指南涵盖了如何为 MDN Web Docs 编写 HTML 示例代码。
HTML 代码示例的通用指南
选择格式
关于正确缩进、空格和行长度的看法一直备受争议。关于这些话题的讨论会分散创建和维护内容的注意力。
在 MDN Web 文档中，我们使用 Prettier 作为代码格式化程序，以保持代码风格一致（并避免离题讨论）。您可以查阅我们的 配置文件 以了解当前规则，并阅读 Prettier 文档。
Prettier 格式化所有代码并保持风格一致。然而，还有一些额外的规则需要您遵循。
完整的 HTML 文档
注意：本节中的指南仅适用于需要显示完整 HTML 文档的情况。通常，代码片段足以演示一个功能。当使用 EmbedLiveSample 宏时，只需包含 HTML 代码片段；它将在显示时自动插入到完整的 HTML 文档中。
文档类型
您应该使用 HTML5 doctype。
<!doctype html>
文档语言
使用 lang 属性在 <html> 元素上设置文档语言。
<html lang="en-US"></html>
这有利于可访问性和搜索引擎，有助于内容本地化，并提醒人们使用最佳实践。
文档字符集
您还应该像这样定义文档的字符集
<meta charset="utf-8" />
除非有非常充分的理由，否则应使用 UTF-8；它几乎可以满足您文档中使用任何语言的所有字符需求。
视口 meta 标签
最后，您应该始终将视口 meta 标签添加到 HTML 的 <head> 中，以使代码示例在移动设备上更有可能正常工作。您应该在文档中至少包含以下内容，并且可以根据需要稍后进行修改。
<meta name="viewport" content="width=device-width" />
有关更多详细信息，请参阅 <meta name="viewport">。
属性
您应该将所有属性值放在双引号中。尽管 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" />
MDN 上的大小写约定
所有不区分大小写的构造都使用小写，包括 doctype 声明、元素名称以及属性名称/值。这可以创建一致的外观，并加快标记编写速度。
<p class="nice">This looks nice and neat</p>
<P CLASS="WHOA-THERE">Why is my markup shouting?</P>
类和 ID 名称
使用语义化的类/ID 名称，并使用连字符（kebab case）分隔多个单词。不要使用 camel case。例如
<p class="editorial-summary">Blah blah blah</p>
<p class="bigRedBox">Blah blah blah</p>
字符引用
不要不必要地使用 字符引用 — 尽可能使用字面字符（您仍然需要转义尖括号和引号等字符）。
例如，您可以只写
<p>© 2018 Me</p>
而不是
<p>© 2018 Me</p>
HTML 元素
关于在 MDN Web Docs 上编写 HTML 元素有一些规则。遵守这些规则可以产生对元素及其组件的一致描述，并确保正确链接到详细文档。
- 元素名称：使用
HTMLElement宏，它会创建一个链接到该元素的 MDN Web Docs 页面。例如，编写{{HTMLElement("title")}}会生成 "<title>"。如果您不想创建链接，请**将名称括在尖括号中**并使用“Inline Code”样式（例如，<title>）。 - 属性名称：使用“Inline Code”样式将属性名称放在
code font中。此外，当属性与解释其功能的说明相关联时，或者当它在页面上首次使用时，请将其设置为粗体。 - 属性值：使用“Inline Code”样式将
<code>应用于属性值，除非代码示例的语法需要，否则不要在字符串值周围使用引号。例如，“当<input>元素的type属性设置为email或tel时……”