HTML支持了多種超鏈接,今天先了解一下鏈接的方式。
- 在新窗口中打開
- 在當前頁面打開
- 在頁面內跳轉
- 圖像超鏈接
- 圖像熱區鏈接
在新窗口打開
之前我學習了超鏈接的格式:
<a href="http://www.w3school.com.cn">This is a link</a>
這裏,我只需要鏈接後面增加 target:"_blank" 屬性即可定義打開方式。
<a href="http://www.w3school.com.cn" target:"_blank">This is a link</a>
在本頁面打開
其實target有多種屬性,其中就有我們常用的網頁內打開
<a href="http://www.w3school.com.cn" target:"_self">This is a link</a>
另外,這其實也是默認模式
頁面內跳轉(書籤)
有時候我們會看到百度百科內部有直接跳轉的部分。
如何做到呢?就需要網頁內的超鏈接了。
首先,我們先建立書籤。
命名錨的語法:
<a name="label">錨(顯示在頁面上的文本)</a>
提示:錨的名稱可以是任何你喜歡的名字。
提示:您可以使用 id 屬性來替代 name 屬性,命名錨同樣有效。
<a id="label">錨(顯示在頁面上的文本)</a>
使用超鏈接即可實現跳轉
<a href="#label">有用的提示</a>
實例:(可以複製體會一下)
<html>
<head>
</title>決斷力測試 </title >
</ head>
<body>
<p> 如果你意外地拿到一千元獎金,想去買一件很需要的大衣,但是錢不夠;如果去買一雙不急需要的運動鞋,則又多了數百元,你會怎麼做? <p>
<a href="#a">1.直接買大衣</a>
<a href="#b"> 2.買運動鞋再去買些其它的小東西。</a>
<a href="#c">3.什麼都不買先存起來。</a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
答案:
<a id="a">買大衣你的決斷力還算不錯,雖然有時也會三心二意、猶豫徘徊,可是總是在 重要關頭作出決定,比起普通人來說已經算是傑出的了!你最大的特色是作了決定不再反悔。 </a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<a id="b">2、買運動鞋你是拿不定主意的人,做事沒主見,處處要求別人給你意見,你很少自已做判斷,因爲個性上你有些自卑,不能肯定自已,你這種人一定曾經受過某些心理傷害,或者周遭的人物太優秀了,因此造成你老是有不如人的感覺。 </a>
<br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<a id="c">3、不買你是判斷力超級強的人,不客氣地說,你甚至有點莽撞,就是因爲你衝動率直的個性,反而考慮不夠周詳,你常常後悔自己匆匆作決定,忽略了其它事情。</a>
</body>
</html>
創建圖像鏈接
格式
<a href="鏈接"><img src="圖片位置"></a>
以下代碼提供參考
<a href="www.baidu.com"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif"></a>