『HTML&CSS』内联框架和超链接

最新推荐文章于 2024-05-05 04:41:21 发布

爱喝可乐的炸鸡

最新推荐文章于 2024-05-05 04:41:21 发布

阅读量2.3k

点赞数 2

分类专栏：『HTML&CSS』文章标签：内联框架超链接

本文链接：https://blog.csdn.net/sss_0916/article/details/101418861

版权

『HTML&CSS』专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本片博客主要介绍内联框架和超链接相关的一些知识，最后有一个简单的练习。

内联框架

内联框架，有点像图片标签；使用内联框架，可以在一个页面中引入一个外部页面，使用iframe标签来实现。简单属性如下：

src：指向一个外部页面的路径，可以使用相对路径。
height和width：调整高度和宽度，注意这里如果只调整其中一个值，另一个值不会随着等比例调整。
name：为内联框架指定一个名字。

代码演示：
首先，我们先写一个简单的页面：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_01</title>
	</head>
	<body>
		<!-- center标签：居中显示 -->
		<center>
			<h3>
				琴曲歌辞·走马引
			</h3>
			<p>
				李贺
			</p>
			<p>
				我有辞乡剑，玉锋堪截云。 <br />
				襄阳走马客，意气自生春。 <br />
				朝嫌剑花净，暮嫌剑花冷。 <br />
				能持剑向人，不解持照身。 <br />
			</p>
		</center>
	</body>
</html>

在这里插入图片描述
下面，我们再写一个页面，引入上面这个页面。

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_02</title>
	</head>
	<body>
		<center>
			<h3>
				金铜仙人辞汉歌
			</h3>
			<p>
				李贺
			</p>
			<p>
				茂陵刘郎秋风客，夜闻马嘶晓无迹。 <br />
				画栏桂树悬秋香，三十六宫土花碧。 <br />
				魏官牵车指千里，东关酸风射眸子。 <br />
				空将汉月出宫门，忆君清泪如铅水。 <br />
				衰兰送客咸阳道，天若有情天亦老。 <br />
				携盘独出月荒凉，渭城已远波声小。 <br />
			</p>
			<iframe src = "Demo_01.html";></iframe>
		</center>
	</body>
</html>

在这里插入图片描述

注意：

现实开发中不推荐使用内联框架；
因为内联框架中的内容不会被搜索引擎检索到；
内网项目中可能会使用到。

超链接

使用超链接可以让我们从一个页面跳到另一个页面，使用a标签来创建一个超链接。简单属性如下：

href：指向链接跳转到的目标地址，可以写一个相对路径也可以是一个绝对路径。
创建超链接时，如果地址不确定可以直接写一个#作为占位符，有跳到页面顶部的作用。
target：用来指定打开链接的位置。
_self：表示在当前页面打开（默认值）。
_blank：在一个新的窗口中打开链接。
如果希望新打开链接位置为内联框架，则target的属性值设为内联框架的name。

代码演示，我们先来写两个页面：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_01</title>
	</head>
	<body>
		<!-- center标签：居中显示 -->
		<center>
			<h3>
				琴曲歌辞·走马引
			</h3>
			<a href = "https://baike.baidu.com/item/%E6%9D%8E%E8%B4%BA/764?fr=aladdin"; target = "_block">
				李贺
			</a>
			<p>
				我有辞乡剑，玉锋堪截云。 <br />
				襄阳走马客，意气自生春。 <br />
				朝嫌剑花净，暮嫌剑花冷。 <br />
				能持剑向人，不解持照身。 <br />
			</p>
		</center>
	</body>
</html>

在这里插入图片描述

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_02</title>
	</head>
	<body>
		<center>
			<h3>
				金铜仙人辞汉歌
			</h3>
			<a href = "https://baike.baidu.com/item/%E6%9D%8E%E8%B4%BA/764?fr=aladdin"; target = "_block">
				李贺
			</a>
			<p>
				茂陵刘郎秋风客，夜闻马嘶晓无迹。 <br />
				画栏桂树悬秋香，三十六宫土花碧。 <br />
				魏官牵车指千里，东关酸风射眸子。 <br />
				空将汉月出宫门，忆君清泪如铅水。 <br />
				衰兰送客咸阳道，天若有情天亦老。 <br />
				携盘独出月荒凉，渭城已远波声小。 <br />
			</p>
		</center>
	</body>
