HTML | HTML超链接
主要作用：从当前页面进行跳转。
可以实现：①跳转到指定页面、②跳转到指定文件（也可触发下载）、③跳转到锚点位置、④唤起指定应用。
| 标签名 | 标签语义 | 常用属性 | 单 / 双 标签 |
|---|---|---|---|
a |
超链接 | href ： 指定要跳转到的具体目标。target ： 控制跳转时如何打开页面，常用值如下:_self ：在本窗口打开。_blank ：在新窗口打开。id ： 元素的唯一 标识，可用于设置锚点。name ： 元素的名字，写在 a 标签中，也能设置锚点。 |
双 |
1. 跳转到页面
<!-- 跳转其他网页 -->
<a href="https://www.jd.com/" target="_blank">去京东</a>
<!-- 跳转本地网页 -->
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
注意点：
代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
虽然
a是行内元素，但a元素可以包裹除它自身外的任何元素！想展示多个回车或空格，怎么办呢？ —— 后面会讲。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转页面</title>
</head>
<body>
<a href="https://miaosha.jd.com/" target="_self">去秒杀</a>
<a href="https://www.baidu.com/" target="_blank">去百度</a>
<a href="./10_HTML排版标签.html">去排版标签</a>
<a href="./10_HTML排版标签.html">
<img width="50" src="./奥特曼.jpg" alt="奥特曼">
</a>
</body>
</html>
2. 跳转到文件
<!-- 浏览器能直接打开的文件 -->
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<!-- 浏览器不能打开的文件，会自动触发下载 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 强制触发下载 -->
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
注意1：若浏览器无法打开文件，则会引导用户下载。
注意2：若想强制触发下载，请使用
download属性，属性值即为下载文件的名称。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转文件</title>
</head>
<body>
<!-- 都是浏览器可以直接打开的文件 -->
<a href="./resource/我的自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">如何一夜暴富</a>
<!-- 浏览器不可以直接打开的文件 -->
<a href="./resource/内部资源.zip">内部资源</a>
<!-- 浏览器可以打开，但要强制触发下载 -->
<a href="./resource/小电影.mp4" download="好看">下载小电影</a>
<a href="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">点我看百度logo</a>
</body>
</html>
3. 跳转到锚点
什么是锚点？—— 网页中的一个标记点。
具体使用方式：
- 第一步：设置锚点
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>
<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>
注意点：
具有
href属性的a标签是超链接，具有name属性的a标签是锚点。
name和id都是区分大小写的，且id最好别是数字开头。
- 第二步：跳转锚点
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>
<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>
<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>
<!-- 刷新本页面 -->
<a href="">刷新本页面</a>
<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_跳转锚点</title>
</head>
<body>
<a href="#htl">看灰太狼</a>
<a href="#atm">看奥特曼</a>
<p>我是一只羊，一只很肥美的羊</p>
<img src="./path_test/a/喜羊羊.jpg" alt="喜羊羊">
<a name="htl"></a>
<p>我是一只狼，一只很邪恶的狼</p>
<img src="./path_test/a/b/灰太狼.jpg" alt="灰太狼">
<p id="atm">我是一只奥特曼，一只很能打的奥特曼</p>
<img src="./奥特曼.jpg" alt="奥特曼">
<p>我是一只怪兽，一只很丑的怪兽</p>
<img src="./path_test/怪兽.jpg" alt="怪兽">
<p>整体的介绍完毕了</p>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="javascript:;">点我弹窗</a>
</body>
</html>
4. 唤起指定应用
通过 a 标签，可以唤起设备应用程序。
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>超链接_唤起指定应用</title>
</head>
<body>
<a href="tel:10010">电话联系</a>
<a href="mailto:1234567@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>
</body>
</html>
