HTML 超鏈接
HTML超鏈接
超鏈接為HTML提供了基礎(chǔ)，用戶可以通過(guò)HTML在同一文檔內(nèi)和跨頁(yè)面瀏覽內(nèi)容。
您可以使用 a 元素創(chuàng)建超鏈接。
屬性
a 元素具有局部屬性: href，hreflang，media，rel，target，type 。
- href - 指定a元素引用的資源的URL。
- hreflang - 指定鏈接資源的語(yǔ)言。
- media - 指定鏈接內(nèi)容用于的設(shè)備。此屬性與頭元素元素使用相同的設(shè)備和特征值。
- rel - 指定文檔和鏈接資源之間的關(guān)系類型。此屬性使用與鏈接元素的rel屬性相同的值。
- target - 指定應(yīng)在其中打開(kāi)鏈接資源的瀏覽上下文。
- type - 指定鏈接資源的MIME類型，例如text/html。
id，coords，shape，urn，charset，methods 和 rev 屬性已過(guò)時(shí)。
外部超鏈接
您可以通過(guò)將元素中的href屬性設(shè)置為以http://開(kāi)頭的URL來(lái)創(chuàng)建指向其他HTML文檔的超鏈接。
當(dāng)用戶單擊超鏈接時(shí)，瀏覽器將加載指定的頁(yè)面。
以下代碼顯示用于鏈接到外部?jī)?nèi)容的a元素。
<!DOCTYPE HTML> <html> <body> I like <a href="http://www.15014759268.cn">w3cschool</a>. </body> </html>
注意
并非所有網(wǎng)址都必須引用其他網(wǎng)頁(yè)。
瀏覽器還支持其他協(xié)議，如 https 和 ftp 。如果要引用電子郵件地址，可以使用 mailto 協(xié)議; 例如， mailto:info@example.com 。
相對(duì)網(wǎng)址
如果 href 屬性的值不以start開(kāi)頭識(shí)別的協(xié)議，例如 http:// 那么瀏覽器將超鏈接視為相對(duì)引用。
以下代碼給出了相對(duì)URL的示例。
<!DOCTYPE HTML> <html> <body> I like <a href="index.html">w3cschool</a>. </body> </html>
代碼將 href 屬性設(shè)置為 index.html 。
當(dāng)用戶單擊鏈接時(shí)，瀏覽器使用的URL當(dāng)前文檔以確定如何加載鏈接的頁(yè)面。
內(nèi)部超鏈接
您可以創(chuàng)建超鏈接，使瀏覽器窗口中的另一個(gè)元素進(jìn)入視圖。
您可以使用CSS樣式ID選擇器#id創(chuàng)建內(nèi)部超鏈接，如以下代碼所示。
<!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)建了一個(gè)超鏈接 #tutorial 的值。
當(dāng)用戶單擊鏈接時(shí)，瀏覽器將在文檔中查找元素其 id 屬性的值為 tutorial 。如果元素不可見(jiàn)屏幕，瀏覽器將滾動(dòng)文檔以顯示它。
如果瀏覽器不能找到具有所需 id 屬性值的元素，它會(huì)再次搜索，尋找一個(gè)與目標(biāo)匹配的 name 屬性。
Target瀏覽上下文
元素的 target 屬性告訴瀏覽器要顯示鏈接資源的位置。
默認(rèn)情況下，瀏覽器使用顯示當(dāng)前文檔的窗口，選項(xiàng)卡或框架顯示鏈接的文檔并替換現(xiàn)有文檔。
以下列表描述了目標(biāo)屬性支持的值。
- _blank - 在新窗口（或選項(xiàng)卡）中打開(kāi)文檔。
- _parent - 打開(kāi)父框架集中的文檔。
- _self - 在當(dāng)前窗口中打開(kāi)文檔（這是默認(rèn)行為）。
- _top - 在窗口的整個(gè)主體中打開(kāi)文檔。
- <frame> - 在指定的框架中打開(kāi)文檔。
這些值中的每一個(gè)表示瀏覽上下文。
使用錨點(diǎn)偽類
鏈接可以以不同的方式顯示:
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 */
每個(gè)偽類的含義在css注釋中列出。
以下代碼設(shè)置四個(gè)錨偽類。
<!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類組合。以下示例告訴瀏覽器以紅色顯示訪問(wèn)的錨點(diǎn)鏈接。
a.red:visited {color:#FF0000;}
<a class="red" href="http://www.15014759268.cn">www.15014759268.cn</a>
更多建議：