海浪Code

Appearance

<a> ​

title ​

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

target ​

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

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

  • _self：当前窗口打开，这是默认值。
  • _blank：新窗口打开。
  • _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。
  • _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

rel ​

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

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

邮件链接 ​

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

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

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

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

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

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

电话链接 ​

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

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

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

<link>标签主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面。最常见的用途就是加载 CSS 样式表。

<link>还可以加载网站的 favicon 图标文件。

html
<link rel="icon" href="/favicon.ico" type="image/x-icon">

rel 属性 ​

rel属性表示外部资源与当前文档之间的关系，是<link>标签的必需属性。它可以但不限于取以下值。

html
<!-- 作者信息 -->
<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">

资源的预加载 ​

某些情况下，你需要浏览器预加载某些资源，也就是先把资源缓存下来，等到使用的时候，就不用再从网上下载了，立即就能使用。预处理指令可以做到这一点。

预加载主要有下面五种类型。

（1）<link rel="preload">

<link rel="preload">告诉浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。当加载页面几秒钟后需要该资源时，它会很有用。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。

html
<link rel="preload" href="image.png" as="image">

rel="preload"除了优先级较高，还有两个优点：一是允许指定预加载资源的类型，二是允许onload事件的回调函数。下面是rel="preload"配合as属性，告诉浏览器预处理资源的类型，以便正确处理。

html
<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 类型。

html
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">

上面代码要求浏览器提前下载视频文件，并且说明这是 MP4 编码。

下面是预下载字体文件的例子。

html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

注意，所有预下载的资源，只是下载到浏览器的缓存，并没有执行。如果希望资源预下载后立刻执行，可以参考下面的写法。

html
<link rel="preload" as="style" href="async_style.css" onload="this.rel='stylesheet'">

上面代码中，onload指定的回调函数会在脚本下载完成后执行，立即插入页面。

media 属性 ​

media属性给出外部资源生效的媒介条件。

html
<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属性实现条件加载的例子。

html
<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">
<link rel="preload" as="script" href="map.js" media="(min-width: 601px)">

上面代码中，如果屏幕宽度在600像素以下，则只加载第一个资源，否则就加载第二个资源。

<script> ​

script 也可以加载外部脚本，src属性给出外部脚本的地址。

html
<script src="javascript.js"></script>

type属性给出脚本的类型，默认是 JavaScript 代码，所以可省略。完整的写法其实是下面这样。

html
<script type="text/javascript" src="javascript.js"></script>

type属性也可以设成module，表示这是一个 ES6 模块，不是传统脚本。

html
<script type="module" src="main.js"></script>

对于那些不支持 ES6 模块的浏览器，可以设置nomodule属性。支持 ES6 模块的浏览器，会不加载指定的脚本。这个属性通常与type="module"配合使用，作为老式浏览器的回退方案。

html
<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字段的处理方法。

<noscript> ​

<noscript>标签用于浏览器不支持或关闭 JavaScript 时，所要显示的内容。用户关闭 JavaScript 可能是为了节省带宽，以延长手机电池寿命，或者为了防止追踪，保护隐私。

html
<noscript>
  您的浏览器不能执行 JavaScript 语言，页面无法正常显示。
</noscript>

上面这段代码，只有浏览器不能执行 JavaScript 代码时才会显示，否则就不会显示。