HTML <a> 標籤

admin發表於2018-10-08
HTML

超連結是網頁的核心內容之一。

通過超連結可以實現站內頁面或者站際頁面之間的跳轉。

沒有超連結的網站的可用性必然具有很大的侷限性。

使用<a>元素可建立一個超連結，程式碼如下：

[HTML] 純文字檢視 複製程式碼
<a href="http://www.softwhy.com">螞蟻部落</a>

上面程式碼中使用<a>標籤建立一個超連結，點選它可以跳轉到螞蟻部落首頁。

<a>標籤主要屬性如下：

（1）.href：用於規定連結的跳轉地址。

（2）.download：用於規定下載檔案的名稱（HTML5）。

（3）.target：用於規定href指向的頁面在何處開啟。

連結具有很多不同的狀態，CSS也可以根據連結不同的狀態為其設定CSS樣式。

具體可以參閱CSS 設定連結樣式一章節。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<a href="http://www.softwhy.com">螞蟻部落</a>
</body>  
</html>

上面程式碼中，點選連結將會跳轉到href屬性規定連結地址。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<a href="http://www.softwhy.com">
  <img src="mytest/div+css/border.jpg"/>
</a>
</body>  
</html>

<a>元素之間的內容並不一定非要是文字，也可以是圖片。

這樣的話可以是連結更加豐富多彩一些。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<p>點選下載圖片<p>
<a href="demo/html5/img/abdedefg.png" download="本站logo">點選下載</a>
</body>  
</html>

download是HTML5新增屬性，它可以讓下載檔案的名稱更加人性化。

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/235127hdaia7kqkxwwdqp0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

很多時候，需要下載的檔案在伺服器中的名稱是通過各種方式計算而成，比如根據檔案上傳時間命名。

這樣的檔案命名方式對下載者來說是非常不人性化的，那麼可以通過download為檔案重新命名。

上面程式碼中，檔案在伺服器中的儲存名稱是"abdedefg.png"，通過download將其重名為"本站logo"。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<p>點選下載圖片<p>
<a href="http://www.softwhy.com" target="_blank">螞蟻部落</a>
</body>  
</html>

通過target屬性可以規定頁面在何處開啟。target可以有如下屬性值：

（1）._blank：規定在新的視窗開啟href規定的頁面。

（2）._self：預設值，在當前頁面所在的視窗開啟href規定的頁面。。

（3）._parent：在包含當前子視窗的父視窗或者框架集中開啟href規定的頁面。

（4）._top：在整個視窗中開啟被href規定的頁面。

（5）.framename：在指定的框架中開啟href規定的頁面。

相關文章