HTML玩转超链接a标签

大家应该都知道,a标签主要是转跳链接,接下来,让我为大家介绍一下a标签的使用!

主要的作用:从当前页面进行跳转

标签名标签语义常用属性单/双标签
a超链接href:要跳转的具体位置
target:跳转时如何打开页面,常用值如下:
_self:在本页签中打开
blank:在新页签中打开

一、跳转页面

代码介绍:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><!-- a标签的简单写法 --><!-- 转跳页面 用百度的链接为大家演示一下 --><a href="http://baidu.com">点击跳转百度</a><!-- 使用target 属性值为_self --><a href="http://baidu.com" target="_self">点击跳转百度_self</a><!-- 使用target 属性值为_blank --><a href="http://baidu.com" target="_blank">点击跳转百度_blank</a>
</body>
</html>

来看下面的GIF动图看看区别在哪
请添加图片描述
这是区别所在

注意点:
1.代码中的多个空格、多个回车,都会被浏览器解析成一个空格!
2.虽然 a 是行内元素,但 a 元素可以包裹除它自身外的任何元素!

扩展一个知识
我们发现我们点完链接,链接变了颜色,我们可以变回原来的颜色吗?
就拿我的双核浏览器举例:
第一步

在这里插入图片描述

第二步
在这里插入图片描述
第三步
请添加图片描述
来看看我们a标签
在这里插入图片描述

二、跳转到锚点

什么是锚点?
网页中的一个标记点

我拿代码为大家演示一下,如果大家复制的时候,千万要注意img标签的路径,可以拿自己有的图片代替

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><a href="#test">我们要看22222的图片</a><a href="#test1">我们要看33333的图片</a><p>11111111111111111111</p><img src="./1.webp" alt=""><!-- 第一种方法 使用name --><a name="test"></a><p>22222222222222222222</p><img src="./2.webp" alt=""><!-- 第二种方法 使用id --><a id="test1"></a><p>33333333333333333333</p><img src="./1.webp" alt=""><a href=""></a><p>44444444444444444444</p><img src="./2.webp" alt=""><br><!-- 回到顶部 --><a href="#">回到顶部</a><br><!-- 刷新页面 --><a href="">刷新页面</a>
</body>
</html>

看下面的GIF
请添加图片描述

注意点:
1.具有 href 属性的 a 标签是超链接,具有 name 属性的 a 标签是锚点
2.name 和 id 都是区分大小写的,且 id 最好别是数字开头

    <!-- 转跳到test1 --><a href="#test1">去test1锚点</a><!-- 跳到本页面顶部 --><a href="#">转跳到顶部</a><!-- 跳转到其他页面锚点 --><a href="index.html#test1">去index.html页面的test1锚点</a><!-- 刷新本页面 --><a href="">刷新页面</a><!-- 执行一段js,如果还不知道执行什么,可以留空,javascript:; --><a href="javascript:alert(1);">点我弹窗</a>

三、唤起指定应用

通过 a 标签,可以唤起设备应用程序
在手机上使用效果更好

    <!-- 唤起设备拨号 --><a href="tel:10086">电话联系</a><!-- 唤起设备发送邮件 --><a href="mailto:10086@qq.com">邮件联系</a><!-- 唤起设备发送短信 --><a href="sms:10086">短信联系</a>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gitlab利用CI多工程持续构建

搭建CI的过程中有多个工程的时候&#xff0c;一个完美的构建过程往往是子工程上的更新(push 或者是merge)触发父工程的构建&#xff0c;这就需要如下建立一个downstream pipeline 子仓库1 .gitlab-ci.yml stages:- buildbuild_job:stage: buildtrigger:project: test_user/tes…

UE5的TimeLine的理解

一直以来&#xff0c;我对动画的理解一直是这样的&#xff1a; 所谓动画&#xff0c;就是可导致可视化内容变化的参数和时间的对应关系。 我不能说这个观点现在过时了&#xff0c;只能说自己狭隘了。因为UE的TimeLine的设计理念真让人竖大拇指。 当我第一次看到TimeLine节点的…

9、鸿蒙应用桌面图标外观和国际化

一、项目资源目录 项目下的resoueces目录为资源配置目录&#xff0c;其中base为基础配置&#xff0c;即在任何语言环境下都会加载的资源&#xff0c; color.json&#xff1a;用于配置颜色&#xff0c;如页面的背景和文字的颜色。 string.json&#xff1a;用于设置文字&#…

RedisTemplate使用详解

RedisTemplate介绍StringRedisTemplate介绍RedisConnectionFactory介绍RedisConnectionFactory源码解析 RedisOperations介绍RedisOperations源码解析 RedisTemplate使用连接池配置RedisTemplate连接池连接池配置 RedisTemplate应用场景RedisTemplate主要特点RedisTemplate使用…

import.meta.glob() 如何导入多个目录下的资源

import.meta.glob() 如何导入多个目录下的资源 刚开始用 vite&#xff0c;在做动态路由的时候遇到了这个问题&#xff0c;看到其它教程上都是只引用了一个目录层级的内容&#xff0c;比如这样&#xff1a; let RouterModules import.meta.glob("/src/view/*/*.vue"…

pytorch中.to(device) 和.cuda()的区别

在PyTorch中&#xff0c;使用GPU加速可以显著提高模型的训练速度。在将数据传递给GPU之前&#xff0c;需要将其转换为GPU可用的格式。 函数原型如下&#xff1a; def cuda(self: T, device: Optional[Union[int, device]] None) -> T:return self._apply(lambda t: t.cuda…

PPT基础入门

