1. 程式人生 > >HTML5 a標籤定義超連結詳解

HTML5 a標籤定義超連結詳解

前言

<a>標籤定義超連結,用於從一張頁面連結到另一張頁面。 
<a>元素最重要的屬性是 href 屬性,它指示連結的目標。

指向 w3school 的超連結:

<a href="http://www.w3school.com.cn">W3School</a>
  • 1

<a>標籤的偽類樣式

一組專門的預定義的類稱為偽類,主要用來處理超連結的狀態。超連結文字的狀態可以通過偽類選擇符+樣式規則來控制。偽類選擇符包括:

  1. a 表示所有狀態下的連線 如 a{color:red}
  2. a:link: 未訪問連結 ,如 a:link {color:blue}
  3. a:visited: 已訪問連結 ,如 a:visited{color:blue}
  4. a:active: 啟用時(連結獲得焦點時)連結的顏色 ,如 a:active{color:blue}
  5. 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型別