〖大前端 - 基础入门三大核心之 html 篇⑪〗- 超级链接
大家好，我是 哈士奇 ，一位工作了十年的"技術混子"， 致力于為開發者賦能的UP主, 目前正在運營著 TFS_CLUB社區。
💬 人生格言：優于別人,并不高貴,真正的高貴應該是優于過去的自己。💬 📫 如果文章知識點有錯誤的地方，請指正！和大家一起學習，一起進步👀 🔥 如果感覺博主的文章還不錯的話，還請 👍 關注、點贊、收藏三連支持 👍 一下博主哦 🏆 CSDN博客專家認證、新星計劃第三季全棧賽道MVP 、華為云享專家、阿里云專家博主 🏆
| 🔥Python全棧白皮書🔥 | 零基礎入門篇 | 以淺顯易懂的方式輕松入門，讓你徹底愛上Python的魅力。 |
| 語法進階篇 | 主要圍繞多線程編程、正則表達式學習、含貼近實戰的項目練習 。 | |
| 自動化辦公篇 | 實現日常辦公軟件的自動化操作，節省時間、提高辦公效率。 | |
| 自動化測試實戰篇 | 從實戰的角度出發，先人一步，快速轉型測試開發工程師。 | |
| 數據庫開發實戰篇 | 掌握關系型與非關系數據庫知識，提升數據庫實戰開發能力。 | |
| 爬蟲入門與實戰 | 更新中 | |
| 數據分析篇 | 更新中 | |
| 前端入門+flask 全棧篇 | 更新中 | |
| django+vue全棧篇 | 更新中 | |
| 拓展-人工智能入門 | 更新中 | |
| 🔥全域運營實戰白寶書🔥 | 運營角色認知篇 | 初識運營，明晰運營的學習路徑 |
| 高轉化文案速成篇 | 三種文案形式，抓住特點才能下筆如有神。 | |
| 策劃活動與執行篇 | 更新中 | |
| 新媒體運營篇 | 更新中 | |
| 社區運營篇 | 更新中 | |
| 私域社群運營篇 | 更新中 | |
| 運營數據分析篇 | 更新中 | |
| 低成本渠道推廣篇 | 更新中 | |
| 網絡安全之路 | 踩坑篇 | 記錄學習及演練過程中遇到的坑，便于后來居上者 |
| 網安知識掃盲篇 | 三天打魚，不深入了解原理，只會讓你成為腳本小子。 | |
| vulhub靶場漏洞復現 | 讓漏洞復現變得簡單，讓安全研究者更加專注于漏洞原理本身。 | |
| shell編程篇 | 不涉及linux基礎，最終案例會偏向于安全加固方向。 [待完結] | |
| WEB漏洞攻防篇 | 2021年9月3日停止更新，轉戰先知社區等安全社區及小密圈 | |
| 滲透工具使用集錦 | 2021年9月3日停止更新，轉戰先知社區等安全社區及小密圈 | |
| 點點點工程師 | 測試神器 - Charles | 軟件測試數據包抓包分析神器 |
| 測試神器 - Fiddler | 一文學會 fiddle ，學不會倒立吃翔，稀得！ | |
| 測試神器 - Jmeter | 不僅是性能測試神器，更可用于搭建輕量級接口自動化測試框架。 | |
| RobotFrameWork | Python實現的自動化測試利器，該篇章僅介紹UI自動化部分。 | |
| Java實現UI自動化 | 文檔寫于2016年，Java實現的UI自動化，仍有借鑒意義。 | |
| MonkeyRunner | 該工具目前的應用場景已不多，文檔已刪，為了排版好看才留著。 |
文章目錄
- ?? 超級鏈接
- 🌟什么是超級鏈接？
- 🌟 "a" 標簽的title屬性
- 🌟 如何在新窗口打開網頁
- 🌟 給圖片設置超級鏈接
- 🌟 頁面內錨點
- 🌟 下載鏈接、郵件鏈接、電話鏈接
- ?下載鏈接
- ?郵件鏈接
- ?電話鏈接
網頁中的超級鏈接非常普遍，接下來我們就來學習超級鏈接標簽的使用。
?? 超級鏈接
🌟什么是超級鏈接？
超級鏈接是將網頁和網頁連接到一起的方法。
比如從百度一下首頁可以跳轉到百度新聞，從百度新聞可以跳轉到具體的一條新聞頁面。。。這種效果就是使用超級鏈接實現的。超級鏈接使整個互聯網就像一張巨大且錯綜復雜的“網”。
超級鏈接的標簽是<a>標簽，a是anchor（錨）的首字母，它的屬性href屬性(hypertext reference)用來配置想要鏈接的第二個網頁的網址。
示例代碼：
<!--超級鏈接標簽：--> <a href="https://www.baidu.com/">百度一下</a>除了鏈接百度等公共的網址，也可以鏈接我們自己項目中的網頁：
href屬性和圖片標簽里的src屬性配置路徑方式相似，`支持相對路徑和絕對路徑`。
🌟 “a” 標簽的title屬性
title屬性用于設置鼠標的懸停文本，鼠標放上去會有個懸浮框出來，加上title屬性后會有這種效果：
🌟 如何在新窗口打開網頁
目前我們點擊超級鏈接時會覆蓋當前網頁，那保留當前網頁，在新的標簽頁中打開鏈接呢？
可以在<a>標簽中配置target屬性來實現單擊自動用新標簽頁打開鏈接:
需要注意target屬性的值在HTML4和HTML5中的寫法不一樣，不過在目前的HTML5中兩種寫法都可以。
<!--HTML5中的寫法:--> <a href="https://www.baidu.com/" target="blank">百度一下</a> <!--HTML4中的寫法--> <a href="https://www.baidu.com/" target="_blank">百度一下</a>效果如下：
🌟 給圖片設置超級鏈接
給圖片設置超級鏈接，只需要用<a>標簽包裹img標簽即可：
效果如下：
🌟 頁面內錨點
較長的頁面，可以適當給h系列標簽添加id屬性，它將稱為頁面內的“錨點”。
“錨點”的作用：
示例代碼：
<a href="https://vibaike.com/117123/?ivk_sa=1024320u#index-2">前端開發-html</a>頁面錨點小實戰：
🌟 下載鏈接、郵件鏈接、電話鏈接
?下載鏈接
指向exe、zip、rar等文件格式的鏈接，將自動成為下載鏈接，點擊這個鏈接瀏覽器會自動下載鏈接中的文件。
<a href="1.zip">下載</a>?郵件鏈接
有mailto:前綴的鏈接是郵件鏈接，系統將自動打開Email相關軟件。
<a href="mailto:139xxxx678@qq.com">點擊發郵件</a>?電話鏈接
有tel:前綴的鏈接是電話鏈接，系統將自動打開撥號盤（需要手機打開這個鏈接）
<a href="tel:12306">打電話買火車票</a>總結
以上是生活随笔為你收集整理的〖大前端 - 基础入门三大核心之 html 篇⑪〗- 超级链接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MP2359电路图
- 下一篇： 前端调用天气接口，返回实时和预报天气