table frame="box" 四周有線
table frame="above" 上線
table frame="below" 下線
table frame="hsides" 上下線
table frame="vsides" 左右線
本例演示如何使用 "frame" 屬性來控制圍繞表格的邊框。
<html> <body> <p><b>注釋:</b>frame 屬性無法在 Internet Explorer 中正確地顯示。</p> <p>Table with frame="box":</p> <table frame="box"> <tr> <th>100</th> <th>200</th> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <p>Table with frame="above":</p> <table frame="above"> <tr> <th>100</th> <th>200</th> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <p>Table with frame="below":</p> <table frame="below"> <tr> <th>100</th> <th>200</th> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <p>Table with frame="hsides":</p> <table frame="hsides"> <tr> <th>100</th> <th>200</th> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> <p>Table with frame="vsides":</p> <table frame="vsides"> <tr> <th>100</th> <th>200</th> </tr> <tr> <td>300</td> <td>400</td> </tr> </table> </body> </html>
HTML基礎教程:框架(frame)屬性
希望以上可以解決你們心中的一些疑惑,其中可能會有不對的地方或是需要改進的地方,歡迎留言糾正。感覺還不錯歡迎關注收藏轉載哦
rame 的最主要功能是用來把一個頁面劃分成好幾個小窗口頁面,每個小窗口可以顯示不同html文件,這樣頁面也可以稱為框架結構頁面,每個月小窗口稱作框架窗口,下來將詳細介紹框架窗口。
frame 在現在已經很少使用,雖然不是必須學習的,但還是建議了解學習下frame 、iframe的知識,在某些時候非常有用。
如果想將頁面分成上下兩部分,各自互相獨立又互相關聯,用戶在其中一個部分操作頁面不影響其它部分的頁面,這樣的頁面也叫多窗口頁面。
1、框架窗口基本結構:
框架窗口主要包含2部分,一個是框架集,一個是具體的框架文件。
框架集就是存放框架結構的文件,也是訪問框架文件的入口,如果網頁由上下2個框架窗口組成,那么除了這2個窗口的html文件,還有一個總的框架集文件。
框架文件是每個顯示區域對應的html文件,如下示例:
index.html
<html>
<head>
<title>框架頁面</title>
</head>
<body>
<frameset>
<frame src="top.html"></frame>
<frame src="bottom.html"></frame>
</frameset>
</body>
</html>
如上index.html 就是框架集文件,在這個框架集文件中定義了頁面劃分成上下2部分,分別對應top.html 和 bottom.html 2個框架窗口文件。
2、框架窗口分割
框架頁面分割方式是在框架集frameset通過rows 或 cols 屬性定義的,一般按分割類型分為以下幾種:
2.1 水平分割窗口
將頁面按水平方向分割,也就是上下結構,語法:
<frameset rows="窗口1高度,窗口2高度,">
<frame src="top.html"></frame>
<frame src="bottom.html"></frame>
</frameset>
在該語法中,rows 可以設置多個值,每個值對應一個框架窗口垂直高度,它的值可以使用像素單位或百分比單位。
如下示例:
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
顯示效果:
比如上面這個,被從上到下分割成3個窗口,高度依次是25%,50%,25%。
2.2 垂直分割窗口
沿著頁面垂直方向分割,也就是左右結構的多窗口頁面。語法如下:
<frameset cols="窗口1寬度,窗口2寬度,">
<frame src="left.html"></frame>
<frame src="right.html"></frame>
</frameset>
在該語法中,cols 可以設置多個值,每個值對應一個框架窗口水平寬度,它的值可以使用像素單位或百分比單位。
示例:
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
顯示效果:
比如上面這個,被從左到右分割成3個窗口,寬度依次是25%,50%,25%。
2.3、嵌套分割窗口
嵌套窗口就是在一個頁面既有水平分割又有垂直分割的窗口,如下示例:
先水平分割再垂直分割
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
顯示效果:
先垂直分割再水平分割
<frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
顯示效果:
理論上可以無限嵌套,是不是很好玩。
2.4、noframes
當瀏覽器布置frame 時會顯示noframes 中的內容。如下代碼:
<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
效果顯示:
1、設置邊框 —— frameborder
frameborder 等于0時不顯示邊框,默認顯示。
2、邊框寬度 —— framespacing
在html5中無效。
3、邊框顏色 —— bordercolor
如下代碼:
<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
效果:
具體可以參考這里 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看這幾個屬性的關系。
1、頁面源文件 —— src
就是每個框架窗口對應的html文件,這里可以是圖片或其它文件。
<frame src="文件地址">
2、頁面名稱 —— name
給每個框架窗口設置名稱,有助于鏈接或查找窗口。
<frame src="文件地址" name="頁面名稱">
3、禁止調整窗口尺寸 —— noresize
黨員鼠標拖到框架邊框時,會發現鼠標形狀變成可拖動的,可以改不框架窗口寬度或高度。如果不希望改變窗口寬度或高度,可以使用noresize 屬性。
如下示例:
<html>
<frameset cols="25%,50%,25%">
<frame noresize="noresize" src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
窗口a是不可改變寬度的。
浮動框架是一種特殊的框架,它是在主窗口中嵌套一個子窗口,也就是整個頁面不是框架頁面,但卻包含了一個框架窗口。
示例:
<iframe name="名稱" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>
效果如下:
1、浮動框架邊框 —— frameborder
frameborder 屬性規定是否顯示 iframe 周圍的邊框。設置屬性值為 "0" 就可以移除邊框:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
顯示效果:
2、鏈接到框架頁面
通過 a 標簽的 target 屬性可以跳轉到框架頁面,示例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">頭條號</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鳥教程</a></p>
</body>
</html>
顯示效果如下,點擊下面2個鏈接,切換窗口。
frame 和 iframe 浮動框架用途很廣,比如可以實現頁面局部刷新,在之前被廣泛使用,但是現在基本不建議使用,它有很多問題,比如安全性,性能方面等。
當然有時也會使用iframe,比如打印pdf,下載文件等等。
上篇:前端入門——html 表單控件使用
lt;frameset></framset>框架組標記
<frame></frame>框架標記
語法格式:
<frameset>
<frame></frame>
<frame></frame>
</franeset>
<frameset></frameset>元素(雙標簽)
語法格式:
<frameset cols="" rows="" frameborder="" border="" framespacing="">
.......
</frameset>
屬性:
cols 垂直切割窗口(如左右分割兩個窗口)接受整數值,百分數,*(*代表占用余下空間)數值的個數代表分成的部分數目,要以逗號分隔。例:cols="30,*,50%"可以 切成三個視窗,第一部分是30像素(pixels)為絕對分割,第二部分是當分配完第一和第三視圖后剩下的空間,第三部分則占整個窗口的50%寬度,為相對分割。
rows 就是橫向切割,將窗口上下分開,數值設置同上。
以上兩屬性盡量不要在同一個<frameset>標記中,因為netscape不支持,盡量采用多重分割。
frameborder 設置框架的邊框,其值有0不要邊框,1要邊框。
border 設置框架邊框厚度
framespacing 表示框架與框架間保留空白的距離
frame 元素(單標簽)
語法格式:
<frame name="" src="url" scrolling="yes/no" noresize>
屬性:
name 框架名稱,指定框架來做連接的目標窗口。
src 框架中要顯示的網頁文當url地址,每個個框架要對應一個html文擋。
scrolling 是否顯示滾動條,yes/no,auto是自動。
noresize 設置不讓使用者改變這個框架的大小,
noframe元素
指定當使用了框架的頁面在不支持框架的瀏覽器中打開時顯示的信息
語法格式:
<noframe>
......
</noframe>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。