HTML中的frame標簽常見的6大屬性，新手一定要悉知！

TML框架和HTML頁內框架的區別？

在進行網站網頁設計中，會經常碰到在一個窗口中需要顯示多個獨立的網頁頁面的問題，這時候需要用到HTML frame系列標簽，而frame系列標簽是HTML框架中不可缺少的。要正確理解HTML框架和HTML頁內框架是兩個概念。HTML框架沒有特殊說明一般指的是HTML中的frame系列標簽，它在網頁中的主要作用是把瀏覽器窗劃分成若干獨立的小窗口，每個窗口顯示相互不同的內容。了解了HTML框架和HTML頁內框架是不同概念后，下面為大家說一下HTML中的frame標簽的使用。

在網頁設計中如果使用框架frame一般是框架集的形式出現的，框架集是指包含多個框架frame的信息，可以通過frameset來定義框架集?？蚣苁前凑招泻土袠嫵傻?，可以使用frameset標記對框架frame結構進行設置。所有瀏覽器都支持 frame標簽，所以可以放心使用frame不會出現兼容問題。

frame常見的屬性

1、左右分割窗口屬性“cols”

在水平方向上將瀏覽器分割成若干個窗口，可以通過左右分割窗口屬性cols實現。語法格式如下：

cols的值用來指定各個框架的列寬，取值有3種形式：像素、百分比（%）、相對尺寸（*）。如果我們想通過框架把瀏覽器窗口劃分為3列，其中第一列占瀏覽器寬度30%，第二列占像素為320，第三列為相對剩下部分的框架，如果要實現這種效果可以把cols的值設定為cols=“30%，320px，*”，就可以實現上面說的效果。如果想通過框架把瀏覽器劃分為3個寬度相等的框架可以把cols的值設定為cols=“*，*，*”。

2、上下分割窗口屬性rows。

在垂直向上將瀏覽器分割成多個窗口，可以通過rows屬性實現，語法格式如下：

rows屬性值用來指定各個框架的行高，也有三種形式:像素、百分比（%）、相對尺寸（*），它的設置方法和cols屬性相似。

3、框架邊框顯示屬性frameborder。

用于指定框架周圍是否顯示邊框，取值為1或0，1是顯示邊框默認值，0是不顯示邊框。

4、framespacing

用于指定框架建的距離，一像素為單位。如果不設置該屬性，框架直接沒有距離。

5、邊框寬度屬性border。

用于指定邊框的寬度，它有一個前提就是frameborder屬性必須是1時才有效。

6、noresize屬性

可選屬性，如果不寫這個屬性，框架的邊框是可以被拖動的改變寬高，可以通過拖動邊框來改變窗口大小。

關于“HTML中的frame標簽的使用”先聊到這。每天學習一個知識點，每日寄語-“只有飛得更高，才有俯瞰一切的資格?！比甾D載清標明出處。

于提升 web 品質，<DOCTYPE>、<title> 以及 <h1> 都是重要的標簽。

<!DOCTYPE> 元素

所有的 HTML 和 XHTML 頁面都應當使用 <Doctype> 元素來定義遵照何種 HTML 版本。

doctype 定義了您正在使用的 HTML 版本，并為瀏覽器提供重要的信息以便其更快速一致地呈現您的頁面。

文檔類型聲明同時也使驗證軟件可以對頁面的語法進行檢查：

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict, Transitional, Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict, Transitional, Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title> 元素

<title> 元素是最重要的 HTML 元素之一。它的主要功能是描述網頁的內容。

即使標題不是網頁的一個可見的部分，它對于提升網站的品質依然是重要的，這是因為它在以下位置都是可見的：

搜索引擎列表
窗口的標題欄
用戶的書簽中

標題應當盡可能地短，并具有可描述性。

當某個用戶在 internet 上搜索網站時，大部分搜索引擎都會在搜索結果中顯示出網站的標題。請確保標題與網頁的內容是吻合的。這樣的話用戶有更多的可能通過點擊這些鏈接來訪問到你的網站。

當用戶訪問您的網站時，在窗口的標題欄中標題是可見的。請確保即使窗口被最小化，標題同樣能起到描述網站內容的作用。

在用戶訪問你的網站之后，網頁的標題會存儲于歷史文件夾（用戶甚至會把網頁收藏到他的收藏夾中）。為了后續的成功訪問，同樣請確保標題可以清楚地描述您的網站。

優秀的標題：

<title>HTML Tutorial</title>

<title>XML Introduction</title>

差距的標題的例子：:

<title>Introduction</title>

<title>Chapter 1</title>

W3Cschool擁有一整套組織良好、易于理解的 HTML、CSS、JavaScript、 DHTML、XML、XHTML、WAP、ASP、SQL 教程，并包含非常多實例和源代碼。

<h1> 元素

<h1> 元素用來描述網頁中最上層的標題。

由于一些瀏覽器會默認地把 <h1> 元素顯示為很大的字體，因此會有一些 web 開發者使用 <h2> 元素代替 <h1> 元素來顯示最上層的標題。這樣做不會對讀者產生影響，但會使那些試圖"理解網頁結構"的搜索引擎和其他軟件感到迷惑。

請確保把 <h1> 用于最頂層的標題，<h2> 和 <h3> 用于較低的層級。

可以試著根據此模版來構造您的網頁：

This is the main heading

Some initial text

This is a level 2 heading

This is some text. This is some text. This is some text.

This is a level 3 heading

This is some text. This is some text. This is some text.

This is a level 3 heading

