a标签download属性无效_HTML从零开始——链接标签
鏈接（hyperlink）是互聯網的核心。它允許用戶在頁面上，從一個網址跳轉到另一個網址，從而把所有資源聯系在一起。
URL 是鏈接指向的地址。鏈接不僅可以指向另一個網頁，也可以指向文本、圖像、文件等資源。可以這樣說，所有互聯網上的資源，都可以通過鏈接訪問。
1 <a>
鏈接通過<a>標簽表示，用戶點擊后，瀏覽器會跳轉到指定的網址。下面就是一個典型的鏈接：
<上面代碼就定義了一個超級鏈接。瀏覽器顯示“維基百科”，文字下面默認會有下劃線，表示這是一個鏈接。用戶點擊后，瀏覽器跳轉到href屬性指定的網址：
<a>標簽內部不僅可以放置文字，也可以放置其他元素，比如段落、圖像、多媒體等等：
<上面代碼中，<a>標簽內部就是一個圖像。用戶點擊圖像，就會跳轉到指定網址。
<a>標簽有如下屬性：
（1）href
href屬性給出鏈接指向的網址。它的值應該是一個 URL 或者錨點。
上文已經給出了完整 URL 的例子，下面是錨點的例子：
<上面代碼中，href屬性的值是#加上錨點名稱。點擊后，瀏覽器會自動滾動，停在當前頁面里面demo錨點所在的位置。
（2）hreflang
hreflang屬性給出鏈接指向的網址所使用的語言，純粹是提示性的，沒有實際功能：
<上面代碼表明，href屬性指向的網址的語言是英語。
該屬性的值跟通用屬性lang一樣，語言代碼可以參考網頁元素的屬性這一章節當中的lang屬性的介紹。
（3）title
title屬性給出鏈接的說明信息。鼠標懸停在鏈接上方時，瀏覽器會將這個屬性的值，以提示塊的形式顯示出來：
<上面代碼中，用戶鼠標停留在鏈接上面，會出現文字提示hello：
（4）target
target屬性指定如何展示打開的鏈接。它可以是在指定的窗口打開，也可以在<iframe>里面打開：
<上面代碼中，兩個鏈接都在名叫test的窗口打開。首先點擊鏈接foo，瀏覽器發現沒有叫做test的窗口，就新建一個窗口，起名為test，在該窗口打開http://foo.com。然后，用戶又點擊鏈接bar，由于已經存在test窗口，瀏覽器就在該窗口打開http://bar.com，取代里面已經打開的http://foo.com。
target屬性的值也可以是以下四個關鍵字之一：
- _self：當前窗口打開，這是默認值。
- _blank：新窗口打開。
- _parent：上層窗口打開，這通常用于從父窗口打開的子窗口，或者<iframe>里面的鏈接。如果當前窗口沒有上層窗口，這個值等同于_self。
- _top：頂層窗口打開。如果當前窗口就是頂層窗口，這個值等同于_self。
上面代碼點擊后，瀏覽器會新建一個窗口，在該窗口打開鏈接，并且新窗口沒有名字。
注意，使用target屬性的時候，最好跟rel="noreferrer"一起使用，這樣可以避免安全風險。
（5）rel
rel屬性說明鏈接與當前頁面的關系：
<上面代碼的rel屬性，說明鏈接是當前頁面的幫助文檔。
下面是一些常見的rel屬性的值：
- alternate：當前文檔的另一種形式，比如翻譯。
- author：作者鏈接。
- bookmark：用作書簽的永久地址。
- external：當前文檔的外部參考文檔。
- help：幫助鏈接。
- license：許可證鏈接。
- next：系列文檔的下一篇。
- nofollow：告訴搜索引擎忽略該鏈接，主要用于用戶提交的內容，防止有人企圖通過添加鏈接，提高該鏈接的搜索排名。
- noreferrer：告訴瀏覽器打開鏈接時，不要將當前網址作為 HTTP 頭信息的Referer字段發送出去，這樣可以隱藏點擊的來源。
- noopener：告訴瀏覽器打開鏈接時，不讓鏈接窗口通過 JavaScript 的window.opener屬性引用原始窗口，這樣就提高了安全性。
- prev：系列文檔的上一篇。
- search：文檔的搜索鏈接。
- tag：文檔的標簽鏈接。
（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 文檔。
（7）ping
ping屬性指定一個網址，用戶點擊的時候，會向該網址發出一個 POST 請求，通常用于跟蹤用戶的行為。
（8）type
type屬性給出鏈接 URL 的 MIME 類型，比如到底是網頁，還是圖像或文件。它也是純粹提示性的屬性，沒有實際功能。
<上面代碼中，type屬性提示這是一張圖片。
（9）download
download屬性表明當前鏈接用于下載，而不是跳轉到另一個 URL：
<上面代碼點擊后，會開始下載鏈接的文件：
注意，download屬性只在鏈接與網址同源時，才會生效。也就是說，鏈接應該與網址屬于同一個網站。
如果download屬性設置了值，那么這個值就是下載的文件名：
<上面代碼中，下載文件的原始文件名是foo.exe。點擊后，下載對話框提示的文件名是bar.exe。
注意，如果鏈接點擊后，服務器的 HTTP 回應的頭信息設置了Content-Disposition字段，并且該字段的值與download屬性不一致，那么該字段優先，下載時將顯示其設置的文件名。
download屬性還有一個用途，就是有些地址不是真實網址，而是數據網址，比如data:開頭的網址。這時，download屬性可以為虛擬網址指定下載的文件名：
<上面鏈接點擊后，會打開一個虛擬網頁，上面顯示Hello World!。
<上面鏈接點擊后，下載的hello.txt文件內容就是“Hello, World!”：
2 郵件鏈接
鏈接也可以指向一個郵件地址，使用mailto協議。用戶點擊后，瀏覽器會打開本機默認的郵件程序，讓用戶向指定的地址發送郵件：
<上面代碼中，鏈接就指向郵件地址。點擊后，瀏覽器會打開一個郵件地址，讓你可以向contact@example.com發送郵件。
除了郵箱，郵件協議還允許指定其他幾個郵件要素：
- subject：主題
- cc：抄送
- bcc：密送
- body：郵件內容
使用方法是將這些郵件要素，以查詢字符串的方式，附加在郵箱地址后面：
<上面代碼中，郵件鏈接里面不僅包含了郵箱地址，還包含了cc、subject、body等郵件要素。這些要素的值需要經過 URL 轉義，比如空格轉成%20。
不指定郵箱也是允許的，就像下面這樣。這時用戶自己在郵件程序里面，填寫想要發送的郵箱，通常用于郵件分享網頁：
<3 電話鏈接
如果是手機瀏覽的頁面，還可以使用tel協議，創建電話鏈接。用戶點擊該鏈接，會喚起電話，可以進行撥號：
<上面代碼在手機中，點擊鏈接會喚起撥號界面，可以直接撥打指定號碼。
4 <link>
4.1 基本用法
<link>標簽主要用于將當前網頁與相關的外部資源聯系起來，通常放在<head>元素里面。最常見的用途就是加載 CSS 樣式表：
<上面代碼為網頁加載樣式表theme.css。
除了默認樣式表，網頁還可以加載替代樣式表，即默認不生效、需要用戶手動切換的樣式表：
<上面代碼中，default.css是默認樣式表，默認就會生效。fancy.css和basic.css是替換樣式表（rel="alternate stylesheet"），默認不生效。title屬性在這里是必需的，用來在瀏覽器菜單里面列出這些樣式表的名字，供用戶選擇，以替代默認樣式表。
<link>還可以加載網站的 favicon 圖標文件：
<手機訪問時，網站通常需要提供不同分辨率的圖標文件：
<上面代碼指定 iPhone 設備需要的114像素和72像素的圖標。
<link>也用于提供文檔的相關鏈接，比如下面是給出文檔的 RSS Feed 地址：
<4.2 rel 屬性
rel屬性表示外部資源與當前文檔之間的關系，是<link>標簽的必需屬性。它可以但不限于取以下值：
- alternate：文檔的另一種表現形式的鏈接，比如打印版。
- author：文檔作者的鏈接。
- dns-prefetch：要求瀏覽器提前執行指定網址的 DNS 查詢。
- help：幫助文檔的鏈接。
- icon：加載文檔的圖標文件。
- license：許可證鏈接。
- next：系列文檔下一篇的鏈接。
- pingback：接收當前文檔 pingback 請求的網址。
- preconnect：要求瀏覽器提前與給定服務器，建立 HTTP 連接。
- prefetch：要求瀏覽器提前下載并緩存指定資源，供下一個頁面使用。它的優先級較低，瀏覽器可以不下載。
- preload：要求瀏覽器提前下載并緩存指定資源，當前頁面稍后就會用到。它的優先級較高，瀏覽器必須立即下載。
- prerender：要求瀏覽器提前渲染指定鏈接。這樣的話，用戶稍后打開該鏈接，就會立刻顯示，感覺非常快。
- prev：表示當前文檔是系列文檔的一篇，這里給出上一篇文檔的鏈接。
- search：提供當前網頁的搜索鏈接。
- stylesheet：加載一張樣式表。
下面是一些示例：
<!-- 作者信息 -->4.3 資源的預加載
某些情況下，你需要瀏覽器預加載某些資源，也就是先把資源緩存下來，等到使用的時候，就不用再從網上下載了，立即就能使用。預處理指令可以做到這一點。
預加載主要有下面五種類型：
（1）<link rel="preload">
<link rel="preload">告訴瀏覽器盡快下載并緩存資源（如腳本或樣式表），該指令優先級較高，瀏覽器肯定會執行。當加載頁面幾秒鐘后需要該資源時，它會很有用。下載后，瀏覽器不會對資源執行任何操作，腳本未執行，樣式表未應用。它只是緩存，當其他東西需要它時，它立即可用：
<rel="preload"除了優先級較高，還有兩個優點：一是允許指定預加載資源的類型，二是允許onload事件的回調函數。下面是rel="preload"配合as屬性，告訴瀏覽器預處理資源的類型，以便正確處理。
<上面代碼要求瀏覽器提前下載并緩存style.css和main.js。
as屬性指定加載資源的類型，它的值一般有下面幾種：
- "script"
- "style"
- "image"
- "media"
- "document"
如果不指定as屬性，或者它的值是瀏覽器不認識的，那么瀏覽器會以較低的優先級下載這個資源。
有時還需要type屬性，進一步明確 MIME 類型：
<上面代碼要求瀏覽器提前下載視頻文件，并且說明這是 MP4 編碼。
下面是預下載字體文件的例子：
<注意，所有預下載的資源，只是下載到瀏覽器的緩存，并沒有執行。如果希望資源預下載后立刻執行，可以參考下面的寫法：
<上面代碼中，onload指定的回調函數會在腳本下載完成后執行，立即插入頁面。
（2）<link rel="prefetch">
<link rel="prefetch">的使用場合是，如果后續的頁面需要某個資源，并且希望預加載該資源，以便加速頁面渲染。該指令不是強制性的，優先級較低，瀏覽器不一定會執行。這意味著，瀏覽器可以不下載該資源，比如連接速度很慢時：
<（3）<link rel="preconnect">
<link rel="preconnect">要求瀏覽器提前與某個域名建立 TCP 連接。當你知道，很快就會請求該域名時，這會很有幫助：
<（4）<link rel="dns-prefetch">
<link rel="dns-prefetch">要求瀏覽器提前執行某個域名的 DNS 解析：
<（5）<link rel="prerender">
<link rel="prerender">要求瀏覽器加載某個網頁，并且提前渲染它。用戶點擊指向該網頁的鏈接時，就會立即呈現該頁面。如果確定用戶下一步會訪問該頁面，這會很有幫助：
<4.4 media 屬性
media屬性給出外部資源生效的媒介條件：
<上面代碼中，打印時加載print.css，移動設備訪問時（設備寬度小于600像素）加載mobile.css。
下面是使用media屬性實現條件加載的例子：
<上面代碼中，如果屏幕寬度在600像素以下，則只加載第一個資源，否則就加載第二個資源。
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>也可以加載外部腳本，src屬性給出外部腳本的地址：
<上面代碼會加載javascript.js腳本文件，并執行。
type屬性給出腳本的類型，默認是 JavaScript 代碼，所以可省略。完整的寫法其實是下面這樣：
<type屬性也可以設成module，表示這是一個 ES 6 模塊，不是傳統腳本：
<對于那些不支持 ES 6 模塊的瀏覽器，可以設置nomodule屬性。支持 ES 6 模塊的瀏覽器，會不加載指定的腳本。這個屬性通常與type="module"配合使用，作為老式瀏覽器的回退方案：
<<script>還有下面一些其他屬性，大部分跟 JavaScript 語言有關，可以參考相關的 JavaScript 教程：
- async：該屬性指定 JavaScript 代碼為異步執行，不是造成阻塞效果，JavaScript 代碼默認是同步執行。
- defer：該屬性指定 JavaScript 代碼不是立即執行，而是頁面解析完成后執行。
- crossorigin：如果采用這個屬性，就會采用跨域的方式加載外部腳本，即 HTTP 請求的頭信息會加上origin字段。
- integrity：給出外部腳本的哈希值，防止腳本被篡改。只有哈希值相符的外部腳本，才會執行。
- nonce：一個密碼隨機數，由服務器在 HTTP 頭信息里面給出，每次加載腳本都不一樣。它相當于給出了內嵌腳本的白名單，只有在白名單內的腳本才能執行。
- referrerpolicy：HTTP 請求的Referer字段的處理方法。
6 <noscript>
<noscript>標簽用于瀏覽器不支持或關閉 JavaScript 時，所要顯示的內容。用戶關閉 JavaScript 可能是為了節省帶寬，以延長手機電池壽命，或者為了防止追蹤，保護隱私：
<上面這段代碼，只有瀏覽器不能執行 JavaScript 代碼時才會顯示，否則就不會顯示。
總結
以上是生活随笔為你收集整理的a标签download属性无效_HTML从零开始——链接标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++和Rust_【Rust水群夜话】盘
- 下一篇： node 没有界面的浏览器_node.j