div是无语义块级容器，用于布局与交互；默认独占一行因属block元素；与span根本区别在于显示行为：div可设宽高、居中、嵌套任意内容，span为inline、无视宽高、不可直接居中。

div 是 HTML 中一个没有语义的块级容器，它的唯一作用就是把内容“包起来”——不是为了告诉浏览器“这是标题”或“这是导航”，而是为了方便你用 CSS 去定位、缩放、隐藏、动画，或者用 JavaScript 去选中、增删、监听。

为什么 div 默认独占一行？

因为它是块级元素（block-level element）。浏览器渲染时会自动在它前后插入换行，就像段落 p 或标题 h1 一样。这意味着：

• 即使里面只放一个 span 或几个文字，div 也会撑满父容器宽度（width: auto）
• 连续写两个 div，它们会垂直堆叠，不会并排
• 想让它不换行？得手动改 display，比如设成 display: inline-block 或 display: flex

div 和 span 最根本的区别在哪？

就一条：显示行为不同。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• div 是块级，天生换行、可设宽高、可居中（margin: 0 auto）、能嵌套任意内容
• span 是内联（inline），默认不换行、无视 width/height、不能直接居中（除非先变 display: block）
• 别用 span 包 div —— 合法但反模式；也别用 div 包纯文本还只为了加个颜色——该用 span 就用 span

什么时候不该用 div？

当有更合适的语义化标签时，硬套 div 反而增加维护成本、影响可访问性（a11y）和 SEO：

• 页眉？优先用 header，不是 <div class="header"> <li>导航栏？用 <code>nav，而不是 <div class="nav"> <li>文章主体？用 <code>main 或 article，而非 <div id="content"> <li>哪怕只是强调一段话，也比 <code><div class="highlight"> 更推荐 <code>mark

  语义标签不是摆设——屏幕阅读器靠它理解结构，搜索引擎靠它判断重点，你自己半年后回来修代码时，也会感谢当初没滥用 div。