HTML 风格指南和代码约定

一致、清晰、整洁的 HTML 代码使他人更易于阅读和理解您的代码。

以下是创建良好 HTML 代码的一些指南和技巧。

始终声明文档类型

请始终在文档的第一行声明文档类型。

HTML 的正确文档类型是：

<!DOCTYPE html>

使用小写元素名称

HTML 允许在元素名称中混合使用大写和小写字母。

但是，我们建议使用小写元素名称，因为：

混合使用大写和小写名称看起来不佳
开发者通常使用小写名称
小写看起来更清晰
小写更易于输入

好：

<body>
<p>这是一个段落。</p>
</body>

不好：

<BODY>
<P>这是一个段落。</P>
</BODY>

关闭所有 HTML 元素

在 HTML 中，您不必关闭所有元素（例如 <p> 元素）。

但是，我们强烈建议关闭所有 HTML 元素，像这样：

好：

<section>
  <p>这是一个段落。</p>
  <p>这是一个段落。</p>
</section>

不好：

<section>
  <p>这是一个段落。
  <p>这是一个段落。
</section>

使用小写属性名称

HTML 允许在属性名称中混合使用大写和小写字母。

但是，我们建议使用小写属性名称，因为：

混合使用大写和小写名称看起来不佳
开发者通常使用小写名称
小写看起来更清晰
小写更易于输入

好：

<a href="https://www.w3school.com.cn/html/">访问我们的 HTML 教程</a>

不好：

<a HREF="https://www.w3school.com.cn/html/">访问我们的 HTML 教程</a>

始终为属性值加引号

HTML 允许属性值不加引号。

但是，我们建议为属性值加引号，因为：

开发者通常为属性值加引号
加引号的值更易于阅读
如果值包含空格，则必须使用引号

好：

<table class="striped">

不好：

<table class=striped>

非常不好：

这将无法工作，因为值包含空格：

<table class=table striped>

始终为图像指定 alt、width 和 height 属性

始终为图像指定 alt 属性。如果图像因某种原因无法显示，此属性非常重要。

此外，始终定义图像的宽度和高度。这可以减少闪烁，因为浏览器可以在加载之前为图像预留空间。

好：

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

不好：

<img src="html5.gif">

空格和等号

HTML 允许在等号周围使用空格。但无空格更易于阅读，并且将实体更好地组合在一起。

好：

<link rel="stylesheet" href="styles.css">

不好：

<link rel = "stylesheet" href = "styles.css">

避免过长的代码行

使用 HTML 编辑器时，左右滚动阅读 HTML 代码很不方便。

尽量避免过长的代码行。

空行和缩进

不要无故添加空行、空格或缩进。

为了提高可读性，添加空行以分隔大型或逻辑代码块。

为了提高可读性，添加两个空格的缩进。不要使用制表符。

好：

<body>

<h1>著名城市</h1>

<h2>北京</h2>
<p>北京是日本的首都，大北京地区的中心，也是世界上人口最多的都市区。</p>

<h2>伦敦</h2>
<p>伦敦是英格兰的首都。它是英国人口最多的城市。</p>

<h2>巴黎</h2>
<p>巴黎是法国的首都。巴黎地区是欧洲最大的人口中心之一。</p>

</body>

不好：

<body>
<h1>著名城市</h1>
<h2>北京</h2><p>北京是日本的首都，大北京地区的中心，也是世界上人口最多的都市区。</p>
<h2>伦敦</h2><p>伦敦是英格兰的首都。它是英国人口最多的城市。</p>
<h2>巴黎</h2><p>巴黎是法国的首都。巴黎地区是欧洲最大的人口中心之一。</p>
</body>

好的表格示例：

<table>
  <tr>
    <th>名称</th>
    <th>描述</th>
  </tr>
  <tr>
    <td>A</td>
    <td>对 A 的描述</td>
  </tr>
  <tr>
    <td>B</td>
    <td>对 B 的描述</td>
  </tr>
</table>

好的列表示例：

<ul>
  <li>伦敦</li>
  <li>巴黎</li>
  <li>北京</li>
</ul>

切勿省略 <title> 元素

<title> 元素在 HTML 中是必需的。

页面标题的内容对搜索引擎优化（SEO）非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面时的顺序。

<title> 元素：

在浏览器工具栏中定义标题
为页面添加到收藏夹时提供标题
在搜索引擎结果中显示页面标题

因此，请尽量使标题准确且有意义：

<title>HTML 风格指南和编码规范</title>

