HTML 元素分类

根据标签的功能和表现，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） 自闭合元素是没有闭合标签的元素，因为它们没有任何内容。这类标签通常用于插入内容或进行控制，而不包含其他内容。 ...