028_内联框架

最新推荐文章于 2024-04-10 20:23:08 发布

原创最新推荐文章于 2024-04-10 20:23:08 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #html

html学习专栏收录该内容

89 篇文章

订阅专栏

本文详细介绍了HTML中的iframe元素，包括如何创建内联框架、设置高度和宽度、移除边框等基本属性，以及如何将iframe用作链接的目标。通过示例代码帮助读者更好地理解和使用iframe。

1. iframe元素会创建包含另外一个文档的内联框架(即行内框架)。

2. 您可以把需要的文本放置在<iframe>和</iframe>之间, 这样就可以应对无法理解iframe的浏览器。

3. 可能属性

4. 添加iframe的语法

4.1. iframe的语法

<iframe src="URL"></iframe>

4.2. URL在iframe中显示的文档的位置。

5. iframe设置高度和宽度

5.1. height和width属性用于规定iframe的高度和宽度。

5.2. 属性值的默认单位是像素, 但也可以用百分比来设定(比如 "80%")。

6. iframe边框

6.1. frameborder属性规定是否显示iframe周围的边框。

6.2. 设置属性值为"0"就可以移除边框。设置属性值为"1"显示边框。

7. 使用iframe作为链接的目标

7.1. iframe可用作链接的目标(target)。

7.2. 链接的target属性必须引用iframe的name属性。

8. 例子

8.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>iframe内联框架</title>
	</head>

	<body>
		<iframe src="http://www.w3school.com.cn" width="500px" height="300px" frameborder="1">浏览器不支持iframe</iframe>
	</body>
</html>

8.2. 效果图

9. iframe作为链接的目标

9.1. 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<title>iframe作为链接的目标</title>
	</head>

	<body>
		<iframe name="iframe_a" frameborder="0">浏览器不支持iframe</iframe>
		<a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a>
	</body>
</html>

9.2. 效果图