Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 在线亚洲激情,欧美毛片一级的免费的,好男人www社区影视在线 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML5常見的基礎(chǔ)標(biāo)簽（7）你所不知道的iframe和frameset
          
        
           
          
	
	
          
		
                        
          .活動(dòng)框架 iframe
          1. 活動(dòng)框架iframe,這個(gè)框架可以內(nèi)聯(lián)或包含另外一個(gè)網(wǎng)頁文檔
          語法結(jié)構(gòu)：<iframe></iframe>
          實(shí)例：
          <table border="1" width="100%" cellspacing="0" cellpadding="0">
          <tr height="100"><td colspan="2">高新區(qū)軟件園C區(qū)食堂管理系統(tǒng)</td></tr>
          <tr height="600">
          <td width="15%">
          <ul>
          <li><a href="usermanger/uadd.html" target="mainbox">員工添加</a></li>
          <li><a href="usermanger/uedit.html" target="mainbox">員工修改</a></li>
          <li><a href="usermanger/ulist.html" target="mainbox">員工查詢</a></li>
          </ul>
          </td>
          <td width="90%">
          <iframe src="usermanger/welceome.html" name="mainbox" width="100%" height="600">
           你的瀏覽器不支持，請(qǐng)升級(jí)或更新瀏覽器
          </iframe>
          </td>
          </tr>
          </table>
          常用屬性：
          frameborder:是否顯示框架的邊框 0：不顯示，1：顯示
          Scrolling:是否顯示滾動(dòng)條
          Yes：顯示
          No:不顯示
          Auto:自動(dòng)處理
          2. 框架集 frameset
          <frameset ></frameset>
          屬性rows表示分成幾行，一般用“，”隔開。
          屬性cols表示分成幾列，一般用“，”隔開。
          使用fameset標(biāo)簽，不再需要body元素
          主框架頁面：
          <frameset rows="15%,85%">
           <frame src="usermanger/top.html" />
           <frameset cols="200,*">
           <frame src="usermanger/navlist.html" />
           <frame src="usermanger/welceome.html" name="mainbox" />
           </frameset>
           </frameset>
          navlist.html頁面：
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          </head>
          <body>
          <ul>
          <li><a href="uadd.html" target="mainbox">員工添加</a></li>
          <li><a href="uedit.html" target="mainbox">員工修改</a></li>
          <li><a href="ulist.html" target="mainbox">員工查詢</a></li>
          </ul>
          </body>
          </html>
          實(shí)例1：代碼結(jié)構(gòu)
          實(shí)例1：界面
          架
          框架技術(shù)可以實(shí)現(xiàn)對(duì)靜態(tài)頁面的互相引用，提高靜態(tài)頁面的重用性，因?yàn)椴⒉皇撬械臑g覽器都能很好的支持，而且對(duì)搜索引擎可能也不是很友好，所以一般網(wǎng)頁使用并不多，但是對(duì)一些管理系統(tǒng)而言，框架還是很實(shí)用的，因?yàn)楣芾硐到y(tǒng)的布局比較簡單。每一個(gè)頁面的效果都差不多，一般使用下面這種布局。
          這個(gè)布局頭部，菜單和尾部的內(nèi)容都是不會(huì)變化的，經(jīng)常變化的就是中間的操作頁面，所有可以把頭部，菜單和尾部以及主頁分別使用四個(gè)頁面設(shè)計(jì)，然后在定義一個(gè)框架頁面進(jìn)行引入即可。
          1、frame頁面
          top.html
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>
          <body bgcolor="#46D0DA">
          </body>
          </html>
          leftmenu.html
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>
          <body bgcolor="#1D7A17">
           <ul>
           <li><a href="main.html" target="main">主頁</a></li>
           <li><a href="register.html" target="main">注冊(cè)</a></li>
           </ul>
          </body>
          </html>
          footer.html
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>
          <body bgcolor="#940407">
          </body>
          </html>
          main.html
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>
          <body bgcolor="#1461C8">
          </body>
          </html>

          2、總頁面frame.html
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>frame</title>
          <base href="<%=basePath%>">
          </head>
          <frameset rows="20%,65%,*" border="1">
           <frame src="top.html">
           <frameset cols="25%,*">
           <frame src="leftmenu.html">
           <frame src="main.html" >
           </frameset>
           <frame src="footer.html">
           </frameset><noframes></noframes>
          <body>
          </body>
          </html>
          效果如下：
          3、在main中加載新頁面
          運(yùn)行上面代碼發(fā)現(xiàn)超鏈接是在新的窗口中打開了，如果需要在主框架中顯示，要先給這個(gè)主框架定義name的屬性，然后在修改leftmenu.html的超鏈接的target屬性值，寫上主框架的name的值，下面更改frame.html中的frameset代碼如下：
          <frameset rows="20%,65%,*" border="1">
           <frame src="top.html">
           <frameset cols="25%,*">
           <frame src="leftmenu.html">
           <frame src="main.html" name="main">
           </frameset>
           <frame src="footer.html">
           </frameset>
          <body>
          補(bǔ)充register.html代碼如下：
          <!doctype html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Untitled Document</title>
          </head>
          <body>
          <h1>注冊(cè)頁面</h1>
          </body>
          </html>
          然后在frame.html中點(diǎn)擊注冊(cè)效果如下：
          rame 的最主要功能是用來把一個(gè)頁面劃分成好幾個(gè)小窗口頁面，每個(gè)小窗口可以顯示不同html文件，這樣頁面也可以稱為框架結(jié)構(gòu)頁面，每個(gè)月小窗口稱作框架窗口，下來將詳細(xì)介紹框架窗口。
          frame 在現(xiàn)在已經(jīng)很少使用，雖然不是必須學(xué)習(xí)的，但還是建議了解學(xué)習(xí)下frame 、iframe的知識(shí)，在某些時(shí)候非常有用。
          什么是 frame 框架
          如果想將頁面分成上下兩部分，各自互相獨(dú)立又互相關(guān)聯(lián)，用戶在其中一個(gè)部分操作頁面不影響其它部分的頁面，這樣的頁面也叫多窗口頁面。
          1、框架窗口基本結(jié)構(gòu)：
          框架窗口主要包含2部分，一個(gè)是框架集，一個(gè)是具體的框架文件。
          框架集就是存放框架結(jié)構(gòu)的文件，也是訪問框架文件的入口，如果網(wǎng)頁由上下2個(gè)框架窗口組成，那么除了這2個(gè)窗口的html文件，還有一個(gè)總的框架集文件。
          框架文件是每個(gè)顯示區(qū)域?qū)?yīng)的html文件，如下示例：
          index.html
          <html>
