您现在的位置是：网站首页 > 目录列表和菜单列表(已废弃)文章详情

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

陈川【 HTML 】 50713人已围观 4117字

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

HTML早期版本中提供了两种特殊列表类型用于特定场景：<dir>和<menu>元素。这两种元素在现代HTML规范中已被废弃，但了解其历史用法对理解HTML发展有重要意义。

`<dir>`元素：目录列表

<dir>元素最初设计用于显示文件目录结构，其表现与无序列表<ul>几乎完全相同。W3C规范建议在废弃后使用<ul>替代。

<!-- 传统用法 -->
<dir>
  <li>根目录</li>
  <li>子目录1
    <dir>
      <li>文件A.txt</li>
      <li>文件B.jpg</li>
    </dir>
  </li>
  <li>子目录2</li>
</dir>

<!-- 现代替代方案 -->
<ul class="directory">
  <li>根目录</li>
  <li>子目录1
    <ul>
      <li>文件A.txt</li>
      <li>文件B.jpg</li>
    </ul>
  </li>
  <li>子目录2</li>
</ul>

浏览器对<dir>的默认样式通常比<ul>更紧凑，可能包含更小的外边距和不同的项目符号。实际项目中如需目录样式，应通过CSS自定义<ul>实现。

`<menu>`元素：命令菜单

原始<menu>元素设计用于创建交互式命令菜单，包含<li>元素作为菜单项。HTML4.01中已废弃，但在HTML5中被重新定义为表示工具栏菜单的语义容器。

<!-- 传统废弃用法 -->
<menu>
  <li><button onclick="newDocument()">新建</button></li>
  <li><button onclick="openDocument()">打开</button></li>
  <li><button onclick="saveDocument()">保存</button></li>
</menu>

<!-- HTML5规范用法 -->
<menu type="toolbar">
  <button onclick="newDocument()">新建</button>
  <button onclick="openDocument()">打开</button>
  <button onclick="saveDocument()">保存</button>
</menu>

传统<menu>与现代规范的主要区别：

不再要求包含<li>元素
明确区分上下文菜单(type="context")和工具栏菜单(type="toolbar")
与<menuitem>元素配合使用(也已废弃)

废弃原因与技术替代

W3C废弃这两个元素的主要考虑：

功能重叠：<dir>与<ul>功能完全重叠
语义模糊：原始<menu>未明确区分菜单类型
样式控制：CSS已能完美实现所有列表样式需求

现代替代方案示例：

<!-- 目录结构替代方案 -->
<ul class="directory-tree">
  <li>
    <details open>
      <summary>项目文档</summary>
      <ul>
        <li>需求说明书.pdf</li>
        <li>设计图稿.psd</li>
      </ul>
    </details>
  </li>
</ul>

<!-- 命令菜单替代方案 -->
<div class="toolbar" role="toolbar">
  <button aria-label="新建文档">
    <svg><!-- 图标 --></svg>
    <span>新建</span>
  </button>
  <div class="dropdown">
    <button aria-haspopup="true">导出</button>
    <ul class="dropdown-menu" role="menu">
      <li><button role="menuitem">PDF格式</button></li>
      <li><button role="menuitem">Word格式</button></li>
    </ul>
  </div>
</div>

浏览器兼容性现状

尽管已被废弃，主要浏览器仍支持这些元素：

Chrome/Firefox/Safari：保留默认列表样式
Edge：与Chrome行为一致
IE11：完全支持但会显示废弃警告

典型渲染差异对比：

/* 传统元素默认样式 */
dir, menu {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 40px;
}

/* 现代ul默认样式 */
ul {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  padding-left: 40px;
}

历史代码维护建议

遇到遗留代码时的处理方案：

渐进式替换：

<!-- 原始代码 -->
<menu id="legacyMenu">
  <li><a href="/home">首页</a></li>
</menu>

<!-- 过渡方案 -->
<menu id="legacyMenu" role="navigation">
  <li><a href="/home">首页</a></li>
</menu>

<!-- 最终方案 -->
<nav aria-label="主菜单">
  <ul>
    <li><a href="/home">首页</a></li>
  </ul>
</nav>

样式保持兼容：

/* 确保新旧元素样式一致 */
dir, menu, ul {
  margin: 0.5em 0;
  line-height: 1.6;
}

/* 特殊目录样式 */
.dir-list, 
.directory {
  list-style-type: square;
  padding-left: 2em;
}

文档类型声明影响：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 此模式下浏览器可能启用传统渲染模式 -->

<!DOCTYPE html>
<!-- 标准模式下浏览器会采用现代规范处理废弃元素 -->

可访问性考量

现代替代方案应包含的ARIA属性：

<div role="menu" aria-orientation="vertical">
  <button role="menuitem" tabindex="-1">操作一</button>
  <div role="separator"></div>
  <button role="menuitem" tabindex="-1">操作二</button>
</div>

<nav aria-label="面包屑导航">
  <ul class="breadcrumbs">
    <li><a href="/">首页</a></li>
    <li><a href="/products">产品</a></li>
  </ul>
</nav>

屏幕阅读器对传统元素的处理：