HTML學習8：常用標簽之框架標簽 · Web前端HTML+CSS+JS初級入門

HTML標記語言中通過使用框架，可以在同一個瀏覽器窗口中顯示不止一個頁面。 ### 一，框架概述通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。使用框架的壞處： ? ? ?(1)開發人員必須同時跟蹤更多的HTML文檔 ? ? ?(2)很難打印整張頁面 ### 二，框架結構標簽（<frameset>） ? ? ?(1)框架結構標簽<frameset>定義如何將窗口分割為框架 ? ? ?(2)每個<frameset>定義了一系列行或列 ? ? ?(3)rows/cols屬性的值規定了每行或每列占據屏幕的面積 ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HTML框架標簽演示</title> </head>   <frameset rows="30%,*"> <frame src="top.html" name="top" noresize="noresize"/>  <frameset cols="30%,*"> <frame src="left.html" name="left" noresize="noresize"/> <frame src="right.html" name="right" noresize="noresize" /> </frameset> </frameset><noframes></noframes> <body> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_57215588e504f.jpg) ### 三，框架標簽（Frame） <Frame>標簽定義了放置在每個框架中的 HTML 文檔。在上面的代碼中有出現過！ ### 五，內聯框架<iframe> ? ? ? (1)<iframe>標簽用于在網頁內顯示網頁。添加<iframe>標簽的語法： ? ? ? <iframe src="URL"></iframe> ? ? ? URL 指向隔離頁面的位置。 ? ? ? (2)<Iframe>標簽設置高度和寬度 ? ? ? height 和 width 屬性用于規定 iframe 的高度和寬度。屬性值的默認單位是像素，但也可以用百分比來設定（比如 "80%"）。 ? ? ? (3)<Iframe>標簽刪除邊框 ? ? ? frameborder 屬性規定是否顯示 iframe 周圍的邊框，設置屬性值為 "0" 就可以移除邊框。 ? ? ? (4)某些老式的瀏覽器不支持內聯框架。如果不支持，則<iframe>標簽內的內容是不可見的。 ? ? ? (5)使用<iframe>作為鏈接的目標 <iframe>可用作鏈接的目標(target)。鏈接的target屬性必須引用<iframe>的name屬性。 ~~~ <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>內聯框架標簽演示</title> </head> <body> <div align="center"> <iframe src="14-130R1115208.jpg" height="300" width="280" name="iframe_a"> 這是畫中畫標簽，你如果看到了該文字，很遺憾，你的瀏覽器不支持該標簽 </iframe><p><a href="http://www.sina.com" target="iframe_a">新浪網站</a></p> </div> </body> </html></span> ~~~ 瀏覽器顯示的結果為： ![](https://box.kancloud.cn/2016-04-28_5721558905302.jpg) 點擊新浪網站后的結果為： ![](https://box.kancloud.cn/2016-04-28_572155891e1f7.jpg) ### 六，基本的注意事項 (1)假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在<frame>標簽中加入：noresize="noresize"。 (2)為不支持框架的瀏覽器添加 <noframes> 標簽。 (3)不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標簽，就必須將這段文字嵌套于 <body></body> 標簽內。演示框架的例子： ### 七,示例 ? ? ? 1在上面的網頁框架中已經有了第一個網頁的代碼。 ? ? ? 2框架的頂層顯示的Logo網頁頁面的代碼： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body> <h1>這是我的網站Logo。這里可以放置圖片，也可以自己規劃</h1> </body> </html> ~~~ ? ? ? 3下半部分左半部分顯示的網頁代碼： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body> <h3>左邊欄鏈接</h3> <a href="表格標簽.html" target="right">鏈接一</a> <a href="超鏈接標簽.html" target="right">鏈接二</a> <a href="畫中畫標簽.html" target="right">鏈接三</a> </body> </html> ~~~ ? ? ? ?4下半部分左半部分顯示的網頁代碼： ~~~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> </head> <body> <h2>內容顯示區域</h2> </body> </html> ~~~ ? ? ? ?5表格標簽網頁，超鏈接標簽網頁以及內聯框架標簽網頁的代碼都在前面已經寫過，就不再一一贅述了。 ? ? ? ?6網頁顯示結果：點擊鏈接一： ![](https://box.kancloud.cn/2016-04-28_5721558932d1c.jpg) 點擊鏈接二： ![](https://box.kancloud.cn/2016-04-28_572155894325f.jpg) 點擊鏈接二： ![](https://box.kancloud.cn/2016-04-28_5721558961d4e.jpg) ![](https://box.kancloud.cn/2016-04-28_572155897f7bd.jpg) ? ?? ? ??