语义化标签本身不控制断点，但为精准编写媒体查询提供可靠选择器基础；+是零js、可访问的原生折叠方案；在加载时按顺序匹配资源，src为强制兜底。
语义化标签不控制断点，但决定媒体查询能不能写准
很多人以为加了 <header></header> 或 <aside></aside> 就能“自动响应”，其实不是。这些标签本身不带任何 CSS 规则，也不触发 viewport 变化。它们的作用是让 @media 查询目标更干净、更可靠——比如直接写 @media (max-width: 768px) { aside { display: none; } }，而不用写 .sidebar-container-wrapper 这类层层嵌套的 class 名。
常见错误现象：
- 用一堆
<div class="col-3"> 模拟栅格，结果小屏下所有内容堆成一团，CSS 里得靠 <code>!important强行重排 - 媒体查询写成
div:nth-child(2) > div > ul，换了个 DOM 结构就全失效 - 把导航区域明确包在
<nav></nav>里，小屏时统一收起，大屏时横向展开 - 把侧边栏内容放在
<aside></aside>中，@media直接作用于该标签，避免 class 冲突或遗漏 -
<main></main>和<article></article>天然形成内容主次流，Flex/Grid 布局时无需额外 wrapper 干预顺序 -
<summary></summary>不是第一个子元素 → 屏幕阅读器无法识别控制关系，键盘用户卡死 - 用
display: none隐藏<details></details>→ 整个组件脱离可访问树，状态不可感知 - 自定义箭头改用 background-image + JS 切 class → 破坏伪元素 ::marker 的原生方向同步逻辑
真正可控的做法：
为什么 <details>+<summary></summary></details> 是响应式折叠最稳的原生方案
它不是“模拟切换”，而是浏览器内置的语义化交互组件。open 状态可读写、有 toggle 事件、空格/Enter 键可触发、焦点自动管理——全部零 JS 实现。
容易踩的坑：
推荐写法：
<details><summary>常见问题</summary><p>这里是折叠内容...</p> </details>
样式重置只需两行：summary { list-style: none; } summary:focus { outline: 2px solid #007bff; } —— 聚焦轮廓不能删，这是键盘用户的唯一视觉线索。
<picture></picture> 不是交互切换，而是加载阶段的资源决策
它不响应点击，只在页面加载时由浏览器根据 media、srcset、type 自动选图。写错顺序或漏兜底，某些设备会白屏。
关键约束：
-
<source></source>必须写在<img>标签之前，浏览器按顺序匹配，遇到第一个满足条件的就停 -
media值必须是合法媒体查询字符串，比如(min-width: 768px)，不能漏括号写成min-width: 768px -
<img>的src是强制兜底，不可省略；alt必须有意义，所有场景共用 - 不要在
<source></source>上设alt—— 它无效；也不要用 JS 动态替换<img>src —— 破坏预加载和缓存
移动端响应式成败，其实在 HTML 结构定型那一刻就决定了
小屏没有横向空间，所有内容最终要垂直堆叠。如果一开始用 <div class="left-nav"> 这类纯视觉命名，后面就得靠 <code>order、flex-direction 甚至 JS 强行重排，极易出错。
真正降低复杂度的做法：
- 用
<nav></nav>包导航，<main></main>包主体，<footer></footer>包底部 —— 流式顺序天然适配小屏堆叠 - 避免深层嵌套：一个
<section></section>下直接放<h2></h2>和段落，别再套三层<div> <li> <code><header></header>和<footer></footer>在小屏上默认占满宽度，无需额外 media 查询就能稳定呈现
最常被忽略的一点：语义标签的隐含流式行为（比如 <nav></nav> 默认是块级、<summary></summary> 默认可聚焦）不是“副作用”，而是响应式逻辑稳定运行的底层支撑——删掉它们，等于拆掉地基再盖楼。
