2020-3-18 前端達(dá)人
這是HTML學(xué)習(xí)總結(jié)系列的第二篇,第一篇在這里:
HTML 學(xué)習(xí)總結(jié)1入門 基本概念、格式 文字標(biāo)簽 圖片標(biāo)簽 鏈接標(biāo)簽 表格標(biāo)簽 注釋
這次的學(xué)習(xí)內(nèi)容相較第一次分類少,但是比較雜。
框架集標(biāo)簽
框架標(biāo)簽是將網(wǎng)頁設(shè)置成網(wǎng)頁框架的一種雙標(biāo)簽,被設(shè)計(jì)成框架的網(wǎng)頁被切分成若干區(qū)域,沒有實(shí)際的內(nèi)容,只當(dāng)做框架用于鑲嵌其它的網(wǎng)頁。
那么,這個(gè)標(biāo)簽是:
<frameset></frameset>
框架集標(biāo)簽的屬性
使用的時(shí)候需要將HTML文件中的body標(biāo)簽部分替換為框架標(biāo)簽,寫成這樣:
<html> <head></head> <frameset rows="500,*" border="3" noresize="noresize"> </frame> </html>看上面的代碼,用frameset替換掉body不難理解,畢竟我們約定做框架的網(wǎng)頁不具有實(shí)體內(nèi)容 接著,這里提到了框架標(biāo)簽的三個(gè)屬性,分別為: rows/cols 框架的分行或分列 border 分隔框的寬度 noresize 大小是否可調(diào) 現(xiàn)在來分別解釋一下 第一個(gè),rows 或cols 屬性,代表了框架的分行或分列的情況,在引號(hào)內(nèi)書寫該屬性的值的時(shí)候,不需要指明分成幾欄,只需要指明每一欄占據(jù)的寬度或高度(單位為像素)并使用逗號(hào)隔開。瀏覽器在解析的時(shí)候會(huì)計(jì)算到底分成了幾欄。另外,不指定寬度而使其占據(jù)剩余位置時(shí),可以使用通配符 “ * ”。 第二個(gè),border 屬性,代表了分隔框的寬度,這是屬性的數(shù)值單位是像素。所以如果你不想加入邊框,則可以將它設(shè)置為零。 第三個(gè),noresize 屬性,表示我們的框架的大小是否可調(diào),frameset標(biāo)簽?zāi)J(rèn)為大小可調(diào),當(dāng)用戶鼠標(biāo)移動(dòng)到邊框上時(shí),他可以拖拽改變大小。所以如果不想讓用戶隨意改變框架大小,那么可以選擇使用這個(gè)屬性 (當(dāng)然,也可以選擇把邊框的寬度設(shè)為零,讓他找不到)。 這個(gè)屬性的值同屬性名稱一樣。 最后還需要說明的是:框架集標(biāo)簽是可以進(jìn)行嵌套的,也就是說,在已經(jīng)分出來的框架中,我們可以借著分欄。 在框架內(nèi)鑲嵌網(wǎng)頁 剛剛我們使用 frameset 標(biāo)簽將網(wǎng)頁變成框架并劃分成了若干區(qū)域,每一個(gè)區(qū)域都是一個(gè)單獨(dú)的可顯示頁面的子網(wǎng)頁(筆者起的名)?,F(xiàn)在,我們需要在這些區(qū)域內(nèi)為它鑲嵌上一個(gè)網(wǎng)頁,這需要用到frame這個(gè)單標(biāo)簽在框架下添加網(wǎng)頁,它的寫法如下: <frame src="...." name="...." /> 1 這里可以看到 frame 標(biāo)簽的兩個(gè)屬性; src 和 name 。它們分別代表著添置連接(這是一個(gè)超鏈接,網(wǎng)頁,HTML文件,圖片等都是可以的。有關(guān)超鏈接的信息,可參照上一篇學(xué)習(xí)總結(jié)或者問問度娘 ),以及框架名稱。 框架的命名,很主要的一個(gè)原因在于可以重復(fù)利用一個(gè)框架,即在其他標(biāo)簽使用時(shí),可以在某個(gè)框架上顯示相應(yīng)內(nèi)容。還記得上一篇中,我們提到的鏈接標(biāo)簽 target 屬性中的 “某框架名稱” 這個(gè)值嗎?在為框架命名后,就可以使用上述的 target 用法,將打開的網(wǎng)頁放在某個(gè)框架中了。 綜上,舉個(gè)例子: 先來創(chuàng)造一個(gè)帶有嵌套的框架<!--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é)果:
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com