如何在HTML中指定要在中显示的页面的HTML内容？

WBOY

发布时间：2023-09-10 14:57:07

2665人浏览过

来源于tutorialspoint

转载

如何在html中指定要在<iframe>中显示的页面的html内容？

在本文中，我们需要在iframe中显示页面的HTML内容；浏览器窗口划分为单独的页面。我们可以使用标记及其 <b><i>srcdoc</i></b> 属性来完成此任务。

HTML 标签

HTML 中的标记指定内联框架。该内联框架用于在当前 HTML 文档中嵌入另一个文档。所有浏览器都支持此标签，例如 Google Chrome、Microsoft Edge/Internet Explorer、Firefox、safari 和 Opera 等。

标签的“srcdoc”属性用于指定要在页面中显示的HTML内容。该属性将 HTML_code 作为值并指定要在 <iframe> 中显示的页面的 HTML 内容。

示例 1

在下面的示例中，我们使用带有标记的“srcdoc”属性来指定要在 HTML 中的 <iframe> 中显示的页面（<h2> 元素）的 HTML 内容。</h2>

立即学习“前端免费学习笔记（深入）”；

How to specify the HTML content of the page to show in the "iframe" in HTML?

We can do it by using srcdoc attribute of iframe in HTML.

诚石C2C交易系统

1. 页面全部经过SEO(搜索引擎优化)处理 2. 支持IE、FireFox等主流浏览器，在IE 和FireFox下显示相同的效果 3. 符合W3C国际网页标准，页面全部采用DIV+CSS布局 4. 采用SQL server数据库，所有数据库操作采用存储过程 5. 部分功能采用AJAX技术，良好的用户体验。 6. 后台集成在线HTML编辑软件FCKEditor，自定义美观的内容

下载

正如我们在输出中看到的，文档中的 HTML 内容（

元素）显示在中。 <h3>示例 2</h3> <p>以下是 HTML Iframe 的另一个示例，在此，我们在 iframe 中创建了一个表格。</p> <pre class='brush:html;toolbar:false;'><!DOCTYPE html> <html> <head> <title> How to specify the HTML content of the page to show in the "iframe" in HTML? </title> </head> <body> <h3>How to specify the HTML content of the page to show in the "iframe" in HTML?</h3> <p>We can do it by using <b>srcdoc</b> attribute of iframe in HTML.</p> <iframe srcdoc="<table border = 3> <caption> Abbreviations </caption> <tr> <th> HTML </th> <th> CSS </th> </tr> <tr> <td> Hypertext markup language</td> <td> Cascading style sheet </td> </tr> </table>"> <p>Browser does not support iframes.</p>
正如我们在输出中看到的，文档中的 HTML 内容（HTML 表格）显示在中。

示例 3

默认情况下，所有浏览器都会将显示为默认值。我们可以使用CSS来改变<iframe>的样式。

在下面的示例中，

我们通过使用 CSS 更改的宽度、高度和边框来更改其样式。
我们使用带有标记的“srcdoc”属性来指定要在 HTML 中的 <iframe> 中显示的页面（元素）的 HTML 内容。

How to specify the HTML content of the page to show in the "iframe" in HTML?

We can do it by using srcdoc attribute of iframe in HTML.

正如我们在输出中看到的，文档中的 HTML 内容（元素）显示在中，并且我们还使用 CSS 更改了 <iframe> 的样式。

如何在网页中实现 YouTube 视频的自动播放（含兼容性与合规要点）

html5中怎么注释_HTML5用给代码添加注释说明【注释】

html如何嵌套html页面_在HTML中嵌套另一个HTML页面【详细教程】

html如何加入超链接_在HTML中添加可点击超链接【点击】

HTML5语义化标签对SEO有帮助吗_为什么要用sectionnav【解答】

HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载

相关标签:

firefox css chrome safari html edge microsoft

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何用HTML将“布局”中的默认元标签替换为“视图”中的自定义元标签？下一篇：将鼠标点击传递到覆盖的HTML元素

作者最新文章

提升效率的夸克浏览器AI搜索_夸克AI搜索高效使用秘籍

2025-10-17 16:12

夸克浏览器AI搜索功能详解_几个实用的夸克AI搜索技巧分享

2025-10-17 17:20

手机版夸克浏览器AI搜索设置_移动端夸克AI搜索使用全攻略

2025-10-17 23:58

夸克浏览器AI搜索深度体验_夸克AI搜索与其他AI的对比

2025-10-18 22:34

夸克浏览器AI搜索入口在哪_一文读懂夸克AI搜索如何激活

2025-10-19 09:25

夸克浏览器如何调用AI搜索_夸克AI搜索的快捷指令大全

2025-10-19 11:02

夸克浏览器一键启用AI搜索_带你体验夸克AI搜索的强大之处

2025-10-19 18:42

玩转夸克浏览器的AI搜索模式_夸克AI搜索新手入门操作指南

2025-10-20 09:50

夸克浏览器AI搜索最新版教学_探索夸克AI搜索的隐藏功能

2025-10-24 20:48

夸克浏览器怎么用AI搜索_夸克AI搜索正确提问方式教学

2025-10-25 23:12

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

499

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

261

2023.07.27