网站托管如何收费,做淘客网站简单吗,建设企业网站个人网银,网站制作公司小邓目录
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.简介
链接#xff08;hyperlink#xff09;是互联网的核心。它允许用户在页面上#xff0c;从一个网址…目录
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 hrefhttps://wikipedia.org/维基百科/a上面代码就定义了一个超级链接。浏览器显示“维基百科”文字下面默认会有下划线表示这是一个链接。用户点击后浏览器跳转到href属性指定的网址。
a标签内部不仅可以放置文字也可以放置其他元素比如段落、图像、多媒体等等。
a hrefhttps://www.example.com/img srchttps://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属性给出链接指向的网址所使用的语言纯粹是提示性的没有实际功能主要供搜索引擎使用。
ahrefhttps://www.example.comhreflangen
示例网址/a上面代码表明href属性指向的网址的语言是英语。
如果某个资源有多种语言的不同版本可以将hreflang设为x-default表示哪一个链接是默认版本。
a hrefhttps://example.com hreflangx-defaultEnglish/a
a hrefhttps://example.com/de hreflangdeGerman/a上面示例中hreflang设为x-defalut表示该链接为默认版本。
hreflang属性所用的语言代码跟通用的lang属性一样可以参考《属性》一章的lang属性的介绍。
2.3 title
title属性给出链接的说明信息。鼠标悬停在链接上方时浏览器会将这个属性的值以提示块的形式显示出来。
ahrefhttps://www.example.com/titlehello
示例/a。上面代码中用户鼠标停留在链接上面会出现文字提示hello。
2.4 target
target属性指定如何展示打开的链接。它可以是在指定的窗口打开也可以在iframe里面打开。
pa hrefhttp://foo.com targettestfoo/a/p
pa hrefhttp://bar.com targettestbar/a/p上面代码中两个链接都在名叫test的窗口打开。首先点击链接foo浏览器发现没有叫做test的窗口就新建一个窗口起名为test在该窗口打开foo.com。然后用户又点击链接bar由于已经存在test窗口浏览器就在该窗口打开bar.com取代里面已经打开的foo.com。
target属性的值也可以是以下四个关键字之一。
_self当前窗口打开这是默认值。_blank新窗口打开。_parent上层窗口打开这通常用于从父窗口打开的子窗口或者iframe里面的链接。如果当前窗口没有上层窗口这个值等同于_self。_top顶层窗口打开。如果当前窗口就是顶层窗口这个值等同于_self。
ahrefhttps://www.example.comtarget_blank
示例链接/a上面代码点击后浏览器会新建一个窗口在该窗口打开链接并且新窗口没有名字。
注意使用target属性的时候最好跟relnoreferrer一起使用这样可以避免安全风险。
2.5 rel
rel属性说明链接与当前页面的关系。
a hrefhelp.html relhelp帮助/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-referrer、no-referrer-when-downgrade、origin、origin-when-cross-origin、unsafe-url、same-origin、strict-origin、strict-origin-when-cross-origin。
其中no-referrer表示不发送Referer字段same-origin表示同源时才发送Referer字段origin表示只发送源信息协议域名端口。其他几项的解释请查阅 HTTP 文档。
2.7 ping
ping属性指定一个网址用户点击的时候会向该网址发出一个 POST 请求通常用于跟踪用户的行为。
a hrefhttp://localhost:3000/other pinghttp://localhost:3000/logGo 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/othercontent-type: text/ping// ...other headers
},注意ping属性只对链接有效对其他的交互行为无效比如按钮点击或表单提交。另外Firefox 浏览器不支持该属性。并且也无法让它发送任何的自定义数据。
2.8 type
type属性给出链接 URL 的 MIME 类型比如到底是网页还是图像或文件。它也是纯粹提示性的属性没有实际功能。
ahrefsmile.jpgtypeimage/jpeg
示例图片/a上面代码中type属性提示这是一张图片。
2.9 download
download属性表明当前链接用于下载而不是跳转到另一个 URL。
a hrefdemo.txt download下载/a上面代码点击后会出现下载对话框。
注意download属性只在链接与网址同源时才会生效。也就是说链接应该与网址属于同一个网站。
如果download属性设置了值那么这个值就是下载的文件名。
ahreffoo.exedownloadbar.exe
点击下载/a上面代码中下载文件的原始文件名是foo.exe。点击后下载对话框提示的文件名是bar.exe。
注意如果链接点击后服务器的 HTTP 回应的头信息设置了Content-Disposition字段并且该字段的值与download属性不一致那么该字段优先下载时将显示其设置的文件名。
download属性还有一个用途就是有些地址不是真实网址而是数据网址比如data:开头的网址。这时download属性可以为虚拟网址指定下载的文件名。
a hrefdata:,Hello%2C%20World!点击/a上面链接点击后会打开一个虚拟网页上面显示Hello World!。
ahrefdata:,Hello%2C%20World!downloadhello.txt
点击/a上面链接点击后下载的hello.txt文件内容就是“Hello, World!”。
3.邮件链接
链接也可以指向一个邮件地址使用mailto协议。用户点击后浏览器会打开本机默认的邮件程序让用户向指定的地址发送邮件。
a hrefmailto:contactexample.com联系我们/a上面代码中链接就指向邮件地址。点击后浏览器会打开一个邮件地址让你可以向contactexample.com发送邮件。
除了邮箱邮件协议还允许指定其他几个邮件要素。
subject主题cc抄送bcc密送body邮件内容
使用方法是将这些邮件要素以查询字符串的方式附加在邮箱地址后面。
ahrefmailto:foobar.com?cctesttest.comsubjectThe%20subjectbodyThe%20body
发送邮件/a上面代码中邮件链接里面不仅包含了邮箱地址还包含了cc、subject、body等邮件要素。这些要素的值需要经过 URL 转义比如空格转成%20。
不指定邮箱也是允许的就像下面这样。这时用户自己在邮件程序里面填写想要发送的邮箱通常用于邮件分享网页。
a hrefmailto:告诉朋友/a4.电话链接
如果是手机浏览的页面还可以使用tel协议创建电话链接。用户点击该链接会唤起电话可以进行拨号。
a hreftel:1331234567813312345678/a上面代码在手机中点击链接会唤起拨号界面可以直接拨打指定号码。
