网页学习第三天

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