HTML - <a>

目录

1.简介

2.属性

2.1 href

2.2 hreflang

2.3 title

2.4 target

2.5 rel

2.6 referrerpolicy

2.7 ping

2.8 type

2.9 download

3.邮件链接

4.电话链接


1.简介

链接(hyperlink)是互联网的核心。它允许用户在页面上,从一个网址跳转到另一个网址,从而把所有资源联系在一起。

<a>标签就代表一个可以跳转的链接。它不仅可以跳转到其他页面,也可以跳转到文本、图像、文件等资源,甚至当前页面的某个位置。可以这样说,所有互联网上的资源,都可以通过<a>访问。

下面就是一个典型的链接。

<a href="https://wikipedia.org/">维基百科</a>

上面代码就定义了一个超级链接。浏览器显示“维基百科”,文字下面默认会有下划线,表示这是一个链接。用户点击后,浏览器跳转到href属性指定的网址。

<a>标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。

<a href="https://www.example.com/"><img src="https://www.example.com/foo.jpg">
</a>

上面代码中,<a>标签内部就是一个图像。用户点击图像,就会跳转到指定网址。

2.属性

<a>标签有如下属性。

2.1 href

href属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。

上文已经给出了完整 URL 的例子,下面是锚点的例子。

<a href="#demo">示例</a>

上面代码中,href属性的值是#加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面demo锚点所在的位置。

2.2 hreflang

hreflang属性给出链接指向的网址所使用的语言,纯粹是提示性的,没有实际功能,主要供搜索引擎使用。

<ahref="https://www.example.com"hreflang="en"
>示例网址</a>

上面代码表明,href属性指向的网址的语言是英语。

如果某个资源有多种语言的不同版本,可以将hreflang设为x-default,表示哪一个链接是默认版本。

<a href="https://example.com" hreflang="x-default">English</a>
<a href="https://example.com/de" hreflang="de">German</a>

上面示例中,hreflang设为x-defalut表示该链接为默认版本。

hreflang属性所用的语言代码,跟通用的lang属性一样,可以参考《属性》一章的lang属性的介绍。

2.3 title

title属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。

<ahref="https://www.example.com/"title="hello"
>示例</a>。

上面代码中,用户鼠标停留在链接上面,会出现文字提示hello

2.4 target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开,也可以在<iframe>里面打开。

<p><a href="http://foo.com" target="test">foo</a></p>
<p><a href="http://bar.com" target="test">bar</a></p>

上面代码中,两个链接都在名叫test的窗口打开。首先点击链接foo,浏览器发现没有叫做test的窗口,就新建一个窗口,起名为test,在该窗口打开foo.com。然后,用户又点击链接bar,由于已经存在test窗口,浏览器就在该窗口打开bar.com,取代里面已经打开的foo.com

target属性的值也可以是以下四个关键字之一。

  • _self:当前窗口打开,这是默认值。
  • _blank:新窗口打开。
  • _parent:上层窗口打开,这通常用于从父窗口打开的子窗口,或者<iframe>里面的链接。如果当前窗口没有上层窗口,这个值等同于_self
  • _top:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于_self
<ahref="https://www.example.com"target="_blank"
>示例链接</a>

上面代码点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字。

注意,使用target属性的时候,最好跟rel="noreferrer"一起使用,这样可以避免安全风险。

2.5 rel

rel属性说明链接与当前页面的关系。

<a href="help.html" rel="help">帮助</a>

上面代码的rel属性,说明链接是当前页面的帮助文档。

下面是一些常见的rel属性的值。

  • alternate:当前文档的另一种形式,比如翻译。
  • author:作者链接。
  • bookmark:用作书签的永久地址。
  • external:当前文档的外部参考文档。
  • help:帮助链接。
  • license:许可证链接。
  • next:系列文档的下一篇。
  • nofollow:告诉搜索引擎忽略该链接,主要用于用户提交的内容,防止有人企图通过添加链接,提高该链接的搜索排名。
  • noreferrer:告诉浏览器打开链接时,不要将当前网址作为 HTTP 头信息的Referer字段发送出去,这样可以隐藏点击的来源。
  • noopener:告诉浏览器打开链接时,不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口,这样就提高了安全性。
  • prev:系列文档的上一篇。
  • search:文档的搜索链接。
  • tag:文档的标签链接。

