HTML中的框架是什麼？

乞力馬紮羅的雪CYF發表於2015-09-26
HTML框架

1.框架標籤（frame）

框架對於頁面的設計有著很大的作用；


2.框架集標籤（<frameset>）

框架集標籤定義如何將視窗分割為框架；

每一個frameset定義一系列行或者列；

rows/cols的值規定了每行或每列佔據螢幕的面積；


3.常用標籤：

noresize:固定框架大小；

cols：列；

rows：行；


4.內聯框架：iframe;


程式碼詳解如下：

【一】框架集標籤（<frameset>）

（1）分別新建三個html頁面，程式碼如下：

frame01.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#8a2be2">

    frame01
    <br/>
    <a href="http://ww.baidu.com" target="_top">開啟百度</a>


</body>
</html>

frame02.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#4169e1">

    frame02
    <iframe src="frame01.html" frameborder="0" width="100%" height="400px"></iframe>

</body>
</html>

frame03.html: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#7fffd4">


    frame03
    <iframe src="frame02.html" frameborder="0" width="100%" height="400px"></iframe>


</body>
</html>

（2）再新建一個html檔案，命名為index，實現如下： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>

    <!--<frameset cols="20%,50%,30%">-->

        <!--<frame src="frame01.html"></frame>-->
        <!--<frame src="frame02.html"></frame>-->
        <!--<frame src="frame03.html"></frame>-->

    <!--</frameset>-->


</html>


【內聯框架iframe】

（1）新建三個frame的HTML檔案同上，在index中實現如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>


</head>
<!--target屬性詳解
_self:在自己本身這個標籤頁開啟另一個頁面；
_blank:在瀏覽器中重新開啟一個標籤頁；
_parent:在巢狀自己的父類容器中開啟這個頁面；
_top:在包含自己的最頂級容器中開啟這個頁面；




-->

    index
    <a href="http://www.baidu.com" target="_self">點選我</a>



    <!--<frameset cols="20%,50%,30%">-->

        <!--<frame src="frame01.html"></frame>-->
        <!--<frame src="frame02.html"></frame>-->
        <!--<frame src="frame03.html"></frame>-->

    <!--</frameset>-->



    <!--內聯框架-->
    <iframe src="frame03.html" frameborder="0" width="100%" height="400px"></iframe>




</html>

注意：框架集標籤（<frameset>）已經不推薦使用了，現在使用比較廣泛的是iframe內聯框架。


github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！

相關文章