HTML跨页公共导航如何布局？通用模块规范编写-html教程-PHP中文网

纯静态站点需用前端JS动态注入导航以统一维护链接和aria-current="page"高亮，避免硬编码导致的维护困难与可访问性问题。

html跨页公共导航如何布局？通用模块规范编写

为什么不能直接复制粘贴到每个HTML文件里

硬编码导航到每个页面，改一个链接就要手动开20个文件挨个替换，漏改一处就导致跳转失效或SEO断链。更麻烦的是，class="active"这种当前页高亮逻辑根本没法统一维护——你不可能在所有页面里把“关于”都设成 active，又在“关于.html”里单独改成“首页”active。

纯静态站点必须用 JS 动态注入 nav

服务端包含（SSI）、模板引擎（如 EJS）或构建工具（Vite/webpack）虽能解决，但如果你只放一堆 .html 文件到 GitHub Pages 或 FTP 服务器，没后端也没打包流程，唯一可行方案就是前端 JS 加载。

在 js/nav-loader.js 中定义 navHTML 字符串，内容是完整 @#@#@#@#@#@#@#@#@#@0
所有页面底部统一加 <script src="js/nav-loader.js"></script> 和 <script>document.getElementById('nav-container').innerHTML = navHTML;</script>
页面中预留容器：在内写，别直接往里插 —— 否则 CSS 选择器可能错位，JS 也难定位

nav 里塞 logo、搜索框会破坏可访问性

只负责跳转链接，不是页头容器。logo 属于，搜索框属于交互控件，混在一起会让屏幕阅读器误判导航结构，甚至跳过非链接内容。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

正确结构：网站名
错误写法：... ... ... —— 这会让 NVDA 把 logo 当作导航项读出来
如果搜索框必须和导航并排，把它放在里、旁，用 CSS flex 对齐，而非塞进

aria-current="page" 比 class="active" 更可靠

仅靠 CSS 类名无法被辅助技术识别，键盘用户 tab 到“关于”链接时，如果没 aria-current="page"，他们不知道自己已在该页面。JS 注入后必须补上这个属性，不能只依赖样式。

注入后立即运行高亮逻辑：document.querySelectorAll('nav a').forEach(a => { if (a.href === window.location.href || a.href === window.location.origin + window.location.pathname) a.setAttribute('aria-current', 'page'); });
注意路径匹配要兼容结尾斜杠、index.html 隐式跳转等场景，简单用 window.location.pathname 匹配最稳
别忘了给加 aria-label="主导航"，否则读屏只报“导航”，用户不知道这是顶部主菜单还是页脚链接

跨页导航真正难的不是怎么写 HTML，而是让语义、可访问性和静态部署三者不互相妥协。很多人卡在“我只想改一次 nav”，却忘了 screen reader 用户也需要同一套逻辑。每次增删导航项，都要同步检查 aria-current 的 JS 匹配逻辑是否还覆盖新路径。