一、块级元素、行内元素和行内块级元素

在 HTML 5 标准前，HTML 中的元素可以分为块级元素、行内元素（又称行级元素）和行内块级元素三种类型 ，它们的主要区别在于它们在文档流中所占据的空间和如何与其他元素相互作用。

1、块级元素

块级元素（block element）特点：

  1. 在默认情况下，会新起一行。
  2. 块级元素可以包含行内元素和其他块级元素。
  3. 可以设置宽度、高度、内边距、边框和外边距等盒模型属性。

常见的 HTML 块级元素包括：

  1. ：用于表示段落。

  2. –

    ：用于表示标题，h1 是最高级别的标题。
    3. 、

        、

      1. ：用于创建无序列表和有序列表。
      2. ：用于分组和布局页面元素。
      3. 、

        、

        等：用于创建表格。

      4. ：用于创建水平线。

      5. ：用于展示预格式化的文本，其中的空格、回车等会保留在输出结果中。

        6. 由于块级元素会占据一整行，因此通常用于分隔和布局页面的不同区域，可以设置宽度和高度等盒模型属性，从而实现复杂的布局效果。

        2、行内元素

        行内元素（inline element）特点：

        1. 默认情况下，不会以新行开始，其内容会在同一行上显示，直到到达该行的末尾才会换行显示。
        2. 一般情况下，行内元素只能包含数据和其他行内元素。
        3. 默认情况下，无法设置宽度和高度，除非将display设为除inline 之外的某个值。

        常见的 HTML 行内元素包括：

        1. ：用于创建超链接。

        2. ：用于包含文本和其他行内元素，可以用于实现文本的样式和布局效果。

        3. 、、、、、、、等：用于对文本进行修饰和强调。

        4. ：用于强制换行。

        5. 、、等：用于表示计算机代码和用户输入。

        6. 、、

          等：用于表示引用和短文本块。

        由于行内元素在默认情况下不会开始新行，因此通常用于文本内容和内联元素的排列和布局。但是行内元素无法设置宽度和高度等盒模型属性，其宽度和高度都是由它们所包含的内容决定的，因此不能实现像块级元素那样的复杂布局效果。

        3、行内块级元素

        行内块级元素（inline-block）特点：

        1. 行内块级元素与行内元素类似（即在默认情况下，不会以新行开始），
        2. 可以包含其他行内块级元素或行内元素。
        3. 宽度和高度是可以设置的，不需要将display设为除inline 之外的某个值。

        常见的 HTML 行内块级元素包括：

        1. ：用于插入图片，可以通过设置其宽度和高度来控制图片的大小，但是在默认情况下，它是一个行内块级元素。

        3. ：用于创建输入框和表单元素。

        4. ：用于创建下拉菜单。