HTML 块元素

HTML 块级和内联元素

每个 HTML 元素都有一个默认的显示行为，通常是 block（块级）或 inline（内联）。理解这个区别对于控制布局和结构至关重要。

块级元素

特点：

总是从新的一行开始。
在其容器内占用所有可用宽度（向左和向右拉伸）。
可以包含其他块级元素和内联元素。
遵守 width、height、margin（上/下/左/右）和 padding 属性。

把它们想象成文档中独立的块或段落。

常见的块级元素：

<div>（通用块级容器）
<p>（段落）
<h1> - <h6>（标题）
<ul>（无序列表）
<ol>（有序列表）
<li>（列表项 - 尽管视觉上内缩，但它是一个块级元素）
<form>
<table>
<header>、<footer>、<nav>、<main>、<article>、<section>、<aside>（语义化布局元素）

示例：

<p style="background-color: lightblue;">I am a paragraph (block-level). I take up the full width.</p>
<div style="background-color: lightgreen;">I am a div (block-level). I also take the full width and start on a new line.</div>

内联元素

特点：

不从新的一行开始。
只占用适应其内容所需宽度。
通常只包含其他内联元素或数据（文本、图像）。
遵守水平方向的 margin（左/右）和 padding，但通常忽略 width、height 和垂直方向的 margin（上/下）。

把它们想象成在文本行内流动的元素。

常见的内联元素：

<span>（通用内联容器）
<a>（锚点/链接）
<img>（图像）
**、<em>、**、<i>（文本格式化）
<button>、<input>、<label>、<select>、<textarea>（表单控件）
<code>、<kbd>、<samp>（代码相关）
<br>（换行符 - 特殊情况）
<q>（内联引用）

示例：

<p>
  This paragraph contains
  <span style="background-color: yellow;">an inline span</span>,
  which flows within the text. It also contains
  <a href="#" style="background-color: pink;">a link (inline)</a>
  and an <img src="favicon.ico" alt="icon" style="height: 1em;"> (inline) image.
</p>

`<div>` 元素

<div>（division，分区）元素是主要的通用块级容器。

它没有固有的语义含义。它的主要目的是将其他元素组合在一起，通常用于：

应用 CSS 样式（使用 class 或 id 属性）。
通过 JavaScript 进行操作。
当没有其他语义化块级元素（如 <article>、<section> 等）适用时，用于构建内容结构。

示例：组合内容以便应用样式。

<div style="border: 1px solid blue; padding: 10px; margin-bottom: 10px;">
  <h2>Section Title</h2>
  <p>This content is grouped inside a styled div.</p>
</div>

<div class="info-box"> <!-- Styled via CSS using .info-box class -->
  <p>Another group of content.</p>
</div>

`<span>` 元素

<span> 元素是主要的通用内联容器。

与 <div> 类似，它没有语义含义。它的主要目的是将一小段内联内容（通常是文本或其他内联元素）组合在一起，用于：

为特定的词或短语应用 CSS 样式。
通过 JavaScript 操作特定的文本片段。

示例：为段落的一部分应用样式。

<p>
  Most of this text is normal, but
  <span style="color: red; font-weight: bold;">this part</span>
  is highlighted using a span.
</p>

使用 CSS 改变显示行为

虽然元素有默认的显示类型，但你可以使用 CSS 的 display 属性改变它们的行为。

常见的 display 值包括：

block：使元素表现得像块级元素。
inline：使元素表现得像内联元素。
inline-block：一种混合类型 - 内联流动，但遵守 width、height 和垂直方向的边距/内边距。
none：完全隐藏元素（从布局中移除）。
flex：为子元素启用 Flexbox 布局。
grid：为子元素启用 CSS Grid 布局。

示例：使列表项并排显示，用于创建水平菜单。

<ul class="horizontal-menu">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

<style>
  .horizontal-menu li {
    display: inline-block; /* Or display: inline; */
    margin-right: 15px;
  }
</style>

HTML 分组标签总结

标签	默认显示	用途
`<div>`	块级	通用的块级分组容器（用于样式、脚本）
`<span>`	内联	通用的内联分组容器（用于为部分文本应用样式）

记住，尽可能使用语义化元素（如 <p>、<h1>、<nav> 等），然后再考虑使用通用的 <div> 和 <span> 容器。