HTML 教程 / HTML 语法：标签、属性与嵌套

HTML

创建时间 2026-11-03 最后修改 2026-11-03

HTML 语法规定了在 HTML 文档中如何书写元素、标签、属性、文本和注释。大多数元素使用开始标签和结束标签，属性位于开始标签中，嵌套元素必须按打开的相反顺序关闭。

HTML 元素和标签的基本语法

一个 HTML 元素通常由开始标签、内容和结束标签组成。

<tagname>内容</tagname>

<tagname> 是开始标签，用于标记元素开始的位置。
内容 是元素包含的文本或其他内容。
</tagname> 是结束标签，用于标记元素结束的位置。

以下代码创建一个 p 元素。开始标签是 ，内容是 HTML 语法，结束标签是 。

<p>HTML 语法</p>

HTML 语法中的标签名称对 ASCII 大小写不敏感。然而，使用小写字母是常见的惯例，因为它使标记统一且易于阅读。

空元素没有结束标签

并非所有 HTML 元素都使用结束标签。空元素不能包含内容，也不允许有结束标签。

<br>
<img src="image.webp" alt="蔚蓝海洋上的日出">
<input type="text" name="username">
<meta charset="utf-8">

br、img、input 和 meta 是常见的空元素。不要书写不存在的结束标签，如  或 </img>。

如   所示的结束斜杠在 HTML 空元素的开始标签中是允许的，但它在 HTML 中没有自动关闭功能，并且是多余的。

如何编写 HTML 属性

属性用于配置元素或提供附加信息。它们写在起始标签内，属性名称和其值之间用等号分隔 (=)。关于属性的实际用途，可在正确关联 label 与 input中比较 for、id 和 name 的作用。

<tagname attribute="value">内容</tagname>

例如，这段代码给元素blockquote一个属性id，其值为quote-01。

<blockquote id="quote-01">

  引用的文本

</blockquote>

HTML 支持用双引号、单引号括起的属性值，在有限情况下也支持不使用引号。始终使用双引号是一种实用的约定，因为未加引号的值中不允许有空格和多个特殊字符。

<p style="color: red;">红色文本</p>

在下面的错误示例中，未加引号的属性值在 color: 后的空格处结束。因此，浏览器不会按预期解释该属性。

<p style=color: red;>红色文本</p>

布尔属性如 disabled、checked 和 required 在存在时为真。它们可以只写属性名来表示。

<input type="text" disabled>

按正确顺序关闭嵌套元素

当一个元素放置在另一个元素内部时，应先关闭内部元素，然后再关闭外部元素。以下标记是正确嵌套的，因为strong元素完全包含在p元素中。

<p>这个句子包含 <strong>重要的文本</strong>.</p>

以下示例是嵌套错误的，因为两个元素的区域相互重叠。

<p>这个句子包含 <strong>重要的文本</p></strong>

浏览器可以在解析时修正错误的标记，但生成的文档对象模型（DOM）可能与您预期的结构不同。不要依赖浏览器的错误修复来代替有效的标记。

如何编写 HTML 注释

HTML 注释以  结束。注释不会显示为页面内容，因此它们可以用于记录标记的用途，或者为开发者留下临时备注。

<!-- 该注释不会在页面上显示。 -->

注释可以跨多行。

<!--

  这是一个多行 HTML 注释。

-->

不要在一个 HTML 注释内嵌套另一个。嵌套的注释边界可能导致注释在你意想不到的地方结束。

<!--

  &amp;lt;!-- 不要嵌套注释。 -->

-->

页面中有一个注释被隐藏，但仍在页面源代码中可见。切勿在 HTML 注释中放置密码、API 密钥、个人信息或其他机密信息。

HTML 文档的基本结构

以下示例显示了一个最小且实用的 HTML 文档结构（中文）。练习查找错误、验证 HTML 文档并重新检查。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文档标题</title>
  </head>
  <body>
    <h1>页面标题</h1>
    <p>页面内容在此处。</p>
  </body>
</html>

<!doctype html> 选择用于现代 HTML 文档的标准显示模式。
<html lang="zh-CN"> 是文档元素，lang="zh-CN" 将中文（中国）标记为文档的主要语言。
<head> 包含文档的元数据，如字符编码、视口设置和文档标题。
<body> 包含标题、段落、图片、链接和页面上显示的其他内容。

如何检查 HTML 语法

即使文档的标记存在错误，浏览器也会尝试显示该文档。因此，一页出现在屏幕上并不证明其语法是正确的。请检查嵌套和属性，并使用 Nu HTML Checker 来识别标记错误和警告。

有关标签、属性、空元素和注释的具体规则，请参见WHATWG HTML 标准的语法部分。

布尔属性和文字字符

布尔属性的存在决定了其值，而不是像“false”这样的字符串。checked="false"始终存在，因此默认情况下是选中的，并且“false”不是布尔属性的有效值。要默认不选中，请删除checked。不要像处理普通字符串属性那样处理布尔属性。

<label><input type="checkbox" name="news" value="yes" checked> 消息</label>
<label><input type="checkbox" name="updates" value="yes"> 更新</label>

只有第一个控件应默认被选中。要显示字面表示的元素，请将它的括号写为<和>。字面表示的与号在需要转义时使用&。区分作为文本显示的代码和创建一个元素的标记。

<p>&lt;p&gt; 是一个段落元素。A &amp; B 表示两个名称。</p>

此示例显示尖括号和与号，而不是创建嵌套段落。参见HTML 布尔属性规则。

HTML 语法检查清单

在完整的 HTML 文档开头插入<!doctype html>。
对于标签和属性名称使用一致的小写字母。
将属性值放在引号中，最好使用双引号以保持一致性。
不要为空元素添加结束标签。
从内到外关闭嵌套元素。
使用lang来识别文档的语言。
不要在注释和页面源代码中包含机密数据。
验证最终文档，而不仅仅依赖其视觉效果。

HTML