HTML Academy · 课时

在新标签页中打开链接与 download 属性

Q: 「在新标签页中打开链接与 download 属性」这节课中我会学到什么？

使用 target 和 download 属性控制链接行为。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 target 和 download 属性控制链接行为。

在新标签页中打开链接与 download 属性 是 CoddyKit 上的免费 HTML Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

在新标签页中打开

target 属性控制链接文档的打开位置：

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

使用 _blank 的安全风险

不采取防护措施而使用 target="_blank" 会造成安全漏洞：

新页面可以通过 window.opener 访问打开它的页面
恶意页面可能会重定向原来的标签页
这种攻击称为反向标签劫持

rel=noopener noreferrer 属性

使用 target="_blank" 时，始终添加 rel="noopener noreferrer"：

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

何时打开新标签页

使用 target="_blank" 时的用户体验指南：

对于用户没有预期离开应用的外部网站，可以使用
可以用于参考文档（PDF、指南）
内部页面导航不要使用
始终提醒用户——添加图标或标题，说明“将在新标签页中打开”

向用户指示新标签页

告知用户链接将在新标签页中打开：

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

download 属性

download 属性会告诉浏览器下载链接指向的文件，而不是导航到该文件：

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

download 属性的限制

download 属性存在以下限制：

只适用于同源网址
跨源下载要求服务器发送 Content-Disposition: attachment
download 中的文件名只是建议值——服务器标头可以覆盖它

数据 URI 下载

您可以使用数据 URI 下载生成的内容：

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript 和链接目标

由 JavaScript 处理导航时，请避免滥用 target="_blank"：

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

ping 属性

点击链接时，ping 属性会发送一个 POST 请求（用于分析）：

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

链接上的 type 属性

type 属性会提示链接资源的 MIME 类型：

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

快速检查

target="_blank" 始终应搭配哪个安全属性？

回顾：target 和 download

链接行为属性：

target="_blank"——在新标签页中打开
使用 _blank 时始终添加 rel="noopener noreferrer"
链接在新标签页中打开时，使用视觉提示提醒用户
download——触发文件下载，而不是导航
download="filename"——为下载建议一个文件名

常见问题解答

「在新标签页中打开链接与 download 属性」课时是免费的吗？

是的 — 「在新标签页中打开链接与 download 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「在新标签页中打开链接与 download 属性」这节课中我会学到什么？

使用 target 和 download 属性控制链接行为。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「在新标签页中打开链接与 download 属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy