普通视图

发现新文章，点击刷新页面。

今天 — 2026年2月3日首页

HTML常用元素以及意义

掘金前端

作者 hypnos_xy

2026年2月3日 14:19

HTML 常用元素

！DOCTYPE

主要就是告诉标准通用标记语言解析器应该使用什么样的文档类型定义 Document Type Definition（DTD）来解析文档常见的声明：

<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

head

<head> 元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表

title

<title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

style

<style> 元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style> 元素的文档内容

script

<script> 元素用于嵌入可执行代码或数据，这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用。

属性：

async:对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析
defer:这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的。
type 该属性表示所代表的脚本类型

属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型:text/javascript、application/json
```
<script type="text/javascript">
```

module 此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。

<script type="module">
    // 支持 ES6 模块化语法
    import { myFunction } from './module.js';
    export const myVar = 10;
</script>

importmap此值代表元素体内包含导入映射（importmap）表。导入映射表是一个 JSON 对象，开发者可以用它来控制浏览器在导入 javaScript 模块时如何解析模块标识符。
```
<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
  }
}
</script>
```

link

<link> 元素规定了当前文档与某个外部资源的关系。该元素最常用于链接样式表，此外也可以被用来创建站点图标（比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

rel 设定为 preload，表示浏览器应该预加载该资源,preload告诉浏览器立即下载指定的资源，因为该资源将在当前页面中很快被使用。它优先于prefetch，因为当前页面需要它。
rel 设定为 prefetch，prefetch用于在浏览器空闲时加载可能在未来页面中使用的资源（例如，用户可能点击的链接）。
rel 设定为 dns-prefetch,dns-prefetch：仅提前进行DNS解析。

<link rel="dns-prefetch" href="https://cdn.example.com">

src和href的区别：

src (源)：嵌入外部资源到当前文档中，把东西"拿进来"成为文档的一部分，src资源通常需要被浏览器解析/执行，替代原有的内容

href (超文本引用)：建立当前文档与其他资源的关联，和外部资源"手拉手"，相当于资源的引用，href的资源保持独立，不被嵌入

a

href 超链接所指向的 URL。链接不限于基于 HTTP 的 URL——它们可以使用浏览器支持的任何 URL 协议：带 tel: URL 的电话号码。带 mailto: URL 的电子邮件地址。带 sms: URL 的短信。带 javascript: URL 的可执行代码。如果 web 浏览器不支持其他 URL 方案，网站可以使用 registerProtocolHandler()。
target该属性指定在何处显示链接的 URL，作为浏览上下文的名称（标签、窗口或 <iframe>）。以下关键词对加载 URL 的位置有特殊含义： _self：当前浏览上下文。（默认） _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。 _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。 _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

语义化元素

<article> 元素表示文档、页面、应用或网站中具有独立分发或复用意义的自包含内容块，例如论坛帖子、杂志或报纸文章、博客条目、产品卡片、用户评论、交互式组件等独立内容项。
<aside> 元素用于表示文档中内容仅与主内容间接相关的部分。通常以侧边栏或提示框的形式呈现。
<summary> 元素 指定了 <details>元素展开盒子的内容的摘要，标题或图例。点击 <summary> 元素可以切换父元素 <details> 开启和关闭的状态。
<details> 元素可创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。<summary>元素可为该部件提供概要或者标签。
<dialog> 元素表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
<fieldset> 元素用于对表单中的控制元素进行分组（也包括 label 元素）。
<legend> 元素表示其父元素 <fieldset> 内容的标题。
<figure> 元素代表一段独立的内容，可能包含 <figcaption>元素定义的说明元素。该插图、标题和其中的内容通常作为一个独立的引用单元。
<figcaption> 元素是用来描述其父节点 <figure> 元素里的其余内容的标题或说明。为 <figure> 提供一个无障碍描述
<footer> 元素表示其最近的祖先分段内容的页脚或分段根元素。<footer> 通常包含有关该部分作者、版权数据或相关文档链接的信息。
<header> 元素表示介绍性内容，通常是一组介绍性或导航性辅助内容。它可能包含一些标题元素，也可能包含徽标、搜索表单、作者姓名和其他元素。
<label> 元素（标签）表示用户界面中某个元素的说明。
<main> 元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<menu> 元素在 HTML 规范中被描述为 <ul>的语义替代，但浏览器将其视为与 <ul>没有区别（并通过无障碍树暴露）。它表示一个无序列表（由 <li> 元素表示）。
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。
<progress> 元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。
<section> 元素 表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。
<time> 元素用来表示一个特定的时间段。该元素可包含 datetime 属性，用于将日期转换为机器可读格式，从而获得更好的搜索引擎结果或自定义功能（如提醒）

