语义正确的导航结构必须用+++，配合aria-label区分多导航；侧边栏按功能选或
直接用 <nav></nav> 包 <ul></ul>，再嵌 <li> 和 <a></a>，是唯一既语义正确、又免 JS 就能跑通的起点。其他任何结构（比如 <div class="nav"> 套 <code><p></p> 或 <span></span>）在可访问性、SEO、键盘导航上都会出问题，不是“看起来像就行”。
顶部导航必须用 <nav></nav> + <ul></ul>，不能用 <div>
<p>浏览器和读屏器靠标签语义识别“这是主导航”，<code><nav></nav> 是 HTML5 规定的功能容器，不是视觉装饰。写成 <div class="top-nav"> 后果包括：
<ul>
<li>Tab 键焦点跳过整个区域，键盘用户无法进入</li>
<li>搜索引擎降权，不认为这是页面核心导航路径</li>
<li>屏幕阅读器播报为“一段文字”，而非“导航：首页、关于、联系”</li>
</ul>
<p>正确结构示例：</p>
<pre class="brush:php;toolbar:false;"><header><nav aria-label="主导航"><ul>
<li><a href="/"><span>首页</span></a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul></nav></header></pre>
<p>注意：<code>aria-label 必须加，否则多个 <nav></nav> 时读屏器分不清哪个是主导航。
侧边栏该用 <aside></aside> 还是 <nav></nav>？
<aside></aside> 还是 <nav></nav>？取决于内容性质：
- 纯功能导航（如“设备管理”“日志查询”“用户设置”）→ 用
<nav></nav>，并加aria-label="侧边导航" - 辅助信息（如“最近更新”“相关文档”“快捷工具”）→ 用
<aside></aside>，语义更准确
别把两者混用：一个页面里同时存在 <nav></nav>（主导航）和 <nav></nav>（侧边导航），必须用 aria-label 明确区分，否则读屏器会报“导航、导航”，毫无上下文。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
常见错误：给侧边栏套 <div class="sidebar">，然后里面塞一堆 <code><a></a> —— 这等于主动放弃语义，后续所有无障碍修复成本翻倍。
Flexbox 布局下，gap 和 margin 别混着用
横向导航项间距，优先用 gap，而不是给每个 <li> 加 margin-right：
-
gap不影响最后一个元素，不会导致意外留白或换行错位 -
margin-right在flex-wrap: wrap下容易让末尾项多占一行空间 - IE11 不支持
gap，若需兼容，退回到margin-right，但必须手动处理最后一项：li:last-child { margin-right: 0; }
推荐写法：
nav ul {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
}
nav li { list-style: none; }
移动端收起侧边栏，别用 display: none
用 display: none 隐藏侧边栏，会导致：
- 键盘 Tab 焦点直接跳过整个区域，不可访问
- 屏幕阅读器完全忽略，用户不知道它存在
- DOM 被移出渲染流，JS 动态恢复时可能触发重排
正确做法是保持 DOM 存在，仅视觉隐藏：
- 用
transform: translateX(-100%)+transition实现滑入滑出 - 配合
inert属性（现代浏览器）或aria-hidden="true"控制可访问性 - 用
order调整视觉顺序（如移动端把侧边栏提到顶部），不影响 HTML 结构
关键点：结构永远在线，只是视觉状态变化 —— 这才是响应式与无障碍共存的基础。
