HTML篇_第十章、HTML框架

HTML篇_第十章、HTML框架

一、框架

HTML框架是指用HTML语言编写的文档,通过使用文档,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。使用框架的缺点就是开发者必须跟踪更多的HTML文档,也不能打印整张页面。

二、内联框架

使用<iframe>标签可以定义一个内联框架,内联框架被用来在当前 HTML 文档中嵌入另一个文档。该标签的src属性的值设置为网页地址,可以指向不同的网页,窗口的内容则显示为地址指向的页面。

我们写一段代码来演示一下,这里的src属性的值以CSDN官网地址为例。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<iframe src="https://www.csdn.net/"></iframe>
	</body>
</html>

三、<iframe>标签-设置高度与宽度

heightwidth属性用来为<iframe>标签定义高度和宽度,属性默认以像素为单位,也可以指定按比例显示。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<iframe src="https://www.csdn.net/" height="100" width="300"></iframe>
		<iframe src="https://www.csdn.net/" height="80%" width="100%"></iframe>
	</body>
</html>

四、<iframe>标签-移除边框

使用frameborder属性用于定义是否显示边框,当属性的值设置为0时,则不显示边框。

代码演示:

<iframe src="https://www.csdn.net/" frameborder="0"></iframe>

五、使用 <iframe> 来显示目录链接页面

<iframe>可以显示一个标目链接的页面,目标链接的属性必须使用iframe的属性。

代码演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<iframe src="demo.html" name="csdn"></iframe>
		<p><a href="https://www.csdn.net/" target="csdn">CSDN官网</a></p>
	</body>
</html>

注意:在使用时<iframe>name属性的值要与<a>标签target属性的值相同。

六、<iframe> 标准属性

属性说明
class规定元素的类名(classname)
id规定元素的唯一 id
style规定元素的行内样式(inline style)
title规定元素的额外信息(可在工具提示中显示)

七、HTML <frameset>标签

<frameset>标签在HTML5中已经不支持使用了,再次不做赘述。


希望有所帮助!
关注我,持续更新!

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

7旅病娘

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值