HTML内嵌框架

最新推荐文章于 2025-09-20 17:46:31 发布

原创最新推荐文章于 2025-09-20 17:46:31 发布 · 8.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#iframe

HTML 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了HTML中的内嵌框架（iframe）用法，包括如何定义框架、设置边框、指定源文档地址、调整大小等关键属性，并展示了如何通过实例实现特定功能。

部署运行你感兴趣的模型镜像

HTML内嵌框架

内嵌框架，也叫画中画，使用灵活，可以嵌在网页的任何一个位置。

<iframe>标签中的常用属性

属性	值	描述
frameborder	0，1	规定是否显示框架周围的边框
name	frame_name	规定iframe的名称
scrolling	yes, no, auto	规定是否在iframe中显示滚动条（分别是始终显示、始终不显示、当内容超过边界时显示）
scr	URL	规定iframe中显示的文档的URL
width	~px或~%	规定iframe的宽度（可以使用像素或百分比）
height	~px或~%	规定iframe的高度（可以使用像素或百分比）

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>内嵌框架</title>
</head>
<body>

    <!--
    iframe：内嵌框架
     -->

    <iframe name="topFrame" scrolling="auto" border="1" src="http://www.baidu.com" height="300px" width="100%">
        如果你看到该文字，说明该浏览器不支持iframe
    </iframe>

    <!-- 设置当点开链接时， 在内嵌框架中打开页面-->
    <p><a href="http://www.sina.com" target="topFrame">新浪</a>&nbsp;&nbsp;&nbsp;
    <a href="http://www.baidu.com" target="topFrame">百度</a>
</body>
</html>