HTML区块的基本概念

HTML区块指的是通过特定标签将内容划分为逻辑上的独立区域，这些标签通常用于结构化文档布局。常见的区块级元素包括<div>、<section>、<article>等，它们默认独占一行，宽度充满父容器。

主要区块标签及作用

<div>标签
作为通用容器，无语义含义，主要用于CSS样式化或JavaScript操作的分组。例如：

<div class="header">页面标题</div>

<section>标签
定义文档中的主题性分组，通常包含标题。适用于独立内容区块，如章节：

<section>
  <h2>产品特点</h2>
  <p>详细介绍内容...</p>
</section>

<article>标签
表示独立可分配的内容，如新闻文章、博客帖子：

<article>
  <h3>最新科技动态</h3>
  <p>正文内容...</p>
</article>

区块的样式控制

区块元素可通过CSS实现布局控制。例如设置<div>的宽度和边距：

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

语义化区块的优势

使用语义化标签（如<header>、<footer>）能提升可访问性，帮助屏幕阅读器理解文档结构。例如：

<header>
  <h1>网站主标题</h1>
  <nav>导航链接</nav>
</header>

区块与行内元素对比

区块元素（如<div>）与行内元素（如<span>）的关键区别在于布局行为：

• 区块元素强制换行并撑满宽度
• 行内元素仅占据内容所需空间

可通过CSS的display属性转换两者行为：

.inline-block {
  display: inline-block;
  width: 200px;
}

注意事项

• 避免过度嵌套 <div>，优先使用语义化标签（如 <nav>、<main>）。
• 区块元素的默认样式（如 <p> 的边距）可通过 CSS 重置。