本身无语义、无默认样式，仅作空容器，必须用 css 显式定义宽高、display（如 flex/grid）、浮动或定位才能生效；常见错误包括未设高度致塌陷、混用 破坏结构、误以为语义标签自带样式或布局效果。

用 <div> 做布局容器时，为什么样式总不生效？ <p>因为 <code><div> 是无语义、无默认样式的块级元素，它本身不带任何布局逻辑——浏览器只把它当“空盒子”，你得靠 CSS 显式定义宽高、浮动、定位或 Flex/Grid 行为。 <p>常见错误现象：</p> <ul> <li>写了 <code><div id="header"></div> 却没加 CSS，页面上完全看不见

多个 <div> 堆在一起但没设 <code>float 或 display: flex，结果垂直堆叠而非并排

父 <div> 没设高度，子元素浮动后父容器塌陷（<code>height: 0）

实操建议：

• 始终给关键布局 <div> 加 <code>id 或 class，避免用内联 style 写死（如 style="width:100px"）
• 现代项目优先用 display: flex 或 display: grid 替代 float ——后者需手动 clear，且不响应式友好
• 若必须兼容老浏览器（IE9-），用 overflow: hidden 或伪元素 ::after 清除浮动

<span></span> 和 <div> 混用导致排版错乱怎么办？ <p><code><span></span> 是行内元素，不能直接包块级内容（比如 <p></p>、<div>、<code><h2></h2>），否则 HTML 解析会自动修正结构，造成意料外的换行或包裹层级变化。

使用场景差异：

• <div>：适合划分区块、设置容器宽高/背景/边距，比如侧边栏、卡片外壳 <li> <code><span></span>：只用于局部文本样式，比如把一句话里的某个词标红：<p>价格<span class="price">¥99</span></p>

容易踩的坑：


Article To Html
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
下载
• 把 <span></span> 当 <div> 用，强行加 <code>width 和 display: block ——不如直接换标签
• 在 <p></p> 里嵌套 <div>（HTML5 允许但语义错误），浏览器可能重排 DOM，CSS 选择器失效 <li>用 <code><span></span> 包含图片或按钮，却忘了设 display: inline-block 导致对齐异常

语义化布局标签（<header></header>、<main></main>、<footer></footer>）能直接替代 <div> 吗？ <p>可以，但要注意兼容性和实际作用：这些标签本身不带样式，也不改变布局行为，只是告诉浏览器和辅助工具“这段内容是什么角色”。它们不是 <code><div> 的视觉升级版。 <p>性能与兼容性影响：</p> <ul> <li>现代浏览器（Chrome/Firefox/Safari/Edge）完全支持，移动端可放心用</li> <li>IE8 及更早版本不识别，会当作未知标签处理，需配合 <code>document.createElement polyfill 或降级为 <div role="header"> <li>SEO 和屏幕阅读器依赖这些语义，但纯视觉效果仍要靠 CSS 实现（比如 <code><header></header> 不会自动居中或加背景）

实操建议：

• 优先用语义标签组织主干结构（<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer>）
• 内部再用 <div> 做样式分组，比如 <code><main><div class="article-list">...</div></main>
• 别为了语义而硬套——没有导航内容时，别强塞 <nav></nav>；没明确页脚信息，别空挂 <footer></footer>

为什么现在不推荐用 <table> 做页面布局？ <p>因为 <code><table> 的语义是“二维表格数据”，不是“网格容器”。用它布局会破坏可访问性、SEO 和响应式能力，且维护成本高。 <p>典型问题：</p> <ul> <li>表格嵌套三层以上后，HTML 结构臃肿，改一个列宽要动多处 <code>colspan/rowspan

手机端无法自然流式缩放，display: table-cell 在 Flex/Grid 时代已无优势

屏幕阅读器会逐行读出所有 <td>，把导航菜单读成“第一行第一列：首页，第一行第二列：产品…” <p>例外场景（真该用 <code><table> 的时候）： <ul> <li>展示课程表、财务报表、比价清单等真正有行列关系的数据</li> <li>需要原生支持 <code><thead>/<code><tbody> 分组、固定表头、列排序的后台系统 <li>邮件模板（因 Outlook 等客户端对 CSS 支持弱，<code><table> 仍是可靠方案） <p>复杂点在于：语义和布局常被当成一回事。但浏览器只管渲染，人得靠标签说清“这是什么”，再靠 CSS 说清“这怎么排”——两者缺一不可，又绝不互相替代。</p> </table>