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.hqwc.cn/news/207806.html

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

相关文章

Spark的通用运行流程与Spark YARN Cluster 模式的运行流程

Spark的通用运行流程 集群启动后Worker节点会向Master节点心跳汇报资源Client向Driver提交APP&#xff0c;根据不同的运行模式在不同的地方创建Driver。Driver以粗粒度的方式向Master注册应用并申请资源&#xff08;在Application执行之前&#xff0c;将所有的资源申请完毕&…

[操作系统]进程和线程

目录 1.什么是进程 1.1进程控制块抽象 1.2 CPU 分配 —— 进程调度&#xff08;Process Scheduling&#xff09; 1.3内存分配 —— 内存管理&#xff08;Memory Manage&#xff09; 1.4进程间通信(Inter Process Communication) 2.线程 2.1概念 2.2为什么要有线程 2.3线…

阿里巴巴国际站自养号测评方式提升星级的优势与要求

作为国际站的商家&#xff0c;都明白星等级这个重要指标的重要性。它像一块闪耀的招牌&#xff0c;不仅彰显了商家的运营能力&#xff0c;还体现了公司的实力。维护一个高等级的星等级&#xff0c;可以使商家的运营工作更加轻松&#xff0c;而低等级则需要花费更多的精力。提升…

TikTok Shop订单狂涨,黑五全托管品类日卖爆了

01 黑五品类日爆单 显然&#xff0c;TikTok Shop在美国的首个黑五大促收获了胜利的果实。 根据最新发布的数据&#xff0c;TikTok Shop全托管黑五六大品类日支付GMV&#xff08;总交易额&#xff09;和支付量双双实现大幅度增长。举其中几个具体数据来看&#xff0c;女装童鞋…

redis运维(十五) 集合

一 集合 ① 概念 集合的元素在redis里面的世界是member集合&#xff1a; setset集合当中不允许重复的元素&#xff0c;而且set集合当中元素是没有顺序的,不存在元素下标 ② sadd、smembers、srem ③ sismember、srandmember、spop、scard spop 命令用于移除集合中的指定 …

【Django-DRF】多年md笔记第5篇:Django-DRF的Request、Response和视图详解

本文从分析现在流行的前后端分离Web应用模式说起&#xff0c;然后介绍如何设计REST API&#xff0c;通过使用Django来实现一个REST API为例&#xff0c;明确后端开发REST API要做的最核心工作&#xff0c;然后介绍Django REST framework能帮助我们简化开发REST API的工作。 Dj…

人工智能基础部分22-几种卷积神经网络结构的介绍,并用pytorch框架搭建模型

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能基础部分22-几种卷积神经网络结构的介绍&#xff0c;本篇文章我将给大家详细介绍VGG16、VGG19、ResNet、SENet、MobileNet这几个卷积神经网络结构&#xff0c;以及pytorch搭建代码&#xff0c;利用通用数据…

【tomcat】java.lang.Exception: Socket bind failed: [730048

项目中一些旧工程运行情况处理 问题 1、启动端口占用 2、打印编码乱码 ʮһ&#xfffd;&#xfffd; 13, 2023 9:33:26 &#xfffd;&#xfffd;&#xfffd;&#xfffd; org.apache.coyote.AbstractProtocol init &#xfffd;&#xfffd;&#xfffd;&#xfffd;: Fa…

基于python人脸性别年龄检测系统-深度学习项目

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介简介技术组成1. OpenCV2. Dlib3. TensorFlow 和 Keras 功能流程 二、功能三、系统四. 总结 一项目简介 # Python 人脸性别年龄检测系统介绍 简介 该系统基…

Android : ListView + BaseAdapter-2简单应用

​​容器与适配器&#xff1a;​​​​​ http://t.csdnimg.cn/ZfAJ7 实体类 News.java package com.example.mylistviewadapter2.entity;public class News {private String title;private String content;private int img;public News(String title, String conte…

Linux中的进程程序替换

Linux中的进程程序替换 1. 替换原理2. 替换函数3. 函数解释4. 命名理解程序替换的意义 1. 替换原理 替换原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec函数以执行另一个程序。当进程调用一种exec函数时,该进程的…

智慧法院档案数字化解决方案

智慧法院档案数字化解决方案可以采用以下步骤&#xff1a; 1. 确定数字化目标&#xff1a;明确数字化的目标和范围&#xff0c;比如将所有的案件相关文件、纸质档案和材料进行数字化。 2. 确定数字化流程&#xff1a;制定数字化的流程和标准&#xff0c;比如采用哪些设备和软件…