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

<a
  href="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属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。

<a
  href="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
<a
  href="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 类型,比如到底是网页,还是图像或文件。它也是纯粹提示性的属性,没有实际功能。

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

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

2.9 download

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

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

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

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

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

<a
  href="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!

<a
  href="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:邮件内容

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

<a
  href="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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Docker 安装Elasticsearch搜索引擎 搜索优化 词库挂载 拼音分词 插件安装

介绍 允许用户快速索引和搜索大量的文本数据。通过使用倒排索引&#xff0c;它能够在海量数据中高效检索相关信息。提供灵活的查询语言&#xff0c;可以做全文搜索、模糊搜索、数据统计等&#xff0c;用来代替MYSQL的模糊搜索&#xff0c;MYSQL的模糊搜索不支持使用索引从而导…

Scala_【5】函数式编程

第五章 函数式编程函数和方法的区别函数声明函数参数可变参数参数默认值 函数至简原则匿名函数高阶函数函数作为值传递函数作为参数传递函数作为返回值 函数闭包&柯里化函数递归控制抽象惰性函数友情链接 函数式编程 面向对象编程 解决问题时&#xff0c;分解对象&#xff…

jenkins入门7 --发送邮件1

jenkins发送邮件配置&#xff08;全局配置&#xff09;_jenkins 怎么发送邮件-CSDN博客 本文通过163发送邮件 1、首先163设置选择pop3/smtp/imap,开启服务&#xff0c;获取授权码 2、jenkins下载邮件插件 登录Jenkins管理界面&#xff0c;点击“Manage Jenkins”。 选择“Man…

git 常用命令和本地合并解决冲突

目录 一、常用命令 二、本地可视化合并分支解决冲突 一、常用命令 最近&#xff0c;使用mac电脑&#xff0c;无法直接使用小乌龟进行可视化操作&#xff0c;现在记录一些常用命令。 拉取&#xff1a; git clone <git url> 仅拉起某个单独分支&#xff1a; git clo…

彻底学会Gradle插件版本和Gradle版本及对应关系

看完这篇&#xff0c;保你彻底学会Gradle插件版本和Gradle版本及对应关系&#xff0c;超详细超全的对应关系表 需要知道Gradle插件版本和Gradle版本的对应关系&#xff0c;其实就是需要知道Gradle插件版本对应所需的gradle最低版本&#xff0c;详细对应关系如下表格&#xff0…

我的创作纪念日——《惊变128天》

我的创作纪念日——《惊变128天》 机缘收获日常成就憧憬 机缘 时光飞逝&#xff0c;转眼间&#xff0c;我已在这条创作之路上走过了 128 天。回顾起 2024 年 8 月 29 日&#xff0c;我满怀忐忑与期待&#xff0c;撰写了第一篇技术博客《讲解LeetCode第1题&#xff1a;两数之和…

医学图像分析工具02:3D Slicer || 医学影像可视化与分析工具 支持第三方插件

3D Slicer 是一款功能全面的开源医学影像分析软件&#xff0c;广泛应用于影像处理、三维建模、影像配准和手术规划等领域。它支持多种医学影像格式&#xff08;如 DICOM、NIfTI&#xff09;和丰富的插件扩展&#xff0c;是神经科学、放射学和生物医学研究中不可或缺的工具。 在…

【每日学点鸿蒙知识】Hap 安装失败、ArkTS 与C++ 数组转换、渐变遮罩效果等

1、在启动调试或运行应用/服务时&#xff0c;安装HAP出现错误&#xff0c;提示“error: install failed due to older sdk version in the device”错误信息。 这是由于编译打包所使用的SDK版本与设备镜像版本不匹配。不匹配的场景包括&#xff1a; 场景一&#xff1a;设备上…

分布式搜索引擎之elasticsearch基本使用3

分布式搜索引擎之elasticsearch基本使用3 1.部署单点es 1.1.创建网络 因为我们还需要部署kibana容器&#xff0c;因此需要让es和kibana容器互联。这里先创建一个网络&#xff1a; docker network create es-net1.2.加载镜像 这里我们采用elasticsearch的7.12.1版本的镜像&…

在macOS上安装MySQL

