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。
通常服务器都可以配置多个默认文件名,请根据自己的需要设置任意的默认文件名。