![640?wx_fmt=jpeg](https://img-blog.csdnimg.cn/img_convert/4e2479bde4d0fab60320b115f6e5b8ec.png)
1、<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>
标签内部就是一个图像。用户点击图像,就会跳转到指定网址。
<a>
标签有如下属性。
href
属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
<a href="#demo">示例</a>
href
属性的值是
#
加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面
demo
锚点所在的位置。
hreflang
属性给出链接指向的网址所使用的语言,纯粹是提示性的,没有实际功能。
<a
href="https://www.example.com"
hreflang="en"
>示例网址</a>
href
属性指向的网址的语言是英语。
lang
一样,语言代码可以参考《属性》一章的
lang
属性的介绍。
title
属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。
<a
href="https://www.example.com/"
title="hello"
>示例</a>。
hello
。
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"
一起使用,这样可以避免安全风险。
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
:文档的标签链接。
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 文档。
ping
属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。
type
属性给出链接 URL 的 MIME 类型,比如到底是网页,还是图像或文件。它也是纯粹提示性的属性,没有实际功能。
<a
href="smile.jpg"
type="image/jpeg"
>示例图片</a>
type
属性提示这是一张图片。
download
属性表明当前链接用于下载,而不是跳转到另一个 URL。
<a href="demo.txt" download>下载</a>
download
属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。
download
属性设置了值,那么这个值就是下载的文件名。
<a
href="foo.exe"
download="bar.exe"
>点击下载</a>
foo.exe
。点击后,下载对话框提示的文件名是
bar.exe
。
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!”。
2、邮件链接
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>
cc
、
subject
、
body
等邮件要素。这些要素的值需要经过 URL 转义,比如空格转成
%20
。
<a href="mailto:">告诉朋友</a>
3、电话链接
tel
协议,创建电话链接。用户点击该链接,会唤起电话,可以进行拨号。
<a href="tel:13312345678">13312345678</a>
4、<link>
4.1、基本用法
<link>
标签主要用于将当前网页与相关的外部资源联系起来,通常放在
<head>
元素里面。最常见的用途就是加载 CSS 样式表。
<link rel="stylesheet" type="text/css" href="theme.css">
theme.css
。
<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">
default.css
是默认样式表,默认就会生效。
fancy.css
和
basic.css
是替换样式表(
rel="alternate stylesheet"
),默认不生效。
title
属性在这里是必需的,用来在浏览器菜单里面列出这些样式表的名字,供用户选择,以替代默认样式表。
<link>
还可以加载网站的 favicon 图标文件。
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<link>
也用于提供文档的相关链接,比如下面是给出文档的 RSS Feed 地址。
<link rel="alternate" type="application/atom+xml" href="/blog/news/atom">
4.2、rel 属性
rel
属性表示外部资源与当前文档之间的关系,是
<link>
标签的必需属性。它可以但不限于取以下值。
alternate
:文档的另一种表现形式的链接,比如打印版。author
:文档作者的链接。dns-prefetch
:要求浏览器提前执行指定网址的 DNS 查询。help
:帮助文档的链接。icon
:加载文档的图标文件。license
:许可证链接。next
:系列文档下一篇的链接。pingback
:接收当前文档 pingback 请求的网址。preconnect
:要求浏览器提前与给定服务器,建立 HTTP 连接。prefetch
:要求浏览器提前下载并缓存指定资源,供下一个页面使用。它的优先级较低,浏览器可以不下载。preload
:要求浏览器提前下载并缓存指定资源,当前页面稍后就会用到。它的优先级较高,浏览器必须立即下载。prerender
:要求浏览器提前渲染指定链接。这样的话,用户稍后打开该链接,就会立刻显示,感觉非常快。prev
:表示当前文档是系列文档的一篇,这里给出上一篇文档的链接。search
:提供当前网页的搜索链接。stylesheet
:加载一张样式表。
<!-- 作者信息 -->
<link rel="author" href="humans.txt">
<!-- 版权信息 -->
<link rel="license" href="copyright.html">
<!-- 另一个语言的版本 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 联系方式 -->
<link rel="me" href="https://google.com/profiles/someone" type="text/html">
<link rel="me" href="mailto:name@example.com">
<link rel="me" href="sms:+15035550125">
<!-- 历史资料 -->
<link rel="archives" href="http://example.com/archives/">
<!-- 目录 -->
<link rel="index" href="http://example.com/article/">
<!-- 导航 -->
<link rel="first" href="http://example.com/article/">
<link rel="last" href="http://example.com/article/?page=42">
<link rel="prev" href="http://example.com/article/?page=1">
<link rel="next" href="http://example.com/article/?page=3">
4.3、资源的预加载
<link rel="preload">
告诉浏览器尽快下载并缓存资源(如脚本或样式表),该指令优先级较高,浏览器肯定会执行。当加载页面几秒钟后需要该资源时,它会很有用。下载后,浏览器不会对资源执行任何操作,脚本未执行,样式表未应用。它只是缓存,当其他东西需要它时,它立即可用。
<link rel="preload" href="image.png" as="image">
rel="preload"
除了优先级较高,还有两个优点:一是允许指定预加载资源的类型,二是允许
onload
事件的回调函数。下面是
rel="preload"
配合
as
属性,告诉浏览器预处理资源的类型,以便正确处理。
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
style.css
和
main.js
。
as
属性指定加载资源的类型,它的值一般有下面几种。
"script"
"style"
"image"
"media"
"document"
as
属性,或者它的值是浏览器不认识的,那么浏览器会以较低的优先级下载这个资源。
type
属性,进一步明确 MIME 类型。
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">
onload
指定的回调函数会在脚本下载完成后执行,立即插入页面。
<link rel="prefetch">
的使用场合是,如果后续的页面需要某个资源,并且希望预加载该资源,以便加速页面渲染。该指令不是强制性的,优先级较低,浏览器不一定会执行。这意味着,浏览器可以不下载该资源,比如连接速度很慢时。
<link rel="prefetch" href="https://www.example.com/">
<link rel="preconnect">
要求浏览器提前与某个域名建立 TCP 连接。当你知道,很快就会请求该域名时,这会很有帮助。
<link rel="preconnect" href="https://www.example.com/">
<link rel="dns-prefetch">
要求浏览器提前执行某个域名的 DNS 解析。
<link rel="dns-prefetch" href="//example.com/">
<link rel="prerender">
要求浏览器加载某个网页,并且提前渲染它。用户点击指向该网页的链接时,就会立即呈现该页面。如果确定用户下一步会访问该页面,这会很有帮助。
<link rel="prerender" href="http://example.com/">
4.4、media 属性
media
属性给出外部资源生效的媒介条件。
<link href="print.css" rel="stylesheet" media="print">
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
print.css
,移动设备访问时(设备宽度小于600像素)加载
mobile.css
。
media
属性实现条件加载的例子。
<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">
4.5、其他属性
<link>
标签的其他属性如下。
crossorigin
:加载外部资源的跨域设置。href
:外部资源的网址。referrerpolicy
:加载时Referer
头信息字段的处理方法。as
:rel="preload"
或rel="prefetch"
时,设置外部资源的类型。type
:外部资源的 MIME 类型,目前仅用于rel="preload"
或rel="prefetch"
的情况。title
:加载样式表时,用来标识样式表的名称。sizes
:用来声明图标文件的尺寸,比如加载苹果手机的图标文件。
5、<script>
<script>
用于加载脚本代码,目前主要是加载 JavaScript 代码。
<script>
console.log('hello world');
</script>
<script>
也可以加载外部脚本,
src
属性给出外部脚本的地址。
<script src="javascript.js"></script>
javascript.js
脚本文件,并执行。
type
属性给出脚本的类型,默认是 JavaScript 代码,所以可省略。完整的写法其实是下面这样。
<script type="text/javascript" src="javascript.js"></script>
type
属性也可以设成
module
,表示这是一个 ES6 模块,不是传统脚本。
<script type="module" src="main.js"></script>
nomodule
属性。支持 ES6 模块的浏览器,会不加载指定的脚本。这个属性通常与
type="module"
配合使用,作为老式浏览器的回退方案。
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>
<script>
还有下面一些其他属性,大部分跟 JavaScript 语言有关,可以参考相关的 JavaScript 教程。
async
:该属性指定 JavaScript 代码为异步执行,不是造成阻塞效果,JavaScript 代码默认是同步执行。defer
:该属性指定 JavaScript 代码不是立即执行,而是页面解析完成后执行。crossorigin
:如果采用这个属性,就会采用跨域的方式加载外部脚本,即 HTTP 请求的头信息会加上origin
字段。integrity
:给出外部脚本的哈希值,防止脚本被篡改。只有哈希值相符的外部脚本,才会执行。nonce
:一个密码随机数,由服务器在 HTTP 头信息里面给出,每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单,只有在白名单内的脚本才能执行。referrerpolicy
:HTTP 请求的Referer
字段的处理方法。
6、<noscript>
<noscript>
标签用于浏览器不支持或关闭 JavaScript 时,所要显示的内容。
<noscript>
您的浏览器不能执行 JavaScript 语言,页面无法正常显示。
</noscript>
![640?wx_fmt=jpeg](https://img-blog.csdnimg.cn/img_convert/a3f520fb2e7de9288bcb5350b67f5ea7.png)
![640?wx_fmt=png](https://img-blog.csdnimg.cn/img_convert/a5e2eb7b9b5bd854d5dc7cc1bf0719cd.png)