先看内容角色：主干结构用header/nav/main/aside/footer，内部布局用div；语义标签无默认样式，仅表意不表形，div是块级容器但非完全无样式。
用 div 还是语义化标签？先看内容角色
不是“能不能用 div”，而是“该不该用”。div 本身不告诉浏览器或屏幕阅读器这段内容是什么——它只是个空盒子。如果你在写一个网站顶部导航区，用 header 比 div 更准确；如果是文章正文，main 或 article 才是语义正确的选择。
常见误用现象：
• 写了 <div class="footer"> 却没加 role="contentinfo"，导致读屏软件无法识别
• 把整页用 div 套三层再加 id="wrapper"，实际只需 main + nav + aside
• 在 article 里又套一层 div class="content"——article 本身就是容器，额外包裹纯属冗余
实操建议：
• 主干结构（头部、导航、主体、侧边、底部）优先用 header、nav、main、aside、footer
• 内部样式分组（比如卡片内头图+标题+摘要）再用 div 加 class 控制
• IE8 及更早版本需 polyfill 或回退为 <div role="banner">
span 和 div 混用时为什么布局会错乱？
span 是行内元素，不能直接包 p、div、h2 这类块级标签。浏览器会自动修正 DOM 结构，把非法嵌套“掰直”，结果往往是你写的 HTML 和最终渲染的结构不一致。
立即学习“前端免费学习笔记（深入）”；
典型错误：
• <span><p>段落</p></span> → 浏览器解析后变成 <p><span>段落</span></p>
• <p><span><div>内容</div></span></p> → div 被踢出 p，造成意外换行和样式丢失
实操建议：
• 需要包裹块级内容，一律用 div 或其他块级容器
• span 只用于文本片段或行内元素（如 a、img、strong）
• 若真需让 span 表现为块级，加 CSS display: block 或 inline-block，但不如直接换标签
为什么给 div 设了 width 和 height 却看不见效果？
div 默认没有宽高约束，它只根据内容撑开。设了 style="width: 200px; height: 100px" 却没生效，大概率是因为里面没内容，或者子元素浮动/绝对定位导致父容器塌陷。
常见错误现象：
• 空 div 加了背景色和尺寸，页面上完全不可见
• 子元素全用 float: left，父 div 高度变成 0
• 子元素用了 position: absolute，脱离文档流，父容器失去高度参考
实操建议：
• 空容器测试时先加临时内容（如 ）或边框（border: 1px solid red）确认是否渲染
• 浮动布局必须清除，推荐用 overflow: hidden 或伪元素 ::after 清除
• 现代布局优先用 display: flex 或 display: grid，避免浮动带来的塌陷问题
语义化标签真的不带样式吗？
是的。header、nav、main 这些标签本身没有任何默认样式或布局行为——它们不会自动居中、加背景、变字体大小，也不会影响 display 类型。你看到的“效果”全是浏览器内置的 user agent stylesheet 或你自己写的 CSS。
容易被忽略的点：
• main 标签在 HTML5 规范中要求每页最多出现一次，但浏览器不校验，JS 也拿不到隐式语义
• section 不等于“一个区块”，它必须有明确的主题和标题（h1–h6），否则语义弱于 div
• aside 不是“侧边栏”的视觉定义，而是内容相关性的声明：它得跟主内容有关联（如注释、引文），而非单纯放在右边
实操建议：
• 用语义标签组织结构，再用 CSS 实现视觉表现，二者职责分离
• 检查无障碍支持时，别只看视觉，用浏览器 devtools 的 accessibility panel 看 role 是否正确
• SEO 不靠标签名本身，而靠结构清晰度和语义一致性——混乱的 div 堆砌反而降低抓取质量
