HTML怎么制作一个简单的网页导航栏_HTML列表应用-html教程-PHP中文网

导航栏必须用nav包裹ul+li结构，因div无语义导致屏幕阅读器无法识别、SEO失效、焦点混乱且CSS交互失效；ul+li提供必需的列表语义与结构约束。

html怎么制作一个简单的网页导航栏_html列表应用

nav 必须用，ul + li 必须套，否则不是导航栏，只是“长得像导航的一堆链接”。

为什么不能只用 `div` 包 `a`

屏幕阅读器靠语义标签识别功能区域，div 没有导航含义；搜索引擎也忽略它，SEO 权重归零；键盘 Tab 焦点顺序容易错乱，尤其当嵌套表单或按钮时。更麻烦的是：CSS 里想用 :focus-within 或 nav :focus 做交互增强，根本没效果——因为没有 nav 元素。

常见错误写法：

<div class="nav">
  <a href="home.html">首页</a>
  <a href="about.html">关于</a>
</div>

正确起点必须是：

<nav aria-label="主导航"><ul>
<li><a href="home.html">首页</a></li>
    <li><a href="about.html">关于</a></li>
  </ul></nav>

`ul` 和 `li` 不是装饰，是结构必需

导航项天然具有并列、可枚举、可顺序遍历的特性，ul + li 正是为此设计的语义容器。用 span 或 p 替代，会丢失列表语义，ARIA 屏幕阅读器读作“段落、段落、段落”，而不是“菜单项1/2/3”。

li 是唯一合法的 ul 直接子元素，浏览器强制校验，写 div 在里面会被自动包裹或忽略
每个 li 应该只包一个可操作项（通常是 a），避免把搜索框、主题切换按钮塞进去
如果某项当前激活（比如“首页”在首页），给对应 a 加 aria-current="page"，读屏器会读出“首页，当前页面”

横向排列别碰 `float`，直接上 `display: flex`

float: left 会导致父 nav 高度塌陷，必须额外清浮动；且换行逻辑不可控，小屏下容易横向溢出。Flexbox 是目前最稳的解法。

关键 CSS 片段：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem; /* 比 margin 更干净，不用处理最后一个 */
}
nav a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
}

注意点：