Web前端------HTML链接标签

1.普通超链接

（1）链接外部网页

点击文本，跳转到外部网页

<!DOCTYPE html>

<html lang="zh">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>普通超链接</title>
</head>
<body>

    <h3>超链接标签：链接到网络地址</h3>

    <a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
</body>
</html>

效果

当鼠标点击百度一下你就知道，会在新的窗口中打开百度搜索页面

（2）链接本地网页

点击网页中的超链接，可以访问本地的多个网页

<!DOCTYPE html>

<html lang="zh">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>超链接-访问本地网页</title>
</head>
<body>

   今日学习内容

    <!-- 超链接中，如果使用相对路径，可以省略 ./ -->

    <ul>

        <li><a href="./demo01无序列表.html" target="_blank">demo01无序列表</a></li>

        <li><a href="./demo02有序列表.html" target="_blank">demo02有序列表</a></li>

        <li><a href="demo03信息列表.html" target="_blank">demo03信息列表</a></li>

        <li><a href="demo04普通超链接.html" target="_blank">demo04普通超链接</a></li>

    </ul>
</body>
</html>

效果

2.图片超链接

鼠标点击网页中的一张图片，可以跳转到一个网页

代码

<!DOCTYPE html>

<html lang="zh">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>图片超链接</title>
</head>
<body>

    <h3>图片标签，可以包含在超链接标签中；整个图片就是个超链接记号</h3>

    <a href="https://jd.com" target="_blank">

        <img src="./images/353a1ef917a1b6e1.jpg.avif" width="200px"/>

    </a>
</body>
</html>

效果

注意

超链接标签内部不仅仅可以包含普通文本，也可以包含图片等等其他标签

3.锚点链接

网页中有一篇文章非常长，包含了多个章节；

代码

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <a name="menu"></a>

    <h2>目录</h2>

    <h4><a href="#c01">第一章：001</a></h4>

    <h4><a href="#c02">第二章：002</a></h4>

    <h4><a href="#c03">第三章：003</a></h4>

    <hr>

    <!-- 添加锚点 -->

    <a name="c01"></a>
    <h3>第一章：001</h3>

    <a href="#menu">返回目录</a>

   ......

</body>
</html>

效果

4.热点链接

点击一个图片中的不同位置，跳转到不同的网页，经典的使用用途-----地图上的点击；

代码

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <img src="./images/guanggao.webp" usemap="#my">

    <!-- 定义区域 -->

    <map name="my">

        <!-- 定义左上角区域 -->

        <area shape="rect" coords="(0,0,250,375)" href="https://www.baidu.com" 

target="_blank">

        <!-- 定义右上角区域 -->
        <area shape="rect" coords="(250,0,500,375)" href="https://www.sogou.com" 

target="_blank">

    </map>
</body>
</html>

效果