HTML架構(frameset框架組和iframe內嵌架構)

來源:互聯網
上載者:User

標籤:footer   head   表示   size   ref   點擊   oct   ges   網頁   

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>

  運行結果:

  

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

 

HTML架構(frameset框架組和iframe內嵌架構)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.