HTML元素分类

马黑黑

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）	❌	✅

红影

这些HTML元素应该都见到过，只是不知道它们是这样分类的

红影

元素的类别还能改变，这个挺重要的。
感谢黑黑的讲解，学习了

杨帆

正确区分很重要，谢谢马老师对元素的三种分类的详细讲解