HTML框架(frameset框架集和iframe內嵌框架)


HTML框架:
1.frameset框架集
2.iframe內嵌框架

1.frameset框架集

  1.1 創建框架網頁的步驟:
    (1)創建各個子窗口對應的HTML文件
    (2)創建整個框架文件,分別引用子窗口文件

  1.2 創建框架頁面的基本語法:
     <frameset cols="25%,50%,*" row="50%,*" border="5">
       <frame src="top.html">
        ......
     </frameset>

    注:rows和cols不會同時出現,cols表示從橫向划分,rows表示從豎向划分。“*”表示剩余的。
    注意:<frameset></frameset>標簽不能與<body></body>標簽同時使用。除非你在<frameset>中使用<noframes>標簽。即:
       <frameset>
         <noframes>
           <body></body>
        </noframes>
      </frameset>

  1.3 <framset>框架集標簽中的常用屬性

  

  例如:水平框架

    <frameset rows="25%,50%,25%">
            <frame src="header.html" />
            <frame src="body.html" />
            <frame src="footer.html" />
       </frameset>

     

  例如:垂直框架

    <frameset cols="25%,50%,25%">
            <frame src="header.html" />
            <frame src="body.html" />
            <frame src="footer.html" />
        </frameset>

     

 2.iframe內嵌框架

  常用屬性

  

  語法:  

    <body>
            <iframe src="引用頁面地址" name="框架標識名" frameborder="邊框" scrolling="yes"></iframe>
     </body>

  舉個例子:(如下代碼)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>內嵌框架</title>
    </head>
    <body>
    <iframe name="topIframe" width="100%" height="400px" src="https://www.baidu.com/" frameborder="1" scrolling="auto"></iframe>
    <p>
        <a href="https://www.baidu.com/" target="topIframe">百度&nbsp;&nbsp;&nbsp;&nbsp;</a>
        <a href="http://www.sina.com.cn" target="topIframe">新浪</a>
    </p>
    </body>
</html>

  運行結果:

  

   點擊百度在上面的框內顯示百度頁面,點擊新浪則顯示新浪頁面。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 html5 frameset5內嵌框架集 HTML框架集之Frameset與Iframe簡單應用 html框架iframe與frameset的介紹 html中的框架frameset和frame及iframe HTML標簽天天練6--