其他元素

<form> 元素表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。
<button> 元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。
<canvas> 元素可被用来通过 JavaScript绘制图形及图形动画
<div> 元素是流式内容的通用容器。
<iframe> 表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中
<img> 元素将一张图像嵌入文档。
<input> 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。
<li> 元素用于表示列表中的项目。它必须包含在一个父元素中：有序列表（<ol>）、无序列表（<ul>）或菜单（<menu>）。在菜单和无序列表中，列表项通常使用项目符号显示。在有序列表中，通常在左侧显示一个升序计数器，如数字或字母。
<ol> 元素 表示有序列表，通常渲染为一个带编号的列表。
<ul> 元素表示无序的项目列表，通常渲染为项目符号列表。
<option> 元素用于定义包含在 <select>、<optgroup>或 <datalist> 元素中的一项。
<p> 元素表示文本的一个段落。在视觉媒体中，段落通常表现为用空行和/或首行缩进与相邻段落分隔的文本块，但 HTML 段落可以是相关内容的任何结构分组，如图像或表格字段。
<select> 元素 表示一个提供选项菜单的控件：
<span> 元素是一个通用的行级容器，本身不具备特殊含义
<style> 元素包含文档的样式信息或文档的部分内容。其中的 CSS 会应用于包含 <style> 元素的文档内容。
<template>元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化
<textarea> 元素是一个多行纯文本编辑控件，适用于允许用户输入大量自由格式文本的场景
<video> 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。
<table> 元素表示表格数据——即在一个由包含数据的行和列组成的二维表格中呈现的信息。<tbody>、<td>、<tr>、<tfoot>、<thead>

昨天以前首页

构建无障碍组件之Alert Pattern

掘金前端

作者 anOnion

2026年2月1日 22:19

Alert Pattern 详解：构建无障碍通知组件

Alert（警告通知）是一种无需用户干预即可展示重要信息的组件，它能够在不中断用户当前任务的前提下，吸引用户的注意力并传达关键消息。根据 W3C WAI-ARIA Alert Pattern 规范，正确实现的 Alert 组件不仅要能够及时通知用户重要信息，更要确保所有用户都能接收到这些通知，包括依赖屏幕阅读器的用户。本文将深入探讨 Alert Pattern 的核心概念、实现要点以及最佳实践。

一、Alert 的定义与核心功能

Alert 是一种展示简短、重要消息的组件，它以吸引用户注意力但不中断用户任务的方式呈现信息。Alert 的核心功能是在适当的时机向用户传达关键信息，这些信息可能是操作成功提示、错误警告、或者需要用户注意的事项，但都不会影响用户当前的正常工作流程。

在实际应用中，Alert 组件广泛应用于各种需要即时反馈的场景。例如，表单提交成功后的确认消息、系统错误的警告提示、库存不足的提醒通知、或者需要用户确认的重要信息等。一个设计良好的 Alert 组件能够在不影响用户体验的前提下，确保关键信息能够被用户及时感知和理解。

二、Alert 的特性与注意事项

Alert 组件具有几个重要的特性，这些特性决定了它的适用场景和实现方式。首先，动态渲染的 Alert 会被大多数屏幕阅读器自动朗读，这意味着当 Alert 被添加到页面时，屏幕阅读器会立即通知用户有新消息。其次，在某些操作系统中，Alert 甚至可能触发提示音，进一步确保用户能够感知到重要信息。然而，有一个重要的限制需要注意：屏幕阅读器不会朗读页面加载完成前就已存在的 Alert。

