HTML 元素分类 on Last Stand

HTML 元素分类

Tue, 15 Oct 2024 00:00:00 +0800

根据标签的功能和表现，HTML 标签主要分为以下几类：

1. 块级元素（Block-level Elements）

块级元素通常独占一行，并且可以包含其他块级元素或内联元素，能够扩展至父容器的全部宽度。

特点：
独占一行，默认情况下会在前后产生换行。
宽度默认是父元素的 100%。
可以设置 width、height、margin、padding 等布局属性。
常见的块级元素：
<div>：无特定语义的容器，常用于布局。
<p>：段落标签。
<h1> 到 <h6>：标题标签，按重要性递减。
<ul>、<ol>、<li>：无序、有序列表及其项。
<header>、<footer>、<section>、<article>：HTML5 语义化标签，分别表示页头、页尾、内容区块等。
示例：

<div>
 <h1>标题</h1>
 <p>这是一个段落。</p>
</div>

2. 内联元素（Inline Elements）

内联元素与其他元素排列在同一行，且只占用其内容所需的宽度。它们不会独占一行，不能包含块级元素。

特点：
与相邻的内联元素排列在同一行。
仅占据自身内容的宽度，不会在前后产生换行。
不能设置 width、height（无效），但可以设置 padding 和 margin，只影响水平方向。
常见的内联元素：
<span>：无特定语义的容器，常用于局部样式。
<a>：超链接。
<strong>：表示强调的文本，通常加粗显示。
<em>：表示强调的文本，通常斜体显示。
<img>：图像标签。
<input>：表单输入元素。
示例：

<p>这是一个段落，<a href="#">点击这里</a> 了解更多。</p>

3. 内联块元素（Inline-block Elements）

内联块元素是同时具备内联元素和块级元素特性的元素。它们在布局上是内联的，但表现为块状元素，因此可以设置宽高。

特点：
与其他元素排列在同一行，但可设置宽度和高度。
不会自动换行。
常见的内联块元素：
<img>：虽然图像显示在行内，但可以设置 width 和 height。
<button>：按钮。
<input type="text">：文本输入框。
CSS 设置为 display: inline-block 的元素。
示例：

<span style="display: inline-block; width: 100px; height: 100px; background: red;"></span>

4. 自闭合元素（Self-closing Elements）

自闭合元素是没有闭合标签的元素，因为它们没有任何内容。这类标签通常用于插入内容或进行控制，而不包含其他内容。