HTML5中的A 標簽詳解
我要評論概述
a 元素可通過其href屬性創(chuàng)建指向其他網(wǎng)頁、文件、同一頁面內(nèi)的位置或其他URL的超鏈接。
其基本屬性及含義如下。
href：鏈接目標的URLhreflang：指定目標URL的語言rel：指定當前文檔和被鏈接文檔的關(guān)系target：指定打開目標URL的方式media：指定目標URL的媒體類型type：指定目標URL的 MIME 類型download：指示瀏覽器下載URL
鏈接樣式
在瀏覽器中a標簽的默認樣式帶有下劃線，其狀態(tài)和顏色如下。
link：未訪問狀態(tài)，字體顏色為藍色visited：已訪問狀態(tài)，字體顏色為紫色hover：鼠標懸停狀態(tài)active：鼠標點擊時狀態(tài)，字體顏色為紅色focus：聚焦時的狀態(tài)，可通過Tab鍵聚焦元素，聚焦時會出現(xiàn)邊框（不同瀏覽器樣式不一致）
<a >百度</a>
可通過偽類自定義不同狀態(tài)的樣式，注意link和visited必須在最前面，且沒有先后順序，而focus、hover和active 必須在后面，并且一定是focus、hover、active的順序。
首先靜態(tài)時（元素未被聚焦、鼠標點擊或懸?。?，a標簽只能為未訪問和已訪問狀態(tài)中的一種，進而只會命中link和visited偽類中的一種，另一種不會生效，因此link和visited沒有先后順序。
而在動態(tài)時（比如鼠標懸?。?，a標簽此時的樣式應(yīng)該是呈現(xiàn)懸浮的樣式，由于偽類的權(quán)重都是一樣的，因此hover偽類的樣式必然要位于link和visited后面，才能覆蓋其樣式。
可以通過Tab鍵聚焦a標簽，聚焦后，若鼠標懸浮在標簽上，此時則需要呈現(xiàn)懸浮的樣式，因此hover位于focus后面。
而在a標簽被懸浮時，若此時點擊鼠標不松開，則此時需要呈現(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：當前頁面打開鏈接_blank：新窗口打開鏈接_parent：在當前框架的父框架打開頁面_top：在當前框架的頂層框架打開頁面
如下為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標簽的target為_self，單擊a標簽。
可以看到在right.html框架中打開了百度，即在自身頁面中單擊target為_self屬性的鏈接，將在本頁面框架中打開目標頁面。
_parant
修改right.html中a標簽的target為_parent，單擊a標簽。
可以看到在center.html框架中打開了百度，即在自身頁面中單擊target為_parent屬性的鏈接，將在本頁面的父框架中打開目標頁面。
_top
修改right.html中a標簽的target為_top，單擊a標簽。
可以看到在main.html框架中打開了百度，即在自身頁面中單擊target為_top屬性的鏈接，將在本頁面的頂層框架中打開目標頁面。
_blank
_blank則是打開一個新標簽頁顯示目標頁面。
錨點
頁面內(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)容。
由于不同手機廠商或瀏覽器廠商對此標準支持度不同，最好還是不帶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í)行下載而是直接打開，更多 詳細參考。
如下若頁面地址為http://127.0.0.1:3000，點擊a標簽將不會下載而是在瀏覽器打開。
<a download>baidu</a>
data：URLs
如下使用data：URLs的方式下載圖片，首先通過canvas繪制圖片，然后再使用canvas.toDataURL獲取圖片base64編碼，最后再通過a標簽完成下載。
<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等支持跨域的標簽，請求獲取資源時會自動帶上cookie，如果不做數(shù)據(jù)讀取限制，則cookie數(shù)據(jù)將被上傳到圖片網(wǎng)站后臺進而導(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 標簽的文章就介紹到這了,更多相關(guān)HTML5 A 標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5實現(xiàn)的移動端購物車自動結(jié)算功能示例代碼
本文介紹HTML5實現(xiàn)移動端購物車自動結(jié)算,通過WebStorage、事件監(jiān)聽、DOM操作等技術(shù),確保實時更新與數(shù)據(jù)同步,優(yōu)化性能及無障礙性,提升用戶體驗，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標簽用于定義一個可點擊的按鈕，它是創(chuàng)建交互式網(wǎng)頁的重要元素之一，本文將深入解析HTML5中的<button>標簽，詳細介紹其屬性、樣式以及實際2025-06-18
基于 HTML5 Canvas 實現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過對代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁錄音實現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API，結(jié)合Web Audio API，實現(xiàn)網(wǎng)頁錄音功能,從獲取音頻流到處理和保存錄音，整個過程將逐步詳解,此外，還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個強大的工具，能夠有效提升用戶體驗,通過結(jié)合自動補全功能和適當?shù)臉邮?，可以?chuàng)建出既美觀又實用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗，這篇文章給大家介紹HTML5中Checkbox標簽的深入全面解2025-06-13
- 本實例展示了一種基于HTML5技術(shù)的圖片上傳功能，無需外部插件即可通過拖放圖片實現(xiàn)上傳,涉及到HTML5的拖放API和File API，以及使用CSS來增強用戶界面的交互性和視覺反饋，2025-05-16
- 在HTML5和CSS中，定位(positioning)是控制元素在頁面上位置的重要機制,主要有四種定位方式：靜態(tài)定位(static)、相對定位(relative)、絕對定位(absolute)和固定定位(fixed),2025-05-13
- Microdata作為HTML5新增的一個特性，它允許開發(fā)者在HTML文檔中添加更多的語義信息，以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語法中，表格主要通過< table >、< tr >和< td >3個標簽構(gòu)成,本文通過實例代碼講解HTML5表格語法格式，感興趣的朋友一起看看吧2025-04-21