Alert 组件的设计还需要考虑几个关键因素。首先，Alert 不应影响键盘焦点，这是 Alert Pattern 的核心原则之一。如果需要中断用户工作流程并获取用户确认，应该使用 Alert Dialog Pattern 而不是普通的 Alert。其次，应避免设计自动消失的 Alert，因为消失过快可能导致用户无法完整阅读信息，这不符合 WCAG 2.0 的 2.2.3 成功标准。另外，Alert 的触发频率也需要谨慎控制，过于频繁的中断会影响视觉和认知障碍用户的可用性，使得满足 WCAG 2.0 的 2.2.4 成功标准变得困难。

三、WAI-ARIA 角色、状态和属性

正确使用 WAI-ARIA 属性是构建无障碍 Alert 组件的技术基础。Alert 组件的核心 ARIA 要求非常简单：必须将 role 属性设置为 alert。

role="alert" 是 Alert 组件的必需属性，它向辅助技术表明这个元素是一个警告通知。当这个属性被正确设置时，屏幕阅读器会在 Alert 被添加到 DOM 中时自动朗读其内容。这种自动通知的机制使得 Alert 成为传达即时信息的理想选择，而无需用户执行任何特定操作来触发通知。

<!-- 基本 Alert 实现 -->
<div role="alert">您的会话将在 5 分钟后过期，请保存您的工作。</div>

<!-- 错误 Alert -->
<div
  role="alert"
  class="error-message">
  <span>❌</span> 提交失败：请检查表单中的必填字段。
</div>

<!-- 成功 Alert -->
<div
  role="alert"
  class="success-message"
  aria-live="polite">
  <span>✅</span> 您的更改已成功保存。
</div>

值得注意的是，虽然 role="alert" 是核心属性，但开发者有时还会结合 aria-live 属性来增强通知的语义。aria-live="polite" 表示通知会以不打断用户的方式被朗读，而 aria-live="assertive" 则表示通知会立即中断当前内容被朗读。对于 Alert Pattern 来说，role="alert" 本身已经包含了隐式的 aria-live="assertive" 语义，因此通常不需要额外添加 aria-live 属性。

四、键盘交互规范

Alert Pattern 的键盘交互具有特殊性。由于 Alert 是被动通知组件，不需要用户进行任何键盘交互来接收或处理通知。用户不需要通过键盘激活、聚焦或操作 Alert 元素，通知会自动被传达给用户。

这种设计遵循了 Alert Pattern 规范的核心原则：Alert 不应影响键盘焦点。规范明确指出，键盘交互不适用于 Alert 组件。这是因为 Alert 的设计目的是在不中断用户工作流程的前提下传达信息，如果用户需要与 Alert 进行交互（例如确认或关闭），那么应该使用 Alert Dialog Pattern。

五、完整示例

以下是使用不同方式实现 Alert 组件的完整示例，展示了标准的 HTML 结构和 ARIA 属性应用：

5.1 基本 Alert 通知

<div role="alert">
  <p>系统将在今晚 10 点进行维护，届时服务将暂停 2 小时。</p>
</div>

5.2 错误状态 Alert

<div
  role="alert"
  class="alert alert-error">
  <span>❌</span>
  <span>保存失败：无法连接到服务器，请检查您的网络连接。</span>
</div>

5.3 成功状态 Alert

<div
  role="alert"
  class="alert alert-success">
  <span>✅</span>
  <span>订单已成功提交，订单号为 #12345。</span>
</div>

5.4 警告状态 Alert

<div
  role="alert"
  class="alert alert-warning">
  <span>⚠️</span>
  <div>
    <h3>库存不足</h3>
    <p>您选择的商品仅剩 3 件，建议您尽快下单。</p>
  </div>
</div>

