HTML超鏈接和錨鏈接
一、定義
HTML的超鏈接(Hyperlink)用于在網頁之間創建鏈接,使用戶可以點擊這些鏈接來導航到其他頁面或資源。
二、基本語法
1、語法
HTML中的超鏈接使用a
標簽來定義
<a href="URL">鏈接文本</a>
注意: href屬性指定了鏈接目標的URL
? 鏈接文本是用戶在網頁上看到的可點擊文本。
2、跳轉到外部頁面
<a href="http://www.baidu.com">跳轉到百度頁面</a>
3、跳轉到本地頁面
<a href="index.html" target="_self">跳轉到百度</a>
4、圖片超鏈接
<a href="index.html" target="_blank"><img src="img/favicon.ico" width="50px" height="80px" /></a>
效果截圖:
5、超鏈接的target屬性
target
屬性:指定鏈接在何處打開。常見的值包括:_self
:在同一窗口或標簽頁中打開(默認)。_blank
:在新窗口或標簽頁中打開。_parent
:在父框架中打開。_top
:在整個窗口中打開。
三、錨鏈接
1、定義: 在HTML中,錨鏈接(Anchor Link)是一種用于在頁面內或跨頁面之間創建超鏈接的方法。通過錨鏈接,用戶可以快速跳轉到頁面內的特定位置或跳轉到其他頁面的特定位置
理解:跳轉到下錨點的位置
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="#new01">法治</a><!--定位到錨點處--><a href="#new02">國際</a><!--定位到錨點處--><a href="#new03">娛樂</a><!--定位到錨點處--><a name="new01"></a><!--下錨點--><h1>法治新聞 </h1><h1>法治新聞 </h1><h1>法治新聞 </h1><h1>法治新聞 </h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><h1>法治新聞</h1><a name="new02"></a><!--下錨點--><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><h1>國際新聞</h1><a name="new03"></a><!--下錨點--><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1><h1>娛樂新聞</h1></body>
</html>
2、代碼解析
在目錄中,我們使用標簽的href
屬性來指向這些錨點,通過在href
屬性中添加#
符號和對應的錨點名稱,實現錨鏈接的創建。點擊目錄中的鏈接將會快速跳轉到相應的內容部分。
通過使用錨鏈接,可以方便用戶在頁面內部進行導航和跳轉,提升用戶體驗和頁面的可用性。