2.6 referrerpolicy

referrerpolicy属性用于精确设定点击链接时,浏览器发送 HTTP 头信息的Referer字段的行为。

该属性可以取下面八个值:no-referrerno-referrer-when-downgradeoriginorigin-when-cross-originunsafe-urlsame-originstrict-originstrict-origin-when-cross-origin

其中,no-referrer表示不发送Referer字段,same-origin表示同源时才发送Referer字段,origin表示只发送源信息(协议+域名+端口)。其他几项的解释,请查阅 HTTP 文档。

2.7 ping

ping属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。

<a href="http://localhost:3000/other" ping="http://localhost:3000/log">Go to Other Page
</a>

上面示例中,用户点击链接时,除了发生跳转,还会向http://localhost:3000/log发送一个 POST 请求。服务端收到这个请求以后,就会知道用户点击了这个链接。

这个请求的 HTTP 标头,包含了ping-from属性(点击行为发生的页面)和ping-to属性(href属性所指向的页面)。

headers: {'ping-from': 'http://localhost:3000/','ping-to': 'http://localhost:3000/other''content-type': 'text/ping'// ...other headers
},

注意,ping属性只对链接有效,对其他的交互行为无效,比如按钮点击或表单提交。另外,Firefox 浏览器不支持该属性。并且,也无法让它发送任何的自定义数据。

2.8 type

type属性给出链接 URL 的 MIME 类型,比如到底是网页,还是图像或文件。它也是纯粹提示性的属性,没有实际功能。

<ahref="smile.jpg"type="image/jpeg"
>示例图片</a>

上面代码中,type属性提示这是一张图片。

2.9 download

download属性表明当前链接用于下载,而不是跳转到另一个 URL。

<a href="demo.txt" download>下载</a>

上面代码点击后,会出现下载对话框。

注意,download属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。

如果download属性设置了值,那么这个值就是下载的文件名。

<ahref="foo.exe"download="bar.exe"
>点击下载</a>

上面代码中,下载文件的原始文件名是foo.exe。点击后,下载对话框提示的文件名是bar.exe

注意,如果链接点击后,服务器的 HTTP 回应的头信息设置了Content-Disposition字段,并且该字段的值与download属性不一致,那么该字段优先,下载时将显示其设置的文件名。

download属性还有一个用途,就是有些地址不是真实网址,而是数据网址,比如data:开头的网址。这时,download属性可以为虚拟网址指定下载的文件名。

<a href="data:,Hello%2C%20World!">点击</a>

上面链接点击后,会打开一个虚拟网页,上面显示Hello World!

<ahref="data:,Hello%2C%20World!"download="hello.txt"
>点击</a>

上面链接点击后,下载的hello.txt文件内容就是“Hello, World!”。

3.邮件链接

链接也可以指向一个邮件地址,使用mailto协议。用户点击后,浏览器会打开本机默认的邮件程序,让用户向指定的地址发送邮件。

<a href="mailto:contact@example.com">联系我们</a>

上面代码中,链接就指向邮件地址。点击后,浏览器会打开一个邮件地址,让你可以向contact@example.com发送邮件。

除了邮箱,邮件协议还允许指定其他几个邮件要素。

  • subject:主题
  • cc:抄送
  • bcc:密送
  • body:邮件内容

使用方法是将这些邮件要素,以查询字符串的方式,附加在邮箱地址后面。

<ahref="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body"
>发送邮件</a>

上面代码中,邮件链接里面不仅包含了邮箱地址,还包含了ccsubjectbody等邮件要素。这些要素的值需要经过 URL 转义,比如空格转成%20

不指定邮箱也是允许的,就像下面这样。这时用户自己在邮件程序里面,填写想要发送的邮箱,通常用于邮件分享网页。

<a href="mailto:">告诉朋友</a>

4.电话链接

如果是手机浏览的页面,还可以使用tel协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。

<a href="tel:13312345678">13312345678</a>

上面代码在手机中,点击链接会唤起拨号界面,可以直接拨打指定号码。

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

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

