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.mzph.cn/news/160674.shtml

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

相关文章

第一百七十七回 如何创建垂直方向的Switch

文章目录 1. 概念介绍2. 思路与方法2.1 实现思路2.2 实现方法3. 示例代码4. 内容总结我们在上一章回中介绍了"如何创建渐变色边角"相关的内容,本章回中将介绍" 如何创建垂直方向的Switch".闲话休提,让我们一起Talk Flutter吧。 1. 概念介绍 我们在前面…

zookeeper单机版的搭建

一 zookeeper的搭建 1.1 上传zkjar包 1.2 搭建配置 1.解压压缩包 [rootlocalhost export]# tar -zxvf zookeeper-3.7.0-bin.tar.gz 2.创建data文件夹 [rootlocalhost export]# cd apache-zookeeper-3.7.0-bin/ [rootlocalhost apache-zookeeper-3.7.0-bin]# ls bin conf…

利用人工智能打破应试教育惯性促进学生思维活化与创新能力培养的研究

全文均为人工智能独立研究完成 应试教育导致学生迷信标准答案惯性导致思维僵化-移动机器人-CSDN博客 用AI魔法打败AI魔法-CSDN博客 课题名称建议&#xff1a;“利用人工智能打破应试教育惯性&#xff0c;促进学生思维活化与创新能力培养研究”。 这个课题名称明确指出了研究的…

高斯消元(完全主元法 and 部分主元法) C++代码

部分主元法高斯消元 /* 算法步骤&#xff1a;1.枚举每一列&#xff0c;找到绝对值最大的一行2.将该行和第一行交换3.将该行行首置为一4.将下面所有行第 i 列置为零 */#include <iostream> #include <cmath>using namespace std; const int N 109; const double e…

Linux内核的内存管理

Linux内核源码内存管理主要包括以下几个部分&#xff1a; 1. 物理内存管理&#xff1a;这部分主要负责将物理内存划分为不同的页表项&#xff0c;以便操作系统能够快速地访问和操作内存。 2. 虚拟内存管理&#xff1a;这部分主要负责将用户空间的地址映射到物理内存中&#x…

linux之进程地址空间

文章目录 1.进程地址空间回顾1.1进程地址空间划分1.2验证进程地址空间划分1.简单划分2.完整划分 2.初探进程地址空间2.1初看现象2.2Makefile的简便写法 3.进程地址空间详解3.1地址空间是什么?3.2地址空间的设计/由来3.3空间区域划分3.4如何理解地址空间?3.5解释3.2的&#x1…

警惕.locked勒索病毒,您需要知道的预防和恢复方法。

尊敬的读者&#xff1a; 随着网络技术的进步&#xff0c;勒索病毒已经成为一种极具威胁性的网络犯罪工具之一。其中&#xff0c;.locked勒索病毒是一种采用高级加密算法的恶意软件&#xff0c;目的是加密用户的文件&#xff0c;并勒索赎金以提供解密密钥。本文将介绍如何应对被…

解决No Feign Client for loadBalancing defined,修改Maven依赖

Spring微服务报错&#xff1a; java.lang.IllegalStateException:FactoryBean threw exception on object creation; nested exception is java.lang.IllegalStateException: No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-netf…

你不知道的库:库的种类,作用和加载方式

你不知道的库&#xff1a;库的种类&#xff0c;作用和加载方式 &#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;Linux &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客…

组件化——组件的实现原理

渲染器主要负责将虚拟 DOM 渲染为真实 DOM&#xff0c;我们只需要使用虚拟 DOM 来描述最终呈现的内容即可。但当我们编写比较复杂的页面时&#xff0c;用来描述页面结构的虚拟 DOM 的代码量会变得越来越多&#xff0c;或者说页面模板会变得越来越大。这时&#xff0c;我们就需要…

iperf3 网络测试

iperf3 测试网络的上下行带宽 下载地址 https://iperf.fr/iperf-download.php 开启服务器 开启客户端 常用命令 -c 代表客户端-s 代表服务端-u 代表 udp-r 代表数据方向是否反向 https://baijiahao.baidu.com/s?id1731514357681464971&wfrspider&forpc

C++学习 --queue

目录 1&#xff0c; 什么是queue 2&#xff0c; 创建queue 2-1&#xff0c; 标准数据类型 2-2&#xff0c; 自定义数据类型 2-3&#xff0c; 其他创建方式 3&#xff0c; 操作stack 3-1&#xff0c; 赋值 3-2&#xff0c; 插入元素(push) 3-3&#xff0c; 查询元素 3…

Python简直是万能的,这5大主要用途你一定要知道!

从2015开始国内就开始慢慢接触Python了&#xff0c;从16年开始Python就已经在国内的热度更高了&#xff0c;目前也可以算的上"全民Python"了。 众所周知小学生的教材里面已经有Python了&#xff0c;国家二级计算机证也需要学习Python了&#xff01; 因为Python简单…

编程语言发展史:布尔代数和机器语言

布尔代数是一种数学理论&#xff0c;用于描述和分析逻辑和布尔值的关系。它是由英国数学家George Boole在19世纪中期发明的&#xff0c;被认为是现代计算机科学的基础之一。布尔代数的发明使得逻辑运算可以被表示为代数运算&#xff0c;从而为计算机科学的发展奠定了基础。 在…

PTA 7-4 数列求和-加强版

7-4 数列求和-加强版 分数 20 全屏浏览题目 作者 DS课程组 单位 浙江大学 给定某数字A&#xff08;1≤A≤9&#xff09;以及非负整数N&#xff08;0≤N≤100000&#xff09;&#xff0c;求数列之和SAAAAAA⋯AA⋯A&#xff08;N个A&#xff09;。例如A1, N3时&#xff0c;S1…

Unity、UE和Godot的优劣对比

先占位。。。。。。 首先说Unity和UE这两家公司&#xff0c;是行业的两座灯塔&#xff0c;对整个游戏引擎的这个行业的发展具有这种指导性的这种作作用。这两个引擎我从2016年开始就一直在用&#xff0c;结合一下业内的共识&#xff0c;一般来说认为呢&#xff0c;Unity更擅长移…

2023全球边缘计算大会深圳站-核心PPT资料下载

一、峰会简介 边缘计算&#xff0c;是指在靠近物或数据源头的一侧&#xff0c;采用网络、计算、存储、应用核心能力为一体的开放平台&#xff0c;就近提供最近端服务。其应用程序在边缘侧发起&#xff0c;产生更快的网络服务响应&#xff0c;满足行业在实时业务、应用智能、安…

LeetCode算法题解(动态规划,背包问题)|LeetCode416. 分割等和子集

LeetCode416. 分割等和子集 题目链接&#xff1a;416. 分割等和子集 题目描述&#xff1a; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,…

Linux中的进程程序替换

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

[Docker]九.Docker compose讲解

docker-compose 是 docker 官方的一个开源项目&#xff0c;可以实现对 docker 容器集群的快速编排, docker-compose 通过一个 配置文件 来管理多个 Docker 容器,在配置文件中&#xff0c;所有的容器通过 services 来定义&#xff0c;然后使用 docker-compose脚本 来 启动&am…