Web初步-html-超链接

使用html建立超链接

HTML链接使用 < a > 标签定义

例如:

<a href="http://www.CodingDict.com">WEB程序</a>

链接的目标使用 href 属性来定义

  • 基本文字超链接
    eg:
<a href="http://www.baidu.com">点击百度一下</a>

当点击文字的时候,就会跳到百度的网址

  • 设置图片的超链接
    只需要将文字改为一个图片就好了,标签的嵌套。
<a href="http://www.baidu.com"> <img src = "f:q.png"> </a>

当点击图片的时候,就会跳到百度的网址

  • 设置以新窗口显示链接
    上面的两个设置连接的方法都是在原页面变成了一个新界面,但是如果想当点击的时候,是弹出一个新页面,原来的页面也存在。那么就可以使用target属性:
    eg:
<a href = "http://www.baidu.com" target = "_blank" > <img src = "f:q.png"> </a>

_blank 的意思是空白的,这样当点击连接时,就会弹出一个新的界面而原来的界面也同时存在

  • 页面设置电子邮件链接
<a href="mailto:1127230996@qq.com" target = "_blank"> <img src = "f:q.png"> </a>

有待修改

  • 框架之间的链接
    框架是一种常用的网页布局工具。它的作用是把浏览器的显示空间分割为几个部分,每个部分都可以独立显示不同的网页。这个就分为几种情况。

1 用 cols 属性将窗口分为左右两部分
这里引入一个新的标签,这个标签和标签是同一级别的,所以在使用的时候,要将标签去掉。在,标签加入了标签,它的意思是每一块。也就是说分成了多少块 就要写入多少个标签。
< frameset>,标签中使用属性cols来区分左右大小
eg:

<frameset cols = "40%,*">
<frame>
<frame>
</frameset>

40%表示左边占40%,*表示其余,即60% ,当然,其实也可以分成更多块,需要注意的是,这个方法已经被废弃掉了

2 用 rows 属性将窗口分为上中下三部分
其实与cols是差不多的,只是这里是上下分而已。这里就不写示例了。

3 框架的嵌套
上下分格和左右分割是可以嵌套的
eg:
先上下分为两部分

<frameset rows = "40%,*">
<frame>
<frame>
</frameset>

接着,将第二个< frame>改为一个新的分割,这样就会出现上,下左,下右三部分。

<frameset rows = "40%,*">

<frame>

<frameset  cols = "40%,*">
<frame>
<frame>
</frameset>

</frameset>

4 用 src 属性在框架中插入网页
在< frame>中使用src属性

<frameset cols = "40%,*">

<frameset rows = "60%,*">
<frame src = "a.html">
<frame src = "b.html">
</frameset>

<frameset rows = "40%,*">
<frame src = "c.html">
<frame src = "d.html">
</frameset>

</frameset>

在这段代码中,将网页分成了四个部分。在同级的html文件中另外创建了四个html文件,内容分别为a,b,c,d,然后四个部分的< frame>使用src属性分别加入a,b,c,d文件

5 框架之间建立链接
接下来要用到4个html文件main,h1,h2,h3。
对于main页面,将其分为左右两部分,左部分插入页面h1,右页面使用属性name设置名字为main

<frameset cols = "30%,*">
<frame src = "h1.html">
<frame name = "main">
</frameset>

h2,h3的内容分别为b,c,下面以c为例,b是一样的

<body>
c
</body>

h1对h2和h3使用基本文字超链接,并将目标显示设置为main区域,即在main页面的右边,当点击时,会在main右边页面显示内容
下面是h1的代,码

<body>
<a href = "b.html" target = "main">b</a><br/>
<a href = "c.html" target = "main">c</a><br/>
</body>

嵌入式框架 iframe
使用的< iframe>标签,在一个页面里面嵌入另外一个页面
eg:

<iframe width = 500 height = 300 src = "http://www.baidu.com">

< iframe> 可以单独使用,上面代码设置了嵌入网页的尺寸,然后嵌入百度的网址。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值