书签与锚点
id 锚点定义、页面内跳转、跨页面锚点导航
书签与锚点
用 id 属性创建锚点——点击链接跳转到页面的指定位置，常用于目录导航。
学完本章你将： 掌握 id 锚点、页面内跳转、跨页面锚点。
页面内跳转
html
<!-- 定义锚点 -->
<h2 id="chapter1">第一章</h2>
<p>第一章的内容……</p>
<h2 id="chapter2">第二章</h2>
<p>第二章的内容……</p>
<!-- 跳转到锚点 -->
<a href="#chapter1">返回第一章</a>
<a href="#chapter2">跳转到第二章</a>目录导航
html
<!-- 页面顶部目录 -->
<nav>
<ul>
<li><a href="#intro">介绍</a></li>
<li><a href="#features">功能</a></li>
<li><a href="#pricing">价格</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
<!-- ... 长页面内容 ... -->
<h2 id="intro">介绍</h2>
<h2 id="features">功能</h2>
<h2 id="pricing">价格</h2>
<h2 id="contact">联系</h2>
<!-- 回到顶部 -->
<a href="#top">↑ 回到顶部</a>跨页面跳转到锚点
html
<!-- 从 about.html 跳转到 index.html 的 contact 锚点 -->
<a href="index.html#contact">联系方式</a>