HTML篇_第十章、HTML框架

最新推荐文章于 2024-11-07 15:37:50 发布

7旅病娘

最新推荐文章于 2024-11-07 15:37:50 发布

阅读量476

点赞数

分类专栏：入门级前端HTML5+CSS3 文章标签： html 前端

本文链接：https://blog.csdn.net/Godyanqi/article/details/128339856

版权

入门级前端HTML5+CSS3 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML篇_第十章、HTML框架

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>`标签-设置高度与宽度

height和width属性用来为<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	规定元素的额外信息（可在工具提示中显示）