免費AI編程助手
HTML 超鏈接
HTML超鏈接
超鏈接為HTML提供了基礎，用戶可以通過HTML在同一文檔內和跨頁面瀏覽內容。
您可以使用 a 元素創(chuàng)建超鏈接。
屬性
a 元素具有局部屬性: href，hreflang，media，rel，target，type 。
- href - 指定a元素引用的資源的URL。
- hreflang - 指定鏈接資源的語言。
- media - 指定鏈接內容用于的設備。此屬性與頭元素元素使用相同的設備和特征值。
- rel - 指定文檔和鏈接資源之間的關系類型。此屬性使用與鏈接元素的rel屬性相同的值。
- target - 指定應在其中打開鏈接資源的瀏覽上下文。
- type - 指定鏈接資源的MIME類型，例如text/html。
id，coords，shape，urn，charset，methods 和 rev 屬性已過時。
外部超鏈接
您可以通過將元素中的href屬性設置為以http://開頭的URL來創(chuàng)建指向其他HTML文檔的超鏈接。
當用戶單擊超鏈接時，瀏覽器將加載指定的頁面。
以下代碼顯示用于鏈接到外部內容的a元素。
<!DOCTYPE HTML> <html> <body> I like <a href="http://www.o2fo.com">w3cschool</a>. </body> </html>
注意
并非所有網(wǎng)址都必須引用其他網(wǎng)頁。
瀏覽器還支持其他協(xié)議，如 https 和 ftp 。如果要引用電子郵件地址，可以使用 mailto 協(xié)議; 例如， mailto:info@example.com 。
相對網(wǎng)址
如果 href 屬性的值不以start開頭識別的協(xié)議，例如 http:// 那么瀏覽器將超鏈接視為相對引用。
以下代碼給出了相對URL的示例。
<!DOCTYPE HTML> <html> <body> I like <a href="index.html">w3cschool</a>. </body> </html>
代碼將 href 屬性設置為 index.html 。
當用戶單擊鏈接時，瀏覽器使用的URL當前文檔以確定如何加載鏈接的頁面。
內部超鏈接
您可以創(chuàng)建超鏈接，使瀏覽器窗口中的另一個元素進入視圖。
您可以使用CSS樣式ID選擇器#id創(chuàng)建內部超鏈接，如以下代碼所示。
<!DOCTYPE HTML>
<html>
<body>
<a href="#w3cschool">here</a>.
<br />
<br />
<br />
<br />
<br />
<br />
<p id="w3cschool">This is a test.</p>
</body>
</html>上面的代碼用 href 創(chuàng)建了一個超鏈接 #tutorial 的值。
當用戶單擊鏈接時，瀏覽器將在文檔中查找元素其 id 屬性的值為 tutorial 。如果元素不可見屏幕，瀏覽器將滾動文檔以顯示它。
如果瀏覽器不能找到具有所需 id 屬性值的元素，它會再次搜索，尋找一個與目標匹配的 name 屬性。
Target瀏覽上下文
元素的 target 屬性告訴瀏覽器要顯示鏈接資源的位置。
默認情況下，瀏覽器使用顯示當前文檔的窗口，選項卡或框架顯示鏈接的文檔并替換現(xiàn)有文檔。
以下列表描述了目標屬性支持的值。
- _blank - 在新窗口（或選項卡）中打開文檔。
- _parent - 打開父框架集中的文檔。
- _self - 在當前窗口中打開文檔（這是默認行為）。
- _top - 在窗口的整個主體中打開文檔。
- <frame> - 在指定的框架中打開文檔。
這些值中的每一個表示瀏覽上下文。
使用錨點偽類
鏈接可以以不同的方式顯示:
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
每個偽類的含義在css注釋中列出。
以下代碼設置四個錨偽類。
<!DOCTYPE HTML>
<html>
<head>
<style>
a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}
</style>
</head>
<body>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</body>
</html>偽類可以與CSS類組合。以下示例告訴瀏覽器以紅色顯示訪問的錨點鏈接。
a.red:visited {color:#FF0000;}
<a class="red" href="http://www.o2fo.com">www.o2fo.com</a>
更多建議：