- PHP Web開發快速入門及實例精選
- 陸昌輝等編著
- 7030字
- 2018-12-29 21:27:52
第2章 HTML基礎
HTML英語意思是：Hypertext Marked Language，即超文本標記語言，是一種用來制作超文本文檔的簡單標記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統平臺（如UNIX, Windows等）。本章將簡單介紹HTML的基礎知識以及如何創建表格和創建窗口框架。
2.1 HTML基本結構
HTML文件是標準的ASCII文件，它看起來像是加入了許多被稱為鏈接簽的特殊字符串的普通文本文件。從結構上講HTML文件由元素組成，組成HTML文件的元素有許多種，用于組織文件的內容和指導文件的輸出格式。絕大多數元素是“容器”，即它有起始標記和結尾標記。元素的起始標記叫做起始鏈接簽，元素結束標記叫做結尾鏈接簽，在起始鏈接簽和結尾鏈接簽中間的部分是元素體。每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內標明，比如體元素。
<body backgroud="back-ground.gif">
<h2>演示</h2>
這是一個HTML文件． <p>
</body>
第一行是體元素的起始鏈接簽，它標明體元素從此開始。幾乎所有的鏈接簽都具有相同的結構，具體解釋如下：
● <起始鏈接簽開始
● body元素名稱，由于元素和鏈接簽一一對應，所以元素名也叫鏈接簽名。
需要注意的是，<和body之間不能有空格。元素名稱不分大小寫。background：背景屬性名，一個元素可以有多個屬性，屬性及其屬性值不分大小寫。本屬性指明用名為back-ground.gif圖片來填充背景。
● =指明屬性值
"background.gif" 屬性值，表示用background.gif文件來填充背景。
屬性名，=，屬性值合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。
● >起始鏈接鏈結束
第二行和第三行是body元素的元素體，最后一行是body元素的結尾鏈接簽。結尾鏈接簽用</開始，隨后是元素名，然后是>。
從上面的例子中，可以看出一個元素的元素體中可以有另外的元素，比如上例中第二行的標題元素<h2>…</h2>和第三行的分段元素<p>。實際上，HTML文件僅由一個HTML元素組成，即文件以<html>開始，以</html>結尾，文件的其部分都是html的元素體。HTML元素的元素體由兩大部分，即頭元素<head>…</head>和體元素<body>…</body>以及一些注釋組成。頭元素和體元素的元素體又由其他的元素和文本及注釋組成。也就是說，一個HTML文件應具有下面的結構：
<html> html文件開始
<head> 文件頭開始
文件頭
</head> 文件頭結束
<body> 文件體開始
頁面內容
</body> 文件體結束
</html> html文件結束
2.2 格式化HTML頁面
在HTML文件中，有些元素只能出現在頭元素中，絕大多數元素只能出現在體元素中。在頭元素中的元素表示的是該HTML文件的一般信息，比如文件名稱，是否可檢索等等。這些元素書寫的次序是無關緊要的，它只表明該HTML有還是沒有該屬性。與此相反，出現在體元素中的元素是次序敏感的，改變元素在HTML文件中的次序會改變該HTML文件的輸出形式。
一般來講，HTML的元素有下列3種表示方法：
1.<元素名>文件或超文本</元素名>
2.<元素名 屬性名=“屬性值…”>文本或超文本</元素名>
3.<元素名>
第3種寫法僅用于一些特殊的元素，比如分段元素P，它僅僅通知www瀏覽器在此處分段，因而不需要界定作用范圍，所以它沒有結尾鏈接簽。htlm3.0標準中，也定義了</p>鏈接簽，它用于需要界定作用范圍的段落，比如增加對齊方式屬性的段落。
（1）title元素
title元素標明文檔的標題，是對文件內容的概括，title元素僅可在head元素內使用，其格式為：
< title >文件題目</ title >
下面的例子使用的title元素指定了文檔的標題。
<head>
<title>歡迎使用Internet Explorer! </title>
</head>
（2）body元素
body元素指定文檔主體的開始和結束，表2.1列出了body元素的常用屬性。
表2-1 body元素的常用屬性
例如：
<body
leftMargin=”0” topMargin=”0” marginwidth=”0” marginheight=”0”>正文內容</body>
① hn元素
標題元素有6種，分別為h1、h2、…、h6，用于表示文章中的各種題目。標題號越小，字體越大。一般情況下，瀏覽器對標題作如下解釋：
h1黑體，特大字體，居中，上下各有兩行空行。
h2黑體，大字體，上下各有一到兩行空行。
h3黑體，斜體，大字體，左端微縮進，上下空行。
h4黑體，普通字體，比h3更多縮進，上邊一空行。
h5黑體，斜體，與h4相同縮進，上邊一空行。
h6黑體，與正文有相同縮進，上邊一空行。
hn可以有對齊屬性，如下：
align=left標題居左
align=center標題居中
align=right標題居右
例：<h2 align=center>居中標題文字</h2>
下面給出hn的例子：
<h1>PHP書籍</h1>
<h2> PHP書籍</h2>
<h3> PHP書籍</h3>
<h4> PHP書籍</h4>
<h5> PHP書籍</h5>
<h6> PHP書籍</h6>
② p元素
HTML的瀏覽器是基于窗口的，用戶可以隨時改變顯示區的大小，所以HTML將多個空格以及回車等效為一個空格，這與絕大多數字處理器是不同的。HTML的分段完全依賴于分段元素<P>，比如下面兩段源文件有相同的輸出。
源碼一：
<h2>您認為哪場比賽最好看</h2>
英格蘭vs阿根廷<p>巴西vs葡萄牙<p>
源碼二：
<h2>您認為哪場比賽最好看</h2>
英格蘭vs阿根廷<p>
巴西vs葡萄牙<p>
<p>也可以有多種屬性，比較常用的屬性是：
align=left標題居左
align=center標題居中
align=right標題居右
例：<p align=center>您認為哪場比賽最好看</p>
當HTML文件中有圖形時，圖形可能占據了窗口的一端，圖形的周圍可能還有較大的空白區。這時，不帶clear屬性的<p>可能會使文章的內容顯示在該空白區內。為確保下一段內容顯示在圖形的下方，可使用clear屬性。clear屬性的含義為：
clear=left下一段顯示在左邊界處空白的區域
clear=right下一段顯示在右邊界處空白的區域
clear=all下一段的左右兩邊都不許有別的內容
③ 清單<List>
清單用于列舉事實，常用的清單有3種格式，即無序清單（unordered list），有序清單（ordered list）和定義清單（definition list）。
④ 無序清單<ul>
無序清單用（ul）開始，每一個清單條目用<li>引導，最后是</ul>。
注意：清單條目不需要結尾鏈接簽</Li>，輸出時每一個清單條目縮進，并且以黑點標示。
例：無序清單
<ul>
<li>英格蘭
<li>阿根廷
</ul>
輸出為
● 英格蘭
● 阿根廷
⑤ 有序清單<ol>
有序清單與無序清單相比，只是在輸出時清單條目用數字標示，下面是一個例子及其輸出結果：
<ol>
<li>阿根廷
<li>英格蘭
</ol>
輸出為：
● 阿根廷
● 英格蘭
⑥ 定義清單<dl>
定義清單用于對清單條目進行簡短說明的場合，用<dl>開始，清單條目用<dt>引導，它的說明用<dd>引導。
<dl>
<dt>阿根廷
<dd>梅西在巴塞羅那取得了輝煌的成績，而且在2005年的世青賽上一舉成名幫助阿根廷隊贏得了冠軍，而且成為了那屆賽事的最佳射手和最佳球員。
<dt>英格蘭
<dd>魯尼，這是英格蘭隊最大的寶貝。這是世界給予英格蘭人的足球禮物。
</dl>
輸出為：
阿根廷
梅西在巴塞羅那取得了輝煌的成績，而且在2005年的世青賽上一舉成名幫助阿根廷隊贏得了冠軍，而且成為了那屆賽事的最佳射手和最佳球員。
英格蘭
魯尼，這是英格蘭隊最大的寶貝。這是世界給予英格蘭人的足球禮物。
⑦ 塊引用<BLOCKQUOTE>
塊引用設置文本中的一段引語。瀏覽器內對塊引用的解釋一般為左右縮進，上下各有一空行，有些瀏覽器還采用斜體字。
例：
<P>他說，
<BLOCKQUOTE>“你好！”</BLOCKQUOTE>
⑧ 預排版文本<pre>
HTML的輸出是基于窗口的，因而HTML文件在輸出時都是要重新進行排版的，若確實不需要重新排版的內容，可以用<pre>…</pre>通知瀏覽器。瀏覽器在輸出時，對這部分內容幾乎不做修改地輸出。早期的HTML規范規定：在預排版區內不能出現格式化輸出的元素，如hn等，而Netscapr2.0在遇到預排版元素時，允許其中有其他元素。
<pre>
輕輕的你來了 帶來了你那迷人的笑容
輕輕的你來了 叩響了我寧靜的心扉
輕輕的你來了 幫我趕走我心中的孤寂
</pre>
⑨ 居中<center>
很多元素都有對齊方式屬性，如hn、p等。也可以直接使用居中鏈接簽<center>居中內容</center>。
<h3 align=center>
居中標題
</h3>
<center>
居中文字
</center>
輸出為：
居中標題
居中文字
⑩ 鏈接
所謂鏈接在本質上屬于一個網頁的一部分，它是一種允許同其他網頁或站點之間進行連接的元素。各個網頁鏈接在一起后，才能真正構成一個網站。它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。
要了解鏈接，首先必須先了解一下相對路徑和絕對路徑，相對路徑：相對當前目錄的路徑；絕對路徑：從根目錄下的全路徑（一般不推薦使用）。
例如：
<a href="d:/test.htm"> 這是一個絕對路徑
<a href="./test.htm"> 這是一個相對路徑
A網頁內部的鏈接
● 使用方法
先在欲鏈接處做記號：<a name="here1">這里是用戶想鏈接的點</a>，然后，設定鏈接：<a href="#here1">鏈接</a>
● 標志解說
當某頁的內容很多時，可以利用網頁的內部鏈接，以便使用者快速地找到資料。
● 使用范例
表2-2 內部標簽
網頁外部的鏈接使用范例：
網站鏈接：<a >網易</a>
電子郵件鏈接：<a href="mailto:163@163.com">我的電子郵箱</a>
ftp鏈接：<a href="ftp://ftp.163.com">下載檔案</a>
news鏈接：<a href="news: news.163.com"> news服務</a>
gopher鏈接：<a href="gopher://gopher.163.com/"> gopher服務</a>
bbs鏈接：<a href="telnet://bbs.163.com/"> bbs服務</a>
B鏈接標志的參數
● 使用方法
在鏈接后面加入target=_參數
● 標志解說
鏈接的參數并不多，常見的大概就是target這個參數了，target的意思是『目標』，也就是網頁鏈接的指向目標，這參數在框窗（frame）里尤為重要！
● 使用范例
target=框窗名稱：在框架（框窗or frame）中才用得到。正常而言，框窗有各自的名稱；因此，我們可以利用此標志，來指定鏈接的內容顯示到哪一個框窗中。
target=_blank：在新的瀏覽窗口中顯示鏈接的畫面內容。
target=_parent：把鏈接的畫面內容當成文件的上一個畫面。
target=_self：在目前的窗口中顯示鏈接的畫面內容。
target=_top：這個參數可以解決新鏈接的畫面內容被舊框窗包圍的困擾，使用這參數，會將整個畫面重新顯示成鏈接的畫面內容。
?圖像的使用，也就是images
● 基本語法
<img src=#> #表示圖像的URL，也就是圖像在網上的地址。
<img alt=#> #表示在瀏覽器尚未完全讀入圖像時，在圖像位置顯示的文字；也是圖像顯示以后，當鼠標放在圖片上時所顯示的文字。
例子：<img src="./mingxing.jpg" alt=”明星相片”>
● 圖像在頁面中的對齊/布局
語法：
<img align= left >
<img align= center >
<img align= right >
使用圖像的align屬性，left表示居左，center表示居中，right表示居右。
例子：
<img src="./mingxing.jpg " alt=”明星相片” align=left>
● 圖像和文字的對齊
語法：
<img align= top >
<img align= middle >
<img align= bottom >
分別表示文字在圖片的靠上邊、中間、底端。
● 圖像的邊框
<img border=value> value的值是數字，是指這個圖像的邊的寬度。
例：
<img src="./mingxing.jpg"alt=”明星相片” border=1>
?字體<font>
指定用于渲染所包含文本的新字體、大小和顏色，現行的新版本瀏覽器已經慢慢不使用<font>這樣的標識了，它基本上被CSS樣式表所取代，CSS樣式表請參考層疊樣式表的相關資料。
font標簽的常用屬性：
color：設置或獲取該對象要使用的顏色。
size：設置或獲取該對象的字體大小。
例：
<FONT SIZE="5" COLOR="#FFFF00"></FONT>
?分行<BR>和禁止分行<nobr>
<br>表示在此處分行；<nobr>....</nobr>通知瀏覽器，其中的內容在一行內顯示，若一行內顯示不了，則超出部分被裁剪掉。
clear屬性表明了下一行的超出部分將被裁剪掉，語法如下：
<br clear=left>
<br clear= right >
<br clear=all>
?轉義字將與特殊字符
在HTML中<, >, &有特殊含義，（前兩個字符用于鏈接簽，&用于轉義），在使用這三個字符時，應使用它們的轉義序列。
表2-3 數據類型檢查函數
例如，在HTML中寫& Lt; font &Lgt；顯示為<font>，若直接寫為<font>則被認為是一個鏈接簽。
注意：
a．轉義序列各字符間不能有空格；
b．轉義序列必須以“; ”結束；
c．單獨的&不被認為是轉義開始。
如“&空格Lt; ” 被解釋為“& Lt; ”而不是 <
如“&# 62空格；” 被解釋為“&# 62; ”而不是 >
HTML使用的字符集是ISO &859 Larin-1字符集，該字符集中有許多標準鍵盤上無法輸入的字符，對這些特殊字符只能使用轉義序列。
2.3 創建HTML表格
一個表格由<table>開始，以</table>結束，表的內容由<tr>, <th>和<td>定義。<tr>說明表的一個行，表有多少行就有多少個<tr>; <th>說明表的列數和相應欄目的名稱，有多少列就有多少個<th>; <td>用來填充由<tr>和<th>組成的表格。
下面是一個表格HTML源碼：
<table border=1 width=80%>
<thead>
<tr>
<th>標題 1</th>
<th>標題 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>第 1行，第 1列文本。</td>
<td>第 1行，第 2列文本。</td>
</tr>
<tr>
<td>第 2行，第 1列文本。</td>
<td>第 2行，第 2列文本。</td>
</tr>
</tbody>
</table>
表格結構中可以出現：caption, col, colgroup, tbody, tfoot和thead標簽，其中對于每個table對象，僅可指定一個thead和tfoot。
1. caption：指定表格的簡要描述。
例如：
<table>
<caption valign=bottom>
此標題將出現在表格下方。
</caption>
<tbody>
<tr>
<td>
這是表格中的文本。
</td>
</tr>
</tbody>
</table>
其中valign=bottom表示標題出現的位置，其值為top和bottom，設置標題是在表格的上面還是下面。
2. col：指定基于列的表格默認屬性。
例：
<html>
<body>
<table border="2" rules="groups">
<! -- 規則設定為 "groups"，這在本例中沒有效果。要使此屬性工作，必須使用colspan定義列組。
-->
<colspan="2" style="color: red">
<col style="color: blue">
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
</table>
</body>
</html>
col元素可嵌入于colgroup元素內。如果是這樣的話，嵌套的col屬性將覆蓋colgroup屬性。
3. colgroup：指定表格中一列或一組列的默認屬性。
下面的例子使用了colgroup元素指定表格中兩組列的特征
<html>
<body>
<table border="2" rules="groups">
<! -- 規則設定為 "groups"，這將在由colgroup定義的表格列周圍放置內部分隔線。-->
<colgroup span="2" style="color: red">
</colgroup>
<colgroup style="color: blue">
</colgroup>
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
</table>
</body>
</html>
若在colgroup中嵌套了col元素，col元素的標簽屬性將覆蓋colgroup元素的標簽屬性。下面的例子演示了這一點。
<html>
<body>
<table border="2">
<colgroup span="3" style="color: gren; background: black">
<! -- 樣式僅應用于前兩列，而不是所有的三列，而且字體是紅色而不是綠色。這是col元素的標簽屬性導致的。-->
<col style="color: red">
</colgroup>
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
<tr>
<td>此列位于第一組。</td>
<td>此列位于第一組。</td>
<td>此列位于第二組。</td>
</tr>
</table>
</body>
</html>
4. tbody元素：表示內容為表格主體。
tbody元素內包含的有效標簽有：td, th, tr。tbody元素會為全部表格自動定義，就算表格沒有顯式定義tbody元素。
下面的例子使用了tbody元素和table, td, thead和tr元素創建了一個第一行是表格標題，第二行是表格主體的表格。
<table>
<thead>
<tr>
<td>
這是thead中的文本。
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
這是tbody中的文本。
</td>
</tr>
</tbody>
</table>
5. tfoot：表示為表尾。
tfoot元素內包含的有效標簽有：td, th, tr。任何table對象都只能定義一個tfoot。
這個例子使用tfoot元素和table, tbody, td和tr元素創建了一個表格，第一行位于表格主體，第二行位于表格尾。
<table>
<tbody>
<tr>
<td>
此文本位于表格主體。
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
此文本位于表尾。
</td>
</tr>
</tfoot>
</table>
6. thead元素：指明行作為表頭。
thead元素內包含的有效標簽有：td, th, tr。任何table對象都只能定義一個thead。
下面的例子使用thead元素和table, tbody, td和tr元素創建了一個表格，第一行位于表頭，第二行位于表格主體。
<table>
<thead>
<tr>
<td>
此文本位于表頭。
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
此文本位于表格主體。
</td>
</tr>
</tbody>
</table>
7．有通欄的表
（1）有橫向通欄的表用<th colspan=#>屬性說明。colspan表示橫向欄距，#代表通欄占據的網格數，它是一個小于表的橫向網格數的整數。
（2）有縱向通欄的表用rowspan=#屬性說明。rowspan表示縱向欄距，#表示通欄占據的網格數，應小于縱向網絡數。需要說明的是有縱向通欄的表，每一行必須用</tr>明確給出一橫向欄目結束，這和表的基本形式不同。
8．表的大小，邊框寬度，表格間距
（1）表的大小用width=#和height=#屬性說明。前者為表寬，后者為表高，#是以像素為單位的整數。
（2）邊框寬度由border=#說明，#為寬度值，單位是像素。
（3）表格間距即劃分表格的線的粗細用cellspacing=#表示，#的單位是像素。
9．表中文本的輸出
（1）文本與表框的距離用cellpadding=#說明。下面的例子使表的內容與表框相距10個像素。
<html>
<body>
<table cellpadding=10 >
<tr><td bgcolor=\"green\">
abcd<br>abcd</td>
<td bgcolor=\"yellow\">
efgh</td>
</tr>
<tr><td bgcolor=\"red\">
ijkl</td>
<td bgcolor=\"blue\">
mnop</td></tr>
</table>
</body>
</html>
（2）表格的后度大于其中的文本后度時，文本在其中的輸出位置與用align=#說明。
#是left, center和right三者之一，分別表示左對齊，居中和右對齊，align屬性可修飾<tr>, <th>和<td>鏈接簽。
從下面例子能看出：
<table border width=160>
<tr>
<th>Food</th><th>Drink</th><th>Sweet</th>
<tr>
<td align=left>A</td>
<td align=center>B</td>
<td align=right>C</td>
</table>
運行結果如下：
（3）表格的高度大于其中文本的高度時，可以用valign=#說明文本在其中的位置。#是top, middle, bottom, baseline四者之一。分別表示上對齊，文本中線與表格中線對齊，下對齊，文本基線與表格中線對齊，特別注意的是baseine對齊方式，它使得文本出現在網格的上方而不是想象中的下半部。同樣，valign可以修飾<tr>, <th>, <td>中的任何一個。
10．浮動表格
所謂浮動表格是指表與文件中內容對齊時，若在現在位置上不能滿足其對齊方式，表格會上下移動，即“擠開”一些內容，直到滿足其對齊要求。
浮動屬性一般由align=left或right指定。
從下面的例子也可以看出，align=right時把表格2“擠到”了表的左邊。
<table border="1" width="30%" id="table1" align="right">
<tr>
<td>這是浮動表格測試</td>
</tr>
</table>
<table border="1" width="70%" id="table2">
<tr>
<td>2</td>
</tr>
</table>
11．表格顏色
表格的顏色用bgcolor=#指定。#是16進制的6位數，格式為rrggbb，分別表示紅、綠、蘭三色的分量。
<table border>
<tr><th bgcolor=000000>
<font color=ffffff>Food</font></th>
<th bgcolor=whit>Drink</th>
<tr><td bgclor=ffaaaa>A</td><td>B</td>
</table>
2.4 創建窗口框架
網頁窗口框架可以把瀏覽器窗口分成幾個獨立的部分，每部分顯示單獨的頁面，頁面的內容是互相聯系的。內容非常多的網頁不宜采用框架式結構，所以大網站中幾乎所有的網頁都不是框架式網頁?？蚣埽‵rames）由框架集（Frameset）和單個框架（Frame）兩部分組成?？蚣芗且粋€定義框架結構的網頁，它包括網頁內框架的數目、每個框架的大小、框架內網頁的來源和框架的其他屬性等。單個框架包含在框架集中，是框架集的一部分，每個框架中都放置一個內容網頁，組合起來就是瀏覽者看到的框架式網頁。
框架集的基本結構如下：
<html>
<head>
<title>標題</title>
</head>
<frameset cols="25%, 50%, *">
<frame src="contents.htm">
<frame src="info.htm">
<frame scrolling="no" src="graphic.htm">
</frameset>
<noframes>對于那些不支持FRAMESET元素的瀏覽器使用的HTML </noframes>
</html>
<nframes>標簽中的內容顯示在不支持FRAMESET元素的瀏覽器窗口中，這里可以指向一個普通版本的HTML文件，以便使用不支持FRAMESET元素的瀏覽器的用戶訪問。
框架由<frameset>指定，并且可以嵌簽，框架中各單框架顯示的內容用<framre>指定。需要說明的是，frame是一個新出現的元素，有些流覽器不支持它。
下面的例子使用了frame元素定義框架的屬性，包括由框架載入的頁面的位置。
<frame frameborder=0 scrolling=no src="sample.htm">
Internet Explorer 5.5支持frame的內容透明。如果想要為frame定義透明內容，則必須滿足下列條件。
● 與frame元素一起使用的allowtransparency標簽屬性必須設置為true。
● 在frame內容源文檔，background-color或body元素的bgcolor標簽屬性必須設置為transparent。
可以將窗口橫向分成幾個部分，也可以分成縱向幾個部分，還可以混和分框。
1．橫向分框
橫向分框用<frameset cols=#>指定，#可以是一個百分數，也可以是一整數。前者規定各框占窗口的百分數，后者指定各框的絕對大小。例如，下面的例子將窗口分成30%、20%、50%的幾個區域，各區域的內容分別為a.html, b.html, c.html.
<html>
<head>
<title>無標題文檔</title>
</head>
<frameset rows="30%,20%,50%" frameborder="no" border="0" framespacing="0">
<frame src="a.html">
<frame src=" b.html " name="mainFrame" id="mainFrame" title="mainFrame" />
<frame src=" c.html " name="bottomFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>
2．縱向分框
縱向分框用<frameset cols=#>指定，參見下例。
<frameset cols="80, *" frameborder="no" border="0" framespacing="0">
<frame src="a.html">
<frame src="b.html">
</frameset>
3．混合分框
將窗口分成橫縱幾個區域時，用<framset>代替<frame>鏈接至即可將原來分好的<frame>區域再次分框，下面的例子先將窗口分成20%,80%，然后將右邊的區域（即80%的那部分區域）再分成分別占40%和60%的上下兩個區域。
<frameset rows="*" cols="20%,80%" frameborder="no" border="0" framespacing=
"0">
<frame src="a.html" name="leftFrame" scrolling="No" noresize="noresize"
id="leftFrame" />
<frameset rows="40%,60%" frameborder="no" border="0" framespacing="0">
<frame src="b.html" name="topFrame" scrolling="No" noresize="noresize"
id="topFrame" />
<frame src="c.html" name="mainFrame" id="mainFrame" />
</frameset>
</frameset>
4．分框與框中文本的間距
分框與其中的文本間距可以用Marginwidth=#和marginheigh=#來指定，前者指定文本與分框邊緣的橫向距離，后者為縱向距離，其單位都為像素。在下面的例子中，將右邊分框的左右邊距，上下空白都設為50個像素。
<frameset cols="80, *" frameborder="no" border="0" framespacing="0">
<frame src="a.html" marginWidth = “50px" marginheigh = “50px" >
<frame src="b.html" marginWidth = “50px" marginheigh = “50px" >
</frameset>
5．分框間的關聯
分框之間可以有特定的關聯，比如將某一框的內容輸出到另一個框，這樣就可以把其中一個框作為輸出框，另一個框作為選擇框。實現這種關聯需要做下列的事情：
（1）在分框的frame文件中標記各個框，標記的方法是在<frame>中加入name屬性，比如在下例中，定義左邊的框為輸出，右邊框為索引。
<frame src="A.html" name=display>
<frame src="B.html" name=index>
（2）在A.html文件中指定輸出到哪個框，具體方法是在A.html文件中加入下列一行。
<base target="display">
這便得用鼠標單擊A.html中的鏈接指針，它的輸出會顯示在左邊的框中。
frameSet常用屬性說明：
< frameSet cols="120, *" frameborder=0 framespacing=5>
① cols：設置或獲取對象的框架寬度
cols的值可以用百分比表示：
<FRAMESET cols="40%, 60%">
cols的值可以用像素表示：
<FRAMESET cols="50, 2*, *, 80">
② rows：設置或獲取對象的框架高度。
rows的值可以用百分比表示：
<FRAMESET rows ="40%, 60%">
rows的值可以用像素表示：
<FRAMESET rows ="50, 2*, *, 80">
③ frameborder：設置或獲取是否顯示框架的邊框。
設定框架的邊框，其值可以為0、1、no、yes,0和no就是不要邊框，1和yes表示要顯示邊框。邊框是無法調整粗細的。
④ framespacing：表示框架與框架間的保留空白的距離。
<frame src="a.htm" name="1" frameborder=0 scrolling="no" noresize
marginheight=2 marginwidth=2>
⑤ src：設定此框架中要顯示的網頁地址。
⑥ name：設定這個框架的名稱，這樣才能指定框架來做連結，一定要設定，具體名稱可以隨便取。
⑦ frameborder：設定框架的邊框，其值只有0和1,0就是不要邊框，1就是要顯示邊框。邊框是無法調整粗細的。
⑧ scrolling：設定是否要顯示滾動條，Yes是要顯示滾動條，No是無論如何都不要顯示，Auto是視情況顯示。
⑨ noresize：設定不讓使用者可以改變這個框的大小，如果沒有設定這個參數，使用者可以很容易的拉動框架，改變其大小。
⑩ marginheight：表示框架高度部分邊緣所保留的空間。
?marginwidth：表示框架寬度部分邊緣所保留的空間。
6. Iframe元素
Iframe是創建內嵌浮動框架標簽，可以用它在HTML文檔中嵌入另一個HTML文檔。它不同于Frame標記的最大特征是在這個標記中所引用的HTML文件不是與另外的HTML文件相互獨立顯示，而是可以直接嵌入在一個HTML文件中，與這個HTML文件內容相互融合，成為一個整體。
下面的例子是用iframe元素創建的包含頁面sample.htm的框架。
<Iframe id=iframe1 frameborder=0 scrolling=no src="sample.htm"></iframe>
Iframe元素常用屬性有：
● name：內嵌幀名稱。
● width：內嵌幀寬度（可用像素值或百分比）。
● height：內嵌幀高度（可用像素值或百分比）。
● frameborder：內嵌幀邊框。
● marginwidth：幀內文本的左右頁邊距。
● marginheight：幀內文本的上下頁邊距。
● scrolling：是否出現滾動條（"auto" 為自動，"yes" 為顯示，"no" 為不顯示）。
● src：內嵌入文件的地址。
● style：內嵌文檔的樣式（如設置文檔背景等）。
● allowtransparency：是否允許透明。
下面是一個使用Iframe的例子：
<html>
<head>
<title>使用Iframe的例子 </title>
</head>
<body>
<Iframe name=123 align=middle marginwidth=0 marginheight=0 vspace=-170
hspace=0 src="http://www.163.com/" frameborder=no scrolling=no width=776
height=2500></Iframe>
</body>
</html>
- 大學計算機基礎（第二版）
- Practical UX Design
- Java：Data Science Made Easy
- Python數據可視化之Matplotlib與Pyecharts實戰
- Raspberry Pi Home Automation with Arduino（Second Edition）
- C語言程序設計
- 0 bug：C/C++商用工程之道
- UML2面向對象分析與設計（第2版）
- Java EE 7 with GlassFish 4 Application Server
- Learning Cocos2d-JS Game Development
- Mastering Object：Oriented Python（Second Edition）
- Clojure編程樂趣
- 一步一步學Spring Boot：微服務項目實戰(第2版)
- 讀故事學編程：Python王國歷險記
- Java EE 程序設計