HTML--超链接

news2024/9/24 9:27:41

超链接

作用:点击跳转到相应位置

a标签

语法:

<a href="链接地址">文本或图片</a>

范例:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a>
</body>
</html>

如上代码,在网页打开可以看到如下效果,点击百度跳转到百度首页,点击看看小猫可以打开··小猫.jpg查看在这里插入图片描述
拓展:
在百度首页,点击百度的图片可以跳转到新页面,所以图片也可以接入超链接。
范例:
如下范例中,网页显示百度图片,点击跳转搜狗首页

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a><br/>
    <a href="https://www.sogou.com/"><img src="baidu.png"></a>
</body>
</html>

在这里插入图片描述

target属性

定义打开超链接的方式,默认状况下是在当前页面打开超链接,常用的是在新页面打开超链接
用法:

<a href="链接地址" target="_self">在当前页面打开超链接</a>
<a href="链接地址" target="_blank">在新页面打开超链接</a>
<a href="链接地址" target="_parent">在父页面打开超链接</a>
<a href="链接地址" target="_top">在顶层页面打开超链接</a>

内部链接

顾名思义,跳转到自己的HTML页面上
比如我这个项目下有多个HTML文件,我可以从一个跳转到另一个指定的HTML文件下
效果:点击网页会跳转显示20240111.html的内容
在这里插入图片描述

锚点链接

使用锚点链接跳转到当前网页的指定位置,类似目录,点击目录跳转到目录所在段落
对于有很长页面的网页这个东西才有用,可以帮助使用者快速跳转到相应为止开始浏览网页。
或者很多网页的回到顶层按钮也是基于这个吧?

用法:注意不要漏了锚点名前面的 # 号

<div>
	<a href="#锚点名">锚点描述</a>
</div>
</div id="锚点名">
	...
</div>

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

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

相关文章

蓝桥杯单片机进阶教程4——需要分配进程的模块

前言&#xff1a; 【蓝桥杯单片机保姆级教学】 https://www.bilibili.com/video/BV1h3411m7Aw/?p117&share_sourcecopy_web&vd_sourcec4fc67867c5218768e783d04475bc5a2 P117-118 比赛的时候也按照这个顺序来写 一、数码管显示 分析考题 &#xff08;1&#xff09;…

大文件上传切片上传

大文件上传&切片上传 简历中如何写项目经验&技术 切片上传相关面试题 基础实现流程 实现核心&#xff1a;秒传 断点续传 切片 …… 如何实现的 最基本的视图 加上拖拽 加上拖拽事件。监听drop事件&#xff0c;event.dataTransfer.files文件对象。其他dragenter dragove…

odoo17基础培训1-odoo开发基础知识准备以及odoo17开发环境安装

odoo17基础培训 一、odoo开发基础知识准备以及odoo17开发环境安装 1、odoo是什么&#xff1f; 当我介绍客户使用odoo系统作为业务管理平台时&#xff0c;有时会被问到Odoo是什么&#xff1f; 简单点&#xff0c;可以这么说&#xff1a; Odoo是一套完整的系统&#xff0c;是…

Pycharm安装numpy库失败解决办法

一、出现错误&#xff08;以matplotlib为例&#xff09;&#xff1a; 二、解决办法&#xff1a; 方法一&#xff08;失败&#xff09;&#xff1a;PyCharm中有一个安装库的方法是&#xff1a;Settings>>Python Interpreter>>点击右侧的加号 第二个图 失败原因&am…

【开源】基于JAVA语言的固始鹅块销售系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固始鹅块模块2.4 鹅块订单模块2.5 评论管理模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 鹅块类型表3.2.2 鹅块表3.2.3 鹅块订单表3.2.4 鹅块评论表 四、系统展示五、核心代码5.…

x-cmd pkg | jless - 受 Vim 启发的命令行 JSON 查看器

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 jless 是一个命令行 JSON 查看器&#xff0c;设计用于读取、探索和搜索 JSON 数据。可以使用它来替代 less 、 jq 、 cat 以及您当前用于查看 JSON 文件的编辑器的任何组合。它是用 Rust 编写的&#xff0c;可以作为单…

确保CentOS系统中的静态HTTP服务器的数据安全

确保CentOS系统中的静态HTTP服务器的数据安全是一项重要的任务&#xff0c;它有助于保护网站免受未经授权的访问、数据泄露和其他安全威胁。以下是一些关键步骤和最佳实践&#xff0c;以确保CentOS系统中静态HTTP服务器的数据安全&#xff1a; 限制访问权限确保只有授权用户可…

Python爬虫---scrapy shell 调试

Scrapy shell是Scrapy提供的一个交互式shell工具&#xff0c;它可以帮助我们进行爬虫的开发和调试。可以使用它来测试xpath或css表达式&#xff0c;查看它们是如何工作的&#xff0c;以及它们从你试图抓取的网页中提取的数据。它允许你在编写spider时交互地测试表达式&#xff…

