1. 作用
主要作用：实现页面的跳转。
2. 常用属性
- href：指定要跳转到的 url
- target ：跳转时在如何打开链接文档
- _blank：在新窗口打开
- _self：在本窗口打开（默认）
- id：唯一标识码，可以设置锚点
- name：元素的名字，也能设置锚点
- 在本窗口打开
<a href="http://www.mapgis.com">中地数码</a>
- 在新窗口打开
<a href="http://www.mapgis.com">中地数码</a>
-
模拟小米 logo 点击效果
<a href="https://www.mi.com/" target="_blank"> <img src="./img/logo-mi2.png" width="50px" alt="小米图标" /> </a> -
注意点
链接前面一定要加协议，不加协议跳转不了！！
<a href="www.mapgis.com">中地数码</a>
链接的分类
根据跳转资源的位置来分类：
-
站外链接：跳转到其他网站或者应用
<!-- 站外链接 --> <a href="http://www.baidu.com">百度</a> <!-- tecent:// 腾讯的协议 --> <a href="tecent:///?a=12345678">点我咨询</a><br /> -
站内链接：跳转到本网站的另外一个页面或者资源
<a href="./01-综合案例-新闻文本案例.html">01-HTML标签</a>
<a href="./img/audio.mp3">跳转到音频</a>
<a href="./img/video.mp4">跳转到视频</a>
<a href="./img/c.jpg">跳转到图片</a>
<a href="./img/logo-mi2.zip">跳转到压缩包</a>
-
锚链接：跳转到当前页面的其他部分
-
第一步：生成两个目录
给a标签设置锚点，可以实现跳转。
<a href="#p1"><h2>第一章节</h2></a> <a href="#p2"><h2>第二章节</h2></a> -
第二步：快速生成两个章节的内容
使用
h3#p1{第一章节}+p>lorem1000和h3#p2{第二章节}+p>lorem1000可以快速生成内容。
-
3. 模拟小米回到顶部
-
在顶部用 div 定义一个锚点(定位点)
<div id="top"><h1>我是顶部</h1></div> -
生成随机文本
-
定义回到顶部的图标
<a href="#top"> <img src="./img/totop_hover.png" alt="小米" /> </a> -
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>13-链接标签-模拟小米回到顶部</title> </head> <body> <!-- 1.在顶部用div定义一个锚点(定位点) --> <div id="top"><h1>我是顶部</h1></div> <!-- 2.生成随机文本 --> <p></p> <!-- 3.定义回到顶部的图标 --> <a href="#top"> <img src="./img/totop_hover.png" alt="小米" /> </a> </body> </html>