超鏈接介紹


超鏈接是網站中使用比較頻繁的元素,是各個網頁之間的橋梁,它能夠讓瀏覽者在各個獨立的頁面之間方便的跳轉。除了指向一個網頁之外,超鏈接還可以用於指向圖片、文件、郵箱地址等。

創建超鏈接

在HTML中創建超鏈接非常簡單!只需用標簽環繞需被鏈接的對象即可,基本語法格式如下:

<a href="跳轉目標” target=“目標窗口的彈出方式”>文本或圖像</a>

a標簽常用屬性:

1. href:用於指定鏈接目標的url地址,當給標簽應用href屬性時,它就具有了超鏈接的功能。

2. target:用於指定鏈接頁面的打開方式,其取值有self和blank兩種。

  • _self:默認值,表示目標窗口的彈出方式為在原窗口上;
  • _blank:表示目標窗口的彈出方式為,創建一個新的窗口。(當內容較多時,此方法就顯得較麻煩,此時就可以使用標簽來進行簡化,具體使用方法見文末~)。
 1 <!--舉個栗子-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body>
 9 <h3>友情鏈接:</h3>
10 <a href="http://www.baidu.com" target="_self">百度</a>
11 <a href="http://www.sohu.com">搜狐</a>
12 <a href="http://www.163.com" target="_blank">網易</a>
13 </body>
14 </html>

 

 

注意:

  1. 外部鏈接:需添加 “http://”;
  2. 內部鏈接:直接鏈接內部頁面名稱即可;如 :< a href="index.html"> 首頁
  3. 當沒有確定鏈接目標時,通常將鏈接標簽的href屬性值定義為“#”(即href="#"),表示該鏈接暫時為一個空鏈接;
  4. 不僅可以創建文本超鏈接,在網頁中各種網頁元素,如圖像、表格、音頻、視頻等都可以添加超鏈接。

網站中經常會有一些文檔頁面由於文本或者圖像內容過多,導致頁面過長。訪問者需要不停拖動瀏覽器上的滾動條來查看文檔中的內容。為了方便用戶查看文檔中的內容,在文檔中需要使用錨點鏈接。

創建錨點鏈接

錨點鏈接可以鏈接到本頁面的特定位置,也可以鏈接到另一個頁面的特定位置。其實現方式是添加錨標記。通過創建錨點鏈接,用戶能夠快速定位到目標內容。

創建錨點鏈接分為兩步:

  1. 當跳轉到當前頁面的指定位置時,直接將錨標記設置為href屬性值。

    <a href=”#id名>“鏈接文本"</a>

     

  2. 使用相應的id名標注跳轉目標的位置。  

    <h3 id="id名">嗶哩吧啦</h3> 

 1 <!--舉個栗子-->
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8" />
 6 <title>Doument</title>
 7 </head>
 8 <body>
 9 <a href="#one">1</a>
10 <a href="#two">2</a>
11 <a href="#three">3</a>
12 <a href="#four">4</a>
13 <h3 id="one">1、</h3>
14 <hr />
15 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
16 <h3 id="two">2、</h3>
17 <hr />
18 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!! 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!! 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!
19 <h3 id="three">3、</h3>
20 <hr />
21 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
22 <h3 id="four">4、</h3>
23 <hr />
24 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!! 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!! 麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!麻利麻利貝貝哄!!!!!!
25 </body>
26 </html>

 

 

<base/>標簽使用方法:用於<head>之間,設置target屬性。如:

<base target="_blank"/>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM