資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML5 建立內聯框架
概述
內聯框架是一個 HTML iframe，它顯示另一個 HTML 文件嵌入在當前網頁的 iframe 中。iframe 標籤是一個內聯框架，它在框架內顯示其他網頁內容。iframe 也有各種屬性，例如：寬度、高度、標題和 src。src 屬性是 iframe 標籤的主要屬性，因為它指定了在 iframe 中應該顯示什麼內容。在一個框架內，我們可以滾動其連結在 src 屬性中指定的整個內容。
語法
以下是建立 HTML 內聯框架的簡單基本語法。語法還顯示了兩個屬性 src 和 frameborder，src 用於獲取 HTML 文件的連結，frameborder 用於為 iframe 設定邊框。
<iframe src="" frameborder="0"></iframe>
演算法
步驟 1 − 在文字編輯器（如 Notepad++、Sublime Text 或 VS Code）中建立一個 HTML 檔案。將 HTML 基本結構新增到 HTML 檔案中。
步驟 2 − 現在建立一個父 div 容器。
步驟 3 − 在容器內建立一個 <iframe> 標籤。
<iframe></iframe>
步驟 4 − 向 iframe 標籤新增某些屬性，例如 src、寬度和高度。設定 iframe HTML 標籤的寬度和高度。
<iframe src=”” width=”” height=””></iframe>
步驟 5 − 現在將任何連結新增到 src 屬性以在框架內顯示 HTML 文件。
步驟 6 − 使用內聯 css 為框架進行樣式設定。
步驟 7 − 內聯框架建立成功。
示例
在給定的示例中，我們將使用 HTML 建立內聯框架。因此，基本 HTML iframe 將用於構建內聯框架。內聯框架是一個普通的預設 iframe。
<html>
<head>
<title>inline frame HTML5</title>
</head>
<body style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
<h2>tutorialspoint.com</h3>
<iframe src="https://tutorialspoint.tw/" height="300" width="200"
style="border-radius: 5px;border-top: 2rem solid black;border-bottom: 2rem solid black;border-right: 0.5rem solid black;border-left: 0.5rem solid black;">
</iframe>
</body>
</html>
下面給出的影像顯示了上述示例的輸出，其中我們使用了“tutorialspoint.com”官方網站連結，該連結將在 iframe 內聯框架中顯示。
結論
iframe 充當一個框架，它將其他 HTML 文件嵌入到我們使用 iframe 的當前網頁中。在網站或移動應用程式中，iframe 主要用於將 Google 地圖嵌入到應用程式中，因為許多應用程式需要在地圖中使用其某些產品。在某些網站中，開發人員使用 iframe 使當前網站的圖形向量能夠在任何響應式螢幕中顯示。如果我們正在將任何影片嵌入到 iframe 中，則它支援一個“allowfullscreen”屬性，該屬性允許使用者以全屏觀看影片。
406 次檢視
