3、HTML ＜a＞标签（超链接）
在 HTML 中，我們使用 <a> 標簽來表示超鏈接。
超鏈接（Hyperlink）是網頁中最常見的元素之一，整個互聯網都是基于超鏈接而構建的。每個網站都由眾多的網頁組成，超鏈接使得網頁之間不再獨立，它就像一根線，把網頁連接在一起，形成一個網狀結構。互聯網之所以能夠稱之為“網”，就是因為有超鏈接的存在。
HTML 超鏈接（鏈接）
HTML使用標簽 <a>來設置超文本鏈接。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手。
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下，鏈接將以以下形式出現在瀏覽器中：
- 一個未訪問過的鏈接顯示為藍色字體并帶有下劃線。
- 訪問過的鏈接顯示為紫色并帶有下劃線。
- 點擊鏈接時，鏈接顯示為紅色并帶有下劃線。
注意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
<a> 標簽的語法格式如下：
<a href="url" target="opentype">鏈接文本</a>- href 屬性用來指明要跳轉到的 url，
- target 屬性用來指明新頁面的打開方式，鏈接文本需要寫在 <a> 和 </a> 之間。
例如，鏈接到英雄聯盟首頁可以這樣寫：
<a href="https://lol.qq.com/act/a20200922competition/index.html?e_code=507042">英雄聯盟</a>:下面，我們來詳細分析一下 <a> 標簽的各個屬性。
1. href 屬性
href 屬性指定鏈接的目標，也就是要跳轉到什么位置。href 可以有多種形式，例如：
- href 可以指向一個網頁（.html、.php、.jsp、.asp等格式），這也是最常見的形式，例如
href="http://c.biancheng.net/view/1719.html"； - href 可以指向圖片（.jpg、.gif、.png等格式）、音頻（.mp3、.wav等格式）、視頻（.mp4、.mkv格式）等媒體文件，例如 href="/uploads/allimg/181221/134I32557-0.jpg"；
- href 可以指向壓縮文件（.zip、.rar等格式）、可執行程序（.exe）等，一些下載網站的鏈接就可以寫成這種形式，例如href="./../uploads/data_package/ComputerFoundation.zip"；
- href 甚至還可以指向本機的文件，只是很少這樣使用，例如 href=“D:/Program
Files/360/360safe/360Safe.exe”。
你看，href 本質上就是指向一個文件，這個文件幾乎可以是任意格式的。如果瀏覽器支持這種格式，那么它就可以在瀏覽器上顯示，比如常見的圖片、音頻、視頻等，如果瀏覽器不支持這種格式，那么就提示用戶下載。
另外，href 使用的路徑可以是絕對路徑，也可以是相對路徑。絕對路徑往往以域名為起點，例如 http://c.biancheng.net/view/1719.html；
相對路徑往往以當前文件或者當前域名為起點，例如 ./../uploads/data_package/ComputerFoundation.zip。 后續我們將在《絕對路徑與相對路徑》一文中詳細講解。
2. target屬性
在創建網頁時，默認情況下，超鏈接在當前的瀏覽器窗口打開，但是我們可以使用 target 屬性來改變目標窗口的打開方式。常見的打開方式如下表所示：
target 屬性值：
- _self 默認，在現有的窗口中打開新頁面，原窗口將被覆蓋。
- _blank 在新的窗口中打開新頁面。
- _parent 在當前框架的上一層打開新頁面。
- _top 在頂層框架中打開新頁面。
絕大部分情況下，target 屬性要么不寫，保持默認的 _self，要么把它的值設置為 _blank，在新的窗口中打開鏈接。例如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img標簽</title> </head> <a target="_top" href="https://lol.qq.com/act/a20200922competition/index.html?e_code=507042">英雄聯盟</a> </body> </html>3. <a>標簽的默認樣式
1) 鼠標樣式
當鼠標移入網頁上的某個超鏈接時，其樣式會變為一只小手；當鼠標移出超鏈接區域時，樣式會再次回到箭頭形狀。
2) 顏色及下劃線
任何 HTML 元素都有默認的樣式，<a> 標簽也不例外。在瀏覽器下，超鏈接被點擊后顏色會發生改變：超鏈接被點擊之前是藍色的，點擊之后會變成紫色。
超鏈接默認是帶下劃線的，下劃線顏色和文本顏色保持一致。 瀏覽器根據歷史記錄來判斷超鏈接是否被點擊過，如果 <a> 標簽的 href 屬性和歷史記錄中的某條 URL 重合，那就說明該鏈接被點擊了，否則是沒有被點擊的。所以，清空瀏覽器的歷史記錄會讓超鏈接的顏色再次變回藍色。
4. 圖片鏈接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> ? <p>創建圖片鏈接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> ? <p>無邊框的圖片鏈接: <a href="//www.runoob.com/html/html-tutorial.html"> <img border="0" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p> ? </body> </html>5、電子郵件連接
<a href="mailto:1170562998@qq.com">聯系我</a>6、框架之間的連接
框架是一種常見的網頁布局工具，作用是吧瀏覽器的顯示空間分割為幾個部分，每個部分都可以獨立顯示不同的網頁
用cols屬性將窗口分為左右部分
<frameset cols="30%,*"> <frame> <frame> </frameset>用rows屬性將窗口分為上中下三個部分
<frameset rows="30%,10%,*"> <frame> <frame> <frame> </frameset>框架的嵌套
<frameset cols="30%,*"> <frame> <frameset rows="50%,*"> <frame> <frame> </frameset> </frameset>用src屬性在框架中插入網頁
<frameset cols="30%,*"> <frame src="https://www.bilibili.com/?spm_id_from=333.788.b_696e7465726e6174696f6e616c486561646572.1"> <frameset rows="50%,*"> <frame src="https://www.douyu.com/"> <frame src="https://lol.qq.com/"> </frameset> </frameset>總結
以上是生活随笔為你收集整理的3、HTML ＜a＞标签（超链接）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2、HTML ＜img＞标签（插入图片）
- 下一篇： 4、URL结构解析