<head>
  <title>框架頁面</title>
</head>
<body>
  <frameset>
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
  </body>
</html>
          如上index.html 就是框架集文件，在這個(gè)框架集文件中定義了頁面劃分成上下2部分，分別對(duì)應(yīng)top.html 和 bottom.html 2個(gè)框架窗口文件。
          2、框架窗口分割
          框架頁面分割方式是在框架集frameset通過rows 或 cols 屬性定義的，一般按分割類型分為以下幾種：
          • 水平分割窗口
          • 垂直分割窗口
          • 嵌套分割窗口
          2.1 水平分割窗口
          將頁面按水平方向分割，也就是上下結(jié)構(gòu)，語法：
          <frameset rows="窗口1高度，窗口2高度，">
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
          在該語法中，rows 可以設(shè)置多個(gè)值，每個(gè)值對(duì)應(yīng)一個(gè)框架窗口垂直高度，它的值可以使用像素單位或百分比單位。
          如下示例：
          <html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>
          顯示效果：
          比如上面這個(gè)，被從上到下分割成3個(gè)窗口，高度依次是25%,50%,25%。
          2.2 垂直分割窗口
          沿著頁面垂直方向分割，也就是左右結(jié)構(gòu)的多窗口頁面。語法如下：
          <frameset cols="窗口1寬度，窗口2寬度，">
  <frame src="left.html"></frame>
   <frame src="right.html"></frame>
  </frameset>
          在該語法中，cols 可以設(shè)置多個(gè)值，每個(gè)值對(duì)應(yīng)一個(gè)框架窗口水平寬度，它的值可以使用像素單位或百分比單位。
          示例：
          <html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>
          顯示效果：
          比如上面這個(gè)，被從左到右分割成3個(gè)窗口，寬度依次是25%,50%,25%。
          2.3、嵌套分割窗口
          嵌套窗口就是在一個(gè)頁面既有水平分割又有垂直分割的窗口，如下示例：
          先水平分割再垂直分割
          <frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
          顯示效果：
          先垂直分割再水平分割
          <frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
          顯示效果：
          理論上可以無限嵌套，是不是很好玩。
          2.4、noframes
          當(dāng)瀏覽器布置frame 時(shí)會(huì)顯示noframes 中的內(nèi)容。如下代碼：
          <html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
          效果顯示：
          框架集的屬性
          1、設(shè)置邊框 —— frameborder
          frameborder 等于0時(shí)不顯示邊框，默認(rèn)顯示。
          2、邊框?qū)挾?—— framespacing
          在html5中無效。
          3、邊框顏色 —— bordercolor
          如下代碼：
          <html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
          效果：
          具體可以參考這里 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看這幾個(gè)屬性的關(guān)系。
          框架頁面屬性
          1、頁面源文件 —— src
          就是每個(gè)框架窗口對(duì)應(yīng)的html文件，這里可以是圖片或其它文件。
          <frame src="文件地址">
          2、頁面名稱 —— name
          給每個(gè)框架窗口設(shè)置名稱，有助于鏈接或查找窗口。
          <frame src="文件地址" name="頁面名稱">
          3、禁止調(diào)整窗口尺寸 —— noresize
          黨員鼠標(biāo)拖到框架邊框時(shí)，會(huì)發(fā)現(xiàn)鼠標(biāo)形狀變成可拖動(dòng)的，可以改不框架窗口寬度或高度。如果不希望改變窗口寬度或高度，可以使用noresize 屬性。
          如下示例：
          <html>