5.5 动态添加 Alert 示例

<form
  id="contact-form"
  class="space-y-4">
  <div>
    <label for="email">电子邮件</label>
    <input
      type="email"
      id="email"
      name="email"
      required />
  </div>
  <button
    type="submit"
    class="btn btn-primary">
    提交
  </button>
</form>

<template id="alert-success-template">
  <div
    role="alert"
    class="alert alert-success">
    <span>✅</span>
    <span>表单提交成功！我们将在 24 小时内回复您。</span>
  </div>
</template>

<template id="alert-error-template">
  <div
    role="alert"
    class="alert alert-error">
    <span>❌</span>
    <span>请输入有效的电子邮件地址。</span>
  </div>
</template>

<div id="form-feedback"></div>

<script>
  document
    .getElementById('contact-form')
    .addEventListener('submit', function (e) {
      e.preventDefault();
      const feedback = document.getElementById('form-feedback');
      const email = document.getElementById('email').value;

      feedback.innerHTML = '';

      if (!email.includes('@')) {
        const template = document.getElementById('alert-error-template');
        feedback.appendChild(template.content.cloneNode(true));
      } else {
        const template = document.getElementById('alert-success-template');
        feedback.appendChild(template.content.cloneNode(true));
      }
    });
</script>

六、最佳实践

6.1 语义化结构与内容

Alert 组件应该使用语义化的 HTML 结构来构建内容。Alert 中可以包含段落、列表、链接等元素，以提供更丰富的信息。然而，需要注意的是，Alert 的内容应该保持简洁明了，避免包含过多复杂信息。如果需要展示更详细的信息，可以考虑提供链接引导用户查看更多内容。

<!-- 推荐：简洁明了的 Alert -->
<div role="alert">
  <p>您的密码将在 7 天后过期。<a href="/settings/security">立即更改</a></p>
</div>

<!-- 推荐：包含多个相关信息的 Alert -->
<div role="alert">
  <p><strong>验证失败：</strong></p>
  <ul>
    <li>验证码已过期，请重新获取。</li>
    <li>请在 5 分钟内完成验证。</li>
  </ul>
</div>

6.2 视觉样式设计

Alert 组件的视觉样式应该能够清晰传达其重要性和类型。常见的做法是使用颜色编码来表示不同类型的 Alert：红色表示错误或危险，黄色或橙色表示警告，绿色表示成功，蓝色表示信息性通知。此外，Alert 应该有足够的视觉权重来吸引用户注意，但不应该过于突兀以至于干扰用户的工作流程。

