HTML超链接标签

文章目录

1. 作用
2. 常用属性
3. 模拟小米回到顶部

1. 作用

主要作用：实现页面的跳转。

2. 常用属性

href：指定要跳转到的 url
target ：跳转时在如何打开链接文档
- _blank：在新窗口打开
- _self：在本窗口打开（默认）
id：唯一标识码，可以设置锚点
name：元素的名字，也能设置锚点

在本窗口打开

<a href="http://www.mapgis.com">中地数码</a>

QQ录屏20240308100107 -original-original

在新窗口打开

<a href="http://www.mapgis.com">中地数码</a>

QQ录屏20240308100137 -original-original

模拟小米 logo 点击效果

<a href="https://www.mi.com/" target="_blank">
  <img src="./img/logo-mi2.png" width="50px" alt="小米图标" />
</a>

QQ录屏20240308100201 -original-original

注意点

链接前面一定要加协议，不加协议跳转不了！！
```
<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可以快速生成内容。
  
  lorem：生成随机文本

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>