HTML＜iframe＞標(biāo)簽

88221 閱讀 0 評(píng)論 0 點(diǎn)贊

1.定義

iFrame是內(nèi)聯(lián)框架的縮寫，它是HTML元素的一個(gè)組件，允許在頁(yè)面中嵌入文檔、視頻和交互式媒體。通過(guò)這樣做，可以在主頁(yè)上顯示一個(gè)輔助頁(yè)面。

iFrame元素允許包含來(lái)自其他源的內(nèi)容，它可以在頁(yè)面的任何地方集成內(nèi)容，而不必像傳統(tǒng)元素那樣將內(nèi)容包含在web布局的結(jié)構(gòu)中。

但是過(guò)度使用iFrame會(huì)降低頁(yè)面速度，并帶來(lái)安全風(fēng)險(xiǎn)，把iFrame看作是內(nèi)容的一部分，而不是站點(diǎn)的一部分。例如，如果您想添加一個(gè)愛(ài)奇藝視頻來(lái)吸引讀者，那么可以向該文章插入一個(gè)iFrame元素。

<iframe src="url" width="m" height="n"></iframe>

src 屬性用來(lái)指定要嵌入的網(wǎng)頁(yè)的地址；width 和 height 屬性用來(lái)指定框架的寬度和高度，默認(rèn)單位是像素，當(dāng)然您也可以使用百分比。

注意：HTML <iframe> 標(biāo)簽不利于搜索引擎抓取頁(yè)面內(nèi)容，對(duì) SEO 具有負(fù)面效果，在現(xiàn)代 Web 設(shè)計(jì)中不建議使用。

2. iFrame的使用方法

可以在HTML文檔中使用< iFrame >標(biāo)記插入iFrame元素，復(fù)制以下代碼并粘貼到記事本，并將文件保存為.html格式。

屬性	值	描述
align	left、right、top、middle、bottom	HTML5 不支持，HTML 4.01 已廢棄。設(shè)置如何來(lái)對(duì)齊 <iframe>。
frameborder	1、0	HTML5 不支持。設(shè)置是否顯示 <iframe> 周圍的邊框。
height	像素	設(shè)置 <iframe> 的高度。
longdesc	URL	HTML5 不支持。設(shè)置一個(gè)頁(yè)面，該頁(yè)面中包含了有關(guān) <iframe> 的描述。
marginheight	像素	HTML5 不支持。設(shè)置 <iframe> 的頂部和底部的邊距。
marginwidth	像素	HTML5 不支持。設(shè)置 <iframe> 的左側(cè)和右側(cè)的邊距。
name	text	設(shè)置 <iframe> 的名稱。
sandbox	""、allow-forms、allow-same-origin、allow-scripts、allow-top-navigation	對(duì) <iframe> 的內(nèi)容定義一系列額外的限制。
scrolling	yes、no、auto	HTML5 不支持。設(shè)置是否在 <iframe> 中顯示滾動(dòng)條。
seamless	seamless	讓 <iframe> 看起來(lái)像是父文檔中的一部分（即沒(méi)有邊框和滾動(dòng)條）。
src	URL	設(shè)置要在 <iframe> 中顯示的文檔地址（URL）。
srcdoc	HTML 代碼	設(shè)置 <iframe> 中要顯示的內(nèi)容，該屬性會(huì)覆蓋 src 屬性。
width	像素	設(shè)置 <iframe> 的寬度。

舉例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML &lt;iframe&gt; 標(biāo)簽演示</title>
</head>
<body>
    <p>下面的內(nèi)聯(lián)框架將嵌入C語(yǔ)言網(wǎng)首頁(yè)，寬度設(shè)置為 330 像素，高度設(shè)置為 580 像素，用以模擬手機(jī)端的顯示效果。</p>
    <iframe src= width="330" height="580"></iframe>
</body>
</html>

展示出來(lái)的效果如下圖：

HTML＜iframe＞標(biāo)簽