超連結元素的使用
- 使用 a 元素
-
- 基本用法
- 錨點定位
- base标簽
使用 a 元素
基本用法
HTML5保留了定義超連結的 a 元素，它可以指定如下屬性：
- href： 指定超連結所連結的另一個資源
- hreflang： 指定超連結所連結的文檔所使用的語言
- target： 指定使用架構集中的哪個架構來裝載另一個資源
- _self： 自身
- _blank： 新視窗
- _top： 頂層架構
- _parent： 父架構
- download： 用于讓使用者下載下傳目标連結所指向的資源，而不是打開該目标連結。該屬性的屬性值指定使用者儲存下載下傳資源時的預設檔案名
- type： 指定被連結文檔的MIME類型
- media： 指定目标URL所引用的媒體類型，預設為all( 隻有當指定了href屬性時該屬性才有效 )
1. 使用超連結
a 标簽可以包含文本、圖像、各種文本格式化元素和表單元素等内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 在本視窗打開頁面 -->
<a href="http://www.baidu.com" target="_blank">在新的頁面打開</a>
<!-- 在新視窗打開頁面 -->
<a href="http://www.baidu.com" target="_self">在本頁面打開</a>
<!-- 圖檔連結 -->
<h3>圖檔連結</h3>
<a href="http://www.baidu.com"><img src="./img/02.jpg" alt=""></a>
</body>
</html>
注意：
- 外部連結：需要添加 http:// ，如：http://www.baidu.com
- 内部連結：直接連結内部頁面名稱即可，比如：<a href=“index.html”> 首頁 </a>
- 如果當時沒有确定連結目标，通常将連結标簽的 href屬性設定為 “#” ，表示目前連結暫時是一個空連結
- 不僅可以建立文本超連結，網頁中的其它元素，如：圖像、表格、音視訊等都可以添加超連結
- href 值可以是絕對路徑或相對路徑
2. 使用 download 屬性
如果為 a 元素指定了 download 屬性，則可控制讓使用者下載下傳目标連結所指向的資源，而不是打開目标連結，download 屬性指定了目标資源另存為的檔案名：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 為圖檔增加超連結 -->
<a href="images/a.jpg" download="a.jpg" type="image/jpeg">
<img src="images/a.jpg" >
</a>
</body>
</html>
錨點定位
通過建立錨點連結可以快速定位到目标内容，實作該功能有兩種方法：
1. 指定id的方法
使用該方法需要兩個步驟：
- 建立一個帶有 id 屬性的标簽，作為需要跳轉的點
- 建立一個 a 标簽，并且指定它的 href 屬性為 #id ，該 id 就是上面建立好的跳轉點的标簽的 id 屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#content1">内容1</a>
<a href="#content2">内容2</a>
<a href="#content3">内容3</a>
<h3 id="content1">内容1</h3>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<h3 id="content2">内容2</h3>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p><p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<h3 id="content3">内容3</h3>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
</body>
</html>
2. 指定name的方法
使用該方法同樣也需要兩個步驟：
- 在需要跳轉的上面加上一個空的 a 标簽，然後使用 name 屬性
- 建立一個 a 标簽，并且指定它的 href 屬性為 #name ，這裡的 name 就是上面建立好的跳轉點的空的 a 标簽的 name 屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#content1">内容1</a>
<a href="#content2">内容2</a>
<a href="#content3">内容3</a>
<h3>内容1</h3>
<a name="content1"></a>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<h3>内容2</h3>
<a name="content2"></a>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p><p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<h3>内容3</h3>
<a name="content3"></a>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
<p>這裡是一段内容</p>
</body>
</html>
此時就可以看到和上面案例同樣的效果。
提示： 也可以跨URL，格式如下 <a href=“url#name”>…</a>。
base标簽
base标簽 用來改變 a 連結的預設行為，它是一個單标簽，一般寫在 head 标簽中，它可以指定下面兩個屬性：
- href： 指定所有連結的基準路徑
- target： 指定超連結預設在哪個視窗打開連結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>base标簽</title>
<!-- 指定預設行為: 在本頁面打開百度-->
<base href="http://www.baidu.com" target="_self">
</head>
<body>
<h3>預設行為: 在本頁面打開百度</h3>
<!-- 使用預設行為 -->
<a href="">使用預設行為</a>
<!-- 隻改變打開方式 -->
<a href="" target="_blank">隻改變打開方式</a>
<!-- 隻改變位址 -->
<a href="http://www.qq.com">隻改變位址</a>
<!-- 同時改變位址和打開方式 -->
<a href="http://www.qq.com" target="_blank">同時改變位址和打開方式</a>
</body>
</html>