HTML 鏈接標簽

定義和用法

<a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。

<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。

在所有瀏覽器中，鏈接的默認外觀是：

• 未被訪問的鏈接帶有下划線而且是藍色的
• 已被訪問的鏈接帶有下划線而且是紫色的
• 活動鏈接帶有下划線而且是紅色的

提示：您可能已經注意到了，W3School 站點內的鏈接外觀與默認的鏈接外觀非常不同。您可以使用 CSS 偽類向文本超鏈接添加復雜而多樣的樣式。

 提示和注釋

 提示：如果不使用 href 屬性，則不可以使用如下屬性：download, hreflang, media, rel, target 以及 type 屬。

 提示：被鏈接頁面通常顯示在當前瀏覽器窗口中，除非您規定了另一個目標（target 屬性）。

 提示：請使用 CSS 來設置鏈接的樣式。

屬性

 5 ：HTML5中的新屬性

屬性	值	描述	例子	瀏覽器支持
download  5	filename（規定作為文件名來使用的文本。）	規定被下載的超鏈接目標。	<a href="/images/myw3schoolimage.jpg" download="w3logo"></a>	只有 Firefox 和 Chrome 支持
href	url      超鏈接的 URL。 可能的值： 絕對 URL - 指向另一個站點（比如 href="http://www.example.com/index.htm"） 相對 URL - 指向站點內的某個文件（href="index.htm"） 錨 URL - 指向頁面中的錨（href="#top"）	規定鏈接指向的頁面的 URL。	<a href="http://www.w3school.com.cn"> W3School </a>	所有瀏覽器都支持
hreflang	hreflang="value" 雙字符的語言代碼，指定被鏈接文檔的語言。	規定被鏈接文檔的語言。	<a href="http://www.w3school.com.cn" hreflang="zh"> W3School </a>	主流的瀏覽器幾乎都不支持
media  5	media_query	規定被鏈接文檔是為何種媒介/設備優化的。 該屬性用於規定目標 URL 是為特殊設備（比如 iPhone）、語音或打印媒介設計的。 該屬性可接受多個值。 只能在 href 屬性存在時使用。	<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> 打開用於打印的 media 屬性頁面 </a>
rel	text	規定當前文檔與被鏈接文檔之間的關系。 用於 <a> 標簽的可選屬性 rel 和 rev 分別表示源文檔與目標文檔之間正式的關系和方向。rel 屬性指定從源文檔到目標文檔的關系，而 rev 屬性則指定從目標文檔到源文檔的關系。這兩種屬性可以在 <a> 標簽中同時使用。 rel 或 rev 屬性的值都是以空格分隔的關系列表。實際的關系名和它們的含義取決於你自己：HTML 或 XHTML 標准並沒有正式提出這兩種屬性。例如，一系列文檔中的某個文檔可能會在鏈接中包含它的關系：	<a rel="friend" href="http://www.w3c.com/">w3c</a>	所有瀏覽器都支持 rel 屬性。
target	_blank   (在新窗口中打開被鏈接文檔。) _self       (默認。在相同的框架中打開被鏈接文檔。) _parent  (在父框架集中打開被鏈接文檔。) _top       (在整個窗口中打開被鏈接文檔。) framename (在指定的框架中打開被鏈接文檔。)	規定在何處打開鏈接文檔。	<a href="http://www.w3school.com.cn/" target="_blank"> Visit W3School! </a>
type   5	被鏈接文檔的 MIME 類型。	規定被鏈接文檔的的 MIME 類型。 只能在 href 屬性存在時使用。	<a href="http://www.w3school.com.cn" type="text/html"> W3School </a>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

超鏈接樣式
一組專門的預定義的類稱為偽類，主要用來處理超鏈接的狀態。超鏈接文字的狀態可以通過偽類選擇符＋樣式規則來控制。偽類選擇符包括： 
總: a表示所有狀態下的連接 如 a{color:red} 
① a:link： 未訪問鏈接 ,如 a:link {color:blue} 
② a:visited： 已訪問鏈接 ,如 a:visited{color:blue} 
③ a:active： 激活時（鏈接獲得焦點時）鏈接的顏色 ,如 a:active{color:blue} 
④ a:hover： 鼠標移到鏈接上時 ,如 a:hover {color:blue} 
一般a:hover和a:visited鏈接的狀態（顏色、下划線等）應該是相同的。 
前三者分別對應body元素的link、vlink、alink這三個屬性。 
四個“狀態”的先后過程是：a:link ->a:hover ->a:active ->a:visited。
另外，a:active不能設置有無下划線（總是有的）。 

舉例：偽類的常見狀態值 

<style type="text/css">

a{font-size:16px;}

a:link{color:blue;text-decoration:none;}   //未訪問：藍色，無下划線。

a:active{color:red;}   // 激活：紅色。

a:visited{color:purple;text-decoration:nonr;}  //已訪問：紫色，無下划線

a:hover{color:red;text-decoration:underline;}  //鼠標移近：紅色，下划線

</style>

如何去掉<a>的下划線：

 對超鏈接下划線設置 使用代碼"text-decoration"

語法： 

text-decoration : none || underline || blink || overline || line-through 

text-decoration參數： 
none : 　無裝飾
blink : 　閃爍
underline : 　下划線
line-through : 　貫穿線
overline : 　上划線
去掉下划線的方法就是將其text-decoration設置為none即可。