- HTML+CSS+DIV網頁設計與布局（第2版）（微課版）
- 聶斌 張明遙
- 2095字
- 2019-10-23 17:37:37
3.1 創建超鏈接
在實際應用中很少有網頁是單獨的，通常都會使用超鏈接來創建一個頁面與其他頁面之間的聯系。同樣也可以使用超鏈接創建與其他Web服務器上的網頁聯系。
3.1.1 超鏈接標記
在HTML中，創建超鏈接的標記是<A>。<A>標記是雙標記，以<A>開始，以</A>結束。<A>標記創建的鏈接能指向一個HTML頁面、一幅圖像、一個視頻文件等任何資源，其語法格式如下。
<A NAME="錨名稱" HREF="URL" TITLE="標題" TARGET="目標">超鏈接文字</A>
超鏈接標記的屬性很多，上面的語法格式中只包含了常用的4個屬性。
? NAME：用于設置超鏈接當前位置的錨名稱。
? HREF：用于設置超鏈接的鏈接地址。
? TITLE：用于設置超鏈接的標題。
? TARGET：用于設置打開超鏈接的目標地址。
從上面的超鏈接語法格式可以看出，超鏈接主要包括目標地址、鏈接文字、標題說明、目標窗口及錨。
【示例3-1】創建一個簡單的超鏈接，此鏈接指向一個網站。
01 <HTML> 02 <HEAD> 03 <TITLE>超鏈接</TITLE> 04 </HEAD> 05 <BODY> 06 <A TITLE="單擊此處進入北京中醫藥 大學遠程教育學院的網站首頁" TARGET=" _blank" NAME="ibucm">北京中醫藥大學遠程教 育學院</A> 07 </BODY> 08 </HTML>
示例3-1運行效果如圖3.1所示。第6行使用了<A>標記，然后設置4個屬性，注意每個屬性都用引號括起來。
超鏈接由以下5個部分組成。
? 目標地址。當瀏覽者單擊某個超鏈接時，會出現什么內容，是由目標地址決定的。如果目標地址是一個網址，單擊超鏈接時會打開一個網頁；如果目標地址是一個視頻文件或音頻文件，單擊超鏈接時會打開一個播放軟件來播放視頻或音頻；如果目標地址是一張圖片，單擊超鏈接時會顯示這張圖片；如果目標地址是一個E-mail地址，單擊超鏈接時會打開一個客戶端電子郵件程序，并顯示發送新郵件窗口；如果目標地址是一個壓縮文件，單擊超鏈接時會下載該文件……通常目標地址都是以URL地址表示，把鼠標指針放在超鏈接上時，在瀏覽器窗口的狀態欄上會顯示該超鏈接的URL。
? 鏈接文字。鏈接文字的作用是讓瀏覽者看到并單擊。例如，圖3.1中的“北京中醫藥大學遠程教育學院”就是鏈接文字。鏈接文字在瀏覽器中默認為藍色并加有下畫線。鏈接文字越吸引人，瀏覽者單擊的可能性就越大。在超鏈接中不僅可以使用文字，還可以使用圖片，使用圖片時，瀏覽者只要單擊該圖片，就可以到達超鏈接的目標地址上。
圖3.1 創建超鏈接運行結果
? 標題。標題也就是超鏈接的說明文字，把鼠標指針放在超鏈接上面時，會在鼠標指針附近顯示一個注釋框，注釋框里的文字就是標題的內容，用于說明單擊超鏈接后可以看到什么內容或發生什么情況。
? 目標窗口。目標窗口在瀏覽器窗口中不會顯示，而是決定單擊超鏈接后在哪個瀏覽器窗口中顯示網頁，如在自身窗口中顯示或在新開窗口顯示等。
? 錨。這也是在瀏覽器窗口中沒有任何顯示的屬性，用于決定其他超鏈接鏈接到的位置。
3.1.2 鏈接地址
鏈接地址用于設置超鏈接的路徑，可以使用<A>標記中的HEAR屬性來設置。設置超級鏈接地址的語法格式如下。
<A HREF="鏈接地址">用來設置超鏈接的元素</A>
其中，鏈接地址可以是相對地址，也可以是絕對地址。
絕對路徑實際就是完整路徑。絕對路徑可以是按照硬盤文件的真正路徑，也可以是按照域名的完整網頁路徑。使用絕對路徑定位鏈接目標文件比較清晰，但是如果該文件被移動了，就需要重新設置所有的相關鏈接。例如，設置路徑為“C:\Program files\1.htm”，在本地確實可以找到，但是因為到了網站上，該文件不一定在這個路徑下，所以就會出問題。
相對路徑，顧名思義就是自己相對目標位置的路徑。使用相對路徑時，不論將這些文件放到哪里，只要它們的相對關系沒有變，就不會出錯。一般有如下3種相對路徑的寫法。
? 同一目錄下的文件：只需要輸入鏈接文件的名稱即可，如01.html。
? 上一級目錄中的文件：在目錄名和文件名之前加入“../”，如../04/02.html；如果是上兩級，則需要加兩個“../”，如../../file/01.html。
? 下一級目錄：目錄名和文件名之間以“/”隔開，如Html/05/01.html。
【示例3-2】設置超鏈接的鏈接地址。
01 <HTML> 02 <HEAD> 03 <TITLE>為頁面添加超級鏈接</TITLE> 04 </HEAD> 05 <BODY> 06 現在有很多動物都瀕臨滅絕，因此我們應該保護動物，特別是稀有動物。<A HREF="3-2-1.html"> 金絲猴</A>就是我國的一級保護動物。它屬靈長目、猴科，背部有金黃色的長毛，故名“金絲猴”。 07 </BODY> 08 </HTML>
第6行文字“金絲猴”就是帶有超級鏈接的元素，它鏈接的頁面是在同一目錄下的代碼文件3-2-1.html。這里要注意的是，此處鏈接只使用了一個屬性，鏈接的地址也是相對地址，該文件必須與本例的文件在同一目錄下。
3-2-1.html代碼如下。
01 <HTML> 02 <HEAD> 03 <TITLE>超級鏈接</TITLE> 04 </HEAD> 05 <BODY> 06 <P>金絲猴是我國的一級保護動物。</P> 07 <P><IMG SRC="pic01.jpg" height="200px"></P> 08 </BODY> 09 </HTML>
示例3-2運行效果如圖3.2所示。單擊圖3.2中的“金絲猴”鏈接文字，可以進入圖3.3所示的目標頁面。
圖3.2 設置超鏈接地址運行效果
圖3.3 鏈接的目標頁面
3.1.3 打開鏈接的方式
單擊網頁中的超鏈接時，通常都會在當前窗口打開超鏈接目標頁面。如果想保留當前網頁的內容，讓鏈接的頁面從一個新建窗口中打開，應該怎么辦？使用<A>元素的TARGET屬性可以實現這個功能。TARGET屬性用來設置打開鏈接的方式，其語法格式如下。
<A HREF="鏈接地址" TARGET="目標頁面的打開方式">用來鏈接的元素</A>
在HTML中，超鏈接的TARGET屬性可以取4個值，這些值的具體含義如表3.1所示。
表3.1 TARGET屬性值
【示例3-3】TARGET屬性的使用。
01 <HTML>
02 <HEAD>
03 <TITLE>設置目標頁面的打開方式</TITLE>
04 </HEAD>
05 <BODY>
06 現在有很多動物都瀕臨滅絕，因此我們應該保護動物，特別是稀有動物。<A HREF="3-2-1.html"
TARGET="_blank"> 金絲猴</A>就是我國的一級保護動物。它屬靈長目、猴科，背部有金黃色的長毛，故名“金絲
猴”。
07 </BODY>
08 </HTML>
示例3-3運行效果如圖3.4所示。第6行使用_blank打開窗口，需要注意的是，本例打開了兩個瀏覽器，而如果此時改為_self，或不設置TARGET屬性，則是在同一個窗口中打開新的頁面，此時原頁面只能通過回退按鈕返回。
圖3.4 設置目標頁面的打開方式
- 柳工出海：中國制造的全球化探索
- 網頁設計實用教程
- 24小時學會網站建設
- jQuery+Bootstrap Web開發案例教程（在線實訓版）
- 動態網頁設計（第2版）
- HTML+CSS+JavaScript網頁制作案例教程（第2版）
- ADOBE DREAMWEAVER CS6 標準培訓教材
- Illustrator平面設計180例五步通
- Photoshop電商網頁廣告設計實戰從入門到精通
- 《練就職場功夫熊貓》
- Premiere Pro CS6多功能教材
- 電子商務網頁設計（第二版）
- Photoshop熱門手機APP與網頁游戲界面設計從入門到精通
- 中文版Dreamweaver CS6完全自學教程
- JavaScript網頁游戲制作輕松學