div 是 HTML 里面非常核心的块级元素标签，全称是 division，中文一般叫做分区标签，它本身没有自带特殊样式和语义，主要作用就是把网页里面的内容进行分组划分，把文字图片表单等内容打包成独立的区块，方便后续使用 CSS 控制这个区块的布局 宽高 背景 边距，它是网页布局最基础的容器，现在前端开发不管是传统网页还是框架项目，div 都是使用频率最高的标签，很多初学者容易混淆 div 和 span，div 属于块级元素，默认独占一行，span 是行内元素，不会强制换行，同时还要知道 div 只是容器，本身不表达内容含义，现在新标准推荐在合适场景用语义化标签，比如 header main section，但是 div 依然不会被淘汰，适合没有特殊语义的普通分组场景，另外 div 也有其他领域的缩写含义，在英语词汇里面 div 也可以是 divide division 的缩写，学习的时候要区分是前端标签含义还是英文缩写含义。
核心基础属性对照表
| 项目 | 说明 |
|---|---|
| 标签类型 | HTML 块级容器标签 |
| 默认特性 | 默认独占一行，宽度自动撑满父容器 |
| 是否需要闭合标签 | 必须成对书写，有开始标签 div 和结束标签 /div |
| 原生语义 | 无语义，仅作为分组容器 |
| 主要用途 | 页面分块，配合 CSS 布局，包裹其他子元素 |
基础写法与嵌套规则
基础写法
div 这里是区块里面的内容 /div
嵌套规则
div 内部可以继续嵌套 div，也可以放文字 图片 列表 表单等绝大多数 HTML 元素，但是不建议无限多层嵌套，嵌套层数太多会让代码可读性变差，维护难度上升。
常用配合方式
一般给 div 添加 class 或者 id，然后在 CSS 里面选中这个 div 设置样式，比如 class 用来复用样式，id 一般页面唯一，适合单独定位这个区块。
div 常见配套 CSS 样式
宽度 width
高度 height
外边距 margin
内边距 padding
背景颜色 background
边框 border
浮动 float
弹性布局 display flex，现在大量网页布局都是给父级 div 设置 flex，来控制内部子元素排列
div 和相似标签对比
| 标签 | 类型 | 特点 | 和 div 差别 |
|---|---|---|---|
| div | 块级 | 独占一行，大区块分组 | 适合大块布局 |
| span | 行内 | 不换行，适合局部文字标记 | 小范围文字样式修改 |
| section | 语义化块级 | 本身带有章节语义 | 有语义，div 无语义 |
其他领域 div 缩写含义
英语领域 div 经常是 divide 或者 division 的简写，数学里面代表除法，考试简写可以见到
部分专业文档里面 div 也可以是 division 的缩写，意思是部门 分区 除法
开发使用要点
第一 div 是无语义标签，不要滥用，能使用语义标签的地方优先用语义标签，有利于搜索引擎识别和无障碍访问
第二 div 默认块级特性，如果想要让多个 div 横向排列，需要修改 display 属性，或者使用 flex grid 布局
第三 div 本身不会自带交互功能，点击事件等交互逻辑需要配合 JavaScript 实现
【常见问题】
问题 1 div 是行内元素还是块级元素
回答 1 div 属于块级元素，这是 div 含义里面最重要基础特性，默认状态下 div 会独占一整行，和行内标签 span 有明显区别。
问题 2 div 本身有没有自带语义
回答 1 div 本身没有自带语义，div 的核心含义就是普通分区容器，只是用来分组包裹内容，不代表章节头部这类特殊含义。
问题 3 div 可以嵌套 div 吗
回答 3 div 可以嵌套 div，这也是前端使用 div 做页面布局的常用方式，但是不推荐过度多层嵌套，避免代码结构混乱。
问题 4 div 除了 HTML 标签还有别的含义吗
回答 4 div 除了 HTML 标签含义，还可以作为英文缩写，是 divide 或者 division 的简写，代表除法或者分区部门。
【免责申明】
本内容为前端基础学习参考资料，内容依据通用 HTML 标准教学规范，不同前端框架对 div 的使用习惯存在差异，实际开发请以对应文档规范为准，本资料不覆盖全部特殊扩展用法。