Investigator Veritatis

06-a标签

4 min read

1 a 标签是什么

a 标签是超链接标签，双标签，点击后可以跳转到指定地址、页内定位，或触发文件下载。

2 基本跳转

href 指定跳转地址，target 控制打开方式：

  • _blank：在新标签页打开，保留原页面。
  • _self：在当前页面打开，覆盖原页面（默认值）。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🫵 a标签的基本使用</title>
</head>
<body>
    <h1>1. a标签的基本使用</h1>
    <!-- href的值可以是一个网址,也可是一个资源地址 -->
    <a href="http://baidu.com">百度</a>
    <h1>2. a标签的常用属性: target</h1>
    <!-- 地址在新的浏览器页面显示,保留原来的网页,不进行覆盖 -->
    <a href="http://baidu.com" target="_blank">大百度</a> <br>
    <!-- _self,表示覆盖掉当前的页面,链接地址在当前页面打开 -->
    <a href="http://baidu.com" target="_self">大百度self</a>
</body>
</html>

3 锚点 — 页内跳转

锚点用于在同一页面内跳转到指定位置，常用于长页面目录导航。

3.1 使用步骤

  • 第一步：给目标标签设置 id 属性作为标记。
  • 第二步：a 标签的 href 填 #id名，点击后自动滚动到对应位置。

3.2 注意事项

  • 同一页面内 id 值必须唯一。
  • href 中的 # 不能省略。
  • 任何标签都可以设置 id，不只是标题标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔥🔥🔥 a标签作为锚点</title>
</head>
<body>
    <h1 id="start">开始</h1>
    <p>好好学习, 天天向上. 不要睡觉, 不要玩游戏</p>
    <!-- 省略中间大量重复段落 -->
    <h1 id="hello">hello world</h1>
    <p>好好学习, 天天向上. 不要睡觉, 不要玩游戏</p>
    <!-- 省略中间大量重复段落 -->
    <a href="#start">回到开始位置</a>
    <a href="#hello">去hello world</a>
</body>
</html>

4 文件下载

href 指向本地资源文件时，浏览器无法预览的类型（如 .7z、.zip）会自动触发下载。下载行为依赖浏览器判断，不同浏览器表现不一样，了解即可，不建议依赖此方式实现下载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>➡️ a标签下载功能实现</title>
</head>
<body>
    <a href="./00.7z">点击下载压缩包</a>
</body>
</html>

5 属性总结

属性值说明
href网址 / 资源路径 / #id指定跳转目标，必填
target_blank新标签页打开
target_self当前页面打开（默认）

Recent Notes

Graph View