PHP小码农

Appearance

target 与 download ​

<a> 标签的 target 属性控制链接在何处打开（当前窗口、新窗口等），download 属性指示浏览器下载链接指向的资源而非导航到该资源。

前置知识

阅读本节前，建议先了解：href 属性

基础概念 ​

target 属性决定链接的打开方式——是在当前窗口/标签页打开，还是在新窗口/标签页中打开。download 属性将链接变为下载按钮，用户点击后浏览器会下载文件而非打开它。

target 属性详解 ​

target 的值 ​

值说明
_self在当前窗口打开（默认值）
_blank在新窗口或新标签页中打开
_parent在父框架中打开
_top在最顶层窗口中打开
framename在指定名称的框架中打开

_blank 的安全性 ​

使用 target="_blank" 打开新窗口时，新页面可以通过 window.opener 访问原始页面的引用，存在安全隐患。应始终配合 rel="noopener noreferrer" 使用：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>target 安全性</title>
</head>
<body>
  <!-- 不推荐：没有 noopener，存在安全隐患 -->
  <a href="https://example.com" target="_blank">外部链接（不安全）</a>

  <!-- 推荐：添加 noopener noreferrer -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">外部链接（安全）</a>
</body>
</html>

安全风险

不带 rel="noopener" 的 target="_blank" 链接可能被恶意网站利用 window.opener 进行钓鱼攻击。现代浏览器（Chrome 88+、Firefox 等）已默认添加 noopener 行为，但为了兼容性，建议始终显式添加。

target 完整示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>target 示例</title>
</head>
<body>
  <h1>target 属性示例</h1>

  <!-- 默认：在当前窗口打开 -->
  <a href="https://example.com" target="_self">当前窗口打开</a>

  <!-- 新标签页打开 -->
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">新标签页打开</a>

  <!-- 父框架中打开（需要框架环境） -->
  <a href="https://example.com" target="_parent">父框架中打开</a>

  <!-- 顶层窗口打开 -->
  <a href="https://example.com" target="_top">顶层窗口打开</a>
</body>
</html>

download 属性详解 ​

基本用法 ​

download 属性指示浏览器下载 <a> 标签指向的资源：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>download 属性</title>
</head>
<body>
  <!-- 下载文件（使用服务器提供的文件名） -->
  <a href="/files/report.pdf" download>下载报告</a>

  <!-- 指定下载文件名 -->
  <a href="/files/report.pdf" download="年度报告.pdf">下载年度报告</a>

  <!-- 下载图片 -->
  <a href="/images/photo.jpg" download="风景照.jpg">下载图片</a>
</body>
</html>

download 的注意事项 ​

注意点说明
跨域限制只对同源 URL 有效
文件名download="文件名" 指定保存时的文件名
无后缀名指定的文件名应包含扩展名
浏览器支持现代浏览器均支持
不适合大文件大文件应使用服务器端下载方式
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>download 限制</title>
</head>
<body>
  <!-- 同源文件：可以正常下载 -->
  <a href="/files/data.csv" download="export.csv">下载 CSV</a>

  <!-- 跨域文件：download 属性可能不生效 -->
  <!-- <a href="https://other-site.com/files/data.csv" download="data.csv">下载</a> -->

  <!-- 没有后缀名：可能导致文件无法正常打开 -->
  <!-- <a href="/files/report.pdf" download="报告">下载</a> -->
  <!-- 推荐： -->
  <a href="/files/report.pdf" download="报告.pdf">下载报告</a>
</body>
</html>

实战示例 ​

资源下载页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>资源下载</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; font-family: sans-serif; }
    .download-list { list-style: none; padding: 0; }
    .download-list li { padding: 1rem; border: 1px solid #eee; margin-bottom: 0.5rem; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; }
    .download-list a { display: inline-block; padding: 0.5rem 1rem; background: #1565c0; color: white; text-decoration: none; border-radius: 4px; }
    .download-list a:hover { background: #0d47a1; }
    .file-info { color: #666; font-size: 0.875rem; }
  </style>
</head>
<body>
  <h1>资源下载中心</h1>
  <ul class="download-list">
    <li>
      <div>
        <strong>项目文档</strong>
        <p class="file-info">PDF 格式 / 2.3 MB</p>
      </div>
      <a href="/files/docs.pdf" download="项目文档.pdf">下载</a>
    </li>
    <li>
      <div>
        <strong>源代码</strong>
        <p class="file-info">ZIP 格式 / 15.6 MB</p>
      </div>
      <a href="/files/source.zip" download="source.zip">下载</a>
    </li>
  </ul>
</body>
</html>

注意事项 ​

  • 外部链接使用 _blank 时必须加 rel="noopener noreferrer"
  • download 属性只对同源 URL 有效
  • 不要滥用 _blank——内部链接应使用 _self
  • 不要让下载链接跳转到第三方下载站

最佳实践 ​

  1. 外部链接用 _blank + noopener：保护用户安全
  2. 内部链接用 _self：保持导航流畅
  3. download 指定文件名：包含正确的扩展名
  4. 提示下载文件类型和大小：让用户有心理预期

下一节

继续学习：锚点链接

参考链接 ​