目录列表和菜单列表(已废弃)

ul 和 ol 是 HTML 中用于创建列表的核心元素，而 menu 元素曾被视为一种替代方案，但已被废弃。列表结构在网页中广泛用于导航、内容分组或步骤展示，但不同元素的语义和用法存在差异。

ul 的无序列表

ul 表示无序列表，默认渲染为项目符号（如圆点）。它适合不强调顺序的条目集合，例如导航菜单或功能列表。每个列表项用 li 包裹：

<ul>
  <li>首页</li>
  <li>产品介绍</li>
  <li>联系我们</li>
</ul>

可通过 CSS 修改项目符号样式：

ul {
  list-style-type: square; /* 方块符号 */
}

ol 的有序列表

ol 表示有序列表，默认用数字编号。适用于需要顺序的场景，如步骤指南或排名：

<ol>
  <li>预热烤箱至180℃</li>
  <li>混合面粉和鸡蛋</li>
  <li>烘烤20分钟</li>
</ol>

通过 type 属性可更改编号类型：

<ol type="A">  <!-- 大写字母编号 -->
  <li>第一项</li>
  <li>第二项</li>
</ol>

已废弃的 menu 元素

menu 最初设计为交互式命令菜单，与 ul 功能重叠且语义模糊。HTML4 中已废弃，HTML5 曾短暂重新定义其为上下文菜单，但最终因兼容性问题不再推荐使用。旧代码可能如下：

<!-- 不推荐使用的写法 -->
<menu>
  <li>保存文件</li>
  <li>撤销操作</li>
</menu>

现代开发应使用 ul 配合 ARIA 角色替代：

<ul role="menu">
  <li role="menuitem">保存文件</li>
  <li role="menuitem">撤销操作</li>
</ul>

嵌套列表的复杂结构

列表可多层嵌套实现复杂结构，例如目录树：

<ul>
  <li>第一章
    <ul>
      <li>1.1 节
        <ol>
          <li>概念介绍</li>
          <li>基础语法</li>
        </ol>
      </li>
    </ul>
  </li>
</ul>

列表的样式控制进阶

通过 CSS 可深度定制列表样式。以下示例创建自定义编号的目录：

<style>
  .toc {
    counter-reset: section;
    list-style: none;
  }
  .toc li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
  }
</style>

<ul class="toc">
  <li>HTML基础
    <ul>
      <li>元素语法</li>
    </ul>
  </li>
</ul>

列表的语义化应用

屏幕阅读器依赖正确的列表结构。错误示例：

<!-- 反例：用div模拟列表 -->
<div>
  <span>1. 项目一</span><br>
  <span>2. 项目二</span>
</div>

应始终使用原生列表元素确保可访问性。对于导航菜单，推荐模式：

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

废弃元素的历史背景

menu 被废弃的核心原因包括：

• 与 ul 功能高度重合
• 浏览器实现不一致
• 缺乏明确的语义场景
• 交互菜单更适合用自定义组件实现

现有代码若包含 menu 应逐步迁移。迁移时可保留旧元素作为 fallback：

<menu class="legacy-menu">
  <!-- 旧内容 -->
</menu>

<script>
  document.querySelectorAll('menu').forEach(menu => {
    const ul = document.createElement('ul');
    ul.innerHTML = menu.innerHTML;
    ul.setAttribute('role', 'menu');
    menu.replaceWith(ul);
  });
</script>