正在加载...

HTML 链接标题与目标

「链接」一课已经让你写出带有清晰 href 的可用 a 元素。还有两个常见扩展会在不替换 href 的情况下改变体验：用于短悬停提示的 title 属性，以及可以把目标在新浏览器标签页中打开的 target。使用得当会有帮助；若菜单每一项都加，就会打扰读者，并留下安全隐患。

这些属性做什么

href 仍然决定链接去哪里。title、target 和 rel 调整的是提示以及浏览器如何打开该目标。要把它们当作建立在扎实链接文案之上的可选工具来学——而不是描述性文字的替代品。

直接回答

  • title="…" — 悬停时可选的提示性 tooltip 文字（支持与用处因环境而异；切勿只依赖它）
  • target="_blank" — 在新标签页或新窗口中打开
  • 使用 _blank 时还应设置 rel="noopener noreferrer"，避免新页面通过 window.opener 完全控制你原来的标签页（更安全的日常写法）
    站内导航默认留在同一标签页。把 _blank 留给真正需要留住当前页面的情况——常见是外部参考或下载。

title、target 与 rel 一览

📊 链接扩展对比

Attribute Job
title 短悬停提示（额外上下文）
target 目标在何处打开（_blank = 新标签页/窗口）
rel 关系标记；配合 _blank 使用 noopener noreferrer
href 仍是目标 URL（不变）

有帮助的 title 提示

当短额外提示能在可见链接文字之外增加价值时，再使用 title。不要把同一句话同时贴进两处指望加倍清晰——屏幕阅读器与悬停体验不同，空洞重复只会浪费注意力。

带 title 提示的链接

html
HTML Code 
<a href="guide.html" title="Opens the beginner guide">Beginner guide</a>

阅读 title 示例

  • 可见文字 Beginner guide 仍是主要标签
  • 在许多桌面浏览器中，title 会在悬停时加上简短的提示字符串
  • 移动端与辅助技术未必以同样方式暴露 title——务必让可见文字本身足够有力
  • href 仍然指向 guide.html；title 本身不会导航

用更安全的 rel 打开新标签页

把外部站点开在新标签页，可以让读者继续留着你的课程。对这些情况，默认养成把 _blank 与 rel="noopener noreferrer" 成对使用的更安全习惯。

带更安全 rel 的新标签页

html
HTML Code 
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
Example (new tab)
</a>

为什么要 noopener 和 noreferrer

  • noopener 降低新页面通过 window.opener 操纵你原标签页的风险
  • noreferrer 在许多浏览器中还会避免发送 referrer（隐私副作用；仍常与此模式一起讲授）
    本课不需要深入浏览器安全理论——记住 _blank 外部链接的成对属性，然后继续前进即可。

不要处处都 blank

新标签页会越积越多。若侧栏每个链接都用 _blank，用户会失去简单的「后退」故事，最后只剩一堆标签页。站内页面（about.html、下一课、首页）优先用同标签页链接。离开本站时，或产品需求明确要求时，再使用 _blank。

title 不是页面标题

文档在 head 里的 <title> 元素标注整个标签页。a 上的 title 属性只是该链接上的提示。职责不同，英文用词相近——不要混淆。

在编辑器中练习

  1. 添加一条本地链接：可见文字清晰，并带有能补充一条细节的有用 title。
  2. 添加一条外部链接，使用 target="_blank" 与 rel="noopener noreferrer"。
  3. （在桌面上）悬停查看 tooltip；点击确认打开新标签页。
  4. 保留第三条站内链接且不加 _blank，确认它会正常替换当前标签页。
  5. 改写任何只是重复链接文字、毫无新信息的 title。

常见错误

  • 对每个内部菜单项都使用 _blank
  • 在 _blank 外部链接上忘记 rel="noopener noreferrer"
  • 写出只是回声链接文字的无用 title
  • 以为 title 或 target 可以代替缺失的 href
  • 把链接的 title 属性与文档的 <title> 元素搞混

小结

  • title 可以加上短悬停提示；可见链接文字仍是首要
  • target="_blank" 打开新标签页或窗口
  • 为更安全的外部链接，将 _blank 与 rel="noopener noreferrer" 成对使用
  • 站内页面优先同标签页导航
  • href 仍是目标；这些属性只是细化体验

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程