Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目錄
- 前言
- 一、超鏈接標簽
- （一）鏈接其它子網頁
- （二）鏈接其它站點
- （三）虛擬超鏈接
- 二、從當前頁面鏈接到指定位置
- 三、鏈接的訪問情況
- 四、在新窗口中打開鏈接
- 例題
- 結語
前言
本節介紹超鏈接標簽即a標簽的用法以及相關應用例題。
一、超鏈接標簽
a標簽，也叫超鏈接標簽，在圖片或者文字上使用，或者可以用在導航欄上，點擊后跳到新的頁面，以供用戶瀏覽。超鏈接表示為<a href ="網址">文字或圖片</a>，這里的"href=“是該標簽的屬性即超鏈接，通過賦值符號”="，來對該屬性進行賦值，而網址是要跳轉的目標網址。
<a href ="網址">文字或圖片</a>它有幾種應用情況：
1、鏈接到本站點的其它子網頁；
2、鏈接到其它站點；
3、虛擬超鏈接。
（一）鏈接其它子網頁
這種情況，是在主頁中點擊文字或者圖片，使其跳轉到其它子網頁。表示為<a href ="文件名">文字或圖片</a>，屬性的賦值號后跟子網頁的文件名，使href屬性取值。
例如下圖在主頁面中點擊"國際"，鏈接至國際欄目子網頁中：
（二）鏈接其它站點
而當點擊文字或者圖片后，若想鏈接至其它站點，表示為<a href ="網頁地址">文字或圖片</a>，即創建一個指向網站的超鏈接，屬性的賦值號后跟跳轉網頁的地址，使href屬性取值，且在地址中要使用https協議。
例如像這樣是錯誤的：<a href="www.baidu.com">百度一下</a>
正確寫法：<a href="http://www.baidu.com">百度一下</a>
例如登錄csdn，使用qq登錄，這里的qq圖標點擊后跳轉至qq登錄頁面，在這里a標簽的作用就是創建一個指向qq登錄頁面的超鏈接：
（三）虛擬超鏈接
虛擬超鏈接，表示為<a href ="#">文字或圖片</a>，屬性的賦值號后跟#，它不會鏈接到其它網址，即還未設計的鏈接，可以理解為空鏈接。
二、從當前頁面鏈接到指定位置
當需要通過a標簽跳轉到指定頁面位置時，需要使用虛擬超鏈接并在跳轉位置的a標簽加上id屬性，即虛擬超鏈接的取值與跳轉位置的a標簽id屬性取值是一樣。
例如，下列html代碼中，我們點擊查看數據庫原理與應用或者查看QT Creator就會跳轉至指定的欄目03和06中：
運行結果：
點擊查看QT Creator，跳轉至欄目06：
三、鏈接的訪問情況
默認情況下，即在未進行CSS的樣式編輯的情況下，鏈接會以不同字體顏色的形式展示其瀏覽情況：
未訪問的鏈接顯示為藍色字體且帶有下劃線；
訪問過的鏈接顯示為紫色字體且帶有下劃線；
當點擊鏈接時，鏈接會顯示為紅色字體且帶有下劃線。
四、在新窗口中打開鏈接
在a標簽內添加上target屬性，且target="_blank"，當點擊這個超鏈接時瀏覽器則會新建一個窗口解析這個鏈接并打開。
<a href ="網址" target="_blank">文字或圖片</a>例如，下列html代碼中，在新的窗口中打開百度鏈接：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><a href ="https://www.baidu.com" target="_blank">百度一下</a></body> </html>運行結果如下：
點擊“百度一下”后，新窗口自動彈出：
例題
例、完成下列網頁設計，其中導航欄里鏈接首頁的其它子網頁，且子網頁中可以跳轉文章，文章暫且不用編輯目錄即可，另外還可以返回csdn主頁和進行百度搜索，效果圖如下:
1、創建站點文件夾，編輯主頁html代碼，即主頁.html文件，如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>Document</title></head><body><h1>首頁</h1><h2>導航欄</h2><hr /><pre><a href="Web前端開發.html">Web前端開發</a><br /><a href="計算機網絡.html">計算機網絡</a><br /><a href="數據庫原理與應用.html">數據庫原理與應用</a><br /><a href="QT Creator.html">QT Creator</a><br /><hr /><a href="https://www.csdn.net/">返回csdn主頁</a><a href="https://www.baidu.com">未找到需要，百度一下</a></pre></body> </html>2、對四個子網頁編輯，分別是Web前端開發.html、計算機網絡.html、數據庫原理與應用.html和QT Creator.html四個html文件，其實代碼都大同小異，如下;
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h1>Web前端開發</h1><p><a href="#">Web前端開發筆記——第一章 Web前端概論</a></p><p><a href="#">Web前端開發筆記——第二章 HTML語言 第一節 標簽、元素、屬性</a></p><p><a href="#">Web前端開發筆記——第二章 HTML語言 第二節 基本標簽</a></p></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h1>計算機網絡實驗</h1><p><a href="#">*（絕對可以安裝成功的HUAWEI eNSP模擬器）計算機網絡實驗（華為eNSP模擬器）——第一章 華為eNSP安裝教程</a></p><p><a href="#">計算機網絡實驗（華為eNSP模擬器）——第二章 VRP通用路由平臺介紹</a></p><p><a href="#">計算機網絡實驗（華為eNSP模擬器）——第三章 配置IP地址和網關</a></p></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h1>數據庫原理與應用</h1><p><a href="#">數據庫原理與應用（SQL Server）筆記 第一章 數據定義語言和數據操縱語言</a></p><p><a href="#">數據庫原理與應用（SQL Server）筆記 第二章 簡單數據查詢</a></p><p><a href="#">數據庫原理與應用（SQL Server）筆記 第三章 連接查詢</a></p></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><h1>QT Creator</h1><p><a href="#">QT Creator應用程序開發——01簡單按鈕顯示</a></p></body> </html>3、都保存好后，此時創建的站點文件夾里面有了五個html文件，如下：
創建的文件夾中，五個html文件：
4、用瀏覽器打開主頁.html，這里我用的是火狐：
5、然后我們測試下導航欄功能，點擊不同的欄目是否可以進行跳轉：
我們發現是沒有問題的，其它也是一樣：
當點擊其中的文章時，我們發現無法跳轉，因為定義是虛擬超鏈接。
6、測試是否能跳轉至csdn官網和百度搜索，點擊導航欄下方的“返回csdn主頁”和“未找到需要，百度一下”，如下：
百度也是可以的：
達到了題設要求！
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第四节 超链接标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Web前端开发笔记——第二章 HTML语
- 下一篇： Web前端开发笔记——第二章 HTML语