HTML5中的A 標(biāo)簽詳解

概述
a 元素可通過其href
屬性創(chuàng)建指向其他網(wǎng)頁、文件、同一頁面內(nèi)的位置或其他URL
的超鏈接。
其基本屬性及含義如下。
href
:鏈接目標(biāo)的URL
hreflang
:指定目標(biāo)URL
的語言rel
:指定當(dāng)前文檔和被鏈接文檔的關(guān)系target
:指定打開目標(biāo)URL
的方式media
:指定目標(biāo)URL
的媒體類型type
:指定目標(biāo)URL
的 MIME 類型download
:指示瀏覽器下載URL
鏈接樣式
在瀏覽器中a
標(biāo)簽的默認(rèn)樣式帶有下劃線,其狀態(tài)和顏色如下。
link
:未訪問狀態(tài),字體顏色為藍(lán)色visited
:已訪問狀態(tài),字體顏色為紫色hover
:鼠標(biāo)懸停狀態(tài)active
:鼠標(biāo)點擊時狀態(tài),字體顏色為紅色focus
:聚焦時的狀態(tài),可通過Tab
鍵聚焦元素,聚焦時會出現(xiàn)邊框(不同瀏覽器樣式不一致)
<a >百度</a>
可通過偽類自定義不同狀態(tài)的樣式,注意link
和visited
必須在最前面,且沒有先后順序,而focus
、hover
和active
必須在后面,并且一定是focus
、hover
、active
的順序。
首先靜態(tài)時(元素未被聚焦、鼠標(biāo)點擊或懸?。?,a
標(biāo)簽只能為未訪問和已訪問狀態(tài)中的一種,進(jìn)而只會命中link
和visited
偽類中的一種,另一種不會生效,因此link
和visited
沒有先后順序。
而在動態(tài)時(比如鼠標(biāo)懸浮),a
標(biāo)簽此時的樣式應(yīng)該是呈現(xiàn)懸浮的樣式,由于偽類的權(quán)重都是一樣的,因此hover
偽類的樣式必然要位于link
和visited
后面,才能覆蓋其樣式。
可以通過Tab
鍵聚焦a
標(biāo)簽,聚焦后,若鼠標(biāo)懸浮在標(biāo)簽上,此時則需要呈現(xiàn)懸浮的樣式,因此hover
位于focus
后面。
而在a
標(biāo)簽被懸浮時,若此時點擊鼠標(biāo)不松開,則此時需要呈現(xiàn)點擊的樣式,因此active
位于hover
后面。
所以偽類順序只能為link
、visited
、focus
、hover
、active
或者visited
、link
、focus
、hover
、active
兩種。
a:link { color: pink; } a:visited { color: orange; } a:focus { color: blue; } a:hover { color: red; } a:active { color: green; }
指定鏈接打開方式
target
用于指定鏈接的打開方式,包括如下四種。
_self
:當(dāng)前頁面打開鏈接_blank
:新窗口打開鏈接_parent
:在當(dāng)前框架的父框架打開頁面_top
:在當(dāng)前框架的頂層框架打開頁面
如下為main.html
、top.html
、center.html
、left.html
和right.html
的頁面結(jié)構(gòu),其中main.html
通過iframe
方式引入top.html
和center.html
,center.html
也通過iframe
方式引入left.html
和right.html
。
頁面部分代碼如下。
// main.html <head> <style> body { width: 1500px; margin: 10px auto; display: flex; flex-direction: column; } iframe { width: 100%; } </style> </head> <body> <iframe src="top.html" frameborder="0" height="300px"></iframe> <iframe src="center.html" frameborder="0" height="600px"></iframe> </body> // top.html <head> <style> body { width: 100%; height: 300px; margin: 0; background-color: #FF952C; } </style> </head> <body></body> // center.html <head> <style> body { height: 600px; background-color: #FFCC00; display: flex; margin: 0; } iframe { height: 500px; } </style> </head> <body> <iframe src="left.html" frameborder="0" style="width: 200px;"></iframe> <iframe src="right.html" frameborder="0" style="width: 1300px"></iframe> </body> // left.html <head> <style> body { margin: 0; width: 100%; height: 500px; background-color: #02BF0F; } </style> </head> <body></body> // right.html <head> <style> body { margin: 0; width: 100%; height: 500px; background-color: #2196F3; } </style> </head> <body> <a target="_self" style="color: #fff;text-decoration: none;">百度</a> </body>
_self
修改right.html
中a
標(biāo)簽的target
為_self
,單擊a
標(biāo)簽。
可以看到在right.html
框架中打開了百度,即在自身頁面中單擊target
為_self
屬性的鏈接,將在本頁面框架中打開目標(biāo)頁面。
_parant
修改right.html
中a
標(biāo)簽的target
為_parent
,單擊a
標(biāo)簽。
可以看到在center.html
框架中打開了百度,即在自身頁面中單擊target
為_parent
屬性的鏈接,將在本頁面的父框架中打開目標(biāo)頁面。
_top
修改right.html
中a
標(biāo)簽的target
為_top
,單擊a
標(biāo)簽。
可以看到在main.html
框架中打開了百度,即在自身頁面中單擊target
為_top
屬性的鏈接,將在本頁面的頂層框架中打開目標(biāo)頁面。
_blank
_blank
則是打開一個新標(biāo)簽頁顯示目標(biāo)頁面。
錨點
頁面內(nèi)跳轉(zhuǎn),如下將跳轉(zhuǎn)至本頁面的h1
錨點位置。
<a href="#h1">a</a> <h1 id="h1">h1<h1>
跳轉(zhuǎn)至其他頁面的指定位置,如下將跳轉(zhuǎn)至other.html
頁面中的p
錨點位置。
<a href="other.html#p">a</a>
電話
撥打10086
。
<a href="tel:10086">10086</a>
撥打客服電話400
。
<a href="tel:400-888-8888">400-888-8888</a>
短信
發(fā)送短信至單個號碼。
<a href="sms:10086">10086</a>
發(fā)送短信至多個號碼。
<a href="sms:10086,10000">10086,10000</a>
發(fā)送短信DX
到10086
,注意安卓系統(tǒng)使用?
連接發(fā)送內(nèi)容,IOS
系統(tǒng)使用&
連接發(fā)送內(nèi)容。
由于不同手機廠商或瀏覽器廠商對此標(biāo)準(zhǔn)支持度不同,最好還是不帶body
。
<a href="sms:10086?body=DX">DX</a>
郵箱
發(fā)送單個郵箱。
<a href="mailto:xxx@email.com">email</a>
發(fā)送多個郵箱。???????
<a href="mailto:xxx@email.com; xx@email.com">email</a>
mailto
相關(guān)參數(shù)如下。
mailto
:收件人郵箱地址,若有多個收件人郵件地址,用分號;
隔開cc
:抄送人員郵箱地址,多人使用分號;
隔開bcc
:密送人員郵箱地址,多人使用分號;
隔開subject
:郵件主題body
:郵件內(nèi)容
??<a href="mailto:xxx@email.com?cc=cc@email.com&bcc=bcc@email.com&subject=subject&body=body">email</a>
下載文件
下載圖片,其中href
為圖片路徑。
<a href="./image.png" download>image</a>
下載圖片并指定下載名。
<a href="./image.png" download="name.png">image</a>
download
屬性注意事項如下。
- 瀏覽器不能直接打開的文件(如
txt
、zip
等),不指定download
屬性也會直接下載 - 瀏覽器可以直接打開的文件(如
png
、css
、js
、html
等),需指定download
屬性才能下載 download
屬性值可以不指定后綴名,下載時瀏覽器會自動補充download
屬性值指定了錯誤的后綴名,文件下載后將無法打開預(yù)覽
同源策略
由于瀏覽器的 同源策略 限制,若下載的文件與頁面不同源,瀏覽器不會執(zhí)行下載而是直接打開,更多 詳細(xì)參考。
如下若頁面地址為http://127.0.0.1:3000
,點擊a
標(biāo)簽將不會下載而是在瀏覽器打開。
<a download>baidu</a>
data:URLs
如下使用data:URLs
的方式下載圖片,首先通過canvas
繪制圖片,然后再使用canvas.toDataURL
獲取圖片base64
編碼,最后再通過a
標(biāo)簽完成下載。
<a href="javascript:void(0);" onclick="downloadFile(event)" src='https://www.baidu.com/logo.png'>download</a> <script> function downloadFile(e) { const url = e.target.getAttribute('src') const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') canvas.width = image.width canvas.height = image.height ctx.drawImage(image, 0, 0, image.width, image.height) const ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase() const name = image.src.substring(image.src.lastIndexOf('/') + 1) const dataURL = canvas.toDataURL('image/' + ext) const a = document.createElement('a') a.href = dataURL a.download = name a.click() } } </script>
注意不設(shè)置crossOrigin
,瀏覽器將會拋出如下錯誤。
其原因也是瀏覽器的同源策略導(dǎo)致,canvas
繪制跨域請求的圖片,就會造成畫布污染,此時也就不能再調(diào)用toBlob()
、toDataURL()
和getImageData()
了。img
、form
等支持跨域的標(biāo)簽,請求獲取資源時會自動帶上cookie
,如果不做數(shù)據(jù)讀取限制,則cookie
數(shù)據(jù)將被上傳到圖片網(wǎng)站后臺進(jìn)而導(dǎo)致數(shù)據(jù)泄露。
因此可以在圖片請求發(fā)起時增加crossOrigin="anonymous"
,不攜帶任何用戶信息來獲取圖片。
blob:URLs
如下使用blob:URLs
的方式下載圖片,通過使用canvas.toBlob
獲取到blob
對象,然后再通過URL.createObjectURL
獲取到blob
對象的一個內(nèi)存URL
,并且一直存儲在內(nèi)存中,直到document
觸發(fā)了unload
事件或者執(zhí)行revokeObjectURL
來釋放。
<a href="javascript:void(0);" onclick="downloadFile(event)" src='https://www.baidu.com/logo.png'>download</a> <script> function downloadFile(e) { const url = e.target.getAttribute('src') const image = new Image() image.setAttribute('crossOrigin', 'anonymous') image.src = url image.onload = () => { const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d') const name = image.src.substring(image.src.lastIndexOf('/') + 1) canvas.width = image.width canvas.height = image.height ctx.drawImage(image, 0, 0, image.width, image.height) canvas.toBlob(blob => { const url = window.URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = name a.click() a.remove() window.URL.revokeObjectURL(url) }) } } </script>
ajax
上述兩種方式只對圖片適用,對于pdf
或者txt
等則不行。
可以通過ajax
方式請求到文件的blob
數(shù)據(jù),再通過blob:URLs
的方式下載。
注意ajax
請求方式會存在跨域問題,需要服務(wù)器支持。
<a href="javascript:void(0);" onclick="downloadFile(event)" src='http://www.baidu.com/txt.txt'>download</a> <script> function downloadFile(e) { const url = e.target.getAttribute('src') const name = url.substring(url.lastIndexOf('/') + 1) axios.get(url, { responseType: 'blob' }).then(res => { const blob = res.data const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = name a.click() a.remove() window.URL.revokeObjectURL(url) }) } </script>
到此這篇關(guān)于HTML5中的A 標(biāo)簽的文章就介紹到這了,更多相關(guān)HTML5 A 標(biāo)簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
- 在HTML語法中,表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧2025-04-21
- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時區(qū)動態(tài)時鐘實戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解
在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點介2025-02-27- 本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看2025-02-17
- 本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖2025-02-17
- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣2025-02-17
HTML5使用details標(biāo)簽:展開/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個不用js即可實現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點擊再給出答案的效果,這里就為大家簡單介紹一下,2024-11-03