<frameset cols="25%,50%,25%">
  <frame noresize="noresize"  src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>
          窗口a是不可改變寬度的。
          浮動(dòng)框架 —— iframe
          浮動(dòng)框架是一種特殊的框架，它是在主窗口中嵌套一個(gè)子窗口，也就是整個(gè)頁面不是框架頁面，但卻包含了一個(gè)框架窗口。
          示例：
          <iframe name="名稱" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>
          效果如下：
          1、浮動(dòng)框架邊框 —— frameborder
          frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框。設(shè)置屬性值為 "0" 就可以移除邊框：
          <iframe src="demo_iframe.htm" frameborder="0"></iframe>
          顯示效果：
          2、鏈接到框架頁面
          通過 a 標(biāo)簽的 target 屬性可以跳轉(zhuǎn)到框架頁面，示例如下：
          <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">頭條號(hào)</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鳥教程</a></p>
</body>
</html>
          顯示效果如下，點(diǎn)擊下面2個(gè)鏈接，切換窗口。
          總結(jié)
          frame 和 iframe 浮動(dòng)框架用途很廣，比如可以實(shí)現(xiàn)頁面局部刷新，在之前被廣泛使用，但是現(xiàn)在基本不建議使用，它有很多問題，比如安全性，性能方面等。
          當(dāng)然有時(shí)也會(huì)使用iframe，比如打印pdf，下載文件等等。
          上篇：前端入門——html 表單控件使用
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
精品国产一区二区22|
久久精品日韩一区国产二区
|
久久精品无码一区二区app|
亚洲性色精品一区二区在线|
熟女少妇丰满一区二区|
日本精品一区二区三区在线视频|
在线免费视频一区|
精品国产亚洲一区二区在线观看|
国产在线精品观看一区|
91一区二区三区四区五区|
交换国产精品视频一区|
无码一区二区三区爆白浆|
武侠古典一区二区三区中文|
色系一区二区三区四区五区|
色婷婷香蕉在线一区二区|
日本精品一区二区久久久|
中文字幕一区二区三区视频在线|
久久综合精品不卡一区二区|
日韩精品一区二区亚洲AV观看
|
久久久老熟女一区二区三区|
精品国产AV一区二区三区|
亚洲变态另类一区二区三区|
日韩一区二区三区无码影院|
亚洲AV综合色区无码一区|
精品一区二区三区波多野结衣|
免费无码一区二区三区|
日韩成人一区ftp在线播放|
亚洲一区二区精品视频|
一区二区精品视频|
中文字幕一区日韩精品|
内射白浆一区二区在线观看
|
日本精品视频一区二区三区|
国产一区二区三区91|
精品人妻码一区二区三区|
无码少妇一区二区三区芒果|
区三区激情福利综合中文字幕在线一区亚洲视频1
|
国产日韩高清一区二区三区|
国产AV午夜精品一区二区三区
|
精品国产一区二区三区AV
|
日韩在线视频不卡一区二区三区|
国产福利一区二区|