成都網(wǎng)站推廣HTML第五課：超鏈接和錨點(diǎn)

成都網(wǎng)站推廣HTML第五課：超鏈接和錨點(diǎn)

上一課我們了解了HTM：物理路徑、絕對(duì)路徑、相對(duì)路徑，了解了URL路徑的概念后，超級(jí)鏈接就很容易掌握了。今天就一起跟隨成都華信智原前端老師一起學(xué)起來(lái)吧！

一、超鏈接

超級(jí)鏈接的目的就是實(shí)現(xiàn)頁(yè)面和頁(yè)面，站點(diǎn)和站點(diǎn)之間的跳轉(zhuǎn)，沒(méi)有超鏈接就沒(méi)有互聯(lián)網(wǎng)，所以認(rèn)真學(xué)習(xí)和工作的時(shí)候不要隨便點(diǎn)開(kāi)一個(gè)新聞的推送鏈接，否則你就可能引發(fā)多諾米牌效應(yīng)，最后迷失在互聯(lián)網(wǎng)里。

1、基本結(jié)構(gòu)

Markup

被點(diǎn)擊的文字或圖片

href屬性非常關(guān)鍵，URL的值代表了你的目的地。如果鼠標(biāo)經(jīng)過(guò)超鏈接希望看見(jiàn)標(biāo)題，可以加上title屬性，在文字不能顯示完整的側(cè)邊欄，希望用戶鼠標(biāo)經(jīng)過(guò)看見(jiàn)完整的標(biāo)題的時(shí)候非常有用。如果是鏈接到別人的網(wǎng)站上，不要忘了一定加上target屬性，“_blank”表明在新窗口打開(kāi)網(wǎng)頁(yè)。

2、案例

Markup

夢(mèng)中的婚禮

超鏈接可以鏈接任何資源，不要忘記資源的后綴名哦，.html/.jpg/.exe/.rar/.mp3……等等格式就是資源特定的后綴名，瀏覽器會(huì)根據(jù)后綴名自動(dòng)解釋該鏈接，是可以直接展示的，還是要提供下載的，還是調(diào)用播放器播放的……

如果是絕對(duì)路徑的鏈接，比如鏈接一個(gè)網(wǎng)站的域名地址，千萬(wàn)不要忘記"http://"這個(gè)超文本傳輸協(xié)議，習(xí)慣了在瀏覽器直接輸入“baidu.com”的童鞋，在超鏈接這里的URL必須是完整的路徑"http://www.baidu.com"

二、錨點(diǎn)

錨點(diǎn)的目的是實(shí)現(xiàn)頁(yè)面內(nèi)部的跳轉(zhuǎn)，如果一個(gè)頁(yè)面足夠長(zhǎng)，那么每一個(gè)目錄要指向一個(gè)具體的區(qū)塊，則可以使用錨點(diǎn)鏈接。

最好的案例就是百度百科，參考一個(gè)花千骨吧，里面有我的男神^_^：http://baike.baidu.com/subview/3214193/12258556.htm

當(dāng)我們點(diǎn)擊目錄中的“劇情簡(jiǎn)介”，則會(huì)跳轉(zhuǎn)到下面“劇情簡(jiǎn)介”正文處。

1、基本結(jié)構(gòu)

第一步：在目的地插入錨點(diǎn)：

錨點(diǎn)名稱(chēng)最好是字母和數(shù)字的組合，不可以用中文。而且錨點(diǎn)最好放在正文標(biāo)題的上面，否則跳轉(zhuǎn)過(guò)來(lái)就看不到標(biāo)題了。

第二步：在目錄處加入錨點(diǎn)鏈接：#錨點(diǎn)名稱(chēng)">被點(diǎn)擊的文本或圖片

此處的“#”不要漏掉，有時(shí)候我們寫(xiě)一個(gè)空鏈接：

Markup

文本

表示一個(gè)超鏈接，但是沒(méi)有目的地，“#”具有刷新頁(yè)面，回到頁(yè)面頂部的功能，如果后面跟上錨點(diǎn)名稱(chēng)，則能跳轉(zhuǎn)到該錨點(diǎn)處。

2、案例

Markup

目錄

    
劇情簡(jiǎn)介
    
演職員表
劇情簡(jiǎn)介
具體內(nèi)容，此處省略一千字……
演職員表
具體內(nèi)容，此處省略一千字……

提示：要做錨點(diǎn)，前提是頁(yè)面要有足夠的長(zhǎng)度，如果只有一兩屏的頁(yè)面，一眼就看完了，還有必要做頁(yè)面內(nèi)部跳轉(zhuǎn)的錨點(diǎn)嗎？

成都網(wǎng)站推廣-了解更多此方面的朋友請(qǐng)登陸：http://www.wjwsks.com/！這里有更多的驚喜等著您！