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 | 规定元素的额外信息(可在工具提示中显示) |
七、HTML <frameset>
标签
<frameset>
标签在HTML5中已经不支持使用了,再次不做赘述。
希望有所帮助!
关注我,持续更新!