HTML 编码约定和风格指南

一致、干净和整洁的 HTML 代码使其他人更容易阅读和理解您的代码，这里整理了一些编写优秀 HTML 代码的指南和技巧。

一致、干净和整洁的 HTML 代码使其他人更容易阅读和理解您的代码，这里整理了一些编写优秀 HTML 代码的指南和技巧。

一定要声明文档类型

一定要将文档类型声明为文档的第一行。

HTML 的正确文档类型是：

<!DOCTYPE html>

元素名称要用小写

HTML 允许在元素名称中混合使用大写和小写字母，但是我们建议使用小写元素名称，因为：

  • 混合大写和小写名称不容易阅读
  • 小写看起来更干净
  • 小写更容易写
  • 这已经是不容易阅读的默认做法

好的例子

<body>
  <p>这里是一段内容。</p>
</body>

不好的例子

<BODY>
  <P>这里是一段内容。</p>
</BODY>

闭合所有 HTML 元素

在 HTML 中，没有强制要求要闭合所有元素（例如 <p> 元素），但是我们强烈建议闭合所有 HTML 元素。有些元素是自闭合元素，没有结束符号，比如 <br> 和 <hr>。

好的例子

<section>
  <p>这里是一段内容。</p>
  <p>这里是一段内容。</p>
</section>

不好的例子

<section>
  <p>这里是一段内容。
  <p>这里是一段内容。
</section>

属性名称要用小写

HTML 允许在属性名称中混合使用大写和小写字母，但是我们建议使用小写的属性名称，因为：

  • 混合大写和小写名称不容易阅读
  • 小写看起来更干净
  • 小写更容易写
  • 这已经是业界的默认做法

好的例子

<a href="https://www.gobeta.net/tutorials/html/">HTML 教程</a>

不好的例子

<a HREF="https://www.gobeta.net/tutorials/html/">HTML 教程</a>

属性值一定要带引用

HTML 允许不带引号的属性值。但是我们建议属性值一定要带引用，因为：

  • 如果属性值包含空格，您必须使用引号
  • 全部使用引号更统一
  • 带引号的属性值更容易阅读
  • 这已经是业界的默认做法

好的例子

<table class="striped"></table>

不好的例子

<table class=striped></table>

糟糕的例子

下面的 class 不能正常工作，因为包含空格 striped 会被认为是另一个属性：

<table class=table striped></table>

一定要为图像设定 alt、宽度和高度

一定要为图像设定 alt 属性。如果由于某种原因无法显示图像，浏览器则会 alt 中设置的替代文本。

此外， 一定要定义图像的 width 和 height 。这样浏览器可以在加载之前为图像保留空间，减少了网页加载过程中的闪烁。

好的例子

<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 代码并不方便，所以应该尽量避免太长的代码行。

空行和缩进

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

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

为了可读性，可以添加两个缩进空格。

不要使用 tab 键，或者将编辑器设置为用空格代替 tab。

好的例子

<body>
  <h1>著名城市</h1>

  <h2>北京</h2>
  <p>
    北京是中华人民共和国的首都，也是世界历史文化名城和古都之一，有3000多年建城史，
    800多年建都史，曾为辽、金、元、明、清五朝帝都。 
    1949年10月1日中华人民共和国成立，北京从此成为新中国的首都。
    北京拥有众多的文物古迹，故宫、长城、周口店猿人遗址、天坛、颐和园、明十三陵等，被联合国列入世界文化遗产。
  </p>
</body>

不好的例子

<body>
  <h1>著名城市</h1>

  <h2>北京</h2>
  <p>
    北京是中华人民共和国的首都，也是世界历史文化名城和古都之一，有3000多年建城史，800多年建都史，曾为辽、金、元、明、清五朝帝都。 1949年10月1日中华人民共和国成立，北京从此成为新中国的首都。 北京拥有众多的文物古迹，故宫、长城、周口店猿人遗址、天坛、颐和园、明十三陵等，被联合国列入世界文化遗产。
  </p>
</body>

