HTML連接

link標籤

超連接類

1. canonical 

多個url指向同一個頁面時，這個link能夠告訴搜索引擎，href的值是這個頁面的主url

<link rel="canonical" href="...">

2.alternate

表示頁面的」變形「，最典型就是頁面的rss(Really Simple Syndication)

<link rel="alternate" href="...">

3.prev、next

告訴瀏覽器前一個、後一個極有可能訪問的頁面，建議瀏覽器預加載

<link rel="prev" href="...">
<link rel="next" href="...">

4.author、help、license、search

rel=「author」 連接到本頁面的做者，通常是 mailto: 協議
rel=「help」 連接到本頁面的幫助頁
rel=「license」 連接到本頁面的版權信息頁
rel=「search」 連接到本頁面的搜索頁面（通常是站內提供搜索時使用）

<link rel="author" href="...">
<link rel="help" href="...">
<link rel="license" href="...">
<link rel="search" href="...">

外部資源類

1.icon

href中指定的圖標地址默認會被瀏覽器下載和使用，若是不指定，瀏覽器會默認向域名根目錄下找favicon.ico（若是不存在會報404）

<link rel="icon" href="...」> 

2. dns-prefetch、preconnect、prefetch、preload 、prerender

rel=「dns-prefetch「 提早作 dns 查詢（這樣的 link 裏面的 href 實際上只有域名有意義）
rel=「preconnect」 提早創建 tcp 鏈接
rel=「prefetch"  提早加載(優先級較低)
rel=「preload" 提早加載(優先級較高)
rel=「prerender" 提早渲染

<link rel="dns-prefetch" href="...">
<link rel="preconnect" href="...">
<link rel="prefetch" href="...">
<link rel="preload" href="..." as="...">
<link rel="prerender" href="...">

preload和prefetch的區別能夠看：這裏

3.modulepreload

使得ES6 module 能夠在執行import前就加載（而且是併發），不然import(...)的es6 module文件會到執行時才加載

舉個栗子：

html:

<link rel="modulepreload" href="./lib2.js">
<link rel="modulepreload" href="./lib.js">
<script>
    let now = new Date();
    while(new Date() - now < 2000){}
</script>
<script type="module">
    import { a, b } from './lib.js'
</script>

lib.js:

import {a as b} from './lib2.js'
const a = 123
export {
  a, b
}

若是不加modulepreload，lib.js和lib2.js會在2s之後纔會加載

4.stylesheet

引入樣式表

<link rel="stylesheet" href="xxx.css" type="text/css">

5.pingback

表示本網頁被引用時，應該使用的 pingback 地址，這個機制是一份獨立的標準，遵照 pingback 協議的網站在引用本頁面時，會向這個 pingback url 發送一個消息

<link rel="pingback" href="https://www.zhangxinxu.com/wordpress/xmlrpc.php">

 

a標籤

也有rel屬性，也有幾個和link共有的類型，和幾個獨有的屬性
1. alternate、author、help、license、next、prev、search 

和link同樣功效，不一樣的是這個是顯示在頁面的。

<a rel="alternate" href="http://www.qq.com">asdsad</a>
<a rel="author" href="http://www.qq.com">asdsad</a>
<a rel="help" href="http://www.qq.com">asdsad</a>
<a rel="license" href="http://www.qq.com">asdsad</a>
<a rel="next" href="http://www.qq.com">asdsad</a>
<a rel="prev" href="http://www.qq.com">asdsad</a>
<a rel="search" href="http://www.qq.com">asdsad</a>

2.tag、bookmark

a獨有的rel類型，表示不一樣的語義：tag 表示本網頁所屬的標籤，bookmark 到上級章節的連接。

<a rel="tag" href="http://www.qq.com">asdsad</a>
<a rel="bookmark" href="http://www.qq.com">asdsad</a>   

3. nofollow、noopener、noreferrer、opener

有實際功效的幾個rel類型：

nofollow 此連接不會被搜索引擎索引；
noopener 此連接打開的網頁沒法使用 opener 來得到當前頁面的窗口；
noreferrer 此連接打開的網頁沒法使用 referrer 來得到當前頁面的 url；
opener 打開的網頁可使用 window.opener 來訪問當前頁面的 window 對象，這是 a 標籤的默認行爲（實際測試並無生效，window.opener都是null）

ps: window.opener只有是經過window.open打開的頁面纔有值

<a rel="nofollow" href="http://www.qq.com">asdsad</a>
<a rel="noopener" target="_self" href="http://www.qq.com">asdsad</a>
<a rel="noreferrer" target="_self" href="http://www.qq.com">asdsad</a>
<a rel="opener" target="_self" href="http://www.qq.com">asdsad</a>    

 

area標籤

功效和a標籤是同樣的

不一樣的是area標籤是是區域型的連接，a標籤是文本型的連接

<p>
 Please select a shape:
 <img src="shapes.png" usemap="#shapes"
      alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
 <map name="shapes">
  <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
  <area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
        href="yellow.html" alt="Yellow star.">
 </map>
</p>

ps: 這裏推薦我經常使用的一個網站，專門用來定位area的coords：http://imagemap-generator.dariodomi.de/