八、超連結
阿新 • • 發佈：2021-01-13
技術標籤：前端學習
8.1 超連結簡介
超連結，英文名是hyperlink。每一個網站都是由非常多的網頁組成，而頁面之間通常都是通過超連結來相互關聯的。超連結能夠讓我們在各個獨立的頁面之間方便地跳轉。
一、a標籤
在HTML中，我們可以使用a標籤來實現超連結。
<a href="連結地址">文字或圖片</a>
說明：
href表示你想要跳轉到那個頁面的路徑（也就是地址），可以是相對路徑，也可以是絕對路徑。
超連結的範圍非常廣，我們可以將文字設定為超連結，這個叫做“文字超連結”。也可以將圖片設定為超連結，這個叫做“圖片超連結”。不管是哪種超連結，我們都是把文字或圖片放到a標籤內部來實現的。
二、target屬性
預設情況下，超連結都是在當前瀏覽器視窗開啟新頁面的。在HTML中，我們可以使用target屬性來定義超連結開啟視窗的方式。
<a href="連結地址" target="開啟方式"></a>
說明：
a標籤的target屬性取值有4種，如下表所示。
| 屬性值 | 說明 |
|---|---|
| _self | 預設值，在原來視窗開啟連結 |
| _blank | 在新視窗開啟連結 |
| _parent | 在父視窗開啟連結 |
| _top | 在頂層視窗開啟超連結 |
8.2 內部連結
外部連結指向的是“外部網站的頁面”，而內部連結指向的是“自身網站的頁面”。上一節我們接觸的就是外部連結，這一節我們來學習一下內部連結。
8.3 錨點連結
在HTML中，錨點連結其實是內部連結的一種，它連結地址（也就是href）指向的是當前頁面的某個部分。所謂的錨點連結，簡單來說，就是點選某一個超連結，然後它就會跳到當前頁面的某一部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div> 
分析：
id屬性就是元素的名稱，這個id名是隨便起的（一般是英文）。不過在同一個頁面中，id是唯一的，也就是說一個頁面不允許出現相同的id。
a標籤的href屬性取值時，需要在id前面加上“#”（井號），以表示這是一個錨點連結。
以上學習參考綠葉學習網