內嵌標籤frameset框架屬性及用法

大海里全是水發表於2020-11-24
框架

1.frameset的例項及用法註釋

ps：

frameset框架的作用：與iframe作用相同，但frameset更靈活，分割方便。

URL：統一資源定位符

HTTP：超文字傳輸協議

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>框架標籤的應用</title>
</head>
<!-- 框架標籤frameset
		rows：按照行進行分切頁面
                cols：按照列進行分切頁面
                子標籤frame:進行切分割槽域佔位，一個frame可以獨佔網頁的資源
                frame內屬性：
                	src:資源路徑(本地或URL)
                        name:區域名，結合超連結使用
                        
                        注意：使用時刪除body標籤，替換之
                        設計框架登入退出介面時超連結target="_top"用這個

-->
 <frameset rows="10%,*,10%"><!-- 分切頁面-->

	<frame src="top.html"/>
     
			<frameset cols="7%,*">
    
   		 	<frame src="left.html" >
            
   			<frame src="total.html" name="_to"><!-- name="_to":定義區域名"_to"-->
            
            
            
   </frameset>
    
    
    
    <frame src="bottom.html" />
    
    
    
 </frameset>
</html>

 

2.主程式相關頁面left,login程式碼

left:主頁面分割左邊位置頁面內容

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Left</title>
</head>
<a href="https://www.bilibili.com"  target="_to"><ul><li>嗶哩嗶哩</li></ul></a><!-- target="_to":在區域名為_to的頁面開啟 -->
<a href="https://www.baidu.com"  target="_to"><ul><li>百度一下</li></ul></a>

<body>
</body>
</html>

 

login：退出超連結跳轉頁面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
</head>

<body>
<h2>login: </h2>
<form name="form1" method="post" action=""><!-- 建立表單 -->
  <p>
    <label for="textfield"></label>
    aac:   
    <input type="text" name="textfield" id="textfield">
  </p>
  <p>
    <label for="textfield2"></label>
    pw:
    <input type="text" name="textfield2" id="textfield2">
  </p>
  <p>
    <input type="submit" name="button" id="button" value="登入">
  </p>
  
 
</form>

</body>
</html>

 

3.執行結果

ps：注意框架單擊退出跳轉時taget屬性一定要用_top(隱藏執行退出框架操作)，如用_self或_blank,達不到單頁面效果。

 

單擊退出頁面執行結果：

 

相關文章