/* Alert 基础样式 */
[role='alert'] {
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* 错误状态 */
[role='alert'].alert-error {
  background-color: #fef2f2;
  border: 1px solid red;
  color: red;
}

/* 成功状态 */
[role='alert'].alert-success {
  background-color: #f0fdf4;
  border: 1px solid green;
  color: green;
}

/* 警告状态 */
[role='alert'].alert-warning {
  background-color: #fffbeb;
  border: 1px solid orange;
  color: orange;
}

/* 信息状态 */
[role='alert'].alert-info {
  background-color: #eff6ff;
  border: 1px solid blue;
  color: blue;
}

6.3 避免自动消失

应避免设计会自动消失的 Alert 组件。如果 Alert 在用户阅读之前就消失了，会导致信息传达不完整，特别是对于阅读速度较慢的用户或者需要更多时间理解信息的用户。如果业务场景确实需要 Alert 自动消失，应该提供足够长的显示时间（通常不少于 10 秒），并且确保用户有足够的时间阅读和理解信息。

<!-- 不推荐：自动消失的 Alert -->
<div
  role="alert"
  class="alert autohide">
  保存成功！
</div>

<!-- 推荐：手动关闭的 Alert -->
<div
  role="alert"
  class="alert">
  <span>保存成功！</span>
  <button
    type="button"
    class="close-btn"
    aria-label="关闭">
    ×
  </button>
</div>

6.4 控制 Alert 频率

频繁触发的 Alert 会严重干扰用户体验，特别是对于有认知障碍的用户。每次 Alert 的出现都会打断用户的工作流程，过于频繁的中断会导致用户无法集中注意力完成任务。因此，在设计系统时应该谨慎控制 Alert 的触发频率，确保只有真正重要的信息才会触发通知。

// 不推荐：每次输入都触发 Alert
input.addEventListener('input', function () {
  showAlert('正在保存...');
});

// 推荐：防抖处理，减少 Alert 频率
let saveTimeout;
input.addEventListener('input', function () {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(() => {
    showAlert('自动保存完成');
  }, 1000);
});

七、Alert 与 Alert Dialog 的区别

理解 Alert 和 Alert Dialog 的区别对于正确选择通知组件至关重要。虽然两者都是用于传达重要信息，但它们服务于不同的目的和使用场景。

Alert 是一种被动通知组件，它不需要用户进行任何交互操作。Alert 会在不被中断用户工作流程的前提下自动通知用户重要信息。用户可以继续当前的工作，Alert 只是在视觉和听觉上提供通知。这种设计适用于不紧急、不需要用户立即响应的信息，例如操作成功确认、后台处理完成通知等。

Alert Dialog 则是一种需要用户主动响应的对话框组件。当用户需要做出决定或者提供确认时，应该使用 Alert Dialog。Alert Dialog 会中断用户的工作流程，获取键盘焦点，要求用户必须与之交互才能继续其他操作。这种设计适用于紧急警告、确认删除操作、放弃更改确认等需要用户明确响应的场景。

八、总结

构建无障碍的 Alert 组件需要关注角色声明、视觉样式和触发时机三个层面的细节。从 ARIA 属性角度，只需将 role 属性设置为 alert 即可满足基本要求。从视觉设计角度，应该使用明确的颜色编码和足够的视觉权重来传达不同类型的通知。从用户体验角度，应该避免自动消失的 Alert，并控制 Alert 的触发频率以避免过度干扰。

WAI-ARIA Alert Pattern 为我们提供了清晰的指导方针，遵循这些规范能够帮助我们创建更加包容和易用的 Web 应用。每一个正确实现的 Alert 组件，都是提升用户体验和确保信息有效传达的重要一步。

文章同步于 an-Onion 的 Github。码字不易，欢迎点赞。

构建无障碍组件之Breadcrumb Pattern

掘金前端

作者 anOnion

2026年1月31日 16:32

Breadcrumb Pattern 详解：构建无障碍面包屑导航

面包屑导航是 Web 页面中不可或缺的导航组件，它以层级链接的形式展示当前页面在网站结构中的位置，帮助用户快速了解自己所处的位置并轻松返回上级页面。根据 W3C WAI-ARIA Breadcrumb Pattern 规范，正确实现的面包屑导航不仅要提供清晰的层级导航路径，更要确保所有用户都能顺利使用，包括依赖屏幕阅读器等辅助技术的用户。本文将深入探讨 Breadcrumb Pattern 的核心概念、实现要点以及最佳实践。

一、面包屑导航的定义与核心功能

面包屑导航（Breadcrumb Trail）是由一系列指向父级页面的链接组成的导航路径，按照层级顺序展示当前页面在网站架构中的位置。它的主要功能是帮助用户了解自己在网站中的位置，并在需要时快速返回上级页面。面包屑导航通常水平放置在页面主体内容之前，为用户提供清晰的导航参考。

在实际应用中，面包屑导航广泛应用于内容层级较深的网站，例如电商平台的产品分类页、博客文章的分类归档页、企业官网的产品介绍页等。一个设计良好的面包屑导航能够显著提升用户体验，降低用户的迷失感，同时也有利于搜索引擎更好地理解网站的结构层次。

二、键盘交互规范

面包屑导航的键盘交互具有特殊性。由于面包屑导航仅由静态链接组成，用户不需要进行任何特殊的键盘操作来与之交互。链接本身已经支持标准的键盘导航行为，用户可以通过 Tab 键在各个链接之间切换，通过 Enter 键激活链接进行页面跳转。这种标准的行为已经满足了键盘可访问性的要求，无需额外的键盘事件处理。

因此，Breadcrumb Pattern 规范明确指出，面包屑导航不需要特殊的键盘交互支持。开发者只需要确保链接元素是标准的 HTML 元素，即可获得完整的键盘可访问性支持。这一特点使得面包屑导航的实现相对简单，重点应放在正确的语义标记和 ARIA 属性使用上。

三、WAI-ARIA 角色、状态和属性

正确使用 WAI-ARIA 属性是构建无障碍面包屑导航的技术基础。虽然面包屑导航不涉及复杂的交互逻辑，但正确的语义标记对于屏幕阅读器用户理解导航结构至关重要。

3.1 导航容器标记

面包屑导航必须放置在导航地标区域（Navigation Landmark）内。这可以通过使用 nav 元素或为其他元素添加 role="navigation" 来实现。导航地标区域需要通过 aria-label 或 aria-labelledby 进行标记，以便屏幕阅读器向用户描述这个导航区域的用途。

示例：使用 nav 元素包裹面包屑导航：

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/products/">产品</a></li>
    <li><a href="/products/electronics/">电子产品</a></li>
    <li aria-current="page">笔记本电脑</li>
  </ol>
</nav>

示例：使用 role 属性定义导航地标：

<div
  role="navigation"
  aria-label="面包屑导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/blog/">博客</a></li>
    <li aria-current="page">2025 年技术趋势</li>
  </ul>
</div>

3.2 当前页面状态标记

面包屑导航中的当前页面链接需要使用 aria-current 属性来标识。aria-current="page" 明确告诉辅助技术当前元素代表的是用户正在浏览的页面。这一属性对于屏幕阅读器用户理解面包屑导航的结构非常重要，使他们能够区分可导航的父级页面和当前所在页面。

值得注意的是，如果代表当前页面的元素不是链接（例如使用 span 或其他元素呈现），那么 aria-current 属性是可选的。但为了保持一致性，建议始终为当前页面元素添加 aria-current="page"。

示例：当前页面为链接时的标记：

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/docs/">文档</a></li>
    <li><a href="/docs/guides/">指南</a></li>
    <li>
      <a
        href="/docs/guides/getting-started/"
        aria-current="page"
        >快速入门</a
      >
    </li>
  </ol>
</nav>

示例：当前页面为非链接元素时的标记：

<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/shop/">商店</a></li>
    <li><a href="/shop/clothing/">服装</a></li>
    <li aria-current="page">春季新品</li>
  </ol>
</nav>

四、完整示例

以下是使用不同方式实现面包屑导航的完整示例，展示了标准的 HTML 结构、ARIA 属性应用以及样式设计：

4.1 基础面包屑导航实现

<nav aria-label="面包屑导航">
  <ol class="breadcrumb">
    <li><a href="/">首页</a></li>
    <li><a href="/products/">所有产品</a></li>
    <li><a href="/products/electronics/">电子产品</a></li>
    <li aria-current="page">智能手表</li>
  </ol>
</nav>

4.2 带分隔符的面包屑导航

<nav
  aria-label="面包屑导航"
  class="breadcrumb-nav">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a
        href="/"
        class="breadcrumb-link"
        >首页</a
      >
    </li>
    <li
      class="breadcrumb-separator"
      aria-hidden="true">
      /
    </li>
    <li class="breadcrumb-item">
      <a
        href="/categories/"
        class="breadcrumb-link"
        >分类</a
      >
    </li>
    <li
      class="breadcrumb-separator"
      aria-hidden="true">
      /
    </li>
    <li class="breadcrumb-item">
      <a
        href="/categories/books/"
        class="breadcrumb-link"
        >图书</a
      >
    </li>
    <li
      class="breadcrumb-separator"
      aria-hidden="true">
      /
    </li>
    <li
      class="breadcrumb-item"
      aria-current="page">
      <span class="breadcrumb-current">编程指南</span>
    </li>
  </ol>
</nav>

4.3 电商网站产品页面包屑导航

<nav
  aria-label="商品位置"
  class="product-breadcrumb">
  <ol>
    <li><a href="https://www.example.com/">首页</a></li>
    <li><a href="https://www.example.com/electronics/">家用电器</a></li>
    <li><a href="https://www.example.com/electronics/kitchen/">厨房电器</a></li>
    <li>
      <a href="https://www.example.com/electronics/kitchen/coffee/">咖啡机</a>
    </li>
    <li aria-current="page">全自动咖啡机 X2000</li>
  </ol>
</nav>

五、最佳实践

5.1 语义化 HTML 结构

面包屑导航应使用语义化的 HTML 元素构建。使用 nav 元素定义导航区域，使用 ol 或 ul 元素创建有序或无序列表，使用 li 元素包含各个导航项。这种结构不仅对搜索引擎友好，也便于屏幕阅读器向用户传达导航的层级关系。

在列表的选择上，ol 元素更适合面包屑导航，因为它能够传达各个项之间的顺序关系。但如果网站没有强制的层级顺序要求，ul 元素同样可以接受。无论选择哪种列表元素，都要确保列表项之间的逻辑顺序与面包屑导航的层级结构保持一致。

<!-- 推荐做法：使用语义化元素 -->
<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/docs/">文档</a></li>
    <li aria-current="page">当前页面</li>
  </ol>
</nav>

5.2 正确使用 ARIA 属性

面包屑导航的 ARIA 属性使用相对简单，但有几个关键点需要注意。首先，导航容器必须使用 aria-label 或 aria-labelledby 进行标记，以便用户了解这个导航区域的用途。其次，当前页面项必须使用 aria-current="page" 进行标记。最后，确保分隔符元素使用 aria-hidden="true"，以避免辅助技术用户听到不必要的标点符号朗读。

<!-- ARIA 属性使用规范 -->
<nav aria-label="面包屑导航">
  <ol>
    <li><a href="/">首页</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/blog/">博客</a></li>
    <li aria-hidden="true">/</li>
    <li aria-current="page">文章标题</li>
  </ol>
</nav>

5.3 响应式设计考虑

面包屑导航在移动设备上可能面临空间受限的挑战。对于层级较深的导航，可以考虑以下策略：一是使用省略号隐藏中间层级，只保留首页和最后几级；二是允许用户展开查看完整路径；三是将面包屑导航改为垂直布局。无论采用哪种策略，都要确保用户能够访问完整的导航信息。

/* 响应式面包屑导航 */
@media (max-width: 768px) {
  .breadcrumb-list {
    flex-direction: column;
    gap: 4px;
  }

  .breadcrumb-separator {
    transform: rotate(90deg);
  }
}

六、面包屑导航与主导航的区别

面包屑导航和主导航栏虽然都是网站导航的重要组成部分，但它们服务于不同的目的，理解这种区别对于正确使用这两种导航组件至关重要。

面包屑导航的主要作用是展示用户在网站层级结构中的当前位置，它反映的是网站的逻辑结构，而非用户的浏览历史。面包屑导航通常只出现在层级较深的页面中，帮助用户理解当前位置与网站整体结构的关系。相比之下，主导航栏提供的是网站的整体架构概览，允许用户直接跳转到任何主要版块，而不考虑当前的层级位置。

从实现角度来看，面包屑导航强调的是层级关系，因此通常使用有序列表（ol）来体现这种顺序性。而主导航栏更强调功能分区的划分，可能使用无序列表（ul）或更复杂的布局结构。两者在 ARIA 属性使用上也不同：面包屑导航需要明确标记当前页面（aria-current="page"），而主导航栏通常不需要这种标记。

七、总结

构建无障碍的面包屑导航需要关注语义化结构、ARIA 属性应用和视觉样式三个层面的细节。从语义化角度，应使用 nav 元素定义导航区域，使用 ol 或 ul 元素创建列表结构。从 ARIA 属性角度，需要使用 aria-label 为导航区域提供标签，使用 aria-current="page" 标记当前页面。从视觉样式角度，应确保链接易于识别，分隔符清晰，当前页面状态明确。

WAI-ARIA Breadcrumb Pattern 为我们提供了清晰的指导方针，遵循这些规范能够帮助我们创建更加包容和易用的 Web 应用。每一个正确实现的面包屑导航组件，都是提升用户体验和网站可访问性的重要一步。

掘金前端
HTML代码规范hypnos_xy
2026年1月30日 11:39

HTML代码规范

掘金前端

作者 hypnos_xy

2026年1月30日 11:39

HTML代码规范

缩进

建议缩进4个字符,在现代前端工程化,缩进4个字符比2字符更好的可读性。也不影响最终的结果

DOCTYPE 声明

统一使用HTML5声明<!DOCTYPE html>

meta 标签

编码格式

<meta charset="utf-8"/>

SEO优化

<!-- 网页标题 -->
<title>网页标题</title>
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content =""/>
<!-- 网页作者 -->
<meta name ="author" content =""/>

优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE = edge，chrome = 1"/>

为移动设备添加视口

<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=no 是指禁止用户进行缩放 yes 允许缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

禁止自动识别页面中有可能是电话格式的数字

<meta name="format-detection" content="telephone=no"/>

pc端建议

<title>网页标题</title>
<meta charset="utf-8"/>
<meta name="keywords" content="your keywords"/>
<meta name="description" content="your description"/>
<meta name="author" content="author,email address"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

移动端建议

<title>网页标题</title>
<meta charset="utf-8"/>
<meta name="keywords" content="your keywords"/>
<meta name="description" content="your description"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>

<html></html>
<body></body>
<head></head>
<script></script>
<style></style>
<iframe></iframe>
<noscript></noscript>
<title></title>
<!-- 普通标签 -->
<h1></h1>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<option></option>
<div></div>
<span></span>
<a></a>
<form></form>
<label></label>
<button></button>
<textarea></textarea>
<select></select>
<canvas></canvas>
<audio></audio>
<video></video>
<!-- 语义化标签 -->
<header></header>
<footer></footer>
<nav></nav>
<menu></menu>
<main></main>
<article></article>
<section></section>
<aside></aside>
<figure></figure>
<figcatption></figcaption>
<time></time>
<address></address>

尽量减少标签数量：如果设计到div装饰的小物件，尽量使用伪元素实现，而不是先建立一个元素实现
vue组件自定义标签: 如果设计到多个单词便签不要使用驼峰法，而是使用-分割。且需要闭合标签
对于<span>、<a>、等行内元素不要在嵌套其他块级元素。
块元素不要和行内元素并列

转移字符

 空格
<小于
>大于
&和
"引号

元素属性

元素属性值使用双引号语法
自定义数据属性data-*,使用小写字符，避免使用特殊字符，多单词使用-分割

js 使用

// 获取属性data-user-id="123"
let userId = userDiv.dataset.userId
userId = userDiv.getAttribute('data-user-id');
// 修改
userDiv.dataset.userId = "456";
userDiv.setAttribute('data-user-id', '789');
// 删除属性
delete userDiv.dataset.userRole;
userDiv.removeAttribute('data-user-id');
//访问所有data
const allData = element.dataset; // 返回一个 DOMStringMap 对象

css 使用

[data-role="admin"] {
  background-color: #ffebee;
}
.tooltip::before {
  content: attr(data-tooltip);
  /* 其他样式 */
}

其他规范

img必须（尽量）要使用alt属性
多个表单组合应该放入form表单内
html 注释必须要单独一行，不能和任何标签同行

<!-- Comment Text -->
<div>...</div>

单行字数限制120字符比较合适
多属性建议分行写(属性超过3个建议分行）

<input type="text"
       class="form-control"
       id="exampleInputEmail1"
       placeholder="Enter email"
       data-attribute1="value1"
       data-attribute2="value2"/>