</html>

在这里插入图片描述
最后，我们来写一个超链接在内联框架中打开的页面：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_03</title>
	</head>
	<body>
		<center>
			<h3>
				李贺诗选
			</h3>
			<a href = "Demo_01.html"; target = "走马引">
				走马引
			</a> <br />
			<iframe name = "走马引"></iframe> <br />
			<a href = "Demo_02.html"; target = "金铜仙人辞汉歌">
				金铜仙人辞汉歌
			</a> <br />
			<iframe name = "金铜仙人辞汉歌"></iframe> <br />
		</center>
	</body>
</html>

在这里插入图片描述

网页简单练习

我们来写一个《说好不哭》歌词的展示网站：

<!doctype html>
<html>
	<head>
		<meta charset = "utf-8" />
		<title>Demo_04</title>
	</head>
	<body>
		<center>
			<h1>这是一个简单的练习</h1>
			<!--
				href = "#bottom"前往id为bottom的标签处
			-->
			<a href = "#bottom">前往底部</a>
			<hr></hr>
			<h3>说好不哭</h3>
			<a href = "https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin"; target = "_block">
				周杰伦
			</a>
			&nbsp; 
			<a href = "https://baike.baidu.com/item/%E9%99%88%E4%BF%A1%E5%AE%8F/334?fromtitle=%E9%98%BF%E4%BF%A1&fromid=5294&fr=aladdin"; target = "_block">
				阿信
			</a>
			<p>
				周杰伦： <br />
				没有了联络 后来的生活 <br />
				我都是听别人说 <br />
				说你怎么了 说你怎么过 <br />
				放不下的人是我 <br />
				人多的时候 就待在角落 <br />
				就怕别人问起我 <br />
				你们怎么了 你低着头 <br />
				护着我连抱怨都没有 <br />
				电话开始躲 从不对我说 <br />
				不习惯一个人生活 <br />
				离开我以后 要我好好过 <br />
				怕打扰想自由的我 <br />
				都这个时候 你还在意着 <br />
				别人是怎么怎么看我的 <br />
				拼命解释着 <br />
				不是我的错 是你要走 <br />
				眼看着你难过 <br />
				挽留的话却没有说 <br />
				你会微笑放手 <br />
				说好不哭让我走 <br />
				<img src = "1.jpg"; width = "200" /> <br />
				阿信： <br />
				电话开始躲 从不对我说 <br />
				不习惯一个人生活 <br />
				离开我以后 要我好好过 <br />
				怕打扰想自由的我 <br />
				都这个时候 你还在意着（周杰伦：这个时候） <br />
				别人是怎么怎么看我的（周杰伦：还在意着） <br />
				拼命解释着 <br />
				不是我的错 是你要走 <br />
				合： <br />
				眼看着你难过 <br />
				挽留的话却没有说 <br />
				你会微笑放手 <br />
				说好不哭让我走 <br />
				<img src = "2.jpg"; width = "200" /> <br />
				周杰伦： <br />
				你什么都没有 <br />
				却还为我的梦加油 <br />
				阿信： <br />
				心疼过了多久 <br />
				周杰伦： <br />
				过了多久 <br />
				合： <br />
				还在找理由等我 <br />
			</p>
			<hr></hr>
			<p>
				友情链接：
				<a href = "#">网站A</a>|<a href = "#">网站B</a>|<a href = "#">网站C</a> <br /><br />
				<!--
					href = "#"默认为回到顶部
				-->
				<a href = "#"; id = "bottom">回到顶部</a>|<a href = "mailto:meng.cheung@outlook.com">联系我们</a>
			</p>
		</center>
	</body>
</html>

在这里插入图片描述

注意：

HTML中有一个属性，每个标签都可以设置，该属性可以作为标签的唯一标识，这个属性就是id，id名必须以字母开头，id属性在同一个页面中是不能重复的。
如果我们想跳转到页面中的某个标签处，我们为该标签设置一个id值，然后再连接处href = "#id值"即可。
href = "mailto:meng.cheung@outlook.com"，使用前面指向的超链接，当点击的时候会打开计算机默认的电子邮件客户端并且收件人已被设置为指定收件人，meng.cheung@outlook.com。