HTML的span和div有什么区别？何时使用？
在HTML中，<div>和<span>是最常用的两个基础容器元素。它们本身没有任何语义，主要作为“钩子”用于CSS样式和JavaScript操作。但它们在布局和渲染上有着本质的区别，理解这些区别是构建合理网页结构的基础。
一、核心区别：块级元素 vs 行内元素
<div>是一个块级元素，而<span>是一个行内元素。这是它们最根本的区别，决定了它们在页面中的表现方式。
独占一行 vs 共享一行
<div>：块级元素，默认情况下会占据其父容器的全部宽度，前后会自动换行，因此每个<div>都会独占一行。<span>：行内元素，不会产生换行，它只占据自身内容所需的宽度，可以和其他行内元素并排显示在同一行。宽高与边距设置
<div>：可以自由设置宽度、高度、内外边距，且上下外边距会产生折叠效果。<span>：设置宽度和高度无效，其宽高完全由内部内容撑开；上下外边距和上下内边距虽然可以设置，但不会影响文档流（即不会推开上下的元素），只有左右内外边距有效。包含内容规则
<div>：可以包含任何其他元素，包括块级元素和行内元素，是一个通用的容器。<span>：只能包含行内元素和文本，原则上不能包含块级元素（虽然在HTML5中浏览器会自动容错修复，但这不符合规范）。
二、具体差异代码演示
我们可以通过以下CSS和HTML代码来直观感受它们在宽高和边距上的差异：
div {
width: 200px; /* 生效 */
height: 100px; /* 生效 */
margin: 20px 0; /* 上下外边距生效，且会折叠 */
background: lightblue;
}
span {
width: 200px; /* 无效 */
height: 100px; /* 无效 */
margin: 20px 0; /* 上下外边距无效，左右有效 */
background: lightcoral;
}<div>我是div，我独占一行</div> <div>我是另一个div，我也独占一行</div> <span>我是span1</span> <span>我是span2，我和span1在同一行</span>
三、何时使用 <div>？
<div>主要用于页面的大框架布局和区块划分，适合用来包裹结构性的内容。
常见使用场景：
页面的整体布局（如头部、侧边栏、内容区、底部）。
将一组相关的元素（如图片、标题、段落）组合成一个独立的模块。
需要为一块区域设置独立的背景色、边框或定位时。
布局示例：
<div class="container"> <div class="header">网站头部</div> <div class="main-content"> <h2>文章标题</h2> <p>文章内容...</p> </div> <div class="sidebar">侧边栏</div> </div>
四、何时使用 <span>？
<span>主要用于行内文本或小范围元素的局部控制，适合在不破坏段落结构的情况下进行微调。
常见使用场景：
为段落中的某几个文字添加特殊样式（如变色、加粗、加下划线）。
在文本中插入小图标。
为行内元素统一添加特定的类名或属性，便于JS操作。
局部样式示例：
<p>本次促销活动截止至<span style="color: red; font-weight: bold;">2023年12月31日</span>，请抓紧时间购买。</p> <p>联系方式：<span class="icon-phone"></span> 400-123-4567</p>
五、综合对比表
| 特性 | <div> | <span> |
|---|---|---|
| 元素类型 | 块级元素 | 行内元素 |
| 是否换行 | 是，独占一行 | 否，与其他行内元素共处一行 |
| 宽高设置 | 有效 | 无效，由内容撑开 |
| 上下内外边距 | 有效 | 上下外边距无效，上下内边距不占文档流 |
| 可包含内容 | 块级元素、行内元素、文本 | 行内元素、文本 |
| 主要用途 | 页面布局、大区块划分 | 文本微调、行内样式控制 |
六、总结与最佳实践
在实际开发中，<div>和<span>经常配合使用：用<div>搭建页面的骨架，用<span>修饰骨架中的细节文字。
需要注意的是，虽然它们非常方便，但属于“无语义”标签。在HTML5中，我们应该优先使用具有语义的标签（如<header>、<nav>、<article>、<section>等）来代替部分<div>，这不仅让代码更易读，也对SEO和无障碍访问更加友好。你可以访问 www.ipipp.com 查看更多关于HTML5语义化标签的在线演示和最佳实践案例。