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

 

在 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>：用于定义斜体文本

区别

1. 显示方式：

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

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

2. 包含内容：

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

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

3. 默认行为：

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

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

示例

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

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

在实际开发中，可以通过 CSS 来改变元素的显示类型，例如将内联元素设置为块级元素，或者将块级元素设置为内联元素，从而实现不同的布局效果。