HTML_div和span标签
Div 和 Span 是 HTML 中最基础的布局标签，也是网页结构搭建的核心，二者分别对应块级元素和行内元素，掌握它们的差异是学好 HTML 布局的第一步。本文通过极简实战代码，讲清 Div 与 Span 的核心用法和区别。
一、核心代码示例
html
预览
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Div和Span</title> </head> <body> <div align="center"> 层级元素，块级元素，独占一行 </div> <div> 层级元素，块级元素，独占一行 </div> <span> 行内元素，不独占一行 </span> </body> </html>二、Div 与 Span 核心差异
| 标签 | 元素类型 | 核心特征 | 常用场景 |
|---|---|---|---|
<div> | 块级元素 | 独占一行，可设置宽高 / 边距 | 页面大布局（头部、主体、底部） |
<span> | 行内元素 | 不独占一行，随内容自适应 | 行内文本 / 小元素样式调整 |
三、关键说明
- Div 的块级特性：
- 每个 Div 默认占据整行宽度，多个 Div 会自上而下排列；
- 支持
align属性（如center/left/right）控制内容对齐； - 可通过 CSS 设置
width/height/background等样式，是布局的核心容器。
- Span 的行内特性：
- 多个 Span 会在同一行显示，宽度仅包裹自身内容；
- 无法直接设置宽高（需通过 CSS 改为行内块
inline-block）； - 常用于给行内部分文本单独设置样式（如颜色、字体）。
总结
<div>是块级元素，独占一行，用于网页大结构划分；<span>是行内元素，不独占一行，用于行内小范围内容样式调整；- 二者本身无默认样式，是 HTML 布局的 “基础容器”，需配合 CSS 实现样式控制。