HTML 元素

HTML 文档由一个个元素组成。元素是 HTML 中最基本的概念：一个元素从开始标签到结束标签，连同里面的内容，构成网页结构的最小积木。这一节讲清楚元素的组成、空元素、嵌套规则，以及块级元素与行内元素的区别，它们是判断"这段 HTML 写得对不对"的核心依据。

什么是 HTML 元素

元素由三部分组成：开始标签 + 内容 + 结束标签。标签名用尖括号包裹，结束标签在名字前多一个斜杠：

<p>这是一个段落元素</p>

这里的 <p> 是开始标签，这是一个段落元素 是内容，</p> 是结束标签，三部分合起来就是一个完整的 <p> 元素。

空元素（自闭合标签）

有些元素没有内容，只有单个标签，叫空元素。例如换行 <br>、水平线 <hr>、图片 <img>，它们不需要结束标签：

<p>第一行<br>第二行</p>
<img src="logo.png" alt="网站标志">

元素的嵌套

元素可以互相嵌套，就像套娃。嵌套必须遵守"先开后关、层层闭合"的规则，绝不能交叉：

<p>这是<strong>加粗的<em>重点</em></strong>文字</p>

正确顺序是：先开 <p>，再开 <strong>，再开 <em>；关闭时先关 <em>，再关 <strong>，最后关 <p>。交叉嵌套是新手常犯的错误，浏览器虽然会"好心"修复，但结果常常出乎意料。

块级元素与行内元素

按显示方式，元素分为两大类：

• 块级元素：独占一行，前后自动换行，如 <p>、<h1>、<div>。
• 行内元素：不会换行，只占内容那么宽，如 <span>、<a>、<strong>。

<p>块级元素独占一行</p><p>另一个块级元素换到下一行</p>
<span>行内一</span><span>行内二紧挨着显示</span>

在浏览器中显示为：两个 <p> 各占一行；两个 <span> 连在一起显示，中间没有换行。

常见陷阱提醒

• 块级元素里可以放行内元素，但行内元素里不要放块级元素，如 <span><p>…</p></span> 就不规范。
• 忘记写结束标签是高频错误，漏掉后浏览器会自作主张地"吃掉"后面的内容，务必成对书写。
• <br> 是换行用的空元素，它没有结束标签，别写成 </br>。

小结

元素 = 开始标签 + 内容 + 结束标签；空元素没有内容；嵌套要层层闭合；块级独占一行、行内顺势排列。理解元素，就理解了 HTML 的最小单元，下一节我们给元素加上属性。