课时18：布局标签 div 与 span¶
学习目标：理解 div 与 span 作为无语义布局标签的核心定位，掌握二者在页面宏观布局与文本微观修饰中的分工，建立"DIV + CSS"布局思维。
一、布局标签概述¶
1.1 语义化标签 vs 布局标签¶
在前序课程中学习的标签均具有明确的语义：
| 标签 | 语义 | 典型场景 |
|---|---|---|
<h1> ~ <h6> |
标题 | 文章标题、板块标题 |
<p> |
段落 | 正文段落 |
<ul> / <ol> |
列表 | 菜单、排行榜 |
<table> |
表格 | 数据统计 |
<form> |
表单 | 数据提交 |
而 <div> 和 <span> 没有明确语义，核心作用 purely 是分割页面布局，为 CSS 样式控制提供挂载点。
1.2 "盒子"比喻¶
<div>：大盒子，用于宏观区域的布局划分（如页面顶部、主体内容区、底部）<span>：小盒子，用于微观内容的跨度分割（如文字中的特定片段）
二、DIV 标签详解¶
2.1 基本属性¶
- 双标签，容器级标签
- 无预设语义，纯布局目的
- 默认独占一行（块级特性）
2.2 宏观布局应用¶
场景：构建一个包含顶部、中心内容区和底部的页面。
<body>
<!-- 顶部区域 -->
<div class="header">
<div class="logo">Logo</div>
<div class="nav">导航菜单</div>
</div>
<!-- 主体内容区域 -->
<div class="main">
<div class="sidebar">侧边栏</div>
<div class="content">主要内容</div>
</div>
<!-- 底部区域 -->
<div class="footer">
<p>版权所有 © 2023</p>
</div>
</body>
核心作用： - 将页面划分为逻辑独立的区域模块 - 每个模块内部可进一步细分（如顶部拆分为 logo 区和导航区） - 为 CSS 提供样式控制的基础结构（如设置宽度、高度、背景色、边框等）
2.3 实际网页案例分析（以门户网站为例）¶
以大型门户网站首页为例，其布局几乎离不开 div：
<!-- 顶部导航栏 -->
<div class="top-nav">...</div>
<!-- 主体内容区 -->
<div class="main-container">
<div class="left-column">...</div>
<div class="right-column">...</div>
</div>
<!-- 底部版权区 -->
<div class="footer">...</div>
导航栏与主体内容之间、主体内部各模块之间，均使用 <div> 进行区域分割。
2.4 "DIV + CSS" 概念¶
HTML 配合 CSS 进行网页布局常被业界称为 "DIV + CSS"，这是对 div 布局核心作用的概括性描述：
- HTML（div）：负责搭建页面的结构骨架和区域划分
- CSS：负责控制各区域的视觉表现（尺寸、位置、颜色、动画等）
- 分离原则：结构与表现分离，是前端工程化的基础理念
注意：现代 HTML5 推荐优先使用语义化标签（如
<header>、<nav>、<main>、<footer>）替代纯 div，但在兼容旧浏览器或特定场景下，div 仍是布局的主力工具。
三、Span 标签详解¶
2.1 基本属性¶
- 双标签，文本级标签（行内元素）
- 无预设语义，纯文本片段划分目的
- 默认在行内显示，不独占一行
2.2 微观文本修饰应用¶
场景：在一段文字中，将特定词汇设置为特殊样式（如红色、加粗）。
问题分析： - 不使用 span：需将文本拆分为多个标签包裹，操作繁琐且破坏语义 - 使用 span：仅对"300 元"进行跨度包裹，不影响其余文字的默认显示
样式设置：
四、div 与 span 的核心区别¶
| 对比维度 | <div> |
<span> |
|---|---|---|
| 标签级别 | 容器级（块级） | 文本级（行内） |
| 默认显示 | 独占一行 | 在行内并排显示 |
| 布局层级 | 宏观区域划分 | 微观文字修饰 |
| 适用场景 | 页面大模块拆分（头部、主体、底部） | 文字片段样式调整 |
| 比喻 | 大盒子 | 小盒子 |
| 可容纳内容 | 任意标签、文本 | 文本、行内标签 |
4.1 为什么不能互换使用¶
虽然 div 也能包裹文字并设置样式，但：
- div 的块级特性会导致文字独占一行，破坏原有段落结构
- span 的行内特性保持文字在原有行内流动，仅对局部片段生效