初学HTML用法大全指导(四)html中超链接的建立与使用

最新推荐文章于 2024-04-24 14:53:02 发布

不贰过先生

最新推荐文章于 2024-04-24 14:53:02 发布

阅读量1.1k

点赞数 1

分类专栏： HTML/JS 文章标签： html标签 html脚本语言超链接标签

本文链接：https://blog.csdn.net/u013132035/article/details/54143220

版权

HTML/JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

上一篇博客我们讲了html脚本语言中最常见到的表格标签的使用方法，这篇博客我们来聊一聊html脚本语言中最长用到的超链接的建立以及使用的方法。超链接在我们平常上网也经常用到，比如你喜欢某个网页标题，然后点击进去就用到的是文字超链接，一些女生喜欢购物，在登录进去某猫或者某狗网站，看到悬挂着精美减价大处理图片，点击图片就进入到我们想到的物品网页，这就是我们常说的图片链接。好了现在我们就来详细说说这些超链接。

1：文字超链接。标签为<a href="网址/网页">文本文字</a>，这样我们点击文本文字网页就跳转至href属性赋给的网址或者网页地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字超链接</title>
</head>
<body>
<a href="https://www.baidu.com"><b>百度网页</b></a><br/>
<hr>
<a href="demo01.html"><b>自定义网页</b></a>
</body>
</html>

2：设置图片超链接。设置图片超链接就是把原来<a href="网址/网页">文本文字</a>标签中的文本文字变成<img />标签即可，这样就设置成为了图片超链接。如下述例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置图片超链接</title>
</head>
<body>
<a href="https://www.baidu.com"><img src="baidu.png" height="100" width="200"/></a>
<hr>
<a href="https://www.tmall.com"><img src="tianmao.PNG" height="100" width="200"/></a>
<hr>
<a href="https://www.jd.com"><img src="jingdong.PNG" height="100" width="200"></a>
<hr>
</body>
</html>

3：设置在新的窗口打开所选择的超链接，即在<a></a>标签的中的target属性中值设置为_blank,这样所打开的网页就是在浏览器显示时会新打开一个网页。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建窗口打开所选择的超链接网页</title>
</head>
<body bgcolor="gray">
	<a href="https://www.baidu.com" target="_blank">
		<b>
			<font color="red" size="20">百度链接</font>
		</b>
	</a>
	<hr>
	<a href="https://www.baidu.com" target="_blank">
		<img src="baidu.png"/>
	</a>
	<hr>
</body>
</html>

4：邮箱超链接；在我们浏览网页时，常常会看到“联系我们”的按钮，用户点击这个按钮，一般会弹出一个邮箱超链接的网页，网页会直接跳转到我们需要联系人的邮箱，我们就可以给他发邮件，但是前提是用户所在的浏览器上安装有邮箱的插件。下面我就来演示这个label。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置邮箱超链接</title>
</head>
<body bgcolor="gray">
	<center>
	<a href="media:498908522@qq.com">
		<font size="20" color="red">我的邮箱</font>
	</a>
	</center>
</body>
</html>

5：框架之间的链接；我们有时候在登录某些企业或者校园的网站时，往往在网站网页的左半边部分点击所选择的超链接，会在网站的右半边部分去显示所点击的超链接的内容。其实它就是运用框架技术，把网页分割成几个部分，在某一块A区是所有超链接的文本选项，在某一块B区是所有超链接文本选项所链接的内容，现在我就一个一个来介绍框架之间的链接技术。其标签为<frameset></frameset>，其中frameset标签里面嵌套<frame>标签。

a)：用cols属性将网页窗口可以竖着分割为左右一些部分，用rows属性可以将网页窗口横着分割为上下一些部分，其中分割为几部分要看给cols和rows属性符的值有几个。下面用代码显示rows属性和cols属性，以及它们之间的嵌套。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>窗口分割</title>
</head>
<frameset cols="20%, *">
	<frame>
	<frameset rows="33%, 33%,*">
		<frame>
		<frame>
		<frame>
	</frameset>
</frameset>
</html>

b)：用src属性在框架中插入网页，并在框架之间建立连接。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
You are my baby!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
I Love You, Baby!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
Baby, You look so beautiful!
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>baby</title>
</head>
<body>
<a href="a.html" target="main">a</a><br/>
<a href="b.html" target="main1">b</a><br/>
<a href="c.html" target="main2">c</a><br/>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架嵌套</title>
</head>
<frameset cols="20%, *">
	<frame src="d.html">
	<frameset rows="33%, 33%,*">
		<frame name="main">
		<frame name="main1">
		<frame name="main2">
	</frameset>
</frameset>
</html>

6：有时候我们会进入到那样的欺骗网站，其中页面显示与企业官网显示的一模一样可是它就不是企业的官方网站，还有时候我们需要把别人的网页引入到自己网站的窗体的某一部分来显示，这时我们就要用到<iframe></iframe>标签来显示。其中显示窗体的具体大小可以用iframe标签里面的属性height和width属性来调整，用src属性来引入网页的网址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌入式框架iframe</title>
</head>
<body>
baidu页面<br/>
<iframe width = "1350" height="650" src="https://www.baidu.com"></iframe>
</body>
</html>