HTML 框架

通過使用框架,可以在同一個瀏覽器窗口中顯示不止一個頁面。

  • 框架結(jié)構(gòu)標(biāo)簽 <frameset> 定義如何將窗口分割為框架
  • 每個 frameset 定義了一系列行或列
  • rows/columns 的值規(guī)定了每行或每列占據(jù)屏幕的面積
  • 框架標(biāo)簽 Frame 標(biāo)簽定義了放置在每個框架中的 HTML 文檔

實(shí)例:
1、 <noframes> 標(biāo)簽
不能將 <body></body> 標(biāo)簽與 <frameset></frameset> 標(biāo)簽同時使用!不過,假如你添加包含一段文本的 <noframes> 標(biāo)簽,就必須將這段文字嵌套于 <body></body> 標(biāo)簽內(nèi)。

<html>

<frameset cols="25%,50%,25%">
    
    <frame src="http://www.w3school.com.cn/example/html/frame_a.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/frame_b.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/frame_c.html"></frame>

    <noframes>
        <body>您的瀏覽器無法處理框架!</body>
    </noframes>

</frameset>

</html>

2、混合框架結(jié)構(gòu)

<html>

<frameset rows="50%,50%">

    <frame src="http://www.w3school.com.cn/example/html/frame_a.html"></frame>
    <frameset cols="25%,75%">
        <frame src="http://www.w3school.com.cn/example/html/frame_b.html"></frame>
        <frame src="http://www.w3school.com.cn/example/html/frame_c.html"></frame>
    </frameset>

</frameset>

</html>

3、含有 noresize="noresize"屬性的框架結(jié)構(gòu)
假如一個框架有可見邊框,用戶可以拖動邊框來改變它的大小。為了避免這種情況發(fā)生,可以在 <frame> 標(biāo)簽中加入:noresize="noresize"。

<html>

<frameset cols="25%,50%,25%">

    <frame src="http://www.w3school.com.cn/example/html/frame_a.html" noresize="noresize"></frame>
    <frame src="http://www.w3school.com.cn/example/html/frame_b.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/frame_c.html"></frame>

</frameset>

</html>

4、導(dǎo)航框架

<html>

<frameset cols="120,*">

    <frame src="http://www.w3school.com.cn/example/html/html_contents.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/frame_a.html"></frame>

</frameset>

</html>

5、內(nèi)聯(lián)框架

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/frame_a.html"></iframe>
    <p>一些老的瀏覽器不支持 iframe。</p>
    <p>如果得不到支持,iframe 是不可見的。</p>
</body>

</html>

6、跳轉(zhuǎn)至框架內(nèi)的一個指定的節(jié)
其中的一個框架設(shè)置了指向另一個文件內(nèi)指定的節(jié)的鏈接。這個"link.htm"文件內(nèi)指定的節(jié)使用 <a name="C10"> 進(jìn)行標(biāo)識。

<html>

<frameset cols="20%,80%">
    
    <frame src="http://www.w3school.com.cn/example/html/frame_a.html"></frame>
    <frame src="http://www.w3school.com.cn/example/html/link.html#C10"></frame>

</frameset>

</html>

7、內(nèi)聯(lián)框架
iframe 的語法

<iframe src="URL"></iframe>

iframe 設(shè)置高度和寬度

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200"></iframe>
    <p>某些老式的瀏覽器不支持內(nèi)聯(lián)框架。</p>
    <p>如果不支持,則 iframe 是不可見的。</p>

</body>

</html>

iframe 刪除邊框
frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框。
設(shè)置屬性值為 "0" 就可以移除邊框:

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
    <p>某些老式的瀏覽器不支持內(nèi)聯(lián)框架。</p>
    <p>如果不支持,則 iframe 是不可見的。</p>

</body>

</html>

使用 iframe 作為鏈接的目標(biāo)
iframe 可用作鏈接的目標(biāo)(target)。
鏈接的 target 屬性必須引用 iframe 的 name 屬性:

<html>

<body>
    <iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" width="200" height="200" name="iframe_a"></iframe>
    <p><a  target="iframe_a">W3School.com.cn</a></p>
    <p><b>注釋:</b>由于鏈接的目標(biāo)匹配 iframe 的名稱,所以鏈接會在 iframe 中打開。</p>
</body>

</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,539評論 1 41
  • 2017-09-07摘抄自W3school-HTML 框架希望幫助自己系統(tǒng)地打好基礎(chǔ),也能在做筆記的同時添加一些自...
    moralok閱讀 436評論 0 1
  • 普通框架 概念框架技術(shù):將一個瀏覽器窗口劃分成若干個小窗口,每個小窗口顯示一個獨(dú)立的網(wǎng)頁。 框架集和框架頁框架集<...
    小虎哥閱讀 1,668評論 0 11
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,205評論 0 1
  • 又到歲末,按慣例再回顧一下一年來所走過的路,以便來年繼續(xù)努力。2016年是我進(jìn)入退休生活的第三個年頭,這一年...
    獨(dú)釣寒江1954閱讀 1,178評論 0 0

友情鏈接更多精彩內(nèi)容