HTML 中的 iframe
Sep 04, 2024 pm 04:41 PM
HTML 中的 iframe 只是用作 HTML 文檔的內(nèi)聯(lián)框架，用于向其中添加另一個(gè) HTML 文檔。它主要用于網(wǎng)頁(yè)或網(wǎng)絡(luò)開(kāi)發(fā)過(guò)程中，通過(guò)另一個(gè)來(lái)源（例如該網(wǎng)頁(yè)上的廣告）包含其他內(nèi)容。
大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師使用 Iframe 在網(wǎng)站或網(wǎng)頁(yè)上呈現(xiàn)交互式應(yīng)用程序。使用 JavaScript 或 HTML 中的目標(biāo)屬性可以實(shí)現(xiàn)這一點(diǎn)。
Iframe 的主要用途是在另一個(gè)網(wǎng)頁(yè)中顯示一個(gè)網(wǎng)頁(yè)。內(nèi)聯(lián)框架應(yīng)使用名為
語(yǔ)法
- 現(xiàn)在我們來(lái)看看 Iframe 到底如何使用：
<iframe src ="URL"></iframe>
- 這里
示例：
<iframe src ="www.educba.com" ></iframe>
- 還可以以像素格式為我們的 Iframe 提供一些特定的高度和寬度，如下所示：
<iframe src ="URL" height="value" width="value"></iframe>
- 在上面的語(yǔ)法中，所有的事情都會(huì)變得相同；此外，我們可以以像素格式指定高度和寬度，將它們定義為
示例：
<iframe src ="www.educba.com" height="300" width="300"></iframe>
- 另一種通過(guò) CSS 使用值來(lái)定義 iframe 高度和寬度的方法，語(yǔ)法如下所示：
<iframe src ="URL" style="height: value in pixels; width: value in pixels"></iframe>
- 所有內(nèi)容與上面相同，只是在指定值上進(jìn)行了更改。
示例：
<iframe src ="www.educba.com" style="height:300px; width:300px;"></iframe>
- 添加到 iframe 的另一個(gè)功能是我們可以使用 border none 屬性刪除已經(jīng)定義的框架邊框。其語(yǔ)法如下：
<iframe src ="URL" style="border : none;"></iframe>
- 在CSS的幫助下，還可以對(duì)邊框做很多事情，比如改變它的大小，給邊框應(yīng)用一些顏色等等。
iframe 可以通過(guò)使用以下語(yǔ)法用作鏈接的目標(biāo)：
<iframe src ="URL" name="iframe_a"></iframe>
- 在上面的語(yǔ)法中，src是我們普通的URL；在這里，鏈接的目標(biāo)屬性將引用我們的 iframe 標(biāo)記中的名稱(chēng)屬性。
示例：
<iframe src ="www.educba.com" name="iframe_a"></iframe>
Iframe 標(biāo)簽屬性
Iframe 中使用了不同的屬性標(biāo)簽。如下：
- Src: 該屬性用于插入需要包含在框架中的文件。 URL 指定要在 iframe 中加載的目標(biāo)網(wǎng)頁(yè)。
- 名稱(chēng)：名稱(chēng)是一個(gè)屬性，用于為框架提供一些標(biāo)識(shí)名稱(chēng)。當(dāng)您創(chuàng)建一個(gè)鏈接來(lái)打開(kāi)另一個(gè)網(wǎng)頁(yè)時(shí)，它最有用。
- allowfullscreen: 此屬性允許您以全角格式顯示框架。所以我們必須將值設(shè)置為 true 才能發(fā)生在這個(gè)函數(shù)上。
- Frameborder： 這是一個(gè)有用的屬性，允許您顯示或不顯示框架邊框。值1是顯示邊框，0是不向框架顯示邊框。
- 邊距寬度： 允許您定義框架左右兩側(cè)之間的空間。
- 邊距高度：這允許您定義框架頂部和底部之間的空間。
- 滾動(dòng)： 這些屬性控制滾動(dòng)條是否在框架中顯示。包含的值為“是”、“否”或“自動(dòng)”。
- 高度： 用于定義框架的高度。無(wú)論是百分比還是像素
- 寬度： 用于定義框架的寬度。無(wú)論是百分比還是像素
- Longdesc：借助此屬性，您可以鏈接另一個(gè)頁(yè)面，其中包含框架內(nèi)容的詳細(xì)描述。
HTML 中的 Iframe 示例
以下是 HTML 中 Iframe 的一些示例，解釋如下：
示例#1
讓我們考慮一個(gè)示例，我們將展示如何創(chuàng)建具有特定高度和寬度的 iframe。
代碼：
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" height="300" width="300"></iframe> </body> </html>
輸出：
示例#2
讓我們考慮另一個(gè)例子，我們將展示如何創(chuàng)建具有特定高度和寬度的 iframe。但在這個(gè)例子中，我們通過(guò) CSS 指定高度和寬度。在這里我們可以看到滾動(dòng)條正在根據(jù)內(nèi)容大小進(jìn)行調(diào)整。
代碼：
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here, we are showing an example of Iframe which containing specific Height and width in pixels format</p> <iframe src="C:\Users\Sonali\Desktop\HTML block elements.html" style="height:100px;width:300px;"></iframe> </body> </html>
輸出：
Example #3
Here we are considering one example in which we will add a border to the iframe by adding some extra CSS properties to show a change in the border’s size, change in the border color, etc. So we can add as much style to our iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>HTML Iframes Demo</h2> <p>Here we are showing an example of Iframe which containing a border with some additional CSS proprties</p> <iframe src="C:\Users\Sonali\Desktop\iframe.html" style="border:3px solid Blue; height: 200px;"></iframe> </body> </html>
Output:
Example #4
Let’s consider another example where we will show how the target attribute opens a webpage link using an iframe.
Code:
<!DOCTYPE html> <html> <body> <h2>Iframe Demo- Target for a Link</h2> <iframe height="200px" width="100%" src="C:\Users\Sonali\Desktop\iframe1.html" name="iframe1_a"></iframe> <p><a href="https://www.educba.com/courses/">EDUCBA</a></p> <p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p> </body> </html>
Output:
Target Output:
As shown above, for example, we can click on the target link EDUCBA so that it will open the following web page shown below.
Conclusion
An iframe is an inline frame that includes another HTML document in itself. It is the most powerful HTML element for web designing. You can add content from another source. It uses different HTML attributes like Global Attributes, Event Attributes, etc.
以上是HTML 中的 iframe的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
熱門(mén)話題
構(gòu)建網(wǎng)頁(yè)的HTML元素是什么？
Jul 03, 2025 am 02:34 AM
網(wǎng)頁(yè)結(jié)構(gòu)需核心HTML元素支撐，1.頁(yè)面整體結(jié)構(gòu)由、、構(gòu)成，其中為根元素，存放元信息，展示內(nèi)容；2.內(nèi)容組織依賴(lài)標(biāo)題（-）、段落（）及區(qū)塊標(biāo)簽（如、）以提升條理與SEO；3.導(dǎo)航通過(guò)與實(shí)現(xiàn)，常用組織鏈接并輔以aria-current屬性增強(qiáng)可訪問(wèn)性；4.表單交互涉及、、與，確保用戶(hù)輸入與提交功能完整。正確使用這些元素能提升頁(yè)面清晰度、維護(hù)性及搜索引擎優(yōu)化。
使用HTML5服務(wù)器序列事件處理重新連接和錯(cuò)誤。
Jul 03, 2025 am 02:28 AM
使用HTML5SSE時(shí)，處理重連和錯(cuò)誤的方法包括：1.了解默認(rèn)重連機(jī)制，EventSource默認(rèn)在連接中斷后3秒重試，可通過(guò)retry字段自定義間隔；2.監(jiān)聽(tīng)error事件以應(yīng)對(duì)連接失敗或解析錯(cuò)誤，區(qū)分錯(cuò)誤類(lèi)型并執(zhí)行相應(yīng)邏輯，如網(wǎng)絡(luò)問(wèn)題依賴(lài)自動(dòng)重連、服務(wù)器錯(cuò)誤手動(dòng)延遲重連、認(rèn)證失效刷新token；3.主動(dòng)控制重連邏輯，如手動(dòng)關(guān)閉并重建連接、設(shè)置最大重試次數(shù)、結(jié)合navigator.onLine判斷網(wǎng)絡(luò)狀態(tài)以?xún)?yōu)化重試策略。這些措施可提升應(yīng)用穩(wěn)定性與用戶(hù)體驗(yàn)。
為現(xiàn)代頁(yè)面宣布正確的HTML5 Doctype。
Jul 03, 2025 am 02:35 AM
Doctype是告訴瀏覽器用哪種HTML標(biāo)準(zhǔn)解析頁(yè)面的聲明，現(xiàn)代網(wǎng)頁(yè)只需在HTML文件最開(kāi)頭寫(xiě)。其作用是確保瀏覽器以標(biāo)準(zhǔn)模式而非怪異模式渲染頁(yè)面，且必須位于第一行，前面不能有空格或注釋?zhuān)徽_寫(xiě)法僅有一種，不推薦使用舊版本或其他變體；其他如charset、viewport等應(yīng)放在部分。
使用HTML屬性實(shí)現(xiàn)客戶(hù)端表單驗(yàn)證。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationCanbedOnewithOutJavaScriptbyusinghtmlattributes.1）useRequiredToEnforCemandatoryField.2）validateMailsAndUrllSwithTyPeatTributesLikeEmailOrurl，orusepatternwithRegegexforCustomAlorurl
如何使用HTML將選項(xiàng)分組？
Jul 04, 2025 am 03:16 AM
在HTML中使用標(biāo)簽可以對(duì)下拉菜單中的選項(xiàng)進(jìn)行分組。具體方法是用包裹一組元素，并通過(guò)label屬性定義組名，如：1.包含蘋(píng)果、香蕉、橙子等選項(xiàng)；2.包含胡蘿卜、西蘭花等選項(xiàng)；3.每個(gè)為一個(gè)獨(dú)立分組，組內(nèi)選項(xiàng)自動(dòng)縮進(jìn)。注意事項(xiàng)包括：①不支持嵌套；②可通過(guò)disabled屬性禁用整個(gè)組；③樣式受限需結(jié)合CSS或第三方庫(kù)美化；可使用Select2等插件增強(qiáng)功能。
將CSS和JavaScript與HTML5結(jié)構(gòu)有效整合。
Jul 12, 2025 am 03:01 AM
HTML5、CSS和JavaScript應(yīng)通過(guò)語(yǔ)義化標(biāo)簽、合理加載順序與解耦設(shè)計(jì)高效結(jié)合。1.使用HTML5語(yǔ)義化標(biāo)簽如、提升結(jié)構(gòu)清晰度與可維護(hù)性，利于SEO和無(wú)障礙訪問(wèn)；2.CSS應(yīng)置于中，使用外部文件并按模塊拆分，避免內(nèi)聯(lián)樣式與延遲加載問(wèn)題；3.JavaScript推薦放在前引入，使用defer或async異步加載以避免阻塞渲染；4.減少三者間強(qiáng)依賴(lài)，通過(guò)data-*屬性驅(qū)動(dòng)行為、類(lèi)名控制狀態(tài)，統(tǒng)一命名規(guī)范提升協(xié)作效率。這些方法能有效優(yōu)化頁(yè)面性能與團(tuán)隊(duì)協(xié)作。
使用HTML按鈕元素實(shí)現(xiàn)可點(diǎn)擊按鈕
Jul 07, 2025 am 02:31 AM
要使用HTML的button元素實(shí)現(xiàn)可點(diǎn)擊按鈕，首先需掌握其基本用法與常見(jiàn)注意事項(xiàng)。1.使用標(biāo)簽創(chuàng)建按鈕，并通過(guò)type屬性定義行為（如button、submit、reset），默認(rèn)為submit；2.通過(guò)JavaScript添加交互功能，可內(nèi)聯(lián)寫(xiě)法或通過(guò)ID綁定事件監(jiān)聽(tīng)器以提升維護(hù)性；3.利用CSS自定義樣式，包括背景色、邊框、圓角及hover/active狀態(tài)效果，增強(qiáng)用戶(hù)體驗(yàn)；4.注意常見(jiàn)問(wèn)題：確保未啟用disabled屬性、正確綁定JS事件、避免布局遮擋，并借助開(kāi)發(fā)者工具排查異常。掌握這
使用新的HTML5方法（FormData）提交表單數(shù)據(jù)
Jul 08, 2025 am 02:28 AM
使用HTML5的FormDataAPI提交表單數(shù)據(jù)更方便，1.它可自動(dòng)收集帶name屬性的表單字段或手動(dòng)添加數(shù)據(jù)；2.支持通過(guò)fetch或XMLHttpRequest以multipart/form-data格式提交，適合文件上傳；3.處理文件時(shí)只需將文件附加到FormData并發(fā)送請(qǐng)求即可；4.注意同名字段會(huì)被覆蓋、需處理JSON轉(zhuǎn)換及無(wú)嵌套結(jié)構(gòu)等問(wèn)題。
