#HTML 区块与内联元素

在 HTML 中，大多数元素都可以被归类为块级元素 (Block-level elements) 或 内联元素 (Inline elements)。理解这两者之间的区别对于掌握 HTML 布局至关重要。

#块级元素 (Block-level Elements)

块级元素在页面上以“块”的形式呈现，它们具有以下特点：

• 独占一行: 块级元素总是从一个新行开始，并且其后的元素也会被推到下一行。
• 占据全部宽度: 它们会尽可能地撑满其父容器的整个宽度。
• 可以设置宽高: 你可以为块级元素设置 width, height, margin (外边距) 和 padding (内边距)。

常见的块级元素包括:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <ul>, <ol>, <li>
• <table>

#内联元素 (Inline Elements)

内联元素则是在“行内”呈现，它们：

• 不另起新行: 内联元素不会打断文本流，它会和其他内联元素以及文本内容一起排列在同一行。
• 宽度由内容决定: 它的宽度就是其内容的宽度，不会撑满整个容器。
• 宽高设置通常无效: 直接为内联元素设置 width, height 以及垂直方向的 margin 和 padding 通常是无效的（水平方向的 margin 和 padding 有效）。

常见的内联元素包括:

• <span>
• <a>
• <img>
• <strong>, <em>
• <b>, <i>
• <input>, <button>

#<div> 元素 - 通用块级容器

<div> (Division) 元素是一个通用的块级容器。它本身没有任何语义含义，其主要作用是作为其他 HTML 元素的容器，以便通过 CSS 来对它们进行分组和样式化，或者通过 JavaScript 来操作它们。

<div> 是构建网页布局最常用的元素之一。

示例：使用 <div> 创建一个简单的页面布局

<div style="background-color:#f1f1f1; padding:20px;">
  <h2>伦敦</h2>
  <p>伦敦是英国的首都和最大的城市。</p>
</div>

<div style="background-color:#ddd; padding:20px;">
  <h2>巴黎</h2>
  <p>巴黎是法国的首都。</p>
</div>

#<span> 元素 - 通用内联容器

<span> 元素是一个通用的内联容器。与 <div> 类似，它也没有特定的语义。它的主要用途是包裹一小段文本或行内元素，以便对它们应用特殊的样式或通过 JavaScript 进行操作，而不会影响到整体布局。

示例：使用 <span> 对一句话中的部分文字进行样式化

<p>我的母亲有 <span style="color:blue; font-weight:bold;">蓝色</span> 的眼睛。</p>

在这个例子中，只有“蓝色”这个词会变成蓝色粗体，而整个段落的布局保持不变。