相关文章

新年到了!使用Python创建一个简易的接金元宝游戏

引言 在本教程中&#xff0c;我们将一起学习如何使用Python编程语言和Pygame库来创建一个简单的休闲游戏——“接金元宝”。 准备工作 首先&#xff0c;确保你的计算机上已经安装了Python&#xff08;推荐3.6以上版本&#xff09;和Pygame库。如果还没有安装Pygame&#xff0…

GoF23种设计模式 简介

文章目录 面向对象(OO)设计原则&#xff08;7&#xff09;单一职责原则开闭原则里氏代换原则依赖倒转原则接口隔离原则合成复用原则迪米特法则 创建型模式 &#xff08;5&#xff09;工厂方法模式 &#xff08;类模式&#xff0c;其余都是对象模式&#xff09;抽象工厂模式建造…

【数电尾灯设计】2022-8-16

缘由数电尾灯设计问题&#xff0c;求解答--CSDN问答 从题目可以列出 000 100 010 111-----------4进制 000 100 010 110 001 101 011 111-----------8进制 由列出可知用16进制芯片的3个引脚可以获得8进制推导出4进制从而可用逻辑处理为4进制实现尾灯功能。之上第一步实现了尾灯…

在线机考|2024华为实习秋招春招编程题(最新)——第3题_个性化歌单推荐系统_300分(十一)

题目内容 假设你是音乐服务的开发者,为了提高用户体验需要解决推荐歌单的同质化问题,保证推荐给用户的所有歌单不包含相同歌曲的。给定一个包含N个歌单和M条歌单重复记录,每个歌单用一个从1到N的整数编号,歌单重复记录包含两个歌单的ID,表示两个歌单有相同的歌曲。 你的任…

Ant Design Pro写项目的总结经验(react)

配置代理&#xff08;proxy&#xff09; 在config文件夹下面的config.ts里面配置修改 修改前&#xff1a;修改后&#xff1a; 修改账号框以及登录接口以及登录返回的code 由于它的账号框是username,但是我们接口请求要填写的是account&#xff0c;因此可以全局搜索进行替换…

安卓14无法安装应用解决历程

客户手机基本情况&#xff1a; 安卓14&#xff0c;对应的 targetSdkVersion 34 前天遇到了安卓14适配问题&#xff0c;客户发来的截图是这样的 描述&#xff1a;无法安装我们公司的B应用。 型号&#xff1a;三星google美版 解决步骤&#xff1a; 1、寻找其他安卓14手机测试…

51单片机(二)中断系统与外部中断实验

中断即单片机因为某些原因E暂定现在的工作P0&#xff0c;转去做其他的工作P1&#xff0c;完了之后继续之前的事P0&#xff0c;其他工作P1就是中断程序&#xff0c;原因E就是中断事件&#xff0c;原因由外部发生&#xff0c;程序不能预测到的是硬中断&#xff0c;可以由程度触发…

66.基于SpringBoot + Vue实现的前后端分离-律师事务所案件管理系统(项目 + 论文)

项目介绍 传统办法管理信息首先需要花费的时间比较多&#xff0c;其次数据出错率比较高&#xff0c;而且对错误的数据进行更改也比较困难&#xff0c;最后&#xff0c;检索数据费事费力。因此&#xff0c;在计算机上安装律师事务所案件管理系统软件来发挥其高效地信息处理的作用…

大数据组件(三)快速入门实时计算平台Dinky

大数据组件(三)快速入门实时计算平台Dinky Dinky 是一个开箱即用的一站式实时计算平台&#xff08;同样&#xff0c;还有StreamPark&#xff09;&#xff0c;以 Apache Flink 为基础&#xff0c;连接数据湖仓等众多框架&#xff0c;致力于流批一体和湖仓一体的建设与实践。 Di…

实际开发中,常见pdf|word|excel等文件的预览和下载

实际开发中,常见pdf|word|excel等文件的预览和下载 背景相关类型数据之间的转换1、File转Blob2、File转ArrayBuffer3、Blob转ArrayBuffer4、Blob转File5、ArrayBuffer转Blob6、ArrayBuffer转File 根据Blob/File类型生成可预览的Base64地址基于Blob类型的各种文件的下载各种类型…

