在HTML中，元素可以分为块级元素（Block-level elements）和内联元素（Inline elements）。这两类元素在页面布局和样式应用上有不同的特点和用途。
块级元素在页面上以块的形式显示，通常会独占一行，其宽度默认为父容器的宽度。
width）和高度（height）。padding）和外边距（margin）。`：通用的块级容器，用于布局。
`：段落。
到``：标题。 * 、 、1. ：列表。 * ：表格。 * ``：表单。 ##### 4 示例 欢迎来到我的网站 这是一个段落文字。 #### 二、内联元素（Inline elements） ##### 1 定义 内联元素在页面上以行内形式显示，不会独占一行，其宽度由内容决定。 ##### 2 特点 * **行内显示** ：内联元素不会独占一行，与前后元素在同一行显示。 * **宽度和高度** ：宽度由内容决定，不能直接设置宽度和高度。 * **内边距和外边距** ：可以设置垂直方向的内边距（padding-top、padding-bottom）和外边距（margin-top、margin-bottom），但水平方向的内边距和外边距可能不会按预期工作。 ##### 3 常见的内联元素 * ``：通用的内联容器，用于样式控制。 * ``：超链接。 * ``：图像。 * ：加粗文本。 * ：强调文本。 * ``：表单输入框。 ##### 4 示例 这是一个[链接](https://www.example.com)示例。 这是一个内联元素。 #### 三、块级元素与内联元素的转换 ##### 1 使用CSS控制显示方式 可以通过CSS的display属性来改变元素的显示方式。 * **display: block;** ：将内联元素转换为块级元素。 * **display: inline;** ：将块级元素转换为内联元素。 * **display: inline-block;** ：将内联元素转换为块级元素，但允许与其他元素在同一行显示。 ##### 2 示例 这是一个显示为块级的内联元素。 这是一个显示为内联的块级元素。 #### 四、总结 * **块级元素** ：独占一行，可以设置宽度和高度，适用于布局和需要独占空间的元素。 * **内联元素** ：与前后元素在同一行显示，宽度由内容决定，适用于文本和小部件。 * **转换显示方式** ：通过CSS的display`属性可以灵活地改变元素的显示方式，实现更复杂的布局需求。