JFinal学生信息管理系统

JFinal学生信息管理系统 项目地址&#xff1a;mendianyu/StudentManage: JFinal学生信息管理系统 (github.com) 环境介绍&#xff1a; IDE&#xff1a;IDEA 2021.2.3 jdk:1.8 maven:3.6.3 项目介绍&#xff1a;JFinal框架实现的学生信息管理系统&#xff0c;完成简单的学生信…

MATLAB | 龙年大吉,使用MATLAB绘制会动的中国风神龙

hey各位好久不见&#xff0c;龙年到了&#xff0c;这期画一期配色非常中国风的龙&#xff0c;这个造型的龙参考了某些html绘制龙的视频&#xff0c;但是由于html版全网都是也不咋给代码和代码出处&#xff0c;因此自己写了个MATLAB版本&#xff1a; 可以看到还是非常酷炫的&…

Vulnhub靶机:driftingblues 3

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;driftingblues3&#xff08;10.0.2.19&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entr…

利用C语言实现输出杨辉三角的前10行

杨辉三角的特点 第一列都为1&#xff0c;对角线为1 第x行第x列为1 第几行就有几个元素 从第三行开始,第二列的元素等于第二行的第一列元素第二列元素之和(排除从第三行开始的首和尾元素) //用C语言实现打印出10行杨辉三角 #include<stdio.h>int main(){int a[10][10];//…

膜结构球形影院为观众打造观影新体验

在数字科技快速发展的当下&#xff0c;轻空间公司打破传统影院的束缚&#xff0c;领航未来娱乐体验的创新浪潮。膜结构球形影院问世&#xff0c;它不仅仅是一个娱乐场所&#xff0c;更是一场極致沉浸感的感官之旅&#xff0c;为观众带来震撼性的视听冲击。 沉浸式体验的新纪元 …

【HuggingFace Transformer库学习笔记】基础组件学习:Trainer

基础组件学习——Trainer 导入包 from transformers import AutoTokenizer, AutoModelForSequenceClassification, Trainer, TrainingArguments from datasets import load_dataset加载数据集 dataset load_dataset("csv", data_files"./ChnSentiCorp_htl_al…

【亲测可行】如何申请并登录腾讯云免费服务器

腾讯云免费服务器申请入口 https://curl.qcloud.com/FJhqoVDP 免费服务器可选轻量应用服务器和云服务器CVM&#xff0c;轻量配置可选2核2G3M、2核8G7M和4核8G12M&#xff0c;CVM云服务器可选2核2G3M和2核4G3M配置&#xff0c;腾讯云百科txybk.com分享2024年最新腾讯云免费服务器…

MySQL 基于 GTID 主从复制

GTID 定义 GTID 是 MySQL 事务标识&#xff0c;为每一个提交的事务都生成一个标识&#xff0c;并且是全局唯一的&#xff0c;这个特性是从 MySQL5.6 引进的。 组成 GTID 是由 UUID TID&#xff0c;UUID 是MySQL的唯一标识&#xff0c;每个MySQL实例之间都是不同的。TID是代表…

力扣(leetcode)第500题键盘行(Python)

500.键盘行 题目链接&#xff1a;500.键盘行 给你一个字符串数组 words &#xff0c;只返回可以使用在 美式键盘 同一行的字母打印出来的单词。键盘如下图所示。 美式键盘 中&#xff1a; 第一行由字符 “qwertyuiop” 组成。 第二行由字符 “asdfghjkl” 组成。 第三行由字…

Mybatis实现映射,一次查询和嵌套查询

1.实现映射 Mybatis的最大魅力就在于它的语句映射。实现映射一般有一下三种方法&#xff1a; 当我们在数据库的列名和java中的属性名完全相同时&#xff0c;mybatis会自动映射并将查询结果封装。 对于由多个单词组成的名字时&#xff08;例如studentgender&#xff09;&…

C++ Builder XE关于TDateTime批量加减时间TTimerPiker的设置

void __fastcall TForm3::Button3Click(TObject *Sender) { TDateTime *DT new TDateTime(); //new TDateTime类型变量 *DTTPicker1->Time; //加 1 小时: DT (double)DT 1/24; //加 1 分钟: DT (double)DT 1/(24*60); //加 1 秒钟: DT (double)DT 1/(24*60*60); …

NUS CS1101S:SICP JavaScript 描述:三、模块化、对象和状态

原文&#xff1a;3 Modularity, Objects, and State 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 变化中安宁 &#xff08;即使它在变化&#xff0c;它仍然保持不变。&#xff09; ——赫拉克利特 变化越大&#xff0c;越是相同。 ——阿方斯卡尔 前面的章节介绍了构…