好的表格例子

<table>
  <tr>
    <th>水果</th>
    <th>说明</th>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>香蕉是一种南方的水果。</td>
  </tr>
  <tr>
    <td>苹果</td>
    <td>苹果是一种北方的水果。</td>
  </tr>
</table>

好的列表例子

<ul>
  <li>北京</li>
  <li>上海</li>
  <li>深圳</li>
</ul>

永远不要跳过 <title> 元素

在 HTML 中 <title> 元素是必需的。页面标题的内容对于搜索引擎优化（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> 标签时，会将 <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 中是必需的。

!! XML/XHTML 采用的是严格的校验模式，所有元素必须要闭合。

添加 lang 属性

您应该在 <html> 标签内设置 lang 属性来声明网页的语言，这有助于搜索引擎和浏览器理解你的网页。

例子

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <h1>这里是一级标题</h1>
    <p>这里是一段内容。</p>
  </body>
</html>

元数据

为了确保浏览器和搜索引擎索引正确识别，应在 HTML 文档中尽早添加语言和字符编码： <meta charset="内容编码">

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

! 为了让网页更具通用型和适应更多的语言环境，建议设置 charset="UTF-8"，这样即使在不同的语言环境下也会正常显示。

设置视口 viewport

视口 viewport 是网页的用户可见区域。它因设备而异，通常手机上的 viewport 会比在电脑屏幕上的 viewport 小。

您应该在所有网页中添加以下 <meta> 元素：

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

width=device-width 指示页面的宽度跟随设备的屏幕宽度（这将因设备而异）。

initial-scale=1.0 指示浏览器首次加载页面时的初始缩放级别。

浏览器会依据 viewport 来控制页面尺寸和缩放比例。

HTML 注释

简短的注视应该写在一行上，像这样：

<!-- This is a comment -->

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

<!--
  This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example.
-->

多行长注释使用两个空格缩进会更容易阅读。

使用样式表

使用 link 标签链接到样式表：

<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;
}

书写 CSS 规则指南:

  • 将左大括号与选择器放在同一行
  • 在左括号前使用一个空格
  • 使用两个缩进空格
  • 在每个属性值对后使用分号 ; 结束当前属性
  • 如果值包含空格，则在值周围使用引号
  • 将右大括号放在新行上，前面不需要空格

在 HTML 中加载 JavaScript

使用 script 标签加载外部脚本：

<script src="javascript.js"></script>

使用 JavaScript 访问 HTML 元素

不统一的 HTML 代码可能会带来很难调试的 JavaScript 错误。

这两个 JavaScript 语句会产生不同的结果：

例子

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

使用小写文件名

某些 Web 服务器（Apache、Unix）对文件名区分大小写：文件 hello.jpg 和 Hello.jpg 不是同一个文件。

其他 Web 服务器（Microsoft、IIS）不区分大小写：文件 hello.jpg 和 Hello.jpg 是同一个文件。

混合使用大写和小写，很有可能引入很难追踪的错误。如果您从不区分大小写的服务器转移到区分大小写的服务器，则可能因为文件名的大小写问题导致网页不能正常访问。

为避免这些问题，请一定要使用小写文件名！

文件扩展名

HTML 文件可以使用 .html 扩展名，也可以使用 .htm。

CSS 文件应使用 .css 扩展名。

JavaScript 文件应使用 .js 扩展名。

.htm 和 .html 的区别？

HTML 文件扩展名 .htm 和 .html 之间没有区别，它们都会被任何网络浏览器和网络服务器正确识别。

在同一个项目中，建议统一使用一种后缀名，不要混用。

通常建议所有场景下统一使用 .html 作为 HTML 文件的后缀。

默认文件名

当 URL 末尾没有指定文件名时（如“https://www.gobeta.net/”），服务器根据默认文件名（如 index.html、index.htm、default.html 或 default.htm）返回一个默认文件。

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

通常服务器都可以配置多个默认文件名，请根据自己的需要设置任意的默认文件名。

HTML 网页布局 HTML 字符实体