macOS的MySQL有多种不同的形式&#xff1a; 1、本机包安装程序&#xff0c;它使用本机macOS安装程序&#xff08;DMG&#xff09;引导您完成MySQL的安装。有关详细信息&#xff0c;请参阅第2.4.2节&#xff0c;“使用本机包在macOS上安装MySQL”。您可以将包安装程序与macOS一…

Apache HTTPD 换行解析漏洞(CVE-2017-15715)

漏洞简介 pache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。其2.4.0~2.4.29版本中存在一个解析漏洞&#xff0c;在解析PHP时&#xff0c;1.php\x0A将被按照PHP后缀进行解析&#xff0c;导致绕过一些服务器的安全策略。 漏洞环境 vulhub/httpd/CVE-2…

jenkins入门4 --window执行execute shell

1、启动关闭jenkins 在Windows环境下&#xff0c;如果你需要关闭Jenkins服务&#xff0c;可以通过以下几种方式&#xff1a; 1、使用Windows服务管理器&#xff1a; 打开“运行”对话框&#xff08;Win R&#xff09;&#xff0c;输入services.msc&#xff0c;然后回车。 在服…

conda安装及demo:SadTalker实现图片+音频生成高质量视频

1.安装conda 下载各个版本地址&#xff1a;https://repo.anaconda.com/archive/ win10版本&#xff1a; Anaconda3-2023.03-1-Windows-x86_64 linux版本&#xff1a; Anaconda3-2023.03-1-Linux-x86_64 Windows安装 环境变量 conda -V2.配置conda镜像源 安装pip conda…

医学图像分析工具01:FreeSurfer || Recon -all 全流程MRI皮质表面重建

FreeSurfer是什么 FreeSurfer 是一个功能强大的神经影像学分析软件包&#xff0c;广泛用于处理和可视化大脑的横断面和纵向研究数据。该软件由马萨诸塞州总医院的Martinos生物医学成像中心的计算神经影像实验室开发&#xff0c;旨在为神经科学研究人员提供一个高效、精确的数据…

vite打包报错“default“ is not exported by “node_modules/dayjs/dayjs.min.js“

vite打包最开始报的错是&#xff1a; 查找各种解决办法后&#xff0c;第一次尝试如下&#xff1a; npm i rollup/plugin-commonjs npm i vite-plugin-require-transform但继续报错&#xff1a; 最后解决办法为&#xff1a; 忽略掉node_modules 在vite.config.ts里修改代码 …

医院管理住院系统的研究与实现

第三章 系统的需求分析和可行性研究 3.1 功能需求 经过对本系统的研究分析&#xff0c;本系统主要是为了方便让医院更快捷的管理。所面向的对象主要有病人、医生和医院的管理人员。病人运用该系统后&#xff0c;可以根据该系统查看自己所需要的信息&#xff0c;包括治疗自己…

安徽省地图arcgis数据美化后mxd文件shp格式下载后内容测评

标题中的“安徽省地图arcgis数据美化后mxd文件shp格式”揭示了这个压缩包的内容是经过GIS处理的、针对安徽省地图数据。ArcGIS是一款由Esri公司开发的专业地理信息系统软件&#xff0c;用于处理、分析和展示地理空间数据。MXD文件是ArcGIS的项目文件&#xff0c;包含了地图布局…

GitLab创建用户,设置访问SSH Key

继上一篇 Linux Red Hat 7.9 Server安装GitLab-CSDN博客 安装好gitlab&#xff0c;启用管理员root账号后&#xff0c;开始创建用户账户 1、创建用户账户 进入管理后台页面 点击 New User 输入用户名、邮箱等必填信息和登录密码 密码最小的8位&#xff0c;不然会不通过 拉到…

计算机网络--根据IP地址和路由表计算下一跳

一、必备知识 1.无分类地址IPV4地址网络前缀主机号 2.每个IPV4地址由32位二进制数组成 3. /15这个地址表示网络前缀有15位&#xff0c;那么主机号32-1517位。 4.地址掩码&#xff08;子网掩码&#xff09;&#xff1a;所对应的网络前缀为1&#xff0c;主机号为0。 5.计算下…

重新整理机器学习和神经网络框架

本篇重新梳理了人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;、神经网络&#xff08;NN&#xff09;和深度学习&#xff08;DL&#xff09;之间存在一定的包含关系&#xff0c;以下是它们的关系及各自内容,以及人工智能领域中深度学习分支对比整理。…