網頁學習第三天

HTML支持了多種超鏈接,今天先了解一下鏈接的方式。

  1. 在新窗口中打開
  2. 在當前頁面打開
  3. 在頁面內跳轉
  4. 圖像超鏈接
  5. 圖像熱區鏈接

在新窗口打開

之前我學習了超鏈接的格式:

<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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章