027_html框架
1. 通過使用框架, 你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份html文檔稱為一個框架, 并且每個框架都獨立于其他的框架。
2. <frameset>框架結構標簽
2.1. <frameset>框架結構標簽定義如何將窗口分割為框架。
2.2. 每個frameset定義了一系列行或列。您必須使用cols或rows屬性。
2.3. rows/cols的值規定了每行或每列占據屏幕的面積。
2.4. 如果您希望驗證某個包含框架的頁面, 請確保DTD被設置為"Frameset DTD"。
2.5. 不能將<body></body>標簽與<frameset></frameset>標簽同時使用! 不過, 假如你添加包含一段文本的<noframes>標簽, 就必須將這段文字嵌套于<body></body>標簽內。
2.6. 可選屬性
3. <frame>標簽
3.1. <frame>標簽定義frameset中的一個特定的窗口(框架)。
3.2. 可選屬性
3.3. 在下面的這個例子中, 我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器窗口的25%。第二列被設置為占據瀏覽器窗口的75%。html文檔"frame_a.htm"被置于第一個列中, 而html文檔"frame_b.htm"被置于第二個列中:
<frameset cols="25%,75%"><frame src="frame_a.htm"><frame src="frame_b.htm"> </frameset>3.4. 假如一個框架有可見邊框, 用戶可以拖動邊框來改變它的大小。為了避免這種情況發生, 可以在<frame>標簽中加入: noresize="noresize"。
4. <noframes>標簽
4.1. noframes元素可為那些不支持框架的瀏覽器顯示文本。noframes元素位于frameset元素內部。
4.2. 如果瀏覽器有能力處理框架, 就不會顯示出noframes元素中的文本。
4.3. 如果您希望frameset添加<noframes>標簽, 就必須把其中的文本包裝在<body></body>標簽中!
5. 垂直框架例子
5.1. frame_cols.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>垂直框架</title></head><frameset cols="25%,50%,25%"><frame src="../frame_a.html"><frame src="../frame_b.html"><frame src="../frame_c.html"></frameset> </html>5.2. frame_a.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>框架 A</title><style type="text/css">body{background-color: yellow;}</style></head><body>Frame A</body> </html>5.3. frame_b.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>框架 B</title><style type="text/css">body{background-color: gray;}</style></head><body>Frame B</body> </html>5.4. frame_c.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>框架 C</title><style type="text/css">body{background-color: green;}</style></head><body>Frame C</body> </html>5.5. 效果圖
6. 水平框架例子
6.1. frame_rows.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>水平框架</title></head><frameset rows="25%,50%,25%"><frame src="../frame_a.html"><frame src="../frame_b.html"><frame src="../frame_c.html"></frameset> </html>6.2. 效果圖
7. noframes例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>noframes標簽</title></head><frameset cols="25%,50%,25%"><frame src="../frame_a.html"><frame src="../frame_b.html"><frame src="../frame_c.html"><noframes><body>您的瀏覽器無法處理框架!</body></noframes></frameset> </html>8. noresize屬性例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>noresize屬性</title></head><frameset cols="50%,*,25%"><frame src="../frame_a.html" noresize="noresize"><frame src="../frame_b.html"><frame src="../frame_c.html"></frameset> </html>9. 混合框架結構
9.1. 代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>混合框架結構</title></head><frameset rows="50%,50%"><frame src="../frame_a.html"><frameset cols="25%,75%"><frame src="../frame_b.html"><frame src="../frame_c.html"></frameset></frameset> </html>9.2. 效果圖
10. 導航框架
10.1. nav.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>導航框架</title></head><frameset cols="120,*"><frame src="contents.html"><frame src="../frame_a.html" name="showFrame"></frameset> </html>10.2. contents.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>框架 contents</title></head><body><a href="../frame_a.html" target="showFrame">Frame A</a><a href="../frame_b.html" target="showFrame">Frame B</a><a href="../frame_c.html" target="showFrame">Frame C</a></body> </html>10.3. 效果圖
11. target屬性值是_parent和_top
11.1. nav.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>導航框架</title></head><frameset cols="120,*"><frame src="contents.html"><frame src="../frame_a.html" name="showFrame"></frameset> </html>11.2. contents.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta charset="utf-8" /><title>框架 contents</title></head><body><a href="../frame_a.html" target="showFrame">Frame A</a><a href="../frame_b.html" target="_parent">Frame B</a><a href="../frame_c.html" target="_top">Frame C</a></body> </html>11.3. multiple.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html><head><meta charset="utf-8" /><title>target屬性值是_parent和_top</title></head><frameset rows="50%,50%"><frame src="../frame_a.html"><frame src="nav.html"></frameset> </html>11.4. 效果圖
總結
以上是生活随笔為你收集整理的027_html框架的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 026_html表单
- 下一篇： 062_html多媒体