园龄：3年1个月粉丝：0 关注：1

📂前端 / HTML

🔖HTML

2025-02-18 14:56阅读: 0评论: 0推荐: 0

HTML - 10、框架标签

HTML的<iframe>标签可以嵌入其他网页或内容，并结合超链接和表单的target属性来控制内容的显示。

1. `<iframe>` 标签

<iframe>（内嵌框架）标签用于在当前页面中嵌入另一个HTML页面或内容。它允许在一个独立的区域中显示外部内容，类似于一个小型的浏览器窗口。

常用属性

src：指定嵌入的内容的URL。
width 和 height：设置<iframe>的宽度和高度。
frameborder：设置边框样式，0表示无边框，1表示有边框。
name：为<iframe>设置一个名称，用于与超链接或表单的target属性配合使用。

2. 超链接与`<iframe>`结合

通过设置超链接的target属性为<iframe>的name，可以将点击链接后的内容加载到指定的<iframe>中。

代码示例

 <a href="https://news.163.com" target="container">点我看网易新闻</a><br>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>

<a> 标签：
- href属性指定链接地址。
- target="container"属性指定链接内容加载到名为container的<iframe>中。
<iframe> 标签：
- name="container"属性与超链接的target属性配合，指定内容加载的目标框架。
- frameborder="0"属性设置无边框。
- width和height属性设置框架的大小。

3. 表单与`<iframe>`结合

通过设置表单的target属性为<iframe>的name，可以将表单提交后的结果加载到指定的<iframe>中。

代码示例

 <form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>

<form> 标签：
- action属性指定表单提交的地址。
- target="container"属性指定表单提交后的结果加载到名为container的<iframe>中。
<input> 标签：
- type="text"定义一个文本输入框，用于输入搜索关键词。
- type="submit"定义一个提交按钮，用于触发表单提交。

4. 嵌入其他内容

<iframe>不仅可以嵌入网页，还可以嵌入其他类型的内容，如PPT文件。

代码示例

 <iframe src="./resource/如何一夜暴富.pdf" frameborder="0" width="900" height="300"></iframe>

src属性：
- 指定嵌入内容的路径，可以是本地文件路径或外部URL。
frameborder="0"：
- 设置无边框。
width 和 height：
- 设置<iframe>的宽度和高度。

完整代码解析

以下是完整的HTML代码，结合了超链接、表单和<iframe>的使用：

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<body>
    <!-- 超链接与iframe结合 -->
    <a href="https://news.qq.com" target="container">点我看腾讯新闻</a><br>
    <a href="https://news.163.com" target="container">点我看网易新闻</a><br>
    <a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
 
    <!-- 表单与iframe结合 -->
    <form action="https://so.toutiao.com/search" target="container">
        <input type="text" name="keyword">
        <input type="submit" value="搜索">
    </form>
 
    <!-- 嵌入内容的iframe -->
    <iframe name="container" frameborder="0" width="900" height="300"></iframe>
 
    <!-- 嵌入文件 -->
    <iframe src="./resource/如何一夜暴富.ppt" frameborder="0" width="900" height="300"></iframe>
    
</body>
</html>

总结

<iframe>：用于在当前页面中嵌入其他内容，如网页、PDF文件等。
target属性：与超链接和表单配合使用，指定内容加载到特定的<iframe>中。
应用场景：
- 嵌入外部网页或内容。
- 实现页面内导航，避免页面跳转。
- 嵌入本地文件（如PDF）。

上一篇HTML - 9、表单<table> 按钮示例

下一篇HTML - 12、字符实体

本文作者：别晃我的可乐

本文链接：https://www.cnblogs.com/lwehne/p/18721992

posted @ 2025-02-18 14:56 别晃我的可乐阅读(0) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

别晃我的可乐

HTML - 10、框架标签

1. `<iframe>` 标签

常用属性

2. 超链接与`<iframe>`结合

代码示例

3. 表单与`<iframe>`结合

代码示例

4. 嵌入其他内容

代码示例

完整代码解析

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

	<a href="https://news.163.com" target="container">点我看网易新闻</a><br>
	<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
	<iframe name="container" frameborder="0" width="900" height="300"></iframe>

	<form action="https://so.toutiao.com/search" target="container">
	<input type="text" name="keyword">
	<input type="submit" value="搜索">
	</form>
	<iframe name="container" frameborder="0" width="900" height="300"></iframe>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>框架标签</title>
	</head>
	<body>
	<!-- 超链接与iframe结合 -->
	<a href="https://news.qq.com" target="container">点我看腾讯新闻</a><br>
	<a href="https://news.163.com" target="container">点我看网易新闻</a><br>
	<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>

	<!-- 表单与iframe结合 -->
	<form action="https://so.toutiao.com/search" target="container">
	<input type="text" name="keyword">
	<input type="submit" value="搜索">
	</form>

	<!-- 嵌入内容的iframe -->
	<iframe name="container" frameborder="0" width="900" height="300"></iframe>

	<!-- 嵌入文件 -->
	<iframe src="./resource/如何一夜暴富.ppt" frameborder="0" width="900" height="300"></iframe>

	</body>
	</html>

别晃我的可乐

HTML - 10、框架标签

1. <iframe> 标签

常用属性

2. 超链接与<iframe>结合

代码示例

3. 表单与<iframe>结合

代码示例

4. 嵌入其他内容

代码示例

完整代码解析

总结

公告

最新随笔

我的标签

随笔分类

随笔档案

1. `<iframe>` 标签

2. 超链接与`<iframe>`结合

3. 表单与`<iframe>`结合