HTML 样式指南和代码约定

一致、干净、整洁的 HTML 代码使其他人更容易阅读和理解您的代码。

下面是一些创建格式良好的 HTML 代码的指导方针和技巧。

请使用正确的文档类型

请始终在文档的首行声明文档类型:

HTML 的正确文档类型是:

<!DOCTYPE html>

请使用小写元素名

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

我们推荐使用小写元素名:

混合大小写名称并不好
开发者习惯使用小写名（比如在 XHTML 中）
小写更起来更纯净
小写更易书写

看起来不错:

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

看起来不好:

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

关闭所有 HTML 元素

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

我们建议关闭所有 HTML 元素:

看起来不错:

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

看起来不好:

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

使用小写属性名

HTML 允许大小写混合的属性名。

我们建议使用小写属性名:

混合属性名并不好
开发者习惯于使用小写属性名
小写属性名看情况更纯净
小写属性名更易书写

看起来不错:

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

看起来不好:

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

属性值加引号

HTML 允许不加引号的属性值。

我们推荐属性值加引号:

如果属性值包含空格值，则必须使用引号
如果属性值包含值，则必须使用引号
加引号的值更易阅读

看起来不错:

看起来不好:

很不好:

这个属性值无效，因为值中包含空格:

始终指定图像的高度、宽度和高度

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

另外，请始终定义图像的 width 和 height 。这减少了闪烁，因为浏览器可以在加载之前为图像预留空间。

看起来不错:

看起来不好:

空格和等号

HTML 允许在等号周围使用空格。但空间越小，阅读起来就越容易，而且能更好地将实体组合在一起。

看起来不错:

看起来不好:

避免长代码行

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

请尽量避免代码行超过 80 个字符。

空行和缩进

请勿毫无理由地增加空行。

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

为了提高可读性，请增加两个空格的缩进。请勿使用 TAB。

请勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行，也没有必要缩进每个元素:

看起来不错:

<body>

<h1>著名城市</h1>

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

</body>

看起来不好:

<body>

<h1>著名城市</h1>

<h2>东京</h2>

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

</body>

好的表格示例:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

好的列表示例:

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</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> 标签。

省略 <html> 可令 DOM 和 XML 软件崩溃。

省略 <body> 会在老式浏览器（IE9）中产生错误。

省略 <head>?

在 HTML 标准中， <head> 标签也能够被省略。

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

通过省略 <head> 标签，您能够降低 HTML 的复杂性:

实例

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

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

</body>
</html>

亲自试一试 »

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

关闭空的 HTML 元素

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

允许这样:

也允许这样:

斜杠（/）在 XHTML 和 XML 中是必需的。如果您期望 XML 软件来访问您的页面，保持这个习惯是个好主意。

添加 lang 属性

您应该始终在 html 中包含 lang 属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。

实例

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

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

</body>
</html>

亲自试一试 »

元数据

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

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

设置预览

预览是用户在网页上的可见区域。它随设备的不同而变化——在手机上比在电脑屏幕上小。

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

这将向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 设置页面宽度以跟随设备的屏幕宽度（根据设备的不同而有所不同）。

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

以下是一个不带 viewport 标签的网页示例，以及一个带 viewport 标签的网页示例:

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

没有 viewport 元标记

有 viewport 元标记

注释

短注释应该写在一行上，如下所示:

长注释跨越多行，应如下所示:

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

样式表

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

短规则可以压缩为一行，就像这样:

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

长规则应该分为多行:

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

开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对（包括最后一个）之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行，之前不用空格
避免每行超过 80 个字符

注释:在逗号或分号之后添加空格，是所有书写类型的通用规则。

在 HTML 中加载 JavaScript

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

通过 JavaScript 访问 HTML 元素

使用"不整洁"的 HTML 样式的后果，是可能会导致 JavaScript 错误。

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

实例

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

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

亲自试一试 »

Visit the JavaScript Style Guide.

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感:

不能以 london.jpg 访问 London.jpg。

其他 web 服务器（微软，IIS）对大小写不敏感:

能够以 london.jpg 或 London.jpg 访问 London.jpg。

如果使用混合大小写，那么您必须保持高度的一致性。

如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上，这些小错误将破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可以的话）。

文件扩展名

HTML 文件名应该使用扩展名 .html（而不是 .htm）。

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

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

.htm 和 .html 之间的区别?

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

任何网页浏览器和网页服务器都会将两者视为HTML。

默认文件名

当URL结尾没有指定文件名时 (如 "https://www.w3ccoo.com/")，服务器会添加一个默认文件名，例如 "index.html", "index.htm", "default.html", or "default.htm"。

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

服务器可以配置多个默认文件名；您可以根据需要设置默认文件名。

HTML 教程

HTML 表单

HTML 图形

HTML 媒体

HTML APIs

HTML 实例

HTML 参考手册

HTML 样式指南和代码约定

请使用正确的文档类型

请使用小写元素名

看起来不错:

看起来不好:

关闭所有 HTML 元素

看起来不错:

看起来不好:

使用小写属性名

看起来不错:

看起来不好:

属性值加引号

看起来不错:

看起来不好:

很不好:

始终指定图像的高度、宽度和高度

看起来不错:

看起来不好:

空格和等号

看起来不错:

看起来不好:

避免长代码行

空行和缩进

看起来不错:

看起来不好:

好的表格示例:

好的列表示例:

不要跳过 <title> 元素

省略 <html> 和 <body>?

实例

省略 <head>?

实例

关闭空的 HTML 元素

允许这样:

也允许这样:

添加 lang 属性

实例

元数据

设置预览

注释

样式表

在 HTML 中加载 JavaScript

通过 JavaScript 访问 HTML 元素

实例

使用小写文件名

文件扩展名

.htm 和 .html 之间的区别?

默认文件名

颜色选择器

HTML 参考手册

HTML 实例

HTML 测验/考试

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！