當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

027_html框架

發布時間：2025/4/17 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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"被置于第二個列中:

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

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框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

框架
_HTML