<div> 本身无语义、无默认样式，仅作空容器，必须用 CSS 显式定义宽高、display（如 flex/grid）、浮动或定位才能生效；常见错误包括未设高度致塌陷、混用 <span> 破坏结构、误以为语义标签自带样式或布局效果。
用 <div> 做布局容器时，为什么样式总不生效？
因为 <div> 是无语义、无默认样式的块级元素，它本身不带任何布局逻辑——浏览器只把它当“空盒子”，你得靠 CSS 显式定义宽高、浮动、定位或 Flex/Grid 行为。
常见错误现象：
- 写了
<div id="header"></div>却没加 CSS，页面上完全看不见 - 多个
<div>堆在一起但没设float或display: flex，结果垂直堆叠而非并排 - 父
<div>没设高度，子元素浮动后父容器塌陷（height: 0）
实操建议：
- 始终给关键布局
<div>加id或class，避免用内联 style 写死（如style="width:100px"） - 现代项目优先用
display: flex或display: grid替代float——后者需手动clear，且不响应式友好 - 若必须兼容老浏览器（IE9-），用
overflow: hidden或伪元素::after清除浮动
<span> 和 <div> 混用导致排版错乱怎么办？
<span> 是行内元素，不能直接包块级内容（比如 <p>、<div>、<h2>），否则 HTML 解析会自动修正结构，造成意料外的换行或包裹层级变化。
立即学习“前端免费学习笔记（深入）”；
使用场景差异：
-
<div>：适合划分区块、设置容器宽高/背景/边距，比如侧边栏、卡片外壳 -
<span>：只用于局部文本样式，比如把一句话里的某个词标红：<p>价格<span class="price">¥99</span></p>
容易踩的坑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把
<span>当<div>用，强行加width和display: block——不如直接换标签 - 在
<p>里嵌套<div>（HTML5 允许但语义错误），浏览器可能重排 DOM，CSS 选择器失效 - 用
<span>包含图片或按钮，却忘了设display: inline-block导致对齐异常
语义化布局标签（<header>、<main>、<footer>）能直接替代 <div> 吗？
可以，但要注意兼容性和实际作用：这些标签本身不带样式，也不改变布局行为，只是告诉浏览器和辅助工具“这段内容是什么角色”。它们不是 <div> 的视觉升级版。
性能与兼容性影响：
- 现代浏览器（Chrome/Firefox/Safari/Edge）完全支持，移动端可放心用
- IE8 及更早版本不识别，会当作未知标签处理，需配合
document.createElementpolyfill 或降级为<div role="header"> - SEO 和屏幕阅读器依赖这些语义，但纯视觉效果仍要靠 CSS 实现（比如
<header>不会自动居中或加背景）
实操建议：
- 优先用语义标签组织主干结构（
<header>、<nav>、<main>、<aside>、<footer>） - 内部再用
<div>做样式分组，比如<main><div class="article-list">...</div></main> - 别为了语义而硬套——没有导航内容时，别强塞
<nav>；没明确页脚信息，别空挂<footer>
为什么现在不推荐用 <table> 做页面布局？
因为 <table> 的语义是“二维表格数据”，不是“网格容器”。用它布局会破坏可访问性、SEO 和响应式能力，且维护成本高。
典型问题：
- 表格嵌套三层以上后，HTML 结构臃肿，改一个列宽要动多处
colspan/rowspan - 手机端无法自然流式缩放，
display: table-cell在 Flex/Grid 时代已无优势 - 屏幕阅读器会逐行读出所有
<td>，把导航菜单读成“第一行第一列：首页，第一行第二列：产品…”
例外场景（真该用 <table> 的时候）：
- 展示课程表、财务报表、比价清单等真正有行列关系的数据
- 需要原生支持
<thead>/<tbody>分组、固定表头、列排序的后台系统 - 邮件模板（因 Outlook 等客户端对 CSS 支持弱，
<table>仍是可靠方案）
复杂点在于：语义和布局常被当成一回事。但浏览器只管渲染，人得靠标签说清“这是什么”，再靠 CSS 说清“这怎么排”——两者缺一不可，又绝不互相替代。