可以省略 <html> 和 <body> 吗？

HTML 页面在没有 <html> 和 <body> 标签的情况下也能验证通过：

实例

<!DOCTYPE html>
<head>
  <title>页面标题</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

亲自试一试

但是，我们强烈建议始终添加 <html> 和 <body> 标签！

省略 <body> 可能会导致较旧浏览器出现错误。

省略 <html> 和 <body> 也可能导致 DOM 和 XML 软件崩溃。

可以省略 <head> 吗？

HTML <head> 标签也可以省略。

浏览器会将 <body> 之前的所有元素添加到默认的 <head> 元素中。

实例

<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

亲自试一试

但是，我们建议使用 <head> 标签。

关闭空 HTML 元素吗？

在 HTML 中，关闭空元素是可选的。

允许：

<meta charset="utf-8">

也允许：

<meta charset="utf-8" />

如果您希望 XML/XHTML 软件访问您的页面，请保留关闭斜杠（/），因为这在 XML 和 XHTML 中是必需的。

添加 lang 属性

您应始终在 <html> 标签中包含 lang 属性，以声明网页的语言。这旨在帮助搜索引擎和浏览器。

实例

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>页面标题</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

亲自试一试

元数据

为确保正确解释和搜索引擎索引，语言和字符编码 <meta charset="charset"> 应尽可能早地在 HTML 文档中定义：

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>

设置视口

视口是用户可见的网页区域。它随设备而变化 - 在手机上会比在计算机屏幕上小。

您应在所有网页中包含以下 <meta> 元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这为浏览器提供了关于如何控制页面尺寸和缩放的指令。

width=device-width 部分将页面宽度设置为跟随设备的屏幕宽度（这将根据设备而变化）。

initial-scale=1.0 部分设置页面首次被浏览器加载时的初始缩放级别。

以下是一个没有视口 meta 标签的网页示例，以及同一个带有视口 meta 标签的网页：

提示：如果您使用手机或平板电脑浏览此页面，可以点击下面的两个链接查看差异。

没有视口 meta 标签

有视口 meta 标签

HTML 注释

短注释应写在一行上，像这样：

<!-- 这是一个注释 -->

跨越多行的注释，应像这样写：

<!--
  这是一个长注释示例。这是一个长注释示例。
  这是一个长注释示例。这是一个长注释示例。
-->

长注释如果缩进两个空格，则更易于观察。

使用样式表

使用简单的语法链接到样式表（type 属性不是必需的）：

<link rel="stylesheet" href="styles.css">

短的 CSS 规则可以压缩书写，像这样：

p.intro {font-family:Verdana;font-size:16em;}

长的 CSS 规则应写在多行上：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

将开括号放在选择器的同一行
在开括号前使用一个空格
使用两个空格的缩进
在每个属性-值对后使用分号，包括最后一个
仅当值包含空格时才使用引号
将闭括号放在新行上，不带前导空格

在 HTML 中加载 JavaScript

使用简单的语法加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素

使用“不整洁”的 HTML 代码可能导致 JavaScript 错误。

以下两个 JavaScript 语句将产生不同的结果：

实例

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

亲自试一试

访问 JavaScript 风格指南。

使用小写文件名

一些 Web 服务器（Apache、Unix）对文件名区分大小写："london.jpg" 不能以 "London.jpg" 访问。

其他 Web 服务器（Microsoft、IIS）不区分大小写："london.jpg" 可以以 "London.jpg" 访问。

如果您混合使用大写和小写，必须意识到这一点。

如果您从不区分大小写的服务器转移到区分大小写的服务器，即使是小错误也会破坏您的网站！

为避免这些问题，请始终使用小写文件名！

文件扩展名

HTML 文件应具有 .html 扩展名（允许使用 .htm）。

CSS 文件应具有 .css 扩展名。

JavaScript 文件应具有 .js 扩展名。

.htm 和 .html 之间的区别？

.htm 和 .html 文件扩展名之间没有区别！

任何 Web 浏览器和 Web 服务器都会将它们视为 HTML。

默认文件名

当 URL 末尾未指定文件名时（如 "https://www.w3school.com.cn/"），服务器只是添加一个默认文件名，例如 "index.html"、"index.htm"、"default.html" 或 "default.htm"。

如果您的服务器仅配置了 "index.html" 作为默认文件名，则您的文件必须命名为 "index.html"，而不是 "default.html"。

但是，服务器可以配置多个默认文件名；通常您可以根据需要设置尽可能多的默认文件名。