【HTML 面经】行内元素、块级元素与空元素详解

在 Web 开发中，了解 HTML 元素的分类是十分重要的。HTML 元素可以根据其显示行为分为行内元素、块级元素和空元素。掌握这些元素的特性不仅有助于编写语义化代码，也能帮助开发者更好地理解页面布局和元素的显示效果。本文将详细介绍行内元素、块级元素和空元素的定义、常见类型以及它们的使用场景。

一、行内元素（Inline Elements）

1. 行内元素的特点

行内元素（Inline elements）通常不会开始新的一行，它们只占据自己所需要的宽度，并且会与周围的元素在同一行内显示。行内元素不会打断文档的流，通常用于在文本中插入其他内容，如链接、图片等。

• 不占据独立的行，它们会和其他行内元素在同一行上显示。
• 宽度和高度不可设置，即行内元素的宽度和高度通常由内容的大小决定。
• 无法包含块级元素，行内元素不能包含块级元素，但可以包含其他行内元素。

2. 常见的行内元素

• <a>：超链接元素，用于创建链接。
• <span>：行内容器，用于包裹文本或其他行内元素。
• <strong>：表示重要文本，通常会加粗。
• <em>：表示强调文本，通常会斜体显示。
• <img>：图像元素，用于显示图片。
• <b>：粗体文本，表示加粗的文本。
• <i>：斜体文本，表示强调或语气。
• <abbr>：表示缩写，通常会显示为缩写并可以提供完整的含义。
• <code>：用于显示计算机代码。
• <br>：换行符，使文本换行。
• <q>：短小引用，通常显示为带引号的文本。
• <cite>：引用来源，通常用于表示作品或文章的引用来源。
• <time>：表示时间，通常用于表示日期和时间。
• <mark>：标记文本，通常高亮显示。
• <bdi>：文本的隔离，确保内部文本不会受到外部文本的影响。

3. 行内元素的使用场景

• 文本样式：行内元素常用于对文本进行样式调整，如加粗、斜体、强调等。
• 超链接：行内元素 <a> 用于创建链接，通常应用于文字、图片等元素。
• 小范围文本修改：使用 <span> 或 <strong> 对文本进行微小范围的结构修改。

二、块级元素（Block-Level Elements）

1. 块级元素的特点

块级元素（Block-level elements）通常会占据一整行，并且可以包含其他块级元素或行内元素。块级元素通常用于构建页面的结构，例如容器、段落、列表等。

• 独占一行，块级元素会自动换行，在浏览器中显示时，通常占据一行的全部宽度。
• 宽度和高度可以设置，块级元素的宽度默认会填满父元素的宽度，也可以通过 CSS 调整其大小。
• 可以包含行内元素或其他块级元素。

2. 常见的块级元素

• <div>：最常用的块级容器元素，通常用于布局和分组。
• <p>：段落元素，用于包裹文本内容。
• <h1> - <h6>：标题元素，表示不同等级的标题，<h1> 是最大级别，<h6> 是最小级别。
• <ul>：无序列表，用于创建一个没有顺序的列表。
• <ol>：有序列表，用于创建一个有顺序的列表。
• <li>：列表项元素，表示列表中的一个条目，通常位于 <ul> 或 <ol> 中。
• <header>：页面头部元素，通常包含标题、导航等。
• <footer>：页面底部元素，通常包含版权信息、页脚等。
• <article>：独立内容区块，通常包含一篇完整的文章或内容。
• <section>：页面中的一个区域，通常包含一组相关内容。
• <aside>：侧边栏元素，通常用于展示附加内容，如广告、引用等。
• <main>：文档的主要内容区域，通常用于包含页面的主要部分。
• <form>：表单元素，用于收集用户输入。
• <table>：表格元素，用于创建表格。
• <blockquote>：引用元素，用于引用外部内容。
• <pre>：预格式化文本，用于显示格式化后的文本（如代码）。

3. 块级元素的使用场景

• 布局容器：块级元素常用作布局的容器，如 <div> 和 <section>。
• 内容分区：块级元素可用于组织页面的结构，如段落、文章、列表等。
• 嵌套结构：块级元素可以包含其他块级元素，如 <div> 中可以包含其他 <div> 或列表。

三、空元素（Void Elements）

1. 空元素的特点

空元素（Void elements），也叫自闭合元素，它们没有结束标签，仅包含开始标签。空元素没有内容，也不需要关闭标签，因此它们不能包含其他元素或文本内容。

• 没有内容，空元素不包含任何内容。
• 没有结束标签，空元素仅使用自闭合的开始标签。
• 常用于插入外部资源，如图片、音频、视频等。

2. 常见的空元素

• <img>：用于嵌入图像，常与 src 属性一起使用。
• <br>：表示换行符，用于文本中的换行。
• <hr>：表示水平线，用于分隔内容。
• <input>：表单输入框元素，允许用户输入数据。
• <link>：用于链接外部资源，如样式表。
• <meta>：用于指定文档的元数据，如字符集、页面描述等。
• <area>：用于定义图片地图中的可点击区域。
• <base>：用于指定页面中所有相对链接的基准 URL。
• <source>：用于指定多个 <video> 或 <audio> 元素的资源。
• <col>：用于定义表格中的列。
• <embed>：用于嵌入外部内容，如 Flash 或插件。
• <source>：用于在 <audio> 或 <video> 元素中指定多个媒体资源。
• <track>：用于为 <video> 或 <audio> 提供字幕。
• <wbr>：用于指定在单词中可能断开的位置。

3. 空元素的使用场景

• 插入外部资源：例如 <img> 用于插入图片，<link> 用于引入样式表，<script> 用于引入 JavaScript 文件。
• 布局和分隔：例如 <br> 用于换行，<hr> 用于添加分割线。
• 表单控件：例如 <input> 用于输入框，<button> 用于按钮。

四、总结

• 行内元素：不会占据一整行，通常用于文本内的样式或小范围元素，无法包含块级元素。
• 块级元素：占据一整行，通常用于构建页面的结构，能够包含其他块级元素或行内元素。
• 空元素：没有内容和结束标签，通常用于插入外部资源或特定功能，如图片、表单元素、换行等。

面试中可能考察点及回答：

• 什么是行内元素，常见的行内元素有哪些？ 行内元素不会占据一整行，它们通常用于包裹小范围的文本或其他行内元素，如 <a>、<span>、<img> 等。
• 什么是块级元素，常见的块级元素有哪些？ 块级元素会占据一整行，并可以包含其他块级元素或行内元素，如 <div>、<p>、<h1> 等。
• 什么是空元素，常见的空元素有哪些？ 空元素没有内容和结束标签，常用于插入外部资源或特定功能，如 <img>、<input>、<br> 等。

推荐：

• JavaScript
• react
• vue