HTML 學習總結(jié)2 框架 表單

2020-3-18    前端達人

這是HTML學習總結(jié)系列的第二篇，第一篇在這里：

HTML 學習總結(jié)1入門 基本概念、格式 文字標簽 圖片標簽 鏈接標簽 表格標簽 注釋

這次的學習內(nèi)容相較第一次分類少，但是比較雜。



框架集標簽

框架標簽是將網(wǎng)頁設(shè)置成網(wǎng)頁框架的一種雙標簽，被設(shè)計成框架的網(wǎng)頁被切分成若干區(qū)域，沒有實際的內(nèi)容，只當做框架用于鑲嵌其它的網(wǎng)頁。

那么，這個標簽是：

<frameset></frameset>



    框架集標簽的屬性





    使用的時候需要將HTML文件中的body標簽部分替換為框架標簽，寫成這樣：








<html>
    <head></head>
    <frameset rows="500,*" border="3" noresize="noresize">
    </frame>
</html>




看上面的代碼，用frameset替換掉body不難理解，畢竟我們約定做框架的網(wǎng)頁不具有實體內(nèi)容
接著，這里提到了框架標簽的三個屬性，分別為：

rows/cols 框架的分行或分列
border 分隔框的寬度
noresize 大小是否可調(diào)
現(xiàn)在來分別解釋一下

第一個，rows 或cols 屬性，代表了框架的分行或分列的情況，在引號內(nèi)書寫該屬性的值的時候，不需要指明分成幾欄，只需要指明每一欄占據(jù)的寬度或高度（單位為像素）并使用逗號隔開。瀏覽器在解析的時候會計算到底分成了幾欄。另外，不指定寬度而使其占據(jù)剩余位置時，可以使用通配符 “ * ”。

第二個，border 屬性，代表了分隔框的寬度，這是屬性的數(shù)值單位是像素。所以如果你不想加入邊框，則可以將它設(shè)置為零。

第三個，noresize 屬性，表示我們的框架的大小是否可調(diào)，frameset標簽?zāi)J為大小可調(diào)，當用戶鼠標移動到邊框上時，他可以拖拽改變大小。所以如果不想讓用戶隨意改變框架大小，那么可以選擇使用這個屬性 （當然，也可以選擇把邊框的寬度設(shè)為零，讓他找不到）。 這個屬性的值同屬性名稱一樣。

最后還需要說明的是：框架集標簽是可以進行嵌套的，也就是說，在已經(jīng)分出來的框架中，我們可以借著分欄。

在框架內(nèi)鑲嵌網(wǎng)頁
剛剛我們使用 frameset 標簽將網(wǎng)頁變成框架并劃分成了若干區(qū)域，每一個區(qū)域都是一個單獨的可顯示頁面的子網(wǎng)頁（筆者起的名）?，F(xiàn)在，我們需要在這些區(qū)域內(nèi)為它鑲嵌上一個網(wǎng)頁，這需要用到frame這個單標簽在框架下添加網(wǎng)頁，它的寫法如下：

<frame src="...." name="...." />
1
這里可以看到 frame 標簽的兩個屬性; src 和 name 。它們分別代表著添置連接（這是一個超鏈接，網(wǎng)頁，HTML文件，圖片等都是可以的。有關(guān)超鏈接的信息，可參照上一篇學習總結(jié)或者問問度娘 ），以及框架名稱。

框架的命名，很主要的一個原因在于可以重復(fù)利用一個框架，即在其他標簽使用時，可以在某個框架上顯示相應(yīng)內(nèi)容。還記得上一篇中，我們提到的鏈接標簽 target 屬性中的 “某框架名稱” 這個值嗎？在為框架命名后，就可以使用上述的 target 用法，將打開的網(wǎng)頁放在某個框架中了。

綜上，舉個例子：

先來創(chuàng)造一個帶有嵌套的框架

<!--frame-->
<html>
    <head></head>
    <frameset rows="200,*" border="5" noresize="noresize">
        <frame src="title.html" name="title" />
        <frameset cols="200,*">
            <frame src="selection_bar.html" />
            <frame name="output_page" />
        </frameset>
    </frameset>
</html>











<!--title-->
<html>
    <head></head>
    <body>
        <font size="7" color="blue">
            The test page
        </font>
    </body>
</html>










<!--selection_bar-->
<html>
    <head></head>
    <body>
        <font size="5" color="red">
            Please select websites.
        </font>
        <br /><br />
        <a  target="output_page"/>百度一下<br /><br />
        <a  target="output_page"/>CSDN <br /><br />
    </body>
</html>







最后來看下結(jié)果：



    點擊查看原圖




    





    點擊查看原圖點擊查看原圖










				

				
分享本文至：     
				
			

		

		
		
	




    
  

    
日歷

    

        

        
    

  

    
    

      
鏈接

      
    
                

    

    

      
個人資料

      

          

                    

          
藍藍設(shè)計的小編
          http://sillybuy.com

      

    

    

      
存檔