HTML之框架標籤

carson0408發表於2018-03-17
HTML框架

        使用框架標籤可以使網頁的內容佈局更整齊清晰，更加的有層次感。製作框架一般使用frameset元素定義一個框架集，它被用來組織多個框架，而框架則由frame來定義。每個框架都存有獨立的文件。首先使用frameset元素定義個框架集，而它有兩個屬性：cols和rows，分別代表框架集的行列。注意，frameset不能與body共用。

        以下通過一個例子來更加清楚的瞭解frameset的效果。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frame />
		<frame />
	</frameset>
</html>

得到如下網頁：


以上便是使用了cols屬性，將框架集分成兩列，並且每個框架的寬度各佔50%，因此cols的取值可以是整數，百分數，或者*。

        關於frame元素有幾個常用的屬性，如frameborder，取值為0或1，表示是否顯示框架周圍的邊框；src屬性，值一般是URL，表示框架顯示文件的URL；scrolling屬性，取值為yes、no或者auto，表示是否在框架中顯示滾動條。

以下通過對frame屬性細化來看看屬性的特點。

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frame src="multi.html"/>
		<frame src="01.html"/>
	</frameset>
</html>

得到的網頁如下圖所示：


上圖的左邊框架顯示的是multi.html的內容；右邊框架顯示的是01.html的內容，這就是框架集的作用，可以將多個需要整合在一個頁面上的內容進行整合，並且使佈局更加有層次感。

接下來講講混合框架的使用，即在框架集中設定框架集，比如一個框架集分為左右兩個框架，其中左框架中設定一個框架集，分為上下兩個框架，這就是複合框架。程式碼如下所示：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head>
	<title size="10" color="red">welcome to HTML</title>
</head>
	<frameset cols="50%,*">
		<frameset rows="50%,*">
			<frame src="multi.html" frameborder="1" marginwidth="100" marginheight="100" />
			<frame src="b.html" frameborder="1" marginwidth="100" marginheight="100" />
		</frameset>
		<frame src="01.html" frameborder="1" marginwidth="100" marginheight="100"/>
	</frameset>
</html>

效果如下所示：


以上就是框架的基本使用以及混合框架的使用，在製作網頁的過程中，框架標籤的使用具有綜合文件內容的作用。

相關文章