链接是互联网的灵魂 ｜ 课型：实习课 ｜ 建议课时：2节
带平滑滚动锚点导航的长页面，点击菜单精准定位到对应章节。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>导航与锚点体验站</title>
<style>
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { font-family: "Microsoft YaHei", sans-serif; margin: 0; color: #1f2a33; }
nav { position: sticky; top: 0; background: #123a52; padding: 0 20px; }
nav ul { list-style: none; display: flex; margin: 0; padding: 0; }
nav a { display: block; color: #fff; text-decoration: none; padding: 16px 20px; transition: background .3s; }
nav a:hover { background: #0f8c7f; }
section { max-width: 640px; margin: 0 auto; padding: 60px 20px; min-height: 300px; }
section:nth-child(odd) { background: #f2f6f8; }
h2 { color: #0f8c7f; }
</style>
</head>
<body>
<nav><ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul></nav>
<section id="home"><h2>首页</h2><p>点击导航，平滑滚动到对应区域。</p></section>
<section id="news"><h2>新闻</h2><p>注意滚动是"滑"过来的，不是瞬间跳转。</p></section>
<section id="about"><h2>关于</h2><p>sticky导航始终吸附在顶部。</p></section>
<section id="contact"><h2>联系</h2><p>scroll-padding-top 防止内容被导航遮住。</p></section>
</body>
</html>任务目标：将个人站点升级为三页面+导航栏+锚点目录的完整站点
| 任务内容与评分 |
|---|
| 任务1：制作nav>ul>li>a语义化导航栏（25分） |
| 任务2：实现三个页面互相跳转且导航高亮当前页（25分） |
| 任务3：在长页面添加"返回顶部"锚点链接（15分） |
| 任务4：为长文章添加目录锚点并实现平滑滚动（20分） |
| 任务5：为外链添加target与rel="noopener"（15分） |