HTML 学习笔记(五)超链接

HYperText 超文是用超链接的方式，将不同空间的文字信息组合在一起的网状文其就像一个桥梁，建立了不同页面中的联系，实现了访问不同网站中页面的功能

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        
        <a href="https://mks.hzau.edu.cn/__local/B/DD/8A/CFE1BE51C922D4EEE6542F91825_3CC5AB02_6115BC.pdf?e=.pdf">毛选a>
        <a href="https://www.marxists.org/chinese/marx/capital/index.htm">资本论a>
        
        
        <a href="https://mks.hzau.edu.cn/__local/B/DD/8A/CFE1BE51C922D4EEE6542F91825_3CC5AB02_6115BC.pdf?e=.pdf" target="_self">毛选a>
        <a href="https://www.marxists.org/chinese/marx/capital/index.htm" target="_blank">资本论a>
        
        
        <a href="https://blog.csdn.net/qq_41666142/article/details/116723198">说说超链接 target 属性的取值和作用？a>
    body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

锚点链接是网页超链接中的一种，其就像一个迅速定位器，用来实现同一个页面中不同区域的跳转
实现其需要两个定义，1.跳转目标的定义 2.锚点的定义
1.跳转目标的定义


<p id="box1">p>
<p id="box2">p>
1
2
3

2.锚点的定义

<a href="#box1">目标一a>
<a href="#box2">目标二a>
1
2

完整代码：

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <h1 align="center">一些图片h1>
        <p align="center" id="top_">
            <a href="#box1">狗头a>
            <a href="#box2">Luciaa>
            <a href="#box3">彼岸花a>
        p>

        <p align="center" id="box1">
            <img src="dog1.jpg" alt="dog1" title="狗头保命">
            <a href="#top_">回到顶部a>
        p>
        <p align="center" id="box2">
            <img src="../../pic/Lucia.png" alt="Lucia" width="1080" height="720" title="Red lotus">
            <a href="#top_">回到顶部a>
        p>
        <p align="center" id="box3">
            <img src="https://img.zcool.cn/community/0162305dc57ebda801209e1f041f61.jpg@1280w_1l_2o_100sh.jpg" alt="曼珠沙华" title="石蒜">
            <a href="#top_">回到顶部a>
        p>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

在这里插入图片描述
可以通过点击来移动到网页的指定位置：

还可以加入一个返回顶部的标签：

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Documenttitle>
    head>
    <body>
        <h1 align="center">一些图片h1>
        <p align="center" id="top_">
            <a href="#box1">狗头a>
            <a href="#box2">Luciaa>
            <a href="#box3">彼岸花a>
        p>

        <p align="center" id="box1">
            <img src="dog1.jpg" alt="dog1" title="狗头保命"><br>
            <a href="#top_">回到顶部a>
        p>
        <p align="center" id="box2">
            <img src="../../pic/Lucia.png" alt="Lucia" width="1080" height="720" title="Red lotus"><br>
            <a href="#top_">回到顶部a>
        p>
        <p align="center" id="box3">
            <img src="https://img.zcool.cn/community/0162305dc57ebda801209e1f041f61.jpg@1280w_1l_2o_100sh.jpg" alt="曼珠沙华" title="石蒜">
            <br>
            <a href="#top_">回到顶部a>
        p>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

在这里插入图片描述

相关阅读:
手把手带你编写你的第一个单元测试
 德国药品数据库查询系统（含网址）
阿斯达年代记三强争霸账号怎么注册游戏账号注册教程分享
 发布自己的一个脚手架用于快速搭建vue项目
 CDH 09Cloudera Manager Kerberos安装配置(markdown新版二)
Gartner发布2022年重要战略技术趋势
 爬虫_爬取wasde月度供需平衡表(实例)
DRM系列(13)之writeback_job介绍
 产品经理书籍推荐
 VBA处理文件，发现打开的word文档分布在出现多个实例下，无法全部遍历
原文地址：https://blog.csdn.net/k903161661/article/details/136587369