编辑“︁HTML面包屑导航”︁（章节）

== HTML面包屑导航 ==

'''面包屑导航'''（Breadcrumb Navigation）是一种辅助导航方式，用于显示用户在网站或应用程序中的当前位置及其层级结构。它得名于童话故事《汉赛尔与格莱特》中用来标记路径的面包屑。

=== 基本概念 ===

面包屑导航通常以水平方式显示在页面顶部，展示从首页到当前页面的路径。它帮助用户：
* 了解当前在网站结构中的位置
* 快速导航到更高层级的页面
* 减少点击"返回"按钮的次数
* 改善网站的用户体验和SEO

=== 类型 ===

面包屑导航主要有三种类型：

1. '''层级型'''（Location-based）：反映网站结构层次
2. '''属性型'''（Attribute-based）：基于页面属性或分类
3. '''路径型'''（Path-based）：显示用户的实际浏览路径

=== HTML实现 ===

最基本的HTML面包屑导航可以使用无序列表和CSS实现：

<syntaxhighlight lang="html">
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/products/">产品</a></li>
    <li><a href="/products/electronics/">电子产品</a></li>
    <li><span aria-current="page">智能手机</span></li>
  </ol>
</nav>
</syntaxhighlight>

=== 语义化标记 ===

为了增强可访问性，应使用适当的ARIA属性：

* <code>aria-label="Breadcrumb"</code>：标识导航类型
* <code>aria-current="page"</code>：标识当前页面

=== CSS样式示例 ===

<syntaxhighlight lang="css">
nav[aria-label="Breadcrumb"] ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

nav[aria-label="Breadcrumb"] li {
  margin-right: 0.5em;
}

nav[aria-label="Breadcrumb"] li:not(:last-child)::after {
  content: "›";
  margin-left: 0.5em;
  color: #999;
}

nav[aria-label="Breadcrumb"] [aria-current="page"] {
  color: #333;
  font-weight: bold;
}
</syntaxhighlight>

=== 进阶实现 ===

对于动态网站，可以使用JavaScript生成面包屑：

<syntaxhighlight lang="javascript">
function generateBreadcrumbs() {
  const path = window.location.pathname.split('/').filter(Boolean);
  let breadcrumbHTML = '<ol>';
  
  breadcrumbHTML += '<li><a href="/">首页</a></li>';
  
  let accumulatedPath = '';
  path.forEach((segment, index) => {
    accumulatedPath += `/${segment}`;
    const isLast = index === path.length - 1;
    
    if (isLast) {
      breadcrumbHTML += `<li><span aria-current="page">${decodeURI(segment)}</span></li>`;
    } else {
      breadcrumbHTML += `<li><a href="${accumulatedPath}">${decodeURI(segment)}</a></li>`;
    }
  });
  
  breadcrumbHTML += '</ol>';
  document.querySelector('nav[aria-label="Breadcrumb"]').innerHTML = breadcrumbHTML;
}

// 页面加载时调用
window.addEventListener('DOMContentLoaded', generateBreadcrumbs);
</syntaxhighlight>

=== 可视化层级结构 ===

<mermaid>
graph LR
    A[首页] --> B[产品]
    B --> C[电子产品]
    C --> D[智能手机]
</mermaid>

=== 数学表示 ===

面包屑可以表示为从根节点到当前节点的路径：

<math>
B = \{ p_0, p_1, ..., p_n \}
</math>

其中：
* <math>p_0</math> 是根节点（通常是首页）
* <math>p_n</math> 是当前页面
* <math>n</math> 是路径深度

=== 实际应用案例 ===

'''电子商务网站示例'''：

<syntaxhighlight lang="html">
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/clothing/">服装</a></li>
    <li><a href="/clothing/men/">男装</a></li>
    <li><a href="/clothing/men/shirts/">衬衫</a></li>
    <li><span aria-current="page">纯棉牛津纺衬衫</span></li>
  </ol>
</nav>
</syntaxhighlight>

'''内容管理系统示例'''：

<syntaxhighlight lang="html">
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/blog/">博客</a></li>
    <li><a href="/blog/category/technology/">技术</a></li>
    <li><a href="/blog/category/technology/web-development/">网页开发</a></li>
    <li><span aria-current="page">HTML5新特性</span></li>
  </ol>
</nav>
</syntaxhighlight>

=== 最佳实践 ===

1. 保持简洁，通常不超过5个层级
2. 使用分隔符（如 › 或 /）明确区分项目
3. 确保最后一项不可点击（当前页面）
4. 在移动设备上考虑响应式设计
5. 始终包含可访问性属性

=== 常见问题 ===

'''Q: 面包屑导航是否应该替代主导航菜单？'''
A: 不应该，它应作为辅助导航，补充而不是替代主导航。

'''Q: 何时不应该使用面包屑？'''
A: 当网站结构非常扁平（只有1-2层深度）时，可能不需要。

=== 总结 ===

面包屑导航是改善网站可用性和导航体验的有效工具。通过简单的HTML结构和适当的CSS样式，可以创建既美观又功能性的面包屑导航。记住要考虑可访问性，并为动态网站实现自动化生成方案。

[[Category:HTML学习路径结构]]
[[Category:HTML链接与导航]]

[[Category:编程语言]]
[[Category:HTML]]