HTML 学习笔记(五)超链接

news/2024/5/10 4:26:50

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

<!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"是anchor的缩写,意为"锚","href"属性是HypertText Reference的缩写,意为超文本引用其值为"目标页面的地址"与图片的"src"属性类似--><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><!--上述这种打开方式,实在原有页面的基础上打开的,如何使其在新窗口中打开呢?--><!--"target"属性可以定义超链接页面的打开方式"_self"代表在当前页面打开,"_blank"代表在空白页面打开--><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.锚点的定义
1.跳转目标的定义

<!--在跳转目标的位置处天机一个id属性和其属性值,该属性值即为锚点的名字(id的属性值不能和其他锚点同名)-->
<p id="box1"></p>
<p id="box2"></p>

2.锚点的定义

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

完整代码:

<!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><h1 align="center">一些图片</h1><p align="center" id="top_"><a href="#box1">狗头</a><a href="#box2">Lucia</a><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>

在这里插入图片描述
可以通过点击来移动到网页的指定位置:
在这里插入图片描述
还可以加入一个返回顶部的标签:

<!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><h1 align="center">一些图片</h1><p align="center" id="top_"><a href="#box1">狗头</a><a href="#box2">Lucia</a><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>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/10340.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

操作教程|使用MeterSphere对恒生UFX系统进行压力测试

恒生UFX&#xff08;United Finance Exchange&#xff0c;统一金融交换&#xff09;系统&#xff08;以下简称为“UFX系统”&#xff09;&#xff0c;是一款帮助证券公司统一管理外部接入客户的系统&#xff0c;该系统整体上覆盖了期货、证券、基金、银行、信托、海外业务等各类…

IEEE SystemVerilog Chapter18: Constrained random value generation

18.1 General 本条款描述了以下内容&#xff1a; --随机变量&#xff08;Random variables&#xff09; --约束块&#xff08;Constraint blocks&#xff09; --随机化方法&#xff08;Randomization methods&#xff09; --禁用随机化&#…

设计模式大题做题记录

设计模式大题 09年 上半年&#xff1a; 09年下半年 10年上半年 10年下半年 11年上半年 11年下半年 12年上半年 12年下半年 13年上半年 13年下半年

Qt 类的前置声明和头文件包含

1. 在头文件中引入另一个类经常有两种写法 1&#xff09;前置声明 2&#xff09;头文件包含 #ifndef FRMCOUPLE2_H #define FRMCOUPLE2_H#include <QWidget> //头文件包含namespace Ui { class frmcouple2; }//前置声明&#xff1a;QPushButton frmchkeyboard…

鸿蒙Harmony应用开发—ArkTS声明式开发(通用属性:颜色渐变)

设置组件的颜色渐变效果。 说明&#xff1a; 从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 linearGradient linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repea…

Java代码审计安全篇-常见Java SQL注入

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望…