HTML 标签：开始标签、结束标签、空元素与嵌套

HTML 标签是什么

HTML 标签是写在尖括号里的名称，用来标记一段内容。大多数标签成对出现：一个像 <p> 这样的开始标签，和一个带斜杠的、像 </p> 这样的结束标签。两者之间的一切都是内容，整个组合就是一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

把 <h1> 改成 <h2>（开始标签和结束标签都要改），标题就会变小。正是标签名告诉了浏览器这段内容是什么。

结构解析：标签、属性与元素

<a href="/docs/html/links" class="nav">Links</a>

属性总是写在开始标签里，绝不写在结束标签里。属性页面有详细介绍。

标签名不区分大小写：<P> 和 <p> 是一样的。请用小写书写。

空元素：没有结束标签

有些元素不能包含任何内容，所以只有开始标签。它们被称为空元素（也有人叫自闭合标签）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

完整列表：area、base、br、col、embed、hr、img、input、link、meta、source、track、wbr。

你可以把它们写成带斜杠的 <br />。这个斜杠在 HTML 中不起任何作用；允许它存在，是为了让 XHTML 风格的代码继续可用。普通标签上的斜杠，比如 <div />，同样会被忽略，也就是说这个 div 仍然处于打开状态。

标签嵌套

元素可以放在其他元素里面。规则是：按照与打开相反的顺序关闭标签。最后打开的，最先关闭。

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

浏览器不会拒绝错误的嵌套，而是会修复它，但修复的结果不一定是你想要的。下面这个例子把两段嵌套错误的代码交给浏览器的解析器，并打印出它实际构建的结构：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

这里发生了两处修复。相互交叉的 <b> 和 <i> 被拆成了多余的元素。另外，<p> 不能包含 <div>，所以浏览器在 div 之前就关闭了段落，并把多出来的 </p> 变成了一个新的空段落。当 CSS 或 JavaScript 表现异常时，错误的嵌套是最先要检查的地方之一。

块级元素与行内元素

大多数标签可以分为两种显示类型。块级元素（div、p、h1 到 h6、ul、section）从新的一行开始，占满整个宽度。行内元素（span、a、strong、em、code）位于一行文字之中，宽度只和内容一样。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

蓝色的框横跨整个页面，琥珀色的框只包住自己的文字。CSS 可以用 display 属性改变这一点，但每个标签都有自己的默认值。两个通用容器请参见 div 和 span。

最常用的 HTML 标签

想要一份可以打印的单页列表，请查看 HTML 速查表。

不存在的标签

如果你输入了一个浏览器不认识的标签，它并不会出错。浏览器会创建一个未知元素，显示它的内容，并把它当作行内元素：

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

未知标签对搜索引擎和屏幕阅读器没有任何含义，所以请优先使用真正的标签。如果你在用 JavaScript 构建自己的组件，就给它起一个带连字符的名字（user-badge）：带连字符的名称是专门留给自定义元素的，永远不会和未来的 HTML 标签冲突。

常见错误

• 忘记写结束标签。少了 </a> 或 </strong>，页面的其余部分都会变成链接或粗体。浏览器会帮你关闭某些标签（</p>、</li>），但不包括这些。
• 给空元素写结束标签。</br> 和 </img> 都是无效的。浏览器甚至会把 </br> 当作开始标签 <br> 来读，所以 <br></br> 会产生两个换行。
• 标签相互交叉。按相反的顺序关闭：<b><i>x</i></b>，绝不能写成 <b><i>x</b></i>。
• 在段落中放块级元素。<p> 中的 <div>、列表或标题会让段落提前结束。请用 <div> 作为外层容器。
• 因为外观而选择标签。用 <h2> 是因为它是标题，而不是因为它字大。大小和粗细属于 CSS 的工作。