国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

HTML 學習總結2 框架 表單

2020-3-18    前端達人

這是HTML學習總結系列的第二篇,第一篇在這里:

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

這次的學習內容相較第一次分類少,但是比較雜。



框架集標簽

框架標簽是將網頁設置成網頁框架的一種雙標簽,被設計成框架的網頁被切分成若干區域,沒有實際的內容,只當做框架用于鑲嵌其它的網頁。

那么,這個標簽是:

<frameset></frameset>

框架集標簽的屬性

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



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

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

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

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

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

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

最后還需要說明的是:框架集標簽是可以進行嵌套的,也就是說,在已經分出來的框架中,我們可以借著分欄。

在框架內鑲嵌網頁
剛剛我們使用 frameset 標簽將網頁變成框架并劃分成了若干區域,每一個區域都是一個單獨的可顯示頁面的子網頁(筆者起的名)。現在,我們需要在這些區域內為它鑲嵌上一個網頁,這需要用到frame這個單標簽在框架下添加網頁,它的寫法如下:

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

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

綜上,舉個例子:

先來創造一個帶有嵌套的框架
<!--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>

最后來看下結果:

點擊查看原圖


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




日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