30. 模块三回顾与测验

知识回顾

模块三我们学了六个主题。

第 25 章：a 标签基础

• href 指定链接目标（绝对路径或相对路径）
• target="_blank" 在新标签页打开
• title 提供悬停提示
• 链接文本要有意义，避免”点击这里”

第 26 章：链接类型

• 内部链接、外部链接、锚点跳转（#id）
• mailto: 预填邮件主题和内容
• tel: 在手机上拨打电话
• download 属性让浏览器下载文件

第 27 章：rel 属性

• noopener：安全隔离，防止新页面访问原页面
• noreferrer：隐藏来源信息
• nofollow：告诉搜索引擎不追踪
• 外部链接标配：rel="noopener noreferrer"

第 28 章：图像地图

• <img usemap="#name"> + <map name="name"> + <area>
• 四种 shape：rect、circle、poly、default
• 图像地图维护成本高，优先考虑 CSS 或 SVG 替代

第 29 章：nav 语义标签

• 只用于主要导航区域
• 页面可以有多个 <nav>
• 用 aria-label 区分多个导航区
• 页脚链接不需要包 <nav>

测验题

第 1 题

以下哪种写法是安全的外部链接打开方式？

A. <a href="https://example.com" target="_blank">

B. <a href="https://example.com" target="_blank" rel="noopener noreferrer">

C. <a href="https://example.com" rel="nofollow">

D. <a href="https://example.com" target="_blank" rel="external">

点击查看答案

**B**。`target="_blank"` 配合 `rel="noopener noreferrer"` 是外部链接的安全标配，防止新页面通过 `window.opener` 操控原页面。

第 2 题

要实现页面内跳转到 id 为 “section2” 的位置，正确的是：

A. <a href="section2">跳转</a>，目标位置 <h2 id="section2">

B. <a href="#section2">跳转</a>，目标位置 <h2 id="section2">

C. <a href="@section2">跳转</a>，目标位置 <h2 id="section2">

D. <a href="?section2">跳转</a>，目标位置 <h2 name="section2">

点击查看答案

**B**。锚点跳转需要 `#` 前缀，目标位置用 `id` 属性（不是 `name`，`name` 已废弃）。

第 3 题

图像地图中，定义圆形热区的 coords 格式是：

A. 左上角x, 左上角y, 右下角x, 右下角y

B. 圆心x, 圆心y, 半径

C. x1, y1, x2, y2, x3, y3, ...

D. 中心x, 中心y, 宽度, 高度

点击查看答案

**B**。圆形热区需要三个值：圆心 x 坐标、圆心 y 坐标、半径。A 是矩形，C 是多边形。

第 4 题

以下哪个场景最适合用 <nav> 标签？

A. 文章正文中引用其他文章的链接

B. 页面顶部的导航菜单

C. 页脚的隐私政策链接

D. 侧边栏的广告链接列表

点击查看答案

**B**。`

第 5 题

mailto 链接中，预填主题和正文的正确写法是：

A. <a href="mailto:a@b.com&subject=你好&body=内容">

B. <a href="mailto:a@b.com?subject=你好&body=内容">

C. <a href="mailto:a@b.com#subject=你好#body=内容">

D. <a href="mailto:a@b.com/subject=你好/body=内容">

点击查看答案

**B**。mailto 链接中，第一个参数用 `?` 开头，后续参数用 `&` 分隔，和普通 URL 查询字符串规则一样。

第 6 题（判断题）

<nav> 标签会改变导航链接的视觉外观。

A. 正确

B. 错误

点击查看答案

**B，错误**。`

第 7 题（判断题）

一个页面只能有一个 <nav> 标签。

A. 正确

B. 错误

点击查看答案

**B，错误**。页面可以有多个 `

错题回顾

如果哪道题答错了，回头翻翻对应的章节。链接和导航是 HTML 的核心，掌握扎实对后续学习帮助很大。

模块四我们来学习图像——<img> 标签、响应式图片和原生懒加载。