在 HTML 中，有两个非常特别，而且使用频率非常高的元素，只要是开发 Web 页面，必然会用到，它们就是 <div> 和 <span> 元素。
下面将分别详细讨论 <div> 和 <span> 元素
<div> 元素默认是块级元素（display: block;），即独占一整行，这是它和 <span> 最核心的区别。
对于浏览器和 SEO 来说，<div> 没有任何语义含义，它只是一个 “容器盒子”，浏览器不会对它包裹的内容做任何特殊解析（不像 <p> 代表段落、<header> 代表头部）。
通俗来说，<div> 就是一个容器，用来存放其他 HTML 元素，通过调整该 <div> 的位置，来实现布局，如下图：
上图中，总共通过三个 DIV 实现了布局，每个 DIV 内部又放置了多个其他HTML元素，如图片<img>、输入框<input>和按钮 <button>。
通过上述示例，我们可以得出如下布局表现：
独占一行显示，多个 <div> 会自上而下依次排列，不会并排，上图中一行两个 <div> 是通过 CSS 实现。
宽度默认填满父容器（比如浏览器窗口、上级包裹元素），高度由内部内容决定。
支持手动设置 width、height、margin（上下左右均有效）、padding（上下左右均有效）、border 等所有盒模型属性。
可以嵌套其他元素：既可以嵌套块级元素（<div>、<p>、<h1> 等），也可以嵌套行内元素（<span>、<a> 等），但注意不要嵌套 <p> 等有特殊语义的块级元素（虽语法允许，但不符合开发规范）。
注意：<div> 主要用于页面大区域布局分组，比如分割头部、主体、侧边栏、底部等模块，是构建页面布局的基础。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<!-- div：块级容器，用于布局分组，设置样式 -->
<div style="background-color: #f0f8ff; width: 100%; padding: 20px; margin-bottom: 20px;">
<h2>这是一个头部模块（div包裹）</h2>
<p>div默认独占一行，宽度填满父容器</p>
</div>
<div style="background-color: #f5f5f5; width: 800px; height: 300px; margin: 0 auto; padding: 20px;">
<h2>这是一个主体模块（自定义宽高）</h2>
<p>div支持手动设置width和height，实现固定尺寸布局</p>
</div>
</body>
</html>运行示例，效果图如下：
<span> 元素默认是行内元素（display: inline;），即多个 <span> 可以放到一行。和 <div> 一样，没有任何内置语义，仅作为行内内容的分组容器。
<span> 元素的布局表现：
不独占一行，多个 <span> 可以和其他行内元素（<a>、<strong> 等）并排显示，直到一行空间不足才会换行。
宽度和高度由自身内容决定，无法手动通过 width 和 height 属性修改（设置了也不会生效，除非改成块级元素 display: block;，或者行级块 display: inline-block;）。
margin 和 padding 仅左右方向有效，上下方向无效（设置上下边距不会改变元素的垂直位置，也不会撑开父元素的高度）。
只能嵌套行内元素（<span>、<a>、<em> 等），不能嵌套块级元素（<div>、<p> 等），否则会违反 HTML 语法规范，浏览器解析可能出现异常。
注意：<span> 主要用于行内局部内容的样式分组，比如给一段文字中的某几个字、某部分内容单独设置样式，不影响整行内容的布局。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
</head>
<body>
<h2>span 行内容器示例</h2>
<p>
这是一段普通的段落文字，其中：
<span style="color: red; font-weight: bold;">这部分文字是红色加粗的（span包裹）</span>
，这部分文字恢复默认样式，
<span style="background-color: yellow; margin: 0 10px; padding: 0 5px;">这部分文字有黄色背景（左右边距生效）</span>
，多个span并排显示，不会换行。
</p>
</body>
</html>运行示例，效果如下图：
注意：
（1）<div> 和 <span> 没有内置语义，灵活性极高，适合任何需要 “分组但无需表达内容含义” 的场景，是 CSS 样式和 JavaScript 操作的最佳载体。
（2）在现代前端开发中，如果内容有明确的语义（如头部、导航、文章），应优先使用 HTML5 语义化标签（<header>、<nav>、<article>），而不是 <div>；只有当内容无需体现语义，仅需布局或样式控制时，才使用 <div>。<span> 无对应的语义化行内标签，因此在行内分组场景下可放心使用。
（3）注意了，避免出现多层无意义的 <div> 嵌套（俗称 “div 地狱”），比如 <div><div><div>内容</div></div></div>，这会增加页面的复杂度，降低可维护性，应尽量简化嵌套结构。
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098