大家好，我是[小奇腾]。欢迎来到 “幼儿园前端” 第 7 集！ 昨天我们列好了“购物清单”，但是点击清单上的“苹果”，什么反应都没有。 网页最大的魅力，在于连接。点击一个按钮，跳转到百度；点击一张图片，跳转到淘宝。 实现这个功能的，就是 HTML 里最神奇的标签：
<a>(Anchor) 。今天我们来造一个“传送门”
本期详细的视频教程bilibili：幼儿园前端 #07：超链接 —— 网页的“任意门”，想去哪就去哪！
一、 为什么叫 <a>？
链接Link，为什么标签不叫<a>?
<a>= Anchor（船锚）⚓️- 意思是：我在我在互联网的海洋里，把锚抛到了另一个位置。点击它，船（浏览器）就会开过去
- 注：其实 HTML 里真有
<link>标签，但它是用来引入 CSS 的（以后讲），千万别搞混！
二、基础语法：我要去哪里？
- 代码演示
<a>标签最核心的属性只有一个href- 表示要去的地址
<a href="https://www.baidu.com">去百度看看</a>
href="...": 这里写地址（一定要带 https://)去百度看看： 这里的是给用户看的文字（点击这段文字就可以跳转）
- 空链接（占位符）
有时候我们还没想好要去哪，或者单纯想做一个按钮的效果，可以写一个 # 。
<a href="#">暂时哪里也不去</a>
- 注意：点击
href="#"会瞬间跳到当前页面的顶部
三、 进阶技巧：在新窗口打开 (target)
默认情况下，你点击链接，当前页面会“变”成新页面（也就是覆盖了当前页）。 但这有个大缺点：用户看完新页面，把浏览器关了，结果连你的网站也一起关了！😱
为了留住用户，我们通常希望：点击链接 -> 打开一个新的标签页。
target="blank"
target: 目标_blank: 空白页- 含义：在新的空白页里打开连接
<a href="https://www.bilibili.com" target="_blank"> 去 B 站（新窗口打开） </a>
- 安全补丁（专业人士必写 / 面试点）
当你使用 target="_blank" 时，为了安全起见（防止新页面通过 JS 控制你的旧页面），推荐加上 rel 属性：
<a href="..." target="_blank" rel="noopener noreferrer">
安全跳转
</a>
- 这就是给传送门加个“单向阀”，新页面没法搞破坏。
- Emmet 大招
a:blank+ Tab 直接生成生成 href、target="_blank" 和 rel 属性
<a href="http://" target="_blank" rel="noopener noreferrer"></a>
四、 链接不止能包文字
<a> 标签是一个非常包容的标签。它不仅可以包文字，还可以包图片、包按钮，甚至包一个 div。
比如：把图片变成链接
<a href="https://jd.com" target="_blank">
<img src="shouji.jpg" alt="手机图片">
</a>
五、 锚点链接：电梯功能 🛗
除了跳转到别的网站，<a> 还可以跳转到当前页面的某个位置。 这就像大楼里的电梯，按“3楼”，直接把你送到3楼。
- 给目的地挂个牌子 (
id)
假设你页面底部有一个 footer：
<footer id="contact"> 联系我们：12345678 </footer>
- 设置电梯按钮 (
href="#id")
在页面顶部写一个链接：
<a href="#contact">⬇️ 直达底部联系我们</a>
- 效果：点击“直达底部”，页面会“唰”的一下滚动到最下面的
footer位置。