《Vue3实战教程》19:Vue3组件 v-model

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 组件 v-model​ 基本用法​ v-model 可以在组件上使用以实现双向绑定。 从 Vue 3.4 开始&#xff0c;推荐的实现方式是使用 defineModel() 宏&#xff1a; vue <!-- Child.vue --> <script setup> co…

源代码编译安装X11及相关库、vim,配置vim(1)

一、目录结构 如下。 所有X11及相关库装到mybuild&#xff0c;源代码下载到src下&#xff0c;解压&#xff0c;进入&#xff0c;编译安装。编译时指定--prefix到相同的目录&#xff0c;即上图中mybuild。 ./configure --prefixpwd/../../mybuild [CFLAGS"-I/path/to/X11…

图漾相机基础操作

1.客户端概述 1.1 简介 PercipioViewer是图漾基于Percipio Camport SDK开发的一款看图软件&#xff0c;可实时预览相机输出的深度图、彩色图、IR红外图和点云图,并保存对应数据&#xff0c;还支持查看设备基础信息&#xff0c;在线修改gain、曝光等各种调节相机成像的参数功能…

vulnhub靶场-potato(至获取shell)

arp-scan -l 扫描IP 使用御剑端口扫描扫描端口&#xff0c;扫到了80和7120两个端口&#xff0c;其中7120为ssh端口 使用dirb http://192.168.171.134 扫描目录 发现info.php 访问为phpinfo界面 访问192.168.171.134为一个大土豆&#xff0c;没什么用 所以我们从ssh入手 盲…

谈一谈对事件循环的理解

事件循环⼜叫做消息循环&#xff0c;是浏览器渲染主线程的⼯作⽅式。特别是在JavaScript和Node.js等异步编程环境中&#xff0c;也是核心概念之一。它的主要作用是管理异步操作&#xff0c;确保代码的执行顺序和效率。 并且这个话题很有可能是一个面试题。我先把参考答案放下面…

kafka使用以及基于zookeeper集群搭建集群环境

一、环境介绍 zookeeper下载地址&#xff1a;https://zookeeper.apache.org/releases.html kafka下载地址&#xff1a;https://kafka.apache.org/downloads 192.168.142.129 apache-zookeeper-3.8.4-bin.tar.gz kafka_2.13-3.6.0.tgz 192.168.142.130 apache-zookee…

解决 IntelliJ IDEA 中 Tomcat 日志乱码问题的详细指南

目录 前言1. 分析问题原因2. 解决方案 2.1 修改 IntelliJ IDEA 的 JVM 选项2.2 配置 Tomcat 实例的 VM 选项 2.2.1 设置 Tomcat 的 VM 选项2.2.2 添加环境变量 3. 进一步优化 3.1 修改 Tomcat 的 logging.properties3.2 修改操作系统默认编码 3.2.1 Windows 系统3.2.2 Linux …

067B-基于R语言平台Biomod2模型的物种分布建模与数据可视化-高阶课程【2025】

课程培训包含&#xff1a;发票全套软件脚本学习数据视频文件导师答疑 本教程旨在通过系统的培训学习&#xff0c;学员可以掌握Biomod2模型最新版本的使用方法&#xff0c;最新版包含12个模型&#xff08;ANN, CTA, FDA, GAM, GBM, GLM, MARS, MAXENT, MAXNET, RF, SRE, XGBOOST…

【论文复现】改进麻雀搜索算法优化冷水机组的最优负载调配问题

目录 1.摘要2.麻雀搜索算法SSA原理3.改进策略4.结果展示5.参考文献6.代码获取 1.摘要 为了应对暖通空调&#xff08;HVAC&#xff09;系统由于不当负荷分配导致的高能源消耗问题&#xff0c;本文提出了一种改进麻雀搜索算法&#xff08;ISSA&#xff09;。ISSA算法旨在在满足负…

Java实现下载excel模板,并实现自定义下拉框

GetMapping("excel/download")ApiOperation(value "模板下载")public void getUserRecordTemplate(HttpServletResponse response, HttpServletRequest request) throws IOException {OutputStream outputStream response.getOutputStream();InputStream…