Web前端技术 · 第 2 课预测 · 验证 · 解释
代码实验

页内链接必须找到对应的 id

href="#名称" 指向当前文档中对应 id 的位置。链接文字向读者说明目标;是否能定位,则取决于 href 与 id 的对应关系。

先判断

先不运行:点击“跳到节目单”能准确定位到下方节目单吗?

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄梅戏分享会目录</title>
</head>
<body>
  <h1>黄梅戏分享会</h1>
  <a href="#program">跳到节目单</a>
  <section style="min-height: 500px">
    <h2>活动介绍</h2>
    <p>先了解唱腔与角色,再欣赏同学们准备的节目。</p>
  </section>
  <h2 id="program-list">节目单</h2>
  <ol>
    <li>《天仙配》选段</li>
    <li>《女驸马》选段</li>
  </ol>
</body>
</html>

再改一个条件

展开答案与分析

C。浏览器不会根据链接文字或标题文字猜测目标。#program 要找 id="program" 的元素,代码中却只有 id="program-list"。修正两者之一即可。target="_blank" 表示打开新的浏览上下文,不是页内定位所必需的条件。

观察位置:点击链接,观察预览内部是否滚到节目单;再对照 href 和 id 的拼写。