代码实验
页内链接必须找到对应的 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 的拼写。