HTML超链接

comegoing-归去兮来

已于 2022-07-30 21:14:30 修改

阅读量9.8k

点赞数 4

分类专栏：前端html基础文章标签： html 前端

于 2022-07-08 22:13:56 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/125686355

版权

前端html基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

2、代码举例（文本内容仅为测试，与现实无关）

一、引言

内外部跳转，相对绝对地址，新开网页

二、超链接使用规则

1、超链接使用一定要包含“标签a”（也就是<a></a>）

2、属性href为链接地址，作为跳转的目标

3、网页内部段落跳转需要使用标签的唯一属性“id”

4、属性target控制跳转结果为新开网页还是当前网页

三、相对地址（多较于本地文件）

1、含义

目标网页地址相对于当前网页的地址

2、表示形式

（1）./表示当前文件目录，可以忽略不写，默认为被加上，可调用当前目录下的所有文件

（2）../表示上一级文件目录，必须写，返回到上一级目录

3、举例

（1）./

    <a href="./meta.html">这是meta代码相对路径的跳转链接</a>

（2）../

<a href="../test/test.html">这是test代码相对路径跳转链接</a>

4、文件目录对照

四、绝对地址

1、含义

就是打开的网页中显示的URL

2、举例

（1）百度首页URL

    <a href="http://www.baidu.com">这是百度的跳转链接</a>

（2）作者本地代码URL

    <a href="http://127.0.0.1:5500/code/study/entity.html">这是实体测试代码的绝对路径跳转链接</a>

3、URL参考

（1）百度

（2）本地

五、内部段落跳转

1、格式

（1）href="#"是默认值，表示返回网页顶部

（2）href="#id"表示返回到设定id的段落

2、代码举例（文本内容仅为测试，与现实无关）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部跳转</title>
</head>
<body>
    <a href="#pargraph6">去第六个自然段</a>
    <a href="#bottom">去底部</a>
    <p>1西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>2西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>3西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>4西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>5西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p id="pargraph6">6西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>7西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>8西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>9西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <p>10西方国家与新冠共存后的结果误导了一部分看不清事实的人，让他们认为新冠共存符合现阶段中国国情。自从英国选择与新冠共存之后，似乎每日新增病例的数量确实在逐渐减少。但实际上，在新冠共存的政策下，英国并不强制要求公民进行检测或者是隔离，这种统计下的新增病例并不可靠。而本次香港疫情爆发，又恰逢亚洲发达国家新加坡宣告与新冠共存。在这种背景下，就有部分人认为香港的严防措施可有可无，可以作为实行新冠共存的中国城市。但实际上，在香港统计显示的重症和死亡的人群当中，有98%是未接种疫苗的人群，这与具有高接种率的英国是不相同的。同时也存在部分人消极抗疫，散布“群体免疫”的误解言论。</p>
    <a id="bottom" href="#">回到顶部</a>
</body>
</html>

3、注意事项

（1）id的命名是每个标签的唯一属性，不能重复，且必须以字母开头

（2）在实际代码中，href若未确定，可以用JavaScript中的:;进行占位，防止出错

六、属性target（设置是否新开网页）

1、规范（常见两种）

（1）target="_blank"表示链接跳转新开页面

（2）target="_self"表示链接跳转在当前页面打开

2、举例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>超链接之新开窗口</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">这是新开窗口的超链接</a>
</body>
</html>