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