html 框架標簽

一個瀏覽器窗體可以通過幾個頁面的組合來顯示。我們可以使用框架來完成(frames)這項工作。(框架可以把HTML文檔分為多個頁面)
詳情可見:http://www.dreamdu.com/xhtml/tag_frame/

主要概念:框架標簽

framHTML框架使用frameset標簽把瀏覽器的窗體分為多個行與列的框架頁,每個頁面又使用了[frame]標簽定義,同時應該使用定義瀏覽器不支持框架時顯示的內容。
1、frameset:框架標簽
rows 橫向分割 ,定義了框架含有多少列與列的大小(每個值使用逗號分隔),取值為象素px或者百分比%
cols 縱向分割,定義了框架含有多少行與行的大小(每個值使用逗號分隔),取值為象素px或者百分比%
表示自適應尺寸
<frameset rows="10%,
,50px"> 頭部占10%、底部占50px、中間高度自適應
2、使用frame標簽嵌套其他html頁面 。
3、使用nresize屬性固定frame的尺寸。
4、在frame中設置name屬性==該頁面的名稱:使用如在left.html中將a標簽鏈接內容在right.html中顯示

框架標簽的使用.png
一、index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<frameset rows="10%,*,50px">
    <frame src="top.html"  noresize="noresize"/>
    <frameset cols="30%, *">
        <frame src="left.html"  noresize="noresize"/>
        <frame src="right.html"  name="Right"/>
    </frameset>
    <frame src="bottom.html"  noresize="noresize"/>     
</frameset>
<noframes>
        <body>
            夢之都使用了框架技術,但是您的瀏覽器不支持框架,
            請升級您的瀏覽器以便正常訪問夢之都。
        </body>
 </noframes>
</html>
二、top.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上方頁面</title>
</head>
<body bgcolor="palevioletred">
    上方
</body>
</html>
三、bottom.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>下方頁面</title>
</head>
<body bgcolor="red">
    下方
</body>
</html>
四、left.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>左側頁面</title>
</head>
<body bgcolor="orangered">
    <a  target="Right">貓撲</a>
    <a  target="Right">打噴嚏</a>
    <a  target="Right">cnbeta</a>
    <a  target="Right">51.aspx</a>      
</body>
</html>
五、right.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>右側頁面</title>
</head>
<body bgcolor="blue">
    right
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • frameset 框架集 屬性:cols: 按照列的方向來劃分框架rows: 按照行的方向來劃分框架注意: 以上兩...
    小小機器人閱讀 441評論 0 0
  • 0.B/S結構 瀏覽器服務器模式,web瀏覽器是客戶端最主要的應用軟件.將客戶端使用web進行統一,系統功能實現集...
    liusong007閱讀 1,090評論 0 1
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,331評論 1 41
  • 類 對 HTML 進行分類(設置類),使我們能夠為元素的類定義 CSS 樣式。 為相同的類設置相同的樣式,或者為不...
    滿滿正能量_617a閱讀 528評論 0 1
  • HTML 是用來描述網頁的一種語言。1、HTML 指的是超文本標記語言 (Hyper Text Markup La...
    青春前行閱讀 403評論 0 1