frameset框架集
Frameset標簽可定義一個框架集,它用來組織多個窗口(框架),每個框架有獨立的html文檔,在有frameset時,不可以同時存在body標簽,他和body標簽是同級的。
多個框架組成了一個框架集
1 框架集標簽(frameset)定義了如何將窗口分割為框架
2 每個frameset 定義了一系列行或列
3 rows、columns的值規定了每行或每列占據屏幕的面積
frameset的一些屬性
cols“”把一個瀏覽器窗口按列進行切割,也就是把瀏覽器豎着切分
cols“20%,200px,*”上半部分戰20%,中間部分占200px,剩下的為第三部分。
rows=“20%,200px,*”以行方式分割,橫着划分
border=“1”設置間距為1等等
bordercolor=“red”框架邊的顏色
frameborder=“no/yes” 是否顯示邊框線(也可以寫0或1)
noresize=“noresize”不可以重新設置大小(兩個內容之間不可以移動了)瀏覽器之間解析方式不太一樣最好在frame單獨寫,而不是在frameset上寫
它們都在frameset標簽上顯示。
框架標簽<frame />
frame標簽定義了放置在每個框架中的HTML文檔。它通過引用要顯示的HTML文檔的路徑,他是自閉合標簽。
frame常用屬性
1 name設置框架名稱
2 src 設置此框架要顯示的網頁名稱或路徑。此為必須設置的屬性。
3 scrolling=“” 設置是否要顯示滾動條。設定值為auto,yes,no。不可以用0 1來寫值:
!不能將body和frameset標簽同時使用,但是如果添加包含一段文本的<noframeset>標簽,就必須得將這段文字嵌套於<body>標簽內:
<frameset rows="200px,*" border="1" bordercolor="red">
<frame src="http://www.baidu.com" />
<frameset cols="30%,*">
<frame src="http://www.360.com" name="leftwindows" scrolling="no" />
<frame src="http://www.taobao.com" noresize=“noresize”/>
</frameset>
</frameset>
<noframes>
<body>
你的瀏覽器不支持frameset框架集
</body>
</noframes>
瀏覽器不支持框架集用norframes標簽來顯示,一般寫咋frameset下面里面包含body標簽。
例如百谷歌度網站,百度谷歌一起搜
iframe內聯框架和框架集實例
<iframe>內聯框架標簽
iframe元素會創建包含另外一個文檔的內聯框架(即行內框架)。iframe是屬於內聯框架,他是body的子集。iframe作為一個普通元素放在body里,而frameset是代替了body元素
屬性:
1width可設置內聯框架的寬
2 height可設置高
3 name 設置框架名稱
4 src設置頁面的路徑
例子:<a href="http://www.youdao.com: target="right">百度</a>
<iframe name="right" src="http://www.baidu.com" frameborder="1" width="400" hright="200">你的瀏覽器不支持iframe標簽</iframe>
制作頁面是沒有寫單位,都默認為像素。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.jd.com" target="iframeName">點擊</a>
<iframe name="iframeName" src="http://www.baidu.com" width="600" height="600" frameborder="0">你的瀏覽器不支持iframe標簽</iframe>
</body>
</html>
通過target屬性指向了iframe的名字所以頁面會在iframe里面顯示,如果不加target,就會在整個頁面打開。
a標簽的target屬性值:
_blank,在新的窗口打開
_self,默認,在相同的框架中打開被連接文檔
_parent,在父框架集中打開被連接文檔(在最外面的frameset中打開)
_top,在整個窗口中打開
framename,通過名字在指定的框架中打開
可以應用的qq郵箱類型的,在左面點擊在右面被打開如下:
list.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="htto://www.baidu.com" target="rightWindow">百度</a></li>
<li><a href="htto://www.360.com" target="rightWindow">360</a></li>
<li><a href="htto://www.taobao.com" target="rightWindow">淘寶</a></li>
<li><a href="htto://www.jd.com" target="rightWindow">京東</a></li>
</ul>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
</head>
<frameset rows="20%,*">
<frame src="http://www.baidu.com" />
<frameset rows="20%,*>
<frame src="list.html" />
<frame name="rightWdow" src="http://www.youdao.com" />
</frameset>
</frameset>
</html>
顯示如下:在左下點擊的效果會在右面的框架里產生。