纯html无法实现响应式布局，因它仅提供语义结构；真正起作用的是css的@media、flex、:checked等规则，html只是可被css控制的骨架。

纯 HTML 无法实现“响应式布局”——它只负责语义结构，nav、ul、li这些标签本身不带任何断点、折叠、悬停逻辑。真正起作用的是 CSS 的 @media、display: flex 和状态选择器（如 :checked），HTML 只是提供可被 CSS 精准控制的骨架。

为什么必须用 nav + ul + li 结构

这不是“看起来规范”，而是浏览器和辅助技术依赖这套语义链来理解导航意图：

• nav 告诉读屏器“这是主导航区”，缺失会导致键盘 Tab 顺序错乱、SEO 权重下降
• ul 表示一组逻辑并列项，比 div 更利于屏幕阅读器播报“共 5 个菜单项”
• li 必须直接包裹 a，不能跳级；否则下拉菜单嵌套时，CSS 的 :hover 或 :checked ~ 选择器会失效
• 下拉子菜单必须作为对应 li 的直接子元素（即 li > ul），而非平级或外置——否则移动端展开后定位偏移、焦点管理失控

移动端汉堡菜单必须用 input[type="checkbox"]

想不用 JS 实现点击展开/收起？唯一可靠方案是用原生表单控件模拟开关状态。常见错误是直接写 div class="hamburger" 配 JS，但 JS 加载失败时菜单永远不可见。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 把 input 放在 label 前，用 for 关联，确保点击区域 ≥ 44px（iOS 最小触控要求）
• ul.nav-menu 默认设 max-height: 0; overflow: hidden;，避免用 display: none（它无法触发 CSS 过渡）
• 触发时靠 input:checked ~ .nav-menu 设 max-height: 300px（数值需略大于所有子项总高，否则动画截断）
• 别写死 300px——如果下拉项动态增减，改用 max-height: fit-content 不生效，得预估或 JS 补充

flex 布局中 gap 和 justify-content 的实际取舍

桌面端横向排列看似简单，但空格、换行、对齐细节极易翻车：

• 用 gap: 1rem 控制 li 间距，比给每个加 margin-right 干净得多，也规避了“最后一个要不要清 margin”的纠结
• justify-content: space-around 比 space-between 更适合文字长度不均的导航项——两端留白一致，视觉更稳
• 右对齐登录/注册项，直接给对应 li 加 margin-left: auto，别用 float: right 或绝对定位（破坏 Flex 流）
• IE11 不支持 gap，得退回到 margin-right 并手动处理最后一个子项：li:not(:last-child) 加 margin

当前页高亮为什么不能硬编码 class="active"

静态写死 class="active" 在所有页面里，等于埋下维护雷：路径稍有差异（/about vs /about/ vs /about#team）就失效。

• 前端判断必须基于 window.location.pathname，且要标准化链接路径：new URL(link.href).pathname
• 本地开发用 file:// 协议时，window.location.origin 为空，得额外判断 link.href.startsWith(currentPath)
• 若用 Vue Router / React Router，不能只在页面加载时执行一次，必须监听路由变化事件（如 router.afterEach）
• 服务端渲染（SSR）项目更推荐由后端注入，避免首屏闪烁

最常被忽略的其实是盒模型统一和触控基础：全局 * { box-sizing: border-box; } 是底线，而移动端 a 标签的 padding 必须撑到 ≥ 44px 高——这不是“更好看”，而是 WCAG 可访问性强制要求，漏掉就等于主动放弃部分用户。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！