《個人學筆記六》
超鏈接的語法
超鏈接，即超級鏈接，就是指按內容鏈接，超級鏈接在本質上屬于一個網頁的一部分，它是一種允許我們同其他網頁或站點之間進行連接的元素，各個網頁鏈接在一起后，才能真正構成一個網站，在超文本檔案中，超鏈接用標記語言的標簽指出，
超鏈接是Web頁面區別于其他媒體的重要特征之一，網頁瀏覽者只要單擊網頁中的超鏈接就可以自動跳轉到超鏈接的目標物件，且超鏈接的數量是不受限制的，文本超鏈接是分配目標URL的字或短語，圖片超鏈接是為整個圖片分配默認超鏈接，也可以為圖片分配一個或多個熱點，（借鑒于百度知道）
1.語法說明
超鏈接a標記以< a><開頭< /a>結尾.期間內容位超鏈接標題，超鏈接由目的地址、鏈接標題、打開位置三部分組成，
2.屬性說明
- href：超鏈接指向的目標檔案，
- name：規定錨（anchor）的名稱，
- title：指向鏈接的提示資訊，
- target：指定打開的目標檔案，如表所示：
| 屬性值 | 說明 |
|---|---|
| _self | 帶當前框架中打開鏈接 |
| _blank | 在一個全新的空白視窗中打開鏈接 |
| _top | 在頂層框架中打開鏈接，也可以理解為在根跟框架中打開鏈接 |
| _parent | 在當前框架的上一層打開鏈接 |
| _framename | 在指定的框架或浮動的框架中打開鏈接，框架名稱可以自定義 |
練習參考代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超鏈接演示</title>
</head>
<body>
<h3>超鏈接演示</h3>
<a href="http://www.baidu.com" title="BaiDu">百度一下</a><br>
<a href="http://www.edu.cn" target="_blank" title="CERNET">教育課與科研計算機網</a><br>
<a href="http://www.sina.com.cn" target="_self" title="Sina">新浪</a>
</body>
</html>
瀏覽器顯示結果
注釋：剛啟動瀏覽器是，超鏈接的標題默認是紅色的，只要一點進去標題會變紫色，如現圖所示，
路徑介紹
當我們需要跳轉一個服務器內部頁面時，一般我們會使用相對路徑
相對路徑都會使用.或. .開頭
./
. ./(兩點之間沒空格)
./可以省略不寫，如果不寫./也不寫…/則就相當于寫了./
./表示當前檔案所在的目
. ./當前檔案所在目錄的上一級目錄
<!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="./restudy6.html">點擊此進入另一個檔案</a><br>
<a href="restudy6.html">點擊此進入另一個檔案</a><br>
<a href="../CSS/css1.html">進入上一級CSS檔案中的css1.html</a>
</body>
</html>
瀏覽器顯示結果：
點擊第一個鏈接或第二個鏈接進入
點擊第三個鏈接進入
部分應用
可以直接將超鏈接的href屬性設定為#，這樣點擊超鏈接后頁面不會發生跳轉，而是轉到當前頁面的頂部位置
可以跳轉到頁面的指定位置，只需要將href屬性設定 #目標元素的id屬性值
id屬性 （唯一不重復的）
每一個標簽都可以增添一個id屬性
id屬性就是元素的唯一標識，同一個頁面不能出現出現重復的id屬性
在開發中可以將#作為超鏈接的展位符使用
也可以使用 javascript: ；來作為超鏈接的占位符
本人學習圖片：
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/178229.html
標籤：其他
上一篇：0基礎童鞋快速開始學習前端開發