創(chuàng)建超鏈接
HTML4.01教程:創(chuàng)建超鏈接
下面介紹幾種創(chuàng)建超鏈接的方法。
一、創(chuàng)建文字超鏈接
<a >百科369</a>
查看代碼效果:HTML4.01<a>(Anchor:錨)標(biāo)簽示例
在<a></a>標(biāo)記中,href屬性用來(lái)放置超鏈接的目標(biāo),這個(gè)目標(biāo)可以是本機(jī)上的某個(gè)HTML文件,也可以是URL地址。<a></a>之間的內(nèi)容稱(chēng)為超鏈接的名稱(chēng)。添加了鏈接后的文字有自己特殊的樣式,以便和其他文字區(qū)分開(kāi),默認(rèn)的鏈接樣式是有下劃線(xiàn)的藍(lán)色文字。
二、設(shè)置文字鏈接的顏色
超鏈接可以通過(guò)在<body>標(biāo)簽中設(shè)置鏈接的顏色來(lái)表示鏈接是否已經(jīng)點(diǎn)擊。
<html> <head> <title>HTML4.01教程:創(chuàng)建超鏈接設(shè)置文字鏈接的顏色示例-baike369.com</title> </head> <body text="blue" alink="red" vlink="yellow" link="green"
> <p><a >歡迎訪(fǎng)問(wèn) www.baike369.com</a></p> </body> </html>
查看代碼效果:HTML4.01教程:創(chuàng)建超鏈接設(shè)置文字鏈接的顏色示例
在<body>標(biāo)簽中(請(qǐng)參考HTML4.01<body>(Document Body:文檔體)標(biāo)簽),有下面幾個(gè)屬性需要了解:
- text屬性:設(shè)置文檔中的文字的顏色。請(qǐng)參考HTML4.01<body>標(biāo)簽text屬性。
- link屬性:設(shè)置從未點(diǎn)擊過(guò)的超鏈接的文字顏色。請(qǐng)參考HTML4.01<body>標(biāo)簽link屬性。
- alink屬性:設(shè)置點(diǎn)擊時(shí)的超鏈接的文字顏色。請(qǐng)參考HTML4.01<body>標(biāo)簽alink屬性。
- vlink屬性:設(shè)置點(diǎn)擊過(guò)后的超鏈接的文字顏色。請(qǐng)參考HTML4.01<body>標(biāo)簽vlink屬性。
三、創(chuàng)建頁(yè)面內(nèi)的錨點(diǎn)鏈接
制作網(wǎng)頁(yè)時(shí),可能會(huì)出現(xiàn)內(nèi)容過(guò)長(zhǎng)的情況,而當(dāng)用戶(hù)瀏覽網(wǎng)頁(yè)時(shí)就會(huì)很不方便。為了解決這個(gè)問(wèn)題,我們可以創(chuàng)建頁(yè)面內(nèi)的錨點(diǎn)鏈接。
1. 創(chuàng)建同一頁(yè)面內(nèi)的錨點(diǎn)鏈接
首先創(chuàng)建一個(gè)向?qū)ф溄樱纾?/p>
<li><a href="#C1">第一章</a>
</li> <li><a href="#C2">第二章</a>
</li> <li><a href="#C3">第三章</a>
</li>
創(chuàng)建向?qū)ф溄拥母袷饺缦拢?/p>
<a href=#目標(biāo)名稱(chēng)>鏈接名稱(chēng)</a>
表示網(wǎng)頁(yè)應(yīng)該跳到哪個(gè)目標(biāo)名稱(chēng)的位置上。
其次創(chuàng)建一個(gè)目標(biāo)位置,如:
<h2><a name="C1"></a>
第一章</h2> <p>本章講解的內(nèi)容是 ......</p> <h2><a name="C2"></a>
第二章</h2> <p>本章講解的內(nèi)容是 ......</p> <h2><a name="C3"></a>
第三章</h2> <p>本章講解的內(nèi)容是 ......</p>
創(chuàng)建目標(biāo)位置的格式是:
<a name=目標(biāo)名稱(chēng)></a>
注意:“#”屬性的目標(biāo)名稱(chēng)和“name”屬性的目標(biāo)名稱(chēng)要一致。
查看代碼效果:HTML4.01<a>標(biāo)簽name屬性示例
請(qǐng)參考HTML4.01<a>標(biāo)簽name屬性。
2. 創(chuàng)建不同頁(yè)面內(nèi)的錨點(diǎn)鏈接
假設(shè)向?qū)ф溄釉?.html文件中,目標(biāo)位置在2.html文件中,則可以這樣寫(xiě)。
在1.html中:
<li><a href="2.html#C1">第六章</a>
</li>
在2.html中:
<h2><a name="C1"></a>
第六章</h2> <p>本章講解的內(nèi)容是 ......</p>
我們只要在“#”號(hào)前面加上路徑和文件名即可。
四、創(chuàng)建圖片的超鏈接
圖片超鏈接的建立和文字超鏈接的建立基本類(lèi)似,都是通過(guò)<a></a>標(biāo)記來(lái)實(shí)現(xiàn)的。
<a ><img src="/include/logo.gif" border="10" /></a>
查看代碼效果:HTML4.01<img>標(biāo)簽border屬性示例
上面的代碼,給圖片加入了border屬性。在建立圖片鏈接時(shí),瀏覽器會(huì)自動(dòng)在圖片周?chē)由弦粋€(gè)邊框,就像在建立文字超鏈接時(shí)會(huì)自動(dòng)加上下劃線(xiàn)一樣。如果要取消這個(gè)邊框,只需設(shè)置“border=0”即可。
五、圖片的熱點(diǎn)區(qū)域
還有另外一種圖片的超鏈接方式,就是圖片的熱點(diǎn)區(qū)域。所謂圖片的熱點(diǎn)區(qū)域就是將一個(gè)圖片專(zhuān)門(mén)分割出一個(gè)鏈接區(qū)域,這就是熱點(diǎn)。熱點(diǎn)的鏈接,點(diǎn)的就是圖片中的熱點(diǎn)區(qū)域。
制作圖片的熱點(diǎn)區(qū)域需要用到<map>標(biāo)簽和<area>標(biāo)簽,還需要掌握它的制作步驟,參考如下:
- HTML4.01<map>(Client-Side Image Map:客戶(hù)端映像圖)標(biāo)簽
- HTML 4.01<area>(Image Map Area:客戶(hù)端圖像映像圖區(qū)域)標(biāo)簽
- 運(yùn)用Dreamweaver制作地圖(熱點(diǎn)圖像區(qū)域)鏈接的方法
六、在新窗口中顯示鏈接頁(yè)面
我們?cè)跒g覽網(wǎng)頁(yè)中,當(dāng)點(diǎn)擊鏈接的時(shí)候,所鏈接的頁(yè)面仍然是在同一個(gè)窗口中顯示。那么,使用<a>標(biāo)簽中的target屬性可以在新窗口中顯示鏈接頁(yè)面。請(qǐng)閱讀HTML4.01<a>標(biāo)簽target屬性。
七、相關(guān)閱讀
posted on 2012-07-30 16:30 ** 閱讀(515) 評(píng)論(0) 編輯 收藏