HTML系列教程：4_什么是 HTML 元素（零基础超详细讲解）

很多新手分不清：HTML 标签、HTML 元素，这两个概念。这节课彻底搞懂，大量例子、对比、易错点。

前言

前面我们学过：<h1>、<p>、<a>、<img>，这些尖括号的东西叫标签。现在要学习新概念：HTML 元素（Element）。

新手一句话先记牢： 标签是符号；元素 = 开始标签 + 内容 + 结束标签（整体全部合在一起叫元素）。

一、HTML 元素到底是什么？

官方定义

HTML 元素由开始标签、内容、结束标签三部分组成，这一整套完整的整体，叫做 HTML 元素。

拆分结构（双标签元素，绝大多数元素都是这种）：

复制代码

<开始标签>   元素内容    </结束标签>

举个最简单例子：

html 复制代码

<p>我是一段文字</p>

<p> → 开始标签（opening tag）
我是一段文字 → 元素内容（content）
</p> → 结束标签（closing tag）

✅ 完整这一整块：<p>我是一段文字</p>，才叫一个 `<p> 元素。

通俗比喻帮助理解：把 HTML 元素想象成一个快递盒子

<p> 盒子的盖子（开始标签）
中间文字 = 盒子里面装的东西（内容）
</p> 盒子底部盖子（结束标签）整个盒子 + 里面的东西，合起来才叫完整的盒子（元素）。只拿一个盖子<p>，那不叫完整元素。

重要区分（新手必背，考试面试经常考）

标签：仅仅指尖括号 <> 这一部分符号。例如：<p> 只是标签。
元素：开始标签 + 内容 + 结束标签，整套整体。

代码片段	名称
`<h2>`	只是【开始标签】
`</h2>`	只是【结束标签】
`<h2>小猫介绍</h2>`	完整【h2 HTML 元素】

示例：

html 复制代码

<h2>小猫介绍</h2>

<h2>：开始标签
小猫介绍：元素内容
</h2>：结束标签
全部合在一起 <h2>小猫介绍</h2> → h2 元素

二、两种 HTML 元素类型

HTML 分为：双标签元素（有内容元素） 和 单标签元素（空元素，没有内容）

1、双标签元素（闭合元素）

格式：<标签名>内容</标签名> 有开始标签，有内容，有结束标签。前面学过的：h1~h6、p、a 全部属于双标签元素。

示例 1：h1 元素

html 复制代码

<h1>欢迎学习HTML</h1>

开始标签：<h1>
内容：欢迎学习HTML
结束标签：</h1>
整体：h1 元素

示例 2：a 链接元素

html 复制代码

<a href="https://www.baidu.com">点击去百度</a>

开始标签：<a href="https://www.baidu.com">

💡注意：属性是写在开始标签内部的，属于开始标签一部分。href 属性归属于 a 元素。

内容：点击去百度
结束标签：</a>
整体：a 元素

重点：属性写在开始标签里面，不属于元素内容！元素内容，是开始标签和结束标签中间夹的那部分。

2、空元素（单标签元素）

有些元素里面不能放任何内容，没有结束标签，叫做空元素，也属于 HTML 元素。

我们之前学的：

<br> 换行元素
<img> 图片元素

例子：

html 复制代码

<img src="cat.jpg" alt="小猫">

这是一个 img 元素

只有开始标签，没有结束标签，中间也没有内容
src、alt 都是写在开始标签里面的属性

html 复制代码

<br>

<br> 完整就是 br 换行元素，没有内容，不需要闭合。

为什么叫空元素？因为标签中间没有内容，盒子里面是空的。
HTML5 写法：空元素后面斜杠可以写也可以不写 <br> 和 <br/> 两种写法都正确，推荐直接写 <br>。

三、元素可以互相嵌套（非常重要！网页都是嵌套写的）

HTML 允许一个元素里面包含另外一个元素，叫做元素嵌套。

规则：嵌套要完整，先开的标签后关闭；后开的标签先关闭。不能交叉！

✅正确嵌套示范：

html 复制代码

<p>这是段落里面 <b>加粗文字</b> 剩下的文字</p>

拆解分析：

外层是 <p>元素
在 p 元素的内容里面，嵌套了一个 <b> 加粗元素
先打开<p> → 再打开<b> → 先关闭</b> → 最后关闭</p>

图解顺序：

html 复制代码

<p>
    这是段落里面 
    <b>加粗文字</b>
     剩下的文字
</p>

❌错误交叉嵌套（千万不要这么写！）

html 复制代码

<!--错误示范！标签交叉了-->
<p>这是段落里面 <b>加粗文字</p></b>

错误原因：先开 p，再开 b；但是先关 p，再关 b，标签互相交叉，浏览器虽然可能勉强显示，但语法是错误的。

实战嵌套完整可运行例子

复制全部代码保存为 html，直接运行

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML元素嵌套演示</title>
</head>
<body>
    <!-- h2元素 -->
    <h2>水果介绍</h2>

    <!-- p元素，内部嵌套a链接元素 -->
    <p>想要了解更多水果知识，可以访问
        <a href="https://www.baidu.com" target="_blank">百度搜索</a>
    </p>

</body>
</html>

解析：

<body>是大元素；
body 元素里面，嵌套了 <h2>元素和 <p>元素；
<p>元素的内容里面，又嵌套了一个 <a>链接元素。

整个网页就是一层一层元素互相套起来。 <html>元素是最大的根元素，里面套 <head> 和 <body>。

html 复制代码

<html>     <!-- 根html元素 -->
    <head> <!-- head元素，嵌套在html里面 -->
    </head>
    <body> <!-- body元素，嵌套在html里面 -->
    </body>
</html>

四、元素内容可以是什么？

元素中间的内容，可以是：

普通文本文字

html 复制代码

<p>我是普通文字内容</p>

另外一个 HTML 元素（嵌套）

html 复制代码

<p><a href="#">我是链接元素，放在p里面</a></p>

文字 + 其他元素混合在一起

html 复制代码

<p>今天天气很好，<b>适合出门散步</b>。</p>

⚠️空元素（img br）不能放内容！ ❌错误写法

html 复制代码

<img>这里不能写文字</img>

img 是空元素，不能中间写内容，也不要写结束标签。

五、属性属于谁？

属性写在开始标签里面，用来给元素增加附加信息。

例子：

html 复制代码

<a href="https://www.baidu.com" target="_blank">去百度</a>

href、target 是 a 元素的属性
属性写在开始标签 <a ......> 内部，不属于元素内容
元素内容只有：去百度

再看图片元素：

html 复制代码

<img src="cat.jpg" alt="小猫图片">

src、alt 属于 img 元素的属性，img 是空元素，没有内容。

记住：属性修饰整个元素，不是修饰内容。

六、新手常见问题 & 误区

误区 1：标签 = 元素

❌错误：<p>就是 p 元素 ✅正确：<p>只是开始标签；<p>内容</p>整套整体才叫 p 元素。

误区 2：空元素没有结束标签，就不是元素

❌错误：<img>只是标签，不是元素 ✅正确：<img src="xxx" alt="xx"> 完整就是 img 空元素。

误区 3：随便交叉嵌套标签

记住口诀：后开，先关。先开，后关。

误区 4：把属性写在结束标签里面

❌错误

html 复制代码

<p>文字</p class="demo">

class 属性必须写在开始标签，结束标签不能写任何属性。

✅正确

html 复制代码

<p class="demo">文字</p>

七、综合完整示例，把所有概念放一起

复制代码运行，逐段看懂每个元素

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<!-- html元素（根元素） -->
<head>
    <!-- head元素 -->
    <meta charset="UTF-8">
    <!-- meta：空元素，设置编码 -->
    <title>HTML元素讲解</title>
    <!-- title元素 -->
</head>
<body>
    <!-- body元素：网页主体，所有可见元素写在这里 -->

    <h1>认识HTML元素</h1>
    <!-- h1元素：
        开始标签：<h1>
        内容：认识HTML元素
        结束标签：</h1>
    -->

    <p>HTML元素由开始标签、内容、结束标签组成。</p>
    <!-- p段落元素 -->

    <p>点击跳转
        <a href="https://www.baidu.com" target="_blank">百度网站</a>
        <!-- a链接元素，嵌套在p元素内部，href、target是a的属性 -->
    </p>

    <img src="https://picsum.photos/id/237/300/200" alt="小狗图片">
    <!-- img空元素，src alt是属性，无结束标签，无中间内容 -->

    <br>
    <!-- br换行空元素 -->

</body>
</html>

逐点回顾本篇核心知识点总结

标签只是尖括号符号（<p>、</p>）；HTML 元素 = 开始标签 + 内容 + 结束标签整套整体。
元素分为两类：
- 普通双标签元素（h1 p a）：有开始、内容、结束标签，可以嵌套别的元素。
- 空元素（img br meta）：没有内容，没有结束标签。
属性写在【开始标签】内部，不属于元素内容，结束标签不能写属性。
元素支持嵌套，规则：后打开的标签要先关闭，禁止交叉嵌套。
整个网页，就是无数 HTML 元素一层一层互相嵌套构成。

小测验，考考自己： <h3>苹果</h3> 问：哪个是开始标签？哪个是内容？哪个是结束标签？什么是完整 h3 元素？

下节预告

下一篇教程：HTML 属性，大量实操案例。