HTML元素（Element）有时也被称作标签。元素 和 标签 概念上其实有区别：标签侧重标记含义，是 HTML 中用于标记内容的符号，通常由尖括号包围；标签侧重书写形式，可以分为起始标签和结束标签，也有一些是自闭合标签。本文在行文上遵循二者的区别进行相关讨论。
在 HTML 中，元素根据其默认的布局行为被分为三类：块级元素、行内元素 和 行内块元素。它们的核心区别在于如何占据页面空间以及对 CSS 尺寸属性（如宽高、位置等等）的响应。
HTML元素在WEB页面文档流中以标签的形式出现——
◇ 成对标签 ：<元素名>内容</元素名> 。起头部分可以包含元素的一种或多种属性，以 属性名="属性值" 的形式 书写，属性之间用空格隔开，例如 <div id="ID" class="CLASS" data-lrc="DATA">内容</div>，里面用什么属性应根据元素特性和创建需求而定；
◇ 自闭合标签： <元素名> 。自闭合标签不需要后一节 </元素名> ，它是自闭合的，也可带元素的各种合法属性和自定义属性。以 img 元素为例，其标签可以写成：<img src="图片地址" alt="" title="美丽的家乡"> 。
下面讨论元素的三种分类——
1️⃣ 块级元素（Block-level Elements）
块级元素 是页面布局的骨架，主要用于构建大的结构区域。
- 独占一行：无论内容多少，都会从新的一行开始，并迫使后面的元素换行显示。
- 可设置宽高：可以通过 CSS 设置 width、height、margin 和 padding 属性。
- 默认宽度：在未设置宽度时，默认宽度会撑满其父容器的可用宽度。
- 容器功能：通常可以包含其他块级元素和行内元素（存在少数特例，如
标签内不能放块级元素）。
常见块级元素：
◇ <div>：通用的块级容器。
◇ <p>：段落标签。
◇ <h1> ~ <h6>：标题标签。
◇ <ul>, <ol>, <li>：列表相关标签。
◇ <section>, <article>, <header>, <footer>, <nav> 等：HTML5 语义化标签。
◇ <form>：表单容器。
◇ <table>：表格。
2️⃣ 行内元素（Inline Elements）
行内元素 主要用于包裹和修饰文本或小段内容，不会破坏文档的流动。
不换行：与其他行内元素在同一条水平线上排列，直到浏览器窗口宽度不足时才会换行。
- 宽高无效：CSS 设置的 width 和 height 属性无效，其尺寸由内容（文本或图片）本身决定。
- 间距限制：垂直方向的 margin 和 padding 设置对布局无影响，只有水平方向的设置有效。
- 内容限制：通常只能包含文本或其他行内元素。
◇ <span>：通用的行内容器。
◇ <a>：超链接标签。
◇ <strong>, <b>：加粗文本。
◇ <em>, <i>：斜体（强调）文本。
◇ <img>：图片。（注意：虽然常被归为此类讨论，但其默认行为是行内块）。
◇ <br>：换行符。
3️⃣ 行内块元素（Inline-block Elements）
行内块元素 结合了行内元素和块级元素的特性，是一种非常有用的显示类型。
- 不换行：像行内元素一样，与其他行内或行内块元素在一行内显示。
- 可设置宽高：像块级元素一样，可以自由设置 width、height、margin 和 padding 等所有方向的属性。
常见行内块元素：
◇ <img>：图像元素。
◇ <input>：表单输入框。
◇ <button>：按钮。
◇ <textarea>：多行文本框。
◇ <select>：下拉选择框。
🛞 元素类别的转换
元素类别并非一成不变，很多应用场景可以根据需要通过元素 CSS display 属性修改元素的类别。例如：
/* 用class选择器（也可以用id选择器）定义元素为块级元素 */
.my-pic { display: block; }
<!-- html元素通过class属性使用块状级别 -->
<img src="图片地址" class="my-pic" alt="">
这样，图片元素就会从行内元素变为块级元素，拥有独占行的能力，两张图片放在一起时会一上一下排列。
☪️ 小结：三者核心区别
| 元 素 名 称 |
是否独占一行 |
能否设置宽高 |
| 块状元素（Block） |
✅ |
✅ |
| 行内元素（Inline） |
❌ |
❌ |
| 行内块元素（Inline-block） |
❌ |
✅ |
发表于 2026-3-9 12:48
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2026-3-9 16:28
楼主
发表于 2026-3-9 18:38
