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 代码并不方便。
尽量避免使用过长的代码行。
空行和缩进
不要无缘无故添加空行、空格或缩进。
为了可读性，添加空行以分隔大型或逻辑代码块。
为了可读性，添加两个空格缩进。不要使用 Tab 键。
良好
<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> 元素
在 HTML 中，<code class="w3-codespan"><title> 元素是必需的。
页面标题的内容对于搜索引擎优化 (SEO) 非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。
<code class="w3-codespan"><title> 元素
- 在浏览器工具栏中定义标题
- 在页面添加到收藏夹时提供页面的标题
- 在搜索引擎结果中显示页面的标题
因此，请尝试使标题尽可能准确和有意义：
<title>HTML 样式指南和编码约定</title>
省略 <html> 和 <body>？
HTML 页面可以在没有 <code class="w3-codespan"><html> 和 <code class="w3-codespan"><body> 标记的情况下进行验证
但是，我们强烈建议始终添加 <code class="w3-codespan"><html> 和 <code class="w3-codespan"><body> 标记！
省略 <code class="w3-codespan"><body> 可能会在旧版浏览器中产生错误。
省略 <code class="w3-codespan"><html> 和 <code class="w3-codespan"><body> 也会导致 DOM 和 XML 软件崩溃。
省略 <head>？
HTML <head> 标记也可以省略。
浏览器会将所有元素（在 <code class="w3-codespan"><body> 之前）添加到默认的 <code class="w3-codespan"><head> 元素中。
示例
<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
自己尝试 »
但是，我们建议使用 <code class="w3-codespan"><head> 标记。
关闭空 HTML 元素？
在 HTML 中，关闭空元素是可选的。
允许
<meta charset="utf-8">
也允许
<meta charset="utf-8" />
如果您希望 XML/XHTML 软件访问您的页面，请保留关闭斜杠 (/)，因为它是 XML 和 XHTML 中必需的。
添加 lang 属性
您应该始终在 <code class="w3-codespan"><html> 标记内包含 <code class="w3-codespan">lang 属性，以声明网页的语言。这是为了帮助搜索引擎和浏览器。
示例
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>页面标题</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
自己尝试 »
元数据
为了确保正确解释和正确的搜索引擎索引，应尽早（在 HTML 文档中）定义语言和字符编码 <code class="w3-codespan"><meta charset="charset">
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
设置视窗
视窗是用户对网页的可见区域。它随设备而变化 - 在手机上比在电脑屏幕上更小。
您应该在所有网页中包含以下 <code class="w3-codespan"><meta> 元素
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这为浏览器提供了有关如何控制页面尺寸和缩放的说明。
<code class="w3-codespan">width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（这将根据设备而有所不同）。
<code class="w3-codespan">initial-scale=1.0 部分在浏览器首次加载页面时设置初始缩放级别。
这是一个没有视窗元标记的网页示例，以及具有视窗元标记的相同网页示例
提示：如果您使用手机或平板电脑浏览此页面，您可以点击以下两个链接查看差异。
HTML 注释
简短的注释应写在一行上，如下所示
<!-- 这是一个注释 -->
跨越多行的注释应按如下方式编写
<!--
这是一个长注释示例。这是一个长注释示例。
这是一个长注释示例。这是一个长注释示例。
-->
如果长注释缩进两个空格，则更容易观察到它们。
使用样式表
使用简单的语法链接到样式表（<code class="w3-codespan"> 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
使用简单的语法加载外部脚本（<code class="w3-codespan"> 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”。
但是，服务器可以配置多个默认文件名；通常您可以设置任意数量的默认文件名。