目录 相关设置快捷键shift 快捷键Ctrl 快捷键Ctrl Shift 组合快捷键快捷键总结 相关设置 设置撤回次数 自动保存 图片压缩 字体嵌入&#xff1a;目的是在不同的电脑上保留已经设置好的字体 多格式导出 &#xff08;1&#xff09;可以导出PDF &#xff08;2&#xff09;可以导…

电力感知边缘计算网关产品设计方案-业务流程设计

1.工业数据通信流程 工业数据是由仪器仪表、PLC、DCS等工业生产加工设备提供的,通过以太网连接工业边缘计算网关实现实时数据采集。按照现有的通信组网方案,在理想通信状态下可以保证有效获取工业数据的真实性和有效性。 边缘计算数据通信框架图: 2.边缘计算数据处理方案 …

达索系统3DEXPERIENCE云端设计新体验

云是现代生活中必不可少的工具&#xff0c;在云端进行数据传输避免了传统的文件传输方式&#xff0c;更加方便快捷&#xff0c;节约了工作时间。 01 云端平台升级 在日常工作中有什么独特优势 在我们的生活工作中&#xff0c;云越来越多被提起&#xff0c;比如云计算、云服务…

二百零六、Flume——Flume1.9.0单机版部署脚本(附截图)

一、目的 在实际项目部署时&#xff0c;要实现易部署易维护&#xff0c;需要把安装步骤变成安装脚本实现快速部署 二、部署脚本在Linux中文件位置 文件夹中只有脚本文件flume-install.sh和tar包apache-flume-1.9.0-bin.tar.gz 三、Flume安装脚本 #!/bin/bash #获取服务器名…

Django与Ajax

Ajax是什么 Ajax是一种用于创建交互式Web应用程序的技术。它是Asynchronous JavaScript and XML的缩写&#xff0c;意思是使用JavaScript和XML进行异步数据交换。通过Ajax技术&#xff0c;可以在不刷新整个页面的情况下更新页面的某个部分或者获取服务器数据&#xff0c;并能够…

nrm的安装以及使用

1&#xff0c;什么是nrm nrm 是一个 npm 源管理器&#xff0c;允许你快速地在 npm源间切换。 什么意思呢&#xff0c;npm默认情况下是使用npm官方源&#xff08;使用npm config ls命令可以查看&#xff09;&#xff0c;在国内用这个源肯定是不靠谱的&#xff0c;一般我们都会…

logic-flow 使用过程中遇到的bug - 拖动节点到画布的时候,鼠标松开,节点不落在画布,仍旧跟着鼠标走

背景&#xff1a; 插件&#xff1a;logicFlow 用途&#xff1a;画流程图 bug表现&#xff1a; 初始化的样子&#xff1a; bug的样子&#xff1a; 拖动第一个节点的时候&#xff0c;一切正常&#xff08;无论哪个节点作为第一个节点&#xff0c;都是正常的&#xff0c;但是拖动…

Java如何获取泛型类型

泛型&#xff08;Generic&#xff09; 泛型允许程序员在强类型程序设计语言中编写代码时使用一些以后才指定的类型&#xff0c;在实例化时作为参数指明这些类型。各种程序设计语言和其编译器、运行环境对泛型的支持均不一样。Ada、Delphi、Eiffel、Java、C#、F#、Swift 和 Vis…

【DevOps】Git 图文详解(六):Git 利器 - 分支

Git 利器 - 分支 1.分支 Branch2.分支指令 &#x1f525;3.分支的切换 checkout4.合并 merge & 冲突4.1 &#x1f538; 快速合并&#xff08;Fast forward&#xff09;4.2 &#x1f538; 普通合并4.3 处理冲突 <<<<<<< HEAD 5.变基 rebase 分支是从主…

【前端学java】复习巩固-Java中的对象比较(14)

往期回顾&#xff1a; 【前端学java】JAVA开发的依赖安装与环境配置 &#xff08;0&#xff09;【前端学 java】java的基础语法&#xff08;1&#xff09;【前端学java】JAVA中的packge与import&#xff08;2&#xff09;【前端学java】面向对象编程基础-类的使用 &#xff08…

2017年全国硕士研究生入学统一考试管理类专业学位联考数学试题——解析版

文章目录 2017 级考研管理类联考数学真题解析一、问题求解&#xff08;本大题共 5 小题&#xff0c;每小题 3 分&#xff0c;共 45 分&#xff09;下列每题给出 5 个选项中&#xff0c;只有一个是符合要求的&#xff0c;请在答题卡上将所选择的字母涂黑。真题&#xff08;2017-…

No appropriate protocol -- Mysql

DataGrip连接mysql报以下异常信息&#xff1a; javax.net.ssl.SSLHandshakeException: No appropriate protocol (protocol is disabled or cipher suites are inappropriate) The following required algorithms might be disabled: SSLv3, TLSv1, TLSv1.1, RC4, DES, MD5wi…

Node.js环境配置级安装vue-cli脚手架

一、下载安装Node.js (略) 二、验证node.js并配置 1、下载安装后&#xff0c;cmd面板输入node -v查询版本、npm -v ,查看npm是否安装成功&#xff08;有版本号就行了&#xff09; 2、选择npm镜像&#xff08;npm config set registry https://registry.npm.taobao.org&…

Docker发布简单springboot项目

Docker发布简单springboot项目 在IDEA工具中直接编写Dockerfile文件 FROM java:8COPY *.jar /app.jarCMD ["--server.prot 8080"]EXPOSE 8080ENTRYPOINT ["java", "-jar", "/app.jar"]将项目打包成对应的jar包&#xff0c;将Dockerf…