链接是跳转网页的一种常见的方式 它可以更方便迅速的在网络中找到自己想要的网页
这一节内容主要学习 怎么使用链接 包括点击文字跳转 在同网页中跳转到不同的位置 点击图片跳转 甚至 点击图片的不同位置进行跳转。
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>超链接标签</title>
<!--
1.超链接a标签
>.普通a标签
>.邮箱跳转
2.链接标签的常用属性
>.href: 1.远程链接 2.本地文件 3.邮箱
>.title: 链接标题
>.target:设置跳转方式
_blank 从新的标签页中打开该链接
_self 从当前窗口打开该链接
（在不设置跳转方式的情况下，这种方式是默认的跳转方式）
-->
</head>
<body>
<!-- 1.普通a标签跳转远程地址 -->
<a href="https://weibo.com/u/5807268957?layerid=5033227700143168" title="wjy" target="_blank">点击我跳转到wjy</a>
<!-- 2.跳转至本地 -->
<a href="../1.4多媒体标签/jy.webp">点击我跳转到本地链接</a>
<!-- 3.跳转到邮箱 （了解即可） -->
<a href="mailto:[email protected]">点击我跳转邮箱</a>
</body>
</html>
锚链接
主要是在阅读网页的时候 来快速跳转指定位置
效果和一些网页上的 返回顶部一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>锚链接</title><!--就是我们在浏览页面时，可能会有一个回到顶部的图标，这种链接 -->
<!--
1.设置锚点 要去的地方
2.使用锚点 从哪打开要去的地方
-->
</head>
<body>
<!-- 使用锚点采用 href="#id 或 #name的属性值" -->
<!-- 设置锚点采用 id 或 name 来设置属性值 -->
<!-- 在要去的位置设置锚点， 在从跳转的位置使用锚点 -->
<!--例子：-->
顶部：<a href="#bootom" name="lwx" >回到底部</a>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<a href="" name="wjy"></a>
<li>测试序列 ------------ 12</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
<li>测试序列</li>
底部：<a href="#wjy" id="bootom">到12位</a>
<hr>
底部：<a href="#lwx" id="bootom">到顶部</a>
</body>
</html>
图片超链接
简单来说 就是从点击文字跳转 换成了点击图片跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片超链接</title>
<!--注意一下理解，这里的图片超链接是指从图片跳转到链接，而不是表示代表跳转到图片-->
<!-- a标签中的提示文字变为图片即可 -->
<!--
格式：
<a href="">
<img src="" alt="">
</a>
-->
</head>
<!-- 实际上就是将跳转的链接 变成图片的形式 -->
<body>
</body>
</html>
图片热区
这里是点击图片的不同位置 跳转到不同的链接
主要是要注意热区的范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片热区</title>
<!-- 对于点击图片的位置不一样，进入的链接也不一样 -->
<!-- 对于位置提供三种图形来点击 矩形 圆形 多边形（如 菱形）
在设置点击范围的时候，是用 平面直角坐标系 来表示 单位是像素
（但是在计算机里的坐标轴中 y的正半轴是朝下的）
-->
<!--
-->
<!--矩形 对角坐标
圆形 圆心坐标 半径
多边形 每个点的坐标(顶上开始，顺时针方向写)-->
</head>
<body>
<!-- 定义地图 开始是地图的背景 设置地图的高和宽 给地图取一个名字 usemap="#shopping"-->
<img src="./map.png" width="1600px" height="1000px" usemap="#shopping" alt="">
<!-- 通过定义的地图名字来使用地图 -->
<map name="shopping">
<!-- 定义矩形 -->
<area title="天猫" shape="rect" coords="0,0,456,955" href="https://www.tianmao.com/" alt="">
<!-- 定义圆形-->
<area title="淘宝" shape="circle" coords="804,327,103" href="https://www.taobao.com/" alt="">
<!-- 定义多边形-->
<area title="京东" shape="poly" coords="1357,0,1167,224,1167,948,1535,463" href="https://www.jd.com/" alt="">
</map>
</body>
</html>