HTML网页设计：四、超链接
生活随笔
收集整理的這篇文章主要介紹了
HTML网页设计：四、超链接
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
超鏈接
???????HTML中通過使用<a>標簽來創建鏈接，當您把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變為一只小手，點擊相應的文本或圖片會跳轉至新的頁面或者當前頁面中的某個位置。
HTML系列文章目錄
文章目錄
- 超鏈接
- HTML系列文章目錄
- 1.a標簽
- 2.錨鏈接
- （1）當跳轉到當前頁面的特定位置時，直接將錨標記設為href屬性的值。
- （2）當跳轉到另一個網頁的特定位置時，將錨標記添加到鏈接地址的末尾。
- （3）當href屬性的值為一個“#”時，直接跳轉至本頁面頂部。
- 3.功能性鏈接
- （1）郵箱鏈接
- （2）QQ鏈接
1.a標簽
HTML 鏈接連接語法如下：
\<a href="url" target="打開方式" name="錨的名稱" title="">Link text\</a>- href屬性規定鏈接的目標，是a標簽的必須屬性。
- target屬性規定在何處打開鏈接文檔。它有五個選項：
????（1）_blank：在新窗口中打開被鏈接文檔。
????（2）_self：默認。在相同的框架中打開被鏈接文檔。
????（3）_parent：在父框架集中打開被鏈接文檔。
????（4）_top：在整個窗口中打開被鏈接文檔。
????（5）framename：在指定的框架中打開被鏈接文檔。 - name屬性規定錨的名稱，HTML5 中不支持。
- title屬性說明了鼠標指針懸停所顯示的文字。
- 開始標簽和結束標簽之間的文字被作為超級鏈接來顯示，即上面一行的代碼顯示為Link text。
<a> 標簽的使用有如下兩種方式：
(1)通過使用 href 屬性 - >創建指向另一個文檔的鏈接。
(2)通過使用 name 屬性 - >創建文檔內的書簽。
一些簡單的超鏈接代碼示例如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡單的超鏈接合集</title> </head> <body><!--指向360瀏覽器的超鏈接--><a href="https://www.hao123.com/">點擊跳轉至360瀏覽器頁面</a><br/><!--使用新標簽頁打開圖像標簽學習頁面--><a href="../圖像標簽學習/圖像標簽學習.html" target="_blank">點擊跳轉圖像標簽學習頁面</a> <br/><!--在當前標簽頁打開百度--><a href="https://www.baidu.com/" target="_self" title="跳轉至百度"><img src="../圖像標簽學習/7908.jpg" alt="許嵩" width="100px" height="80px"></a> </body> </html>網頁示例如下：
2.錨鏈接
???????錨鏈接可以鏈接到本頁面的特定位置，也可以鏈接到另一個頁面的特定位置，其實現方式是添加錨標記。html5不支持name屬性，以下用id屬性示例，name屬性用法大致一樣。
（1）當跳轉到當前頁面的特定位置時，直接將錨標記設為href屬性的值。
???????其代碼格式如下：
<a href="#標記名">跳轉到本頁面的標記處</a>（2）當跳轉到另一個網頁的特定位置時，將錨標記添加到鏈接地址的末尾。
???????其代碼格式如下：
<a href="url#標記名">跳轉到另一個頁面的標記處</a>"#標記名"為頁面中某一個標簽的id屬性值，即若想要跳轉到網頁的某個位置，就先在這個位置所在的標簽設置id屬性，然后才能通過錨鏈接跳轉到該位置。
（3）當href屬性的值為一個“#”時，直接跳轉至本頁面頂部。
???????其代碼格式如下：
<a href="#">返回頂部</a>錨鏈接部分代碼示例如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>錨鏈接學習</title> </head><body><p><a href="https://www.hao123.com/" name="第一個鏈接">點擊跳轉至360瀏覽器頁面</a></p><p><a href="https://www.baidu.com/" target="_blank"><img src="../圖像標簽學習/7908.jpg" alt="許嵩" id="圖片1" width="100px" height="80px"></a></p><p><a href="https://www.baidu.com/" target="_self" id="圖片2"><img src="../9736.jpg" alt="許嵩" width="100px" height="80px"></a></p><p><a href="https://www.baidu.com/" target="_blank" title="跳轉至百度">點擊跳轉至百度頁面</a></p><p><a href="https://www.baidu.com/" target="_blank" title="跳轉至百度">點擊跳轉至百度頁面</a></p><p><a href="https://www.baidu.com/" target="_blank" title="跳轉至百度">點擊跳轉至百度頁面</a></p><p><a href="#第一個鏈接">點擊跳轉至鏈接1</a></p><p><a href="#圖片1">點擊跳轉至圖片1</a></p><p><a href="#圖片2">點擊跳轉至圖片2</a></p><p><a href="#">點擊跳轉至頂部</a></p> </body> </html>3.功能性鏈接
（1）郵箱鏈接
<a href="mailto:郵箱號">點擊向我發送郵件</a>（2）QQ鏈接
需要在QQ推廣里面加載生成鏈接 然后復制粘貼即可
總結
以上是生活随笔為你收集整理的HTML网页设计：四、超链接的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LinkCutTree 总结
- 下一篇： html页面高度设为自动,html –