HTML基礎（七）---其他標籤
一、frameset標籤
1、frameset標籤介紹
frameset標籤一般都會作用於網站後臺
frameset 元素可定義一個框架集，它被用來組織多個視窗（框架），每個框架存有獨立的文件。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行，必須使用 cols 或 rows 屬性分割框架，frame標籤是定義 frameset 中的一個特定的視窗（框架），內容是展示在frame標籤當中的。
2、frameset標籤語法
<html> <frameset cols=“25%,50%,25%”> //縱向分割框架，分割幾塊框架下面frame就有幾個 <frame src=“frame_a.htm” /> //分割框架模組 <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </html>
需要注意的是，使用frameset內嵌frame這種框架劃分，是不能和body共存的，所以在使用frameset內嵌frame時，需要將body標籤刪除
3、frameset標籤屬性
第一、frameborder屬性：規定是否顯示框架周圍的邊框。設定值只有0和1，0 表示不要邊框，1 表示要顯示邊框
第二、border屬性：設定框架的邊框粗細
第三、bordercolor屬性：設定框架的邊框顏色
第四、cols屬性：縱向分割頁面，它的值分別有三種：數字（比如100就是100畫素）、百分比、“*” ，“*”表示該區域佔用餘下頁面空間，如：cols="30%,150,*" 表示將頁面分為三部分，左面部分佔頁面
第五、rows屬性：橫向分割頁面，數值表示方法與意義與cols相同
<!DOCTYPE html> <html> <head> <title>frameset</title> </head> <!-- frameset框架技術:frame不能與body同時存在 --> <!-- 縱向分割 --> <frameset cols="25%,50%,25%"> <frame src="http://www.baidu.com" /> <frame src="http://www.jd.com" /> <frame src="http://www.tmall.com" /> </frameset> <!-- frameborder：規定是否顯示框架周圍的邊框 --> <frameset cols="25%,50%,25%" frameborder="0"> <frame src="http://www.baidu.com" /> <frame src="http://www.jd.com" /> <frame src="http://www.tmall.com" /> </frameset> <!-- border:設定框架的邊框粗細 --> <frameset cols="25%,50%,25%" border="10"> <frame src="http://www.baidu.com" /> <frame src="http://www.jd.com" /> <frame src="http://www.tmall.com" /> </frameset> <!-- bordercolor: 設定邊框顏色--> <frameset cols="25%,50%,25%" bordercolor="blue"> <frame src="http://www.baidu.com" /> <frame src="http://www.jd.com" /> <frame src="http://www.tmall.com" /> </frameset> <!-- rows:橫向分割 --> <frameset rows="25%,50%,25%" bordercolor="blue"> <frame src="http://www.baidu.com" /> <frame src="http://www.jd.com" /> <frame src="http://www.tmall.com" /> </frameset> </html>
4、frame標籤屬性
第一、name屬性：設定框架名稱
第二、src屬性：設定此框架要顯示的網頁名稱或路徑（可以是本地的，也可以是網路的），此為必須設定的屬性
第三、scrolling屬性：設定是否要顯示滾動條，設定值為auto（高度超出則出現，高度未超出就不出現）, yes（存在）, no（不存在）
第四、noresize屬性：設定框架大小是否能手動調節
第五、marginheight屬性：定義框架的上方和下方的邊距
第六、marginwidth屬性：定義框架的左側和右側的邊距
<!DOCTYPE html>
<html>
<head>
<title>frame標籤屬性</title>
</head>
<frameset cols="30%,*">
<!-- frame屬性 -->
<frame src="http://www.baidu.com" name="myframe1" scrolling="no" noresize="no" />
<frame src="http://www.jd.com" name="myframe2" />
</frameset>
</html>
5、frameset與frame的綜合使用 （frameset巢狀frameset）
<!DOCTYPE html>
<html>
<head>
<title>製作上左右介面框架</title>
</head>
<!-- 分割上下框架 -->
<frameset rows="20%,*">
<frame src="http://www.baidu.com" name="top" noresize="no" />
<!-- 在下框架中分割左右兩邊 -->
<frameset cols="15%,*">
<frame src="urllist.html" name="left" noresize="no" />
<frame src="http://www.qq.com" name="main" noresize="no" />
</frameset>
</frameset>
</html>
二、iframe標籤
1、frame介紹與語法
iframe 元素會建立包含另外一個文件的內聯框架（即行內框架）， iframe是浮動的框架（frame），其常用屬性與frame類似。可以和body共存並可以放置於body的任何位置
<iframe name="myframe" src="demo.html" width="800" height="600">
</iframe>
2、iframe標籤屬性
第一、name屬性：框架名稱
第二、src屬性：目標網址（可以是本地網頁，也可以是網路地址）
第三、width屬性：設定框架寬度
第四、height屬性：設定框架高度
需要注意的是，iframe框架的寬和高不受frameset屬性的影響，只受自身width屬性與height屬性的影響
第五、frameborder屬性：規定是否顯示框架周圍的邊框
第六、scrolling屬性：設定是否要顯示滾動條，設定值為auto, yes, no
第七、marginheight屬性：定義 iframe 的頂部和底部的邊距
第八、marginwidth屬性：定義 iframe 的左側和右側的邊距
<!DOCTYPE html>
<html>
<head>
<title>利用iframe製作上左右框架介面</title>
</head>
<body>
<frameset>
<!-- 頂部框架 -->
<div align="top">
<!-- iframe的寬度和高度不受frameset控制 -->
<iframe src="http://www.baidu.com" width="98%" height="15%" frameborder="0" name="top"></iframe>
</div>
<frameset>
<div align="left">
<!-- 左邊框架:呼叫urllist.html -->
<iframe src="urllist.html" width="14%" height="500" frameborder="0" name="left"></iframe>
<!-- 右邊框架 -->
<iframe src="http://www.qq.com" width="84%" height="500" frameborder="0" name="main"></iframe>
</div>
</frameset>
</frameset>
</body>
</html>下面是urllist.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>urllist.html</title>
</head>
<body>
<!-- 網址列表 -->
<ul>
<!-- 這是demo3.html左邊的網址列表，使用target知道開啟網頁的位置 -->
<li><a href="http://www.baidu.com" target="main">百度一下，你就知道</a></li>
<li><a href="http://www.jd.com" target="main">京東購物</a></li>
<li><a href="http://www.tmall.com" target="main">天貓購物</a></li>
</ul>
</body>
</html>