HTML第六章 链接标签

6. 链接标签

6.1 超链接标签

• 超链接 a 标签

  • 普通 a 标签

    1. 普通 a 标签跳转远程地址

       

       <a href="https://www.baidu.com">点击此处跳转百度</a>

    2. 跳转至本地

       

       <a href="../code/1.Hello.html">点击此处跳转本地链接</a>

  • 邮箱跳转（了解）

    

    <a href="mailto:123@qq.com">点击此处发送邮件</a>

• 链接标签的常用属性

  • href：①远程链接 ②本地文件 ③邮箱
  • title：链接标题
  • target：跳转方式（① _blank 打开新的网页窗口 ② _self 当前窗口跳转【默认】）

6.2 锚链接标签

• 设置锚点 ：采用 id 或 name 属性

• 使用锚点 ：采用 href = "#id的属性值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>锚链接标签_a</title>
</head>
<body>
    <a href="#bottom" id="top">返回底部</a>

    <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="#top" id="bottom">返回顶部</a>
</body>
</html>

6.3 图片超链接

a 标签中的提示文字变为图片即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片超链接</title>
</head>
<body>
    <a href="https://www.taobao.com" target="_blank">
        <img src="./cat1.jpg" alt="图片1">
    </a>
</body>
</html>

6.4 图片热区（热区超链接）

• ++根据不同的图片区域（坐标）添加不同的链接++
  • 使用地图通过 usermap = "#name的值"
  • 通过 name 属性设置地图的名字

区域划分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热区链接</title>
</head>
<body>
    <img src="./cat.jpg" alt="" width="1280px" usemap="#购物">
    <map name="购物">
        <!-- 定义矩形位置 -->
        <area title="淘宝" shape="rect" coords="0,0,430,800" href="https://www.taobao.com">
        <!-- 定义圆形位置 -->
        <area title="京东" shape="circle" coords="640,400,210" href="https://www.jd.com">
        <!-- 定义多边形位置 -->
        <area title="天猫" shape="poly" coords="1070,0,1280,400,800,850,400" href="https://www.tmall.com">
    </map>
</body>
</html>