如何在HTML中指定要在中顯示的頁面的HTML內容？-html教學-PHP中文網

範例 3

元素）的 HTML 內容。

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

You can find any tutorial on tutorialspoint

首頁

web前端

html教學

如何在HTML中指定要在中顯示的頁面的HTML內容？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 10, 2023 pm 02:57 PM

html嵌套 iframe標籤內容規範

如何在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 id="元素-的-HTML-內容"> 元素）的 HTML 內容。 </h2>

<!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 id="How-to-specify-the-HTML-content-of-the-page-to-show-in-the-iframe-in-HTML">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="<h2 id="You-can-find-any-tutorial-on-tutorialspoint">You can find any tutorial on tutorialspoint</h2>">
      <p>Browser does not support iframes.</p>
   </iframe>
</body>
</html>

登入後複製

如我們在輸出中所看到的，文件中的 HTML 內容（

元素）顯示在中。 </p> <h3 id="範例">範例 2</h3> <p>以下是 HTML Iframe 的另一個範例，在此，我們在 iframe 中建立了一個表格。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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 id="How-to-specify-the-HTML-content-of-the-page-to-show-in-the-iframe-in-HTML">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> </iframe> </body> </html> </pre><div class="contentsignin">登入後複製</div></div> <p>如我們在輸出中所看到的，文件中的 HTML 內容（HTML 表格）顯示在 <iframe> 中。 </p> <h3 id="範例">範例 3</h3> <p>預設情況下，所有瀏覽器都會將 <iframe> 顯示為預設值。我們可以使用CSS來改變<iframe>的樣式。 </p> <p>在下面的範例中，</p> <ul class="list"> <li><p>我們透過使用 CSS 來更改 <iframe> 的寬度、高度和邊框來更改其樣式。 </p></li> <li><p>我們使用帶有 <iframe> 標記的「srcdoc」屬性來指定要在 HTML 中的 <iframe> 中顯示的頁面（元素）的 HTML 內容。 </p></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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 id="How-to-specify-the-HTML-content-of-the-page-to-show-in-the-iframe-in-HTML">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="<div> Hello Disha</div>" width="50%" height="100" style="border:3px solid green;"> <p>Browser does not support iframes.</p> </iframe> </body> </html> </pre><div class="contentsignin">登入後複製</div></div> <p>如我們在輸出中所看到的，文件中的 HTML 內容（元素）顯示在 <iframe> 中，我們也使用 CSS 更改了 <iframe> 的樣式。
以上是如何在HTML中指定要在中顯示的頁面的HTML內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。