HTML5 a標籤定義超連結詳解
阿新 • • 發佈:2019-02-09
前言
<a>標籤定義超連結,用於從一張頁面連結到另一張頁面。
<a>元素最重要的屬性是 href 屬性,它指示連結的目標。
指向 w3school 的超連結:
<a href="http://www.w3school.com.cn">W3School</a>
- 1
<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:link ->a:hover ->a:active ->a:visited。
另外,a:active不能設定有無下劃線(總是有的)。
eg:
a {font-size:16px}
a:link {color: blue; text-decoration:none;} //未訪問:藍色、無下劃線
a:active:{color: red; } //啟用:紅色
a:visited {color:purple;text-decoration:none;} //已訪問:紫色、無下劃線
a:hover {color: red; text-decoration:underline;} //滑鼠移近:紅色、下劃線
- 1
- 2
- 3
- 4
- 5
設定<a>的樣式:
對超連結下劃線設定 使用程式碼”text-decoration”
語法:
text-decoration : none || underline || blink || overline || line-through
- text-decoration引數:
- none : 無裝飾
- blink : 閃爍
- underline : 下劃線
- line-through : 貫穿線
- overline : 上劃線
<a>標籤的一些屬性
<a>標籤是成對出現的,以<a>開始, <a>結束
屬性.
- accesskey – 代表一個連結的快捷鍵訪問方式
- charset – 指定了連結到的頁面所使用的編碼方式,比如UTF-8
- coords – 使用影象地圖的時候可以使用此屬性定義連結的區域,通常是使用x,y座標
- href – 代表一個連結源(就是連結到什麼地方)
- hreflang – 指出了連結到的頁面所使用的語言編碼
- rel – 代表文件與連結到的內容(href所指的內容)的關係
- rev – 代表文件與連結到的內容(href所指的內容)的關係
- shape – 使用影象地圖的時候可以使用shape指定連結區域
- tabindex – 代表使用"tab"鍵,遍歷連結的順序
- target – 用來指出哪個視窗或框架應該被此連結開啟
- title – 代表連結的附加提示資訊
- type – 代表連結的MIME型別