HTML框架分析及应用
今天分享下”HTML框架分析及應用“這篇文章，文中根據實例編碼詳細介紹，或許對大家的編程之路有著一定的參考空間與使用價值，需要的朋友接下來跟著云南仟龍Mark一起學習一下吧。
一、框架
一個瀏覽器文本文檔對話框只有表明一個網頁文件，可是能夠根據應用框架，在同一個瀏覽器對話框中表明不僅一個頁面。應用框架的頁面關鍵包括2個一部分，一個是框架集，另一個便是實際的框架文檔。
框架多用以網站后臺或是內部網系統軟件的合理布局。
1.框架集（）：就是用來定義這一HTML文件為框架模式，并設定視窗如何分割的文件。通俗一點地說，框架集就是存放框架結構的文件，也是訪問框架文件的入口文件。如果網頁由左右二個框架組成，那么除了左右二個網頁文件之外，還有一個總的框架集文件。在使用框架的頁面中，主體標記被框架標記所代替。而對于框架頁面中包含的每一個框架，都是通過標記來定義的。
rows屬性：水平分割窗口。水平分割窗口是將頁面沿水平方向切割，也就是將頁面分成上下排列的多個窗口。rows中可以取多個值，每個值表示一個框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。但是要注意的是，一般設定了幾個rows的值，就需要有幾個框架，也就是需要有相應數量的參數。
??<????html????>??
??<????head????>??
??<????title????>水平分割窗口的效果</????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"30%,70%"????>??
??<????frame????>??
??<????frame????>??
??</????frameset????>??
??</????html????>??
cols屬性：垂直分割窗口。垂直分割窗口就是將頁面沿垂直方向分割成多個窗口，也就是將頁面分成左右排列的多個窗口。cols中可以取多個值，每個值表示一個框架窗口的水平寬度，它的單位可以是像素，也可以是占瀏覽器的百分比。與水平分割窗口向同，一般設定了幾個cols的值，就需要有幾個框架，也就是有幾個參數。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
??<????html????>??
??<????head????>??
??<????title????>垂直分割窗口的效果</????title????>??
??</????head????>??
??<????frameset?? ??cols????=????"20%,55%,25%"????>??
??<????frame????>??
??<????frame????>??
??<????frame????>??
??</????frameset????>??
??</????html????>??
frameborder屬性：設置邊框。在默認情況下，框架窗口的四周有一條邊框線，通過frameborder參數可以調整邊框線的顯示情況。語法為：
或者。 frameborder的取值只能為0或1。如果取值為0，那么邊框線將會被隱藏；如果取值為1，邊框線將會顯示。在frameset中設置將會對整個框架有效，在frame中設置則只對當前這個框架有效。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
??<????html????>??
??<????head????>??
??<????title????>設置框架窗口的邊框顯示效果</????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"20%,55%,25%"????>??
??<????frame?? ??frameborder????=????"1"????>??
??<????frameset?? ??cols????=????"35%,65%"?? ??frameborder????=????"0"????>??
??<????frame?? ??>??
??<????frame????>??
??</????frameset????>??
??<????frame?? ??frameborder????=????"0"????>??
??</????frameset????>??
??</????html????>??
framespacing屬性：框架的邊框寬度。框架的邊框寬度在默認情況下是1像素，通過參數framespacing可以調整其大小。
語法：
說明：邊框寬度就是在頁面中各個邊框之間的線條寬度，以像素為單位。而這一參數只能對框架集使用，對單個框架無效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
??<????html????>??
??<????head????>??
??<????title????>設置框架的邊框寬度</????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"30%,70%"?? ??framespacing????=????"10"????>??
??<????frame????>??
??<????frameset?? ??cols????=????"20%,55%,25%"?? ??framespacing????=????"30"????>??
??<????frame= ??http://www.qlyl1688.com/?? ????>??
??<????frame????>??
??<????frame????>??
??</????frameset????>??
??</????frameset????>??
??</????html????>??
bordercolor屬性：框架的邊框顏色。使用參數bordercolor可以設置框架集的邊框顏色。
語法：
說明：該參數同樣只對整個框架集有效，對于單個框架無效。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
??<????html????>??
??<????head????>??
??<????title????>設置框架的邊框顏色</????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"30%,70%“?? ??framespacing????=????"10"?? ??bordercolor?? ??=????”#CC99FF"????>??
??<????frame????>??
??<????frameset?? ??cols????=????"20%,55%,25%“?? ??framespacing????=????"30"?? ??bordercolor?? ??=????”#9900FF"????>??
??<????frame????>??
??<????frame????>??
??<????frame????>??
??</????frameset????>??
??</????frameset????>??
??</????html????>??
2.框架（）和src屬性。
框架結構中的各個頁面都是一個單獨的文字，而這些文件是通過src參數進行設置的。
語法：
說明：頁面文件是框架頁面的具體內容的所在，對于沒有設置源文件的框架，只是空白頁面，是沒有任何作用的。頁面的源文件可以是正常的HTML文件，也可以是一個圖片或者其他的文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
??<????html????>??
??<????head????>??
??<????title????>設置頁面源文件</????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"30%,70%"????>??
??<????frame?? ??src????=????"pic01.gif"????>??
??<????frame?? ??src????=????"src01.html"????>??
??</????frameset????>??
??</????html????>??
3.標簽
標簽用于瀏覽器不支持框架時顯示頁面內容。1
2
3
4
5
6
7
8
9
10
??<????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"????>??
??<????noframes????>??
??<????body????>您的瀏覽器無法處理框架！</????body????>??
??</????noframes????>??
??</????frameset????>??
??</????html????>??
二、浮動框架（）
浮動框架是一種較為特殊的框架，它是在瀏覽器窗口中嵌套子窗口，也就是整個頁面并不是框架頁面，但是卻包含一個框架窗口。在框架窗口內顯示相應的頁面內容。浮動框架又叫內聯框架（inline frame），并且因此而得名。
語法：
說明：與普通框架結構類似，浮動框架也可以設置很多參數，如 name、scrolling、frameborder等。 但是與普通框架相比，浮動框架中不包含framespacing和bordercolor參數。
src屬性：浮動框架中最基本的參數就是src，它用來設置浮動框架頁面的源文件地址，也是浮動框架頁面必需的參數。因為只有設置了源文件的內容，浮動框架才有意義。語法：
width和height屬性：在普通框架結構中，由于框架就是整個瀏覽器窗口，因此不需要設置其大小。但是在浮動框架中，是插入到普通HTML頁面中的，可以調整整個框架的大小。語法：<iframe src= src=“浮動框架頁面源文件” width=“頁面寬度” height=“頁面高度”>，頁面的寬度和高度值都以像素為單位。
1
2
3
4
5
6
7
??<????html????>??
??<????body????>??
??<????iframe?? ??src????=????"/i/eg_landscape.jpg"?? ??width????=????"550"?? ??height????=????"310"?? ??></????iframe????>??
??<????p????>一些老的瀏覽器不支持 iframe。</????p????>??
??<????p????>如果得不到支持，iframe 是不可見的。</????p????>??
??</????body????>??
??</????html????>??
三、一個框架布局的示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
??<????html????>??
??<????head????>??
??<????title????>框架主頁面 </????title????>??
??</????head????>??
??<????frameset?? ??rows????=????"20%,*"????>??????
??<????frame?? ??name????=????"topFame"?? ??src????=????"3.html"?? ??noresize/>??
??<????frameset?? ??cols????=????"240px,*"????>??
??<????frame?? ??name????=????"leftFrame"?? ??src????=????"1.html"????/>??
??<????frame?? ??name????=????"rightFrame"?? ??src????=????"2.html"?? ??marginwidth????=????"20px"?? ??scrolling????=????"no"????/>??
??</????frameset????>??
??<????noframes????>??
????
??<????body????> ??
??該頁面不支持frameset標簽！??
??</????body????>??
??</????noframes????>??
??</????frameset????>??
??</????html????>??
四、鏈接如何跳出框架
在網站后臺管理合理布局中，框架用得比較多。在許多情況下，大家必須 跳出框架，重新加載網頁頁面。那麼連接怎樣才可以跳出框架呢？實際上 ，只必須 特定標識的target屬性為"_top"就可以完成。下邊是一個簡易的事例。
?
1
2
3
4
5
6
7
8
9
10
11
??<????html????>??
??<????body????>??
??<????p????>被鎖在框架中了嗎？</????p????> ??
??<????a?? ??href????=????"/index.html"??
??target????=????"_top"????>請點擊這里！</????a????> ??
??</????body????>??
??</????html????>??
剪切
復制
粘貼
左邊插入 列
右邊插入 列
上方插入 行
下方插入 行
合并單元格
拆分單元格
刪除選中列
刪除選中行
刪除表格
清空內容
以上是云南仟龍Mark給大家介紹的所有內容,希望對大家有所幫助，如果大家有任何疑問請在腳本之家留言，如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
總結
以上是生活随笔為你收集整理的HTML框架分析及应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【机器视觉学习笔记】OpenCV C++
- 下一篇： 前端 Mock 工具