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://w3schools.org.cn/html/">访问我们的 HTML 教程</a>坏
<a HREF="https://w3schools.org.cn/html/">访问我们的 HTML 教程</a>始终引用属性值
HTML 允许属性值不带引号。
然而，我们建议引用属性值，因为
- 开发者通常引用属性值
- 带引号的值更容易阅读
- 如果值包含空格，您必须使用引号
好
<table class="striped">坏
<table class=striped>非常糟糕
这将不起作用，因为值包含空格
<table class=table striped>始终为图像指定 alt、width 和 height
始终为图像指定 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 代码并不方便。
尽量避免过长的代码行。
空行和缩进
不要随意添加空行、空格或缩进。
为了可读性，请添加空行来分隔大的或逻辑的代码块。
请添加两个空格的缩进。不要使用制表符。
好
<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>This is a heading</h1>
<p>这是一个段落。</p>
自己动手试一试 »
但是，我们强烈建议始终添加 <html> 和 <body> 标签！
省略 <body> 可能会在旧浏览器中产生错误。
省略 <html> 和 <body> 也可能导致 DOM 和 XML 软件崩溃。
省略 <head>？
HTML <head> 标签也可以省略。
浏览器会将 <body> 之前的所有元素添加到默认的 <head> 元素中。
示例
<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>
<h1>This is a heading</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>This is a heading</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 标签的示例。
提示：如果您正在用手机或平板电脑浏览此页面，可以点击下面的两个链接来查看差异。
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 语句会产生不同的结果
使用小写文件名
某些 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://w3schools.org.cn/”），服务器会添加一个默认文件名，如“index.html”、“index.htm”、“default.html”或“default.htm”。
如果您的服务器仅配置了“index.html”作为默认文件名，则您的文件必须命名为“index.html”，而不是“default.html”。
但是，服务器可以配置多个默认文件名；通常您可以设置任意数量的默认文件名。
