整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
1. 活動框架iframe,這個框架可以內聯或包含另外一個網頁文檔
語法結構：<iframe></iframe>
實例：
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr height="100"><td colspan="2">高新區軟件園C區食堂管理系統</td></tr>
<tr height="600">
<td width="15%">
<ul>
<li><a href="usermanger/uadd.html" target="mainbox">員工添加</a></li>
<li><a href="usermanger/uedit.html" target="mainbox">員工修改</a></li>
<li><a href="usermanger/ulist.html" target="mainbox">員工查詢</a></li>
</ul>
</td>
<td width="90%">
<iframe src="usermanger/welceome.html" name="mainbox" width="100%" height="600">
你的瀏覽器不支持，請升級或更新瀏覽器
</iframe>
</td>
</tr>
</table>
常用屬性：
frameborder:是否顯示框架的邊框 0：不顯示，1：顯示
Scrolling:是否顯示滾動條
Yes：顯示
No:不顯示
Auto:自動處理
<frameset ></frameset>
屬性rows表示分成幾行，一般用“，”隔開。
屬性cols表示分成幾列，一般用“，”隔開。
使用fameset標簽，不再需要body元素
主框架頁面：
<frameset rows="15%,85%">
<frame src="usermanger/top.html" />
<frameset cols="200,*">
<frame src="usermanger/navlist.html" />
<frame src="usermanger/welceome.html" name="mainbox" />
</frameset>
</frameset>
navlist.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li><a href="uadd.html" target="mainbox">員工添加</a></li>
<li><a href="uedit.html" target="mainbox">員工修改</a></li>
<li><a href="ulist.html" target="mainbox">員工查詢</a></li>
</ul>
</body>
</html>
實例1：代碼結構
實例1：界面
框架技術可以實現對靜態頁面的互相引用，提高靜態頁面的重用性，因為并不是所有的瀏覽器都能很好的支持，而且對搜索引擎可能也不是很友好，所以一般網頁使用并不多，但是對一些管理系統而言，框架還是很實用的，因為管理系統的布局比較簡單。每一個頁面的效果都差不多，一般使用下面這種布局。
這個布局頭部，菜單和尾部的內容都是不會變化的，經常變化的就是中間的操作頁面，所有可以把頭部，菜單和尾部以及主頁分別使用四個頁面設計，然后在定義一個框架頁面進行引入即可。
top.html
<!doctype html> <head> <body bgcolor="#46D0DA"> |
leftmenu.html
<!doctype html> <body bgcolor="#1D7A17"> |
footer.html
<!doctype html> <body bgcolor="#940407"> |
main.html
<!doctype html> <body bgcolor="#1461C8"> |
<!doctype html> |
效果如下：
運行上面代碼發現超鏈接是在新的窗口中打開了，如果需要在主框架中顯示，要先給這個主框架定義name的屬性，然后在修改leftmenu.html的超鏈接的target屬性值，寫上主框架的name的值，下面更改frame.html中的frameset代碼如下：
<frameset rows="20%,65%,*" border="1"> |
補充register.html代碼如下：
<!doctype html> <body> |
然后在frame.html中點擊注冊效果如下：
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 表單控件使用
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
