HTML的块级元素与行内元素

在HTML中，元素可以分为两大类：块级元素（block-level elements）和行内元素（inline elements）。这两种类型的元素在网页布局和呈现中扮演着不同的角色。

块级元素（Block-level Elements）

• 定义：块级元素通常会在新的一行开始，并且占据整个行的宽度。它们可以包含其他块级元素或行内元素。

• 特点：

  • 自动换行：每个块级元素都在其前后生成换行。
  • 可设置宽度和高度：可以通过CSS设置它们的宽度和高度。
  • 通常用于布局和分组其他元素。

• 常见的块级元素：

  • ：通用容器

  •  - 

    ：标题元素

  • ：段落

  • 、
    ：无序和有序列表
    2. ：列表项
    3. 、

       、

       、

       、

       ：HTML5语义元素

  行内元素（Inline Elements）

  • 定义：行内元素不会在新的一行开始，而是与其他行内元素和文本在同一行内显示。它们只占据其内容所需的宽度。

  • 特点：

    • 不会产生换行：行内元素不会在其前后产生换行。
    • 不能设置宽度和高度：行内元素的宽度和高度通常由其内容决定，无法通过CSS设置。
    • 通常用于修饰文本或小型元素。

  • 常见的行内元素：

    • ：通用的行内容器
    • ：链接
    • ：强调文本（通常为粗体）
    • ：强调文本（通常为斜体）
    • ：图像
    • 
：换行
    • ：代码片段

  代码示例：

  
  
  
      
      
  
  
  
  
      这是一个块级元素（div）。
      这是一个行内元素（span）。
      继续在同一行。
  
  
  这是另一个块级元素（p）。
  
  这是一个行内链接（a）。