当前位置：首页 > article >正文

HTML——什么是块级元素，什么是内联元素，有何区别

article 2025/3/25 20:45:35

在 HTML 中，块级元素（Block-level element）和内联元素（Inline element）是两种不同类型元素，它们在页面布局和样式应用方面有不同的行为和特性。

块级元素（Block-level element）

块级元素在页面布局中会独占一行，它会从新的一行开始，并且其后的元素也会从新的一行开始。块级元素可以设置宽度（width）、高度（height）等尺寸属性，并且其内部可以包含内联元素或其他块级元素。

常见的块级元素包括：

<div>：用于定义文档中的分区或块

<p>：用于定义段落

<h1>-<h6>：用于定义标题

<ul>、<ol>、<li>：用于定义列表

<table>：用于定义表格

<form>：用于定义表单

内联元素（Inline element）

内联元素在页面布局中不会独占一行，它会与其他元素在同一行显示，直到遇到块级元素或者页面的边界。内联元素只能包含文本或者其他内联元素，不能设置宽度和高度等尺寸属性。

常见的内联元素包括：

<span>：用于定义文档中的行内分区

<a>：用于定义超链接

<img>：用于定义图像

<strong>：用于定义粗体文本

<em>：用于定义强调文本

<b>：用于定义粗体文本（不带有强调的语义）

<i>：用于定义斜体文本

区别

显示方式：

块级元素独占一行，内联元素与其他元素在同一行显示。

块级元素可以设置宽度和高度，内联元素不能设置宽度和高度。

包含内容：

块级元素可以包含内联元素或其他块级元素。

内联元素只能包含文本或其他内联元素。

默认行为：

块级元素默认情况下会从新的一行开始，并且其后的元素也会从新的一行开始。

内联元素默认情况下会与其他元素在同一行显示。

示例

<!-- 块级元素示例 -->
<div>
  这是一个块级元素
</div>
<p>
  这是一个段落元素，也是块级元素
</p>

<!-- 内联元素示例 -->
<span>
  这是一个内联元素
</span>
<a href="https://www.example.com">
  这是一个超链接，也是内联元素
</a>