课程页的语义导航

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>语义导航与跳到正文｜9.1免费版代码</title>
<meta name="description" content="9.1免费版代码：用独立 HTML 练习 nav、main、分节标题、页内链接、焦点轮廓与跳到正文；提供 MIT 原创源文件。">
<meta name="keywords" content="9.1免费版代码，原创网页示例，HTML，CSS，JavaScript">
<link rel="canonical" href="https://91-web.cn/examples/semantic-nav.html">
<meta name="theme-color" content="#faf7ef">
<style>*{box-sizing:border-box}html{scroll-padding-top:1.5rem}body{margin:0;background:#faf7ef;color:#142e4c;font:16px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:#075e56;text-underline-offset:.2em}a:hover{color:#0d473f}button,input,select,textarea{font:inherit}button,.button{min-height:44px;border:1px solid #0a635b;border-radius:9px;background:#0a635b;color:#fff;padding:.65rem 1rem;cursor:pointer;font-weight:650;display:inline-block;text-decoration:none}button:hover,.button:hover{background:#084f48;color:#fff}button:disabled{cursor:not-allowed;opacity:.6}.secondary{background:#fff;color:#075e56}.secondary:hover{background:#e5f4ec;color:#075e56}input,select,textarea{width:100%;min-height:44px;padding:.65rem;border:1px solid #869993;border-radius:8px;background:#fff;color:#142e4c}input[type=checkbox]{width:auto;min-height:0;accent-color:#0a635b}label{display:block;font-weight:650;margin-bottom:.3rem}fieldset{border:1px solid #c3d4cd;border-radius:12px;padding:1rem;margin:1rem 0}legend{padding:0 .4rem;font-weight:700}h1{font-size:clamp(1.7rem,4.5vw,2.7rem);line-height:1.2;max-width:24ch}h2{font-size:1.5rem;line-height:1.35;margin-top:0}h3{font-size:1.1rem}p{margin:.7rem 0}header,main,footer{width:min(100% - 2rem,920px);margin-inline:auto}header{padding:2rem 0 1.2rem;border-bottom:1px solid #c3d4cd}.eyebrow{color:#37625b;font-size:.85rem;letter-spacing:.06em;font-weight:750}.lead{font-size:1.1rem;max-width:65ch}.notice{border-left:4px solid #d69b3b;padding:.75rem 1rem;background:#fff7df;font-size:.94rem}main{padding:1.5rem 0 3rem}section{margin:0 0 1.4rem;padding:1.3rem;border:1px solid #d2ddd3;background:#fff;border-radius:14px;box-shadow:0 5px 15px #142e4c06}.demo{background:#ecf6ee;border-color:#a6c5b9}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}.field{margin-bottom:1rem}.help{font-size:.9rem;color:#47635c}.error{color:#a32118;font-weight:650}input[aria-invalid=true],select[aria-invalid=true]{border:2px solid #a32118}.summary{padding:1rem;border:2px solid #a32118;border-radius:8px;background:#fff5f3}.result{padding:1rem;border:1px solid #9cbeaf;border-radius:9px;background:#fff;margin-top:1rem}.status{min-height:1.8em;color:#27554b;margin:.8rem 0}.badge{font-size:.85rem;padding:.18rem .55rem;border-radius:99px;background:#dcefe6;color:#164e43}.scroll{overflow-x:auto;border:1px solid #b9cdc2;border-radius:9px}table{width:100%;border-collapse:collapse;min-width:540px;background:#fff}caption{text-align:left;font-weight:700;padding:1rem;background:#e5f1e9}th,td{padding:.8rem;border-bottom:1px solid #ceddd3;text-align:left}thead th{background:#f1f6f0}tbody th{font-weight:650}pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:1rem;background:#142e4c;color:#eaf6ed;border-radius:9px;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.93em}.downloads{display:flex;gap:.7rem;flex-wrap:wrap;margin:1rem 0}footer{border-top:1px solid #c3d4cd;padding:1.5rem 0 2rem;font-size:.9rem}.skip{position:absolute;left:1rem;top:-6rem;background:#142e4c;color:#fff;padding:.7rem;z-index:20}.skip:focus{top:.6rem}:focus-visible{outline:3px solid #b66a00;outline-offset:4px}[hidden]{display:none!important}.task-list{list-style:none;padding:0}.task-list li{padding:.8rem;border-bottom:1px solid #ceddd3;display:flex;align-items:center;gap:.8rem}.task-list label{font-weight:500;margin:0;display:flex;gap:.7rem;align-items:center;flex:1}.task-list .done .task-name{text-decoration:line-through;color:#557067}.task-list button{font-size:.9rem}.outline-mode nav,.outline-mode main,.outline-mode header,.outline-mode footer{outline:2px dashed #b66a00;outline-offset:3px}@media(max-width:640px){.grid{grid-template-columns:1fr}section{padding:1rem}header,main,footer{width:min(100% - 1.2rem,920px)}.downloads .button{width:100%;text-align:center}.task-list li{align-items:flex-start;flex-wrap:wrap}.task-list label{min-width:100%}}@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}</style>
</head>
<body>
<a class="skip" href="#main">跳到主要内容</a>
<header>
<p class="eyebrow">91-WEB · 原创学习示例</p>
<p><a href="https://91-web.cn/">本站学习首页</a> · <a href="#learn">代码讲解</a> · <a href="#download">源文件与许可</a></p>
<h1>语义导航与跳到正文</h1>
<p class="lead">先用普通链接把内容连起来，再用语义元素说明每一块内容的角色。此例的导航与跳到正文不依赖 JavaScript。</p>
<p class="notice">围绕检索词“9.1免费版代码”提供原创练习。“9.1”在本站仅是未确认的检索或版本线索；本示例由 91-web.cn 为网页制作学习编写，不是任何 9.1 产品的官方代码，也不提供未经核验的产品安装包。</p>
</header>
<main id="main" tabindex="-1">
<section class="demo" aria-labelledby="demo-heading">
<h2 id="demo-heading">动手示例</h2>
<p>按 <kbd>Tab</kbd> 可将焦点移到本页最前面的“跳到主要内容”链接。下方导航在无脚本时也能跳到对应分节。</p>
<nav aria-label="练习内容导航"><ul><li><a href="#structure">页面结构</a></li><li><a href="#keyboard">键盘路径</a></li><li><a href="#practice">改写任务</a></li></ul></nav>
<button id="outline" type="button" class="secondary" aria-pressed="false" disabled>显示结构轮廓</button>
<p id="nav-status" class="status" role="status" aria-live="polite" aria-atomic="true"></p>
<section id="structure" aria-labelledby="structure-heading"><h3 id="structure-heading">页面结构</h3><p>一个主要内容区域承载练习正文，导航区域只放主要目录。每个 section 使用明确标题，避免把所有容器都命名为同一个角色。</p></section>
<section id="keyboard" aria-labelledby="keyboard-heading"><h3 id="keyboard-heading">键盘路径</h3><p>普通链接可以用 Tab 聚焦、Enter 激活。焦点轮廓保持可见；跳到正文的链接在聚焦时显示，主要内容设 tabindex="-1"，不额外进入常规 Tab 顺序。</p></section>
<section id="practice" aria-labelledby="practice-heading"><h3 id="practice-heading">改写任务</h3><p>新增一个“复习记录”分节，给它唯一 id，再添加能跳到该分节的文字链接。检查链接名是否能让读者提前知道目标。</p></section>
</section>
<section id="learn" aria-labelledby="learn-heading">
<h2 id="learn-heading">这段代码解决什么问题</h2>
<p><code>nav</code> 表示主要导航链接区，不必把每个链接都包进 nav。此例使用 <code>aria-label</code> 让导航目的明确，页内链接用 <code>href="#id"</code> 指向已经存在的正文分节。</p><p>“显示结构轮廓”只切换可视化辅助样式，帮助辨认 nav、main、header 和 footer。它不改变语义，也不证明页面自动满足所有可访问性要求。</p><ul><li>适用：文档目录、学习页、简短产品说明。</li><li>改造边界：内容规模扩大后可用多页路由，保留真实链接。</li><li>检查点：id 唯一、链接目标存在、焦点轮廓可见、导航有合适名称。</li></ul>
<h3>关键片段</h3>
<pre><code>&lt;a class=&quot;skip&quot; href=&quot;#main&quot;&gt;跳到主要内容&lt;/a&gt;
&lt;nav aria-label=&quot;练习内容导航&quot;&gt;
  &lt;a href=&quot;#structure&quot;&gt;页面结构&lt;/a&gt;
&lt;/nav&gt;
&lt;main id=&quot;main&quot; tabindex=&quot;-1&quot;&gt;…&lt;/main&gt;</code></pre>
<p class="help">这里展示关键片段；完整 HTML、CSS 和 JavaScript 在下载包及源文件 TXT 中。TXT 保存为 UTF-8 的 .html 后可打开。</p>
</section>
<section id="download" aria-labelledby="download-heading">
<h2 id="download-heading">运行条件与源文件</h2>
<p>解压 ZIP 后，用支持现代 HTML、CSS、JavaScript 的浏览器直接打开 <code>semantic-nav.html</code>。无需安装依赖、启动构建工具或连接服务；下载包中的文件没有外部字体、样式、图片、模块导入或网络请求。在线参考链接只有点击后才访问对应网站。</p>
<p>关闭 JavaScript 仍可阅读本文和初始示例内容；导航与跳转仍可使用。 本例没有做浏览器兼容性认证或辅助技术实测，学习者可按自己的设备验证键盘操作和朗读结果。</p>
<div class="downloads"><a class="button" href="../downloads/semantic-nav.zip" download>下载本例 ZIP</a><a class="button secondary" href="../downloads/semantic-nav-source.txt" download>完整源文件 TXT</a><a class="button secondary" href="../downloads/webpage-practice-pack.zip" download>下载五例合集</a></div>
<p>本站原创示例代码使用 MIT License，允许修改和再分发，发布代码副本时须保留版权与许可文本。许可不保证代码适合任何特定生产场景；生产环境需另接合适的服务和测试。<a href="../downloads/LICENSE.txt">查看完整 MIT 许可</a> · <a href="../downloads/semantic-nav-README.txt">运行说明</a></p>
</section>
<section aria-labelledby="sources-heading"><h2 id="sources-heading">进一步阅读</h2><p>以下官方资料用于核对语义和 API 行为，本站示例及文字为原创编写。</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav">MDN：nav 导航元素</a>（在线参考，访问需网络）</li><li><a href="https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html">W3C WAI：绕过内容块</a>（在线参考，访问需网络）</li></ul></section>
</main>
<footer><p>91-web.cn 原创网页练习 · 精确检索词：9.1免费版代码</p><p>页面示例只处理当前内存中的学习数据。源文件的 MIT 许可只覆盖本站原创示例代码，不替代链接资料各自的许可。</p></footer>
<script>
// Copyright (c) 2026 91-web.cn contributors — MIT License.
'use strict';
const outlineButton = document.getElementById('outline');
const navStatus = document.getElementById('nav-status');
outlineButton.disabled = false;
outlineButton.addEventListener('click', () => {
  const shown = document.body.classList.toggle('outline-mode');
  outlineButton.setAttribute('aria-pressed', String(shown));
  outlineButton.textContent = shown ? '隐藏结构轮廓' : '显示结构轮廓';
  navStatus.textContent = shown ? '已显示导航和页面结构的虚线轮廓。' : '已隐藏结构轮廓。';
});
</script>
</body>
</html>