HTML的块级元素与行内元素

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

块级元素（Block-level Elements）

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

• 特点：

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

• 常见的块级元素：

  • <div>：通用容器
  • <h1> - <h6>：标题元素
  • <p>：段落
  • <ul>、<ol>：无序和有序列表
  • <li>：列表项
  • <header>、<footer>、<section>、<article>、<nav>：HTML5语义元素

行内元素（Inline Elements）

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

• 特点：

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

• 常见的行内元素：

  • <span>：通用的行内容器
  • <a>：链接
  • <strong>：强调文本（通常为粗体）
  • <em>：强调文本（通常为斜体）
  • <img>：图像
  • <br>：换行
  • <code>：代码片段

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>块级元素与行内元素</title>
    <style>
        .block {
            background-color: lightblue;
            margin: 10px;
            padding: 10px;
        }
        .inline {
            background-color: lightgreen;
            margin: 5px;
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="block">
    这是一个块级元素（div）。
    <span class="inline">这是一个行内元素（span）。</span>
    继续在同一行。
</div>

<p class="block">这是另一个块级元素（p）。</p>

<a href="#" class="inline">这是一个行内链接（a）。</a>

</body>
</html>