HTML 框架

最新推荐文章于 2021-11-02 18:47:46 发布

冷月醉雪

最新推荐文章于 2021-11-02 18:47:46 发布

阅读量185

点赞数 1

分类专栏： HTML 文章标签： HTML 框架 iframe

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80177479

版权

HTML 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

使用框架，可以在同一个浏览器窗口中显示不至一个页面。

iframe语法

Iframe--设置高度与宽度

height和width属性用来定义iframe标签的高度和宽度

默认以像素为单位，但是乜可以指定其按比例显示(如:"80%")

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<iframe src="http://www.baidu.com" width="200" height="200"></iframe>
		<p>一些旧的浏览器不支持 iframe。</p>
		<p>如果浏览器不支持 iframes 则不会显示。</p>
		
	</body>
</html>

Iframe--移除边框

frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<iframe src="http://www.baidu.com" width="200" height="200" frameborder="0" ></iframe>
		<p>一些旧的浏览器不支持 iframe。</p>
		<p>如果浏览器不支持 iframes 则不会显示。</p>
		
	</body>
</html>

使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面。目标链接的属性必须使用iframe的属性，如下实例:

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自选教程(如约智惠.com)</title>
	</head>
	<body > 
		<iframe src="http://www.baidu.com" name="iframe_a" ></iframe>
		<p>
			<a href="https://www.jd.com" target="iframe_a">京东</a>
		</p>
		<p>
			<b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。
		</p>
		
	</body>
</html>

HTML iframe 标签