This is some text. This is some text. This is some text.

如果您不喜歡默認的標題字體尺寸，可以使用樣式或樣式表來改變。

rame 的最主要功能是用來把一個頁面劃分成好幾個小窗口頁面，每個小窗口可以顯示不同html文件，這樣頁面也可以稱為框架結構頁面，每個月小窗口稱作框架窗口，下來將詳細介紹框架窗口。

frame 在現在已經很少使用，雖然不是必須學習的，但還是建議了解學習下frame 、iframe的知識，在某些時候非常有用。

什么是 frame 框架

如果想將頁面分成上下兩部分，各自互相獨立又互相關聯，用戶在其中一個部分操作頁面不影響其它部分的頁面，這樣的頁面也叫多窗口頁面。

1、框架窗口基本結構：

框架窗口主要包含2部分，一個是框架集，一個是具體的框架文件。

框架集就是存放框架結構的文件，也是訪問框架文件的入口，如果網頁由上下2個框架窗口組成，那么除了這2個窗口的html文件，還有一個總的框架集文件。

框架文件是每個顯示區域對應的html文件，如下示例：

index.html

<html>
<head>
  <title>框架頁面</title>
</head>
<body>
  <frameset>
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>
  </body>
</html>

如上index.html 就是框架集文件，在這個框架集文件中定義了頁面劃分成上下2部分，分別對應top.html 和 bottom.html 2個框架窗口文件。

2、框架窗口分割

框架頁面分割方式是在框架集frameset通過rows 或 cols 屬性定義的，一般按分割類型分為以下幾種：

水平分割窗口
垂直分割窗口
嵌套分割窗口

2.1 水平分割窗口

將頁面按水平方向分割，也就是上下結構，語法：

<frameset rows="窗口1高度，窗口2高度，">
  <frame src="top.html"></frame>
   <frame src="bottom.html"></frame>
  </frameset>

在該語法中，rows 可以設置多個值，每個值對應一個框架窗口垂直高度，它的值可以使用像素單位或百分比單位。

如下示例：

<html>
<frameset rows="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

顯示效果：

比如上面這個，被從上到下分割成3個窗口，高度依次是25%,50%,25%。

2.2 垂直分割窗口

沿著頁面垂直方向分割，也就是左右結構的多窗口頁面。語法如下：

<frameset cols="窗口1寬度，窗口2寬度，">
  <frame src="left.html"></frame>
   <frame src="right.html"></frame>
  </frameset>

在該語法中，cols 可以設置多個值，每個值對應一個框架窗口水平寬度，它的值可以使用像素單位或百分比單位。

示例：

<html>
<frameset cols="25%,50%,25%">
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

顯示效果：

比如上面這個，被從左到右分割成3個窗口，寬度依次是25%,50%,25%。

2.3、嵌套分割窗口

嵌套窗口就是在一個頁面既有水平分割又有垂直分割的窗口，如下示例：

先水平分割再垂直分割

<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

顯示效果：

先垂直分割再水平分割

<frameset cols="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset rows="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>

顯示效果：

理論上可以無限嵌套，是不是很好玩。

2.4、noframes

當瀏覽器布置frame 時會顯示noframes 中的內容。如下代碼：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果顯示：

框架集的屬性

1、設置邊框 —— frameborder

frameborder 等于0時不顯示邊框，默認顯示。

2、邊框寬度 —— framespacing

在html5中無效。

3、邊框顏色 —— bordercolor

如下代碼：

<html>
<frameset rows="50%,50%" frameborder="1" framespacing="100" bordercolor="blue">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%" frameborder="0" bordercolor="orange">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>

效果：

具體可以參考這里 https://www.cnblogs.com/lavenderzh/archive/2012/04/09/2438803.html 查看這幾個屬性的關系。

框架頁面屬性

1、頁面源文件 —— src

就是每個框架窗口對應的html文件，這里可以是圖片或其它文件。

<frame src="文件地址">

2、頁面名稱 —— name

給每個框架窗口設置名稱，有助于鏈接或查找窗口。

<frame src="文件地址" name="頁面名稱">

3、禁止調整窗口尺寸 —— noresize

黨員鼠標拖到框架邊框時，會發現鼠標形狀變成可拖動的，可以改不框架窗口寬度或高度。如果不希望改變窗口寬度或高度，可以使用noresize 屬性。

如下示例：

<html>
<frameset cols="25%,50%,25%">
  <frame noresize="noresize"  src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
</html>

窗口a是不可改變寬度的。

浮動框架 —— iframe

浮動框架是一種特殊的框架，它是在主窗口中嵌套一個子窗口，也就是整個頁面不是框架頁面，但卻包含了一個框架窗口。

示例：

<iframe name="名稱" src="https://www.w3school.com.cn/" width="800px" height="600px"></iframe>

效果如下：

1、浮動框架邊框 —— frameborder

frameborder 屬性規定是否顯示 iframe 周圍的邊框。設置屬性值為 "0" 就可以移除邊框：

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

顯示效果：

2、鏈接到框架頁面

通過 a 標簽的 target 屬性可以跳轉到框架頁面，示例如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
</head> 
<body>
<iframe src="http://www.runoob.com/" name="iframe_a"></iframe>
<p><a href="https://mp.toutiao.com/" target="iframe_a">頭條號</a></p>
<p><a href="http://www.runoob.com/" target="iframe_a">菜鳥教程</a></p>
</body>
</html>

顯示效果如下，點擊下面2個鏈接，切換窗口。