如何通过HTML模板封装复杂的导航栏组件-html教程-PHP中文网

nav 标签必须作为最外层容器，不可省略或替换为 div；单层导航须用 ul+li 结构并添加 aria-label 和 aria-current；响应式折叠需 js 控制 aria-expanded 与焦点管理；路径 href 需适配部署方式；锚点跳转需用 scroll-margin-top 修复遮挡。

如何通过html模板封装复杂的导航栏组件

nav 标签必须作为最外层容器，不能省略或替换成 div

很多人用 <div class="navbar"> 包裹导航项，看似能跑，但语义断裂。屏幕阅读器无法识别这是导航区域，SEO 会弱化该区块权重，键盘用户 Tab 键跳过整个区域——这不是“样式问题”，是基础结构失效。 <p>哪怕只有一个链接，也要写成 <code><nav>@#@#@#@#@#@#@#@#@#@0</nav>。多个独立导航区（如顶部主菜单 + 页脚快捷入口）才允许嵌套多个 <nav></nav>，且每个都需有明确的 aria-label，比如 <nav aria-label="页脚快捷导航"></nav>。

动态渲染（如 React/Vue）时，确保最终 DOM 中存在 <nav></nav> 标签，而不是仅在 JSX/模板里写了语义标签但被框架编译掉。

ul + li 是单层导航的语义标配，别用平铺 a 标签凑数

用 <nav><a>首页</a><a>关于</a></nav> 虽然能横向排列，但丢失了“列表”这一关键语义：辅助技术无法告知用户“这里有 4 个导航项”，也无法支持按列表项导航（如 VoiceOver 的“下一项列表项”指令）。

正确结构是：

<nav aria-label="主菜单"><ul>
<li><a href="/" aria-current="page">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul></nav>

注意点：

aria-current="page" 必须加在当前页面对应的 <a></a> 上，CSS 可通过 a[aria-current="page"] 选中高亮
不要给 <li> 设 display: inline-block 配 vertical-align —— 空格、换行会引入不可控间隙
用 display: flex 在 <ul></ul> 上，比老式 float 更稳，兼容性到 IE10+

响应式折叠必须配合 JS 控制 class，纯 CSS 无法满足无障碍要求

只靠 @media 把 <ul></ul> 设为 display: none 再加个汉堡按钮，对鼠标用户够用，但键盘用户 Tab 到按钮后按 Enter，子菜单仍不可聚焦、读屏器读不到内容——这违反 WCAG 2.1 A 级要求。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

可靠做法：

汉堡按钮用 <button type="button" aria-expanded="false" aria-controls="main-menu"></button>，不是 <div> 或带 <code>onclick 的 <a></a>
菜单容器 <ul id="main-menu"></ul> 加 role="menu" 和 aria-hidden="true"
JS 切换时同步更新 aria-expanded 和 aria-hidden，并确保子项用 role="menuitem"
支持键盘操作：Enter/Space 展开，Esc 关闭，ArrowDown 进入第一个子项

别依赖 :hover 实现下拉——触摸设备无 hover，键盘焦点无法触发。

路径 href 值必须匹配部署方式，静态页和 SPA 完全不同

本地开发时写 href="./about.html" 没问题，但上线到 GitHub Pages（根路径部署）就会 404；反过来，若项目部署在子路径（如 https://example.com/my-app/），写 href="/about.html" 会跳到 https://example.com/about.html，而非子路径下。

判断依据：