網路安全攻擊與防護--HTML學習
第一節、 HTML基本語法（文末有對該文視訊講解）
HTML的官方介紹什麼的我就不說了，打字也挺累的，只簡單介紹一下吧，其他的懂不懂都沒關係。
HTML全稱為Hypertext Markup Language,中文解釋為超文字標記語言。
在HTML語言中，所有的標記都必須用尖括號(即大於號“<”和小於號“>”)括起來，一般情況下，每個標記單獨佔一行，
例1：(1.html)
1 <html> 2 <head> 3 <title>百度紅客吧</title> 4 </head> 5 <body> 6 這是一個簡單的<br> 7 用HTML語言寫的網頁。 8 <!--這裡用br標記將一行的話強制分成了兩行。--> 9 </body> 10 </html>
我們來看上面的程式碼，可以發現，所有的標記都是被包含在尖括號之間的，大部分的標記是成對出現的，
比如<html>和</html>，<head>和</head>，我想朋友們應該可以看出來，這些標記有的只是單純的英文字母，有的在這些相應的英文字母前加了一個斜槓“/”，我們稱這些沒有帶有斜槓的標記為開始標記，帶斜槓的標記為結束標記。
開始標記和結束標記的唯一差別就是帶不帶斜槓。
我們繼續看上面的程式碼，發現其中的<br>標記只有一個，那麼這個<br>標記，就是一個不是成對出現的標記，在後面的課程中，我們會介紹這個標記的用途的，如果你把上面的程式碼複製到了一個TXT文本里並把字尾名改為了.html，那麼我想，你可能會明白這個<br>標記是什麼意思了。
還有一點，就是幾乎所有的標記都有其對應的屬性，如果將每個標記都比喻成一個美女的話，那麼這些屬性就是美女身上的衣服，起的都是點綴作用，但在實際應用中必不可少，就像美女的衣服同樣必不可少一樣。
這些標記的屬性，都是放在對應標記的尖括號內的，比如:
<body bgcolor=”teal”>
這行程式碼為我們的網頁指定了一個背景顏色，至於這個顏色到底是什麼顏色，請看紅客吧的上傳頁面，那裡我寫的就是這個顏色。
記好，標記的屬性一定要放在尖括號中才有用，就像美女的衣服一定要穿到身上才有用一樣。
但是，作為紅客吧的吧主，肩負著振興紅客吧的使命，我會盡量把我的文章寫的更簡單一點，更容易理解一點，對於正在看這篇文章的朋友，嫖客謝謝你的支援。
第二節、HTML的基本結構
我們再來看一下在第一節裡寫的那幾行程式碼（1-1.html），不難發現，我在程式碼的開頭，用了一個<html>標記，在程式碼的結尾，用了一個</html>標記，我把這對標記成為超文字文件標記，寫這對標記的意思就是告訴瀏覽器，“你現在解析的是一個網頁”。
這個標記，不是必須的，也就是說，可以省略掉，你在寫網頁的時候可以不寫這對程式碼，一般情況下，瀏覽器照樣可以正常解析，但是，為了保持你的程式碼的完整性，也為了讓我們養成良好的程式設計習慣，最好是不要省略掉這對標記的。
其中，<html>標記是一個網頁程式碼的開始標記，即一般地，每個HTML網頁都是以<html>開始的，在網頁的最後，以</html>結束。
我們在學習HTML時，我提醒一下朋友們，當你寫完一個網頁的全部程式碼後，執行時卻發現程式碼出錯，但是又一直找不到錯誤，那麼，你可以檢視一下你是否把人家成對的標記給搞離婚了…
繼續看程式碼，第二行和第四行程式碼，分別是<head>標記的開始標記和結束標記，這對標記被我們成為首部標記，在我們的這些課程中，對首部標記的使用不是很充分，在我們學了VBScript或Javascript以後,或者做SEO優化時可能會用到的多一些。
下面看第三行程式碼，我把<title>標記的開始程式碼和結束程式碼放到了一行，主要是這行程式碼很短，可以放到一行裡來，而對瀏覽器的解析沒有影響。
這個<title>標記，被我們稱為標題標記，即每個網頁的標題，就是在IE的標題欄顯示的文字。
下面看第五行和第九行，分別是<body>標記的開始標記和結束標記，我們稱這對標記為正文標記，即在這對標記之間的內容，將顯示到網頁正文中。
繼續往下看，看到了第六行，這裡前面是在網頁中顯示的文字，後邊跟了一個<br>標記，而下一行，仍舊是文字，這裡<br>的意思就是強制斷行的意思，就是不論你是不是一句話，只要這個標記出現，必定斷行。
看第八行，是一個<!--…-->標記，在HTML中，這個標記代表的是註釋的意思，就是這個標記裡邊的東西是為了讓別人更容易理解你的程式碼而寫的，這些內容不會被瀏覽器顯示到頁面中。
OK，在電腦前坐了近2個小時，終於寫了2節，呵呵，不著急，慢慢來。把第一節的程式碼分析完了，下面我們來看一下上邊的程式碼的執行效果，為了方便起見，我把程式碼在我的虛擬機器裡執行的，看圖:
OK，本節課結束，從下節課開始，我開始給朋友們介紹常用的各種標記。
第三節、設定文字格式
從這節課開始，我會給朋友們介紹一些常用的標記，並對它們的用法做一些舉例，所以牽扯到了不少程式碼，請朋友們切莫浮躁，切莫心急，學程式設計，急不得。
OK，開始。
我們知道，在很多時候，我們從網頁上獲取資訊都是從文字裡獲得的，那麼我們現在就來學習一下如何來控制我們的網頁上的文字，讓它更好的為我們服務。
本節課比起前2節課可能會有些長，希望朋友們不要心急，慢慢來。
在HTML中，我們可以對網頁中的文字設定以下格式：
1. 分段與換行 2. 設定段落對齊方式 3. 設定字型 4. 設定字號 5. 設定文字顏色 6. 設定字元樣式
下面我一條一條的來說，不著急，呵呵，反正我今天把這一節課寫完就算完成任務了，呵呵，你看的時候看完這一節就先停下來吧，彆著急著看下一節課，先把這節課消化消化。
1. 分段和換行
分段標記為<p>和</p>，換行標記為<br>
看好了，分段標記是一對，換行標記是單身！
位於分段標記<p>和</p>之間的內容，被瀏覽器認為是一個段落，從而加以區別顯示，而<br>標記則強行規定了當前行的中斷，我們知道，在WORD裡打字的時候，如果這一行寫不下了，它會自動換行，其實在網頁裡也是這個道理，瀏覽器會自動換行，只是有些時候我們為了段落或主題的的清晰要求，需要把一段文字分成2行，而如果讓瀏覽器自己做這件事的話，它不明白你的意思，所以並沒有給你分行，這樣就不對了，是吧？顯然，沒有達到我們想要的效果，那麼我們就可以在你需要換行的地方放一個<br>標記，那麼<br>標記前的內容和<br>標記後的內容就會被瀏覽器解析為不同的2行。
哎呀，說理論總是很抽象的，下面我們來看程式碼，對著程式碼說容易理解一些。
例2：(2.html)
1 <html> 2 <head> 3 <title> ----使用分段標記和換行標記</title> 4 </head> 5 <body> 6 <p>百度紅客吧</p> 7 <p>歡迎你！</p> 8 我是不是嫖客，<br>紅客吧期待你的加入！ 9 </body> 10 </html>
OK，我們來看一下程式碼的執行效果：
朋友們可以把程式碼複製下來，自己執行一遍看看，不難發現分段標記和換行標記的區別：
分段標記分開的段落之間空隔很大，而用換行標記分開的兩句話之間的空隙不大。
另外，我要告訴朋友們的是，我們在寫程式碼時一行一行的寫只是為了以後修改方便，也為了使別人能看懂我們的程式碼，但是我們也可以不一行一行分開寫的，可以全部打亂，但只要各標記不變，那麼執行效果就不會變，比如，下面兩種程式碼的執行效果是一樣的：
可以看到，下面的這張圖裡的程式碼顯得很亂，但是，它是不影響執行效果的，但是我們在寫程式碼的時候儘量養成整齊的好習慣吧。
OK，第三節課結束，嫖客謝謝你的支援！
第四節、設定文字格式
2．設定段落對齊方式
上面我們已經學習了段落標記<p>和</p>，那麼這裡說的就是給這個美女披件衣服了，對，我們使用的就是<p>和</p>的眾多屬性中的一個屬性：ALIGN屬性。
我們知道，在WORD中，文字排版有左對齊、右對齊、居中、兩邊對齊4種對齊方式，那麼在網頁中也是這樣的，他們對應的英文依次為：
Left、Right、Center、Justify
這幾個英文即為<p>標記對的ALIGN屬性的取值。
另外，需要說明的一點是，這個ALIGN屬性是很多標記都有的一個屬性，比如水平線標記<hr>、影象標記<img>都有這個屬性，用處很大，對網頁的排版起到了很大的作用，它的用法大致是一樣的，但是需要強調的是，我們知道，在WORD裡，預設的對齊方式是兩邊對齊的，那麼在網頁裡，對於不同的標記，ALIGN屬性的預設值是不同的，比如：
對於分段標記對<p>和</p>來說，ALIGN屬性的預設值為Left，對於水平線標記<hr>來說，ALIGN屬性的預設值為Center，但是，這一點也不用太擔心，因為我們只要養成使用一個標記後立即給它加上相應的屬性的好習慣就可以了，也就是等於強制宣告吧，這樣，不論它原本的預設屬性是怎樣的，瀏覽器都會按照我們的設定來顯示。
好，下面我們來看一段程式碼：
例3:（3.html）
1 <html> 2 <head> 3 <title> ----設定段落對齊方式</title> 4 </head> 5 <body> 6 <!--下面開始設定段落的對齊方式--> 7 <p align="left">這一行為左對齊，align屬性的值為left。</p> 8 <p align="center">這一行為居中對齊，align屬性的值為center。</p> 9 <p align="right">這一行為右對齊，align屬性的值為right。</p> 10 <p align="justify">這一行為兩邊對齊，align屬性的值為justify。</p> 11 </body> 12 </html>
我們來看一下執行效果：
OK，設定段落對齊方式就先說到這裡，下節課再說一點就沒有了。
第五節、設定文字格式
這節課繼續說段落對齊方式，這節課的主要任務是讓朋友們認識兩個在設定段落對齊方式時很實用的標記----節標記對<div></div>和居中對齊標記對<center></center>。
這節課很簡單，我們來看一段程式碼就OK了。
例4：(4-1.html)
1 <html> 2 <head> 3 <title> ----認識div標記和center標記</title> 4 </head> 5 <body> 6 <center> 7 春夜喜雨 8 </center> 9 <!--下面開始設定小節的對齊方式--> 10 <div align="center"> 11 <p>好雨知時節，當春乃發生。</p> 12 <p>隨風潛入夜，潤物細無聲。</p> 13 </div> 14 <!--不知道你看出來了沒，其實center標記對和先用div標記再指定div的對齊方式，這兩種方法的執行效果是一樣的。--> 15 </body> 16 </html>
我們來看一下執行效果：
OK，本節課的任務完成了，再擴充套件一下吧，就是<div align="center">和直接用<center>的效果是一樣的，比如我們也可以把上面的程式碼改一下，全部用<center>標記，
實驗一下，改後的程式碼如下：(4-2.html)
1 <html> 2 <head> 3 <title> ----認識div標記和center標記</title> 4 </head> 5 <body> 6 <center> 7 春夜喜雨 8 <p>好雨知時節，當春乃發生。</p> 9 <p>隨風潛入夜，潤物細無聲。</p> 10 </center> 11 </body> 12 </html>
我們再來看一下執行效果：
看到了吧？
效果是一樣的。
另外，我再稍稍的提一下<div>標記，這個標記沒有<body>大，但比<p>大，也就是它必須被包含在<body>內，但它可以包含<p>，就是處在這麼一個不上不下的位置吧，反正我自己感覺是用著挺方便的。
也許不少朋友都說，現在都用DreamWeaver做網頁了，誰還這麼老土的用程式碼實現呢？
，這個問題問得好，但是，如果你要做IT、安全的話，我還是非常建議你學學的，畢竟你如果不學HTML的話，那以後想學指令碼如VBS、JS、ASP、PHP等語言基本不太可能。
但是，我也不建議你花太多的時間和精力在HTML上，因為它只是基礎，你只需要達到基本掌握的水平就可以了，時間上，1個月，足夠讓你把HTML學的差不多了。
另外，再說一句很多前輩都說過的話，學程式設計，就要堅持天天跟程式碼打交道，每天你都寫點東西出來，它是一個迴圈漸進的過程，沒有哪個人能一下子就成了高手。
OK，第五節課完美結束，嫖客謝謝你的支援！
第六節、設定文字格式
我們這節課的任務也不多，再來認識兩個標記----標題標記<hn>和水平線標記<hr>
首先說下標題標記，<hn>,這個尖括號裡的n的值可以是1-6之間的任何數字，包括1和6，分別定義了網頁上的特定格式和大小的文字,<h1>定義的文字最大，<h6>定義的文字最小,我們稱<h1>定義的文字為一級標題，以此類推。
另外的水平線標記就沒有什麼好說的了，就是在網頁中插入一條水平線。
OK，我們還是來看段程式碼吧，看完你就明白了。
例5：(5.html)
1 <html> 2 <head> 3 <title> ----認識hn標記</title> 4 </head> 5 <body> 6 <div align="center"> 7 <p><h1>這是一級標題</h1></p> 8 <p><h2>這是二級標題</h2></p> 9 <p><h3>這是三級標題</h3></p> 10 <p><h4>這是四級標題</h4></p> 11 <p><h5>這是五級標題</h5></p> 12 <p><h6>這是六級標題</h6></p> 13 <p>這是普通文字</p> 14 </div> 15 </body> 16 </html>
我們來看一下執行效果：
OK，標題標記就說到這裡，下面再說一下水平線標記<hr>。
先介紹一下<hr>標記的相關屬性：
1. align屬性 2. color屬性 3. noshade屬性 4. size屬性 5. width屬性
關於align屬性，我就不多說了，不懂的朋友請看第四節課。
下面是color屬性，這個應該也很好理解吧？顏色嘛，這個屬性指定我們的水平線的顏色。
再下面是size屬性，這個屬性是指定水平線的寬度，以畫素為單位。
最後是width屬性，這個屬性指定水平線的長度，單位可以是畫素或百分比。
這裡的百分比是說這條水平線佔總頁面的多少來算的，是一個相對值，不是絕對值。
OK，介紹完了，我們再來看一段程式碼吧：
例6：(6.html)
1 <html> 2 <head> 3 <title> ----認識hr標記</title> 4 </head> 5 <body>
以下是預設的水平線：
<!--在未指定水平線的長度的情況下，預設為100%。-->
<hr>
1 以下是寬度為6，長度為300的水平線： 2 <hr size="6" width="300"> 3 以下是寬度為1，長度為80%的實線水平線： 4 <hr size="1" width="80%" noshade> 5 以下是長度為90%的淺藍色水平線： 6 <hr width="90%" color="teal"> 7 以下是長度為90%的對齊方式為左對齊的淺藍色水平線： 8 <hr align="left" width="90%" color="teal"> 9 <!--可以看出，在我們沒有指定水平線的對齊方式時，預設為居中對齊。--> 10 </body> 11 </html>
下面我們來看一下程式碼執行效果：
OK，本節課任務基本完成，下面呢，我再來說一點吧，老擔心我講的不夠詳細，擔心新人看不懂， ，就是我們在使用標記的各種屬性時，無須計較這些屬性的先後順序，只要出現就可以了。
比如下面這兩句程式碼的效果是一樣的：
<hr align="left" width="90%" color="teal">
和
<hr color="teal" width="90%" align="left">
。
OK，第六節課完美結束， ，嫖客謝謝你的支援！不懂的隨時到吧裡問！隨時待命向你解釋！
第七節、設定字型、字號和顏色
今天的任務不多，只說一個標記，即字型標記----<font></font>
上節課我們說了標題標記<hn>，不過相對來說，還是<font>標記對用的多一些，<font>標記有幾個屬性：
1. face屬性 2. size屬性 3. color屬性
其中face屬性用來指定<font></font>標記對內的文字的字型，size屬性用來指定<font></font>標記對內的文字的大小，color屬性用來指定文字顏色。
需要注意的是，我們在使用face屬性時，可以為這個屬性賦一個或多個值，即可以為網頁指定多種字型，這時，瀏覽器會按你賦值的順序來讀取，並儘量用你為<font>標記指定的字型來顯示，如果賦的第一個值，即第一種字型本地沒有安裝，那麼瀏覽器再看指定的第二種字型是否安裝，如果有，則以這種字型顯示，如果沒有，就看第三個，以此類推，如果這裡指定的字型全部沒有，則按照瀏覽器的預設字型來顯示。
在使用<font>標記的size屬性時，其值的大小為1-7，包括1和7，預設值為3，值越大，顯示的文字就越大，注意啊，這裡跟<hn>標記的大小排序不同，對<hn>標記來說，值為1時最大，而對於<font>標記的size屬性來說，值越大字型越大。
另外，對於<font>標記的size屬性，不僅可以使用絕對值，即直接給它指定一個具體的數字，還可以使用相對值，使用相對值不使用純數字，在數字前面加的還有加號“+”和減號“-”，表示這一行的size值為上一行size值的增加或者減少。比如：
<font size="4">百度紅客吧</font> <font size="+2">歡迎你！</font>
這裡的第一句程式碼使用的絕對值，第二句程式碼就是用的相對值。
這上面的東西雖然說的不少，但是都是很簡單的，現在看不懂也沒關係，待會看看程式碼你就明白了。
還有一個color屬性沒說，這個屬性指定了<font></font>標記對內的文字的顏色，顏色值可以用顏色名稱表示，也可以用十六進位制RGB格式表示。
OK，下面，也是每節課的最後一個環節，看程式碼。
例7：(7.html)
<html> <head> <title> ----認識font標記</title> </head> <body> <p><font>預設文字：百度紅客吧</font></p> <p><font face="黑體">face屬性為“黑體”的文字：百度紅客吧 <p><font size="6">size屬性為6的文字：百度紅客吧</font></p> <p><font color="teal">color為淺藍色的文字：百度紅客吧</font></p> <p><font face="黑體,楷體_gb2312,仿宋_gb2312" size="4" color="teal">face屬性為黑體,楷體_gb2312,仿宋_gb2312 ，size屬性為4，color屬性為淺藍色的文字：百度紅客吧 </body> </html>
我們來看一下程式碼的執行效果：
可以明顯的看出來差別的。
OK，本節課結束，不懂的先自己思考思考，實在不懂就到吧裡問吧。
這樣有助於你的學習。
好了，嫖客謝謝你的關注，謝謝！
第八節、設定字元樣式與插入特殊字元
這節課更簡單，只介紹幾個超簡單的標記和一點網頁製作中的技巧。
今天要介紹的標記全部為設定字元格式的標記，看錶：（杯具的發現，不支援表格，沒辦法，湊合著看吧）
標記 描述 標記 描述
<b>…</b> 粗體 <strike>…</strike> 刪除線 <big>…</big> 大字型 <sup>…</sup> 上標 <i>…</i> 斜體 <sub>…</sub> 下標 <s>…</s> 刪除線 <tt>…</tt> 固定寬度字型 <small>…</small> 小字型 <u>…</u> 下劃線
別看這張表裡的標記挺多的，但是，都挺容易的，如果你玩過WORD的話，這些標記都是很好理解的。
不多說了，看程式碼:
例8：(8.html)
1 <html> 2 <head> 3 <title> ----設定字元格式</title> 4 </head> 5 <body> 6 <p><font>預設文字：百度紅客吧</font></p> 7 <p><b>粗體字：百度紅客吧</b></p> 8 <p><big>大字型：百度紅客吧</big></p> 9 <p><i>斜體字：百度紅客吧</i></p> 10 <p><s>刪除線：百度紅客吧</s></p> 11 <p><small>小字型：百度紅客吧</small></p> 12 <p><strike>刪除線：百度紅客吧</strike></p> 13 <p>上標示例：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p> 14 <p>下標示例：H<sub>2</sub>so<sub>4</sub></p> 15 <p><tt>固定寬度字型：百度紅客吧</tt></p> 16 <p><u>下劃線：百度紅客吧</u></p> 17 </body> 18 </html>
我們來看一下程式碼的執行效果：
怎麼樣？
不難吧？ ，OK，設定字元格式就說到這裡，下面說一點網頁製作中的技巧。
設計網頁的時候（不論是用DW做還是手工寫），都難免會需要插入一些空格，這在WORD裡很簡單，沒什麼難的，但在HTML裡不一樣，即使我們在程式碼裡按了很多個空格，但瀏覽器解析的時候仍然顯示的只有一個空格，這是因為瀏覽器自動把那些多餘的空格過濾掉了，這時我們就用到了一些特殊的方法：
使用字元實體名稱或數字表示方式。
比如我們想在網頁中插入1個空格，我們可以輸入 來實現，插入2個空格就可以輸入 來實現，這個 就是空格的實體名稱。
還有一個是數字表示方式，即空格我們也可以表示為 ，這個表示方式也可以達到連續空格的效果。
關於很多字元的實體名稱和它們的數字表示方式，我這裡提供一個常用符號的對應列表：
字元 說明 實體名 數字表示
無斷行空格  
? 註冊符號 ® ®
? 版權符號 © ©
& And符號 & &
￥ 元符號 ¥ ¥
其他的資料我這暫時還沒有，如果朋友們需要的話可以去網上搜索一下，應該有的。
OK，今天的課程完美結束，嫖客再次感謝你的關注。
第九節、使用列表格式
今天我們一起來建立幾個列表，就是類似於WORD之類的這樣的列表在網頁上的實現：
上面的這個就是我們說的列表，我們可以看到，在每個列表項的前邊都有一個數字，代表這些列表項的順序，像這樣的有數字或字母為列表項排序的列表我們稱之為有序列表，反之，像下圖這種沒有明顯的順序標記的我們稱之為無序列表：
那麼，我們在這節課裡就說一下這兩種列表在網頁中的實現方法。
首先，介紹一下建立有序列表和無序列表的標記:------<ol>…</ol>和<ul>…</ul>
先說建立有序列表，說完有序列表無序列表說不說都可以了。
我們使用有序列表標記<ol>…</ol>和列表項標記<li>來建立有序列表，
比如：
<ol>
<li>列表項1
<li>列表項2
<li>列表項3
<li>列表項4
<li>列表項5
<li>列表項n
</ol>
這樣就建立了一個在列表項前顯示預設的排序符號的列表，而HTML中預設是以數字排列的。
稍後我們依然用例項來說明情況。
<ol>標記有兩個常用屬性：start和type
Start屬性用於定義數字序列的起始值，type用於定義設定序列符號樣式，其取值範圍如下：
● 1：表示以阿拉伯數字1、2、3…為列表符號
● A:表示以大寫字母A、B、C…為列表符號
● a:表示以小寫字母a、b、c…為列表符號
● I：表示以大寫羅馬字母I、II、III、IV…作為列表符號
● I：表示以小寫字母i、ii、iii、iv…作為列表符號
在<ol>標記對內的<li>標記具有兩個常用屬性：type和value
這裡的Type屬性和上面的type屬性是一個概念，只不過針對的標記不同罷了。
而這裡的value屬性，指定一個新的數字序列起始值，這樣我們可以把整個列表分開，從而獲得一個不連續的列表。
下面開始看程式碼：
例9：(9-1.html)
1 <html> 2 <head> 3 <title> ----建立列表</title> 4 </head> 5 <body> 6 <ol> 7 <li>列表項一：百度紅客吧 8 <li>列表項二：百度紅客吧 9 <li>列表項三：百度紅客吧 10 </ol> 11 </body> 12 </html>
我們來看看程式碼的執行效果：
上邊這個效果就是使用的預設的順序符號建立的列表。
我們把上面那段程式碼修改一下，換一種符號看看：
例10：(9-2.html)
1 <html> 2 <head> 3 <title> ----建立列表</title> 4 </head> 5 <body> 6 <ol type="A"> 7 <li>列表項一：百度紅客吧 8 <li>列表項二：百度紅客吧 9 <li>列表項三：百度紅客吧 10 </ol> 11 </body> 12 </html>
這裡我用<ol>標記的type屬性指定了順序符號為大寫英文字母，我們來看看效果：
下面我們再來改一下，我們試試<ol>屬性的start屬性：
例11：（9-3.html）
1 <html> 2 <head> 3 <title> ----建立列表</title> 4 </head> 5 <body> 6 <ol start="6"> 7 <li>列表項一：百度紅客吧 8 <li>列表項二：百度紅客吧 9 <li>列表項三：百度紅客吧 10 </ol> 11 </body> 12 </html>
這裡可以看到，我在指定<ol>的屬性的時候，沒有為它指定type屬性，因為它預設的type屬性是數字，所以我這裡不指定也是可以的。
注意，只有在列表符號是數字的情況下start屬性才有效。
比如：這行程式碼中的start屬性是無效的：
<ol type="a" start="6">
OK,說完這個，我們來看程式碼的執行效果：
下面我們再來說一下<li>標記的兩個屬性，直接看程式碼吧：
例12：（9-4.html）
1 <html> 2 <head> 3 <title> ----建立列表</title> 4 </head> 5 <body> 6 <ol> 7 <li>列表項一：百度紅客吧 8 <li>列表項二：百度紅客吧 9 <li>列表項三：百度紅客吧 10 <li value="5">列表項五：百度紅客吧 11 <li>列表項六：百度紅客吧 12 <li>列表項七：百度紅客吧 13 <li value="11">列表項十一：百度紅客吧 14 <li>列表項十二：百度紅客吧 15 <li>列表項十三：百度紅客吧 16 </ol> 17 </body> 18 </html>
我在列表的第四行使從第四行的順序符號從“5”開始，這樣下面的列表和上面的列表就斷開了，從而獲得了不連續的列表。
看看執行效果：
好了，建立有序列表我們就說到這裡吧，這幾天一直在打字，電腦桌子不舒服，太高，打得胳膊痛…
下面再說一下建立無序列表，這個跟建立有序列表的區別不大，只是無序列表標記為<ul>…</ul>
<ul>標記也有type屬性，它的type屬性用於指定列表符號，不過這裡的符號跟有序列表的符號不同，type屬性可以取下列值：
disc :使用實心圓作為列表符號
circle ：使用空心圓作為列表符號
square ：使用方塊作為列表符號
需要注意的是，在IE中，type屬性的值是區分大小寫的。
下面還是看程式碼：
例13：（9-5.html）
<html>
<head>
<title> ----建立列表</title>
</head>
<body>
下面是無屬性無序列表：
<ul>
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
</ul>
下面是type值為circle的無序列表：
<ul type="circle">
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
</ul>
下面是type值為square的無序列表：
<ul type="square">
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
<li>列表項：百度紅客吧
</ul>
</body>
</html>
看看執行效果：
OK，胳膊疼，這節課總算結束了…
嫖客謝謝朋友們的支援！
第十節、使用影象
在HEML中，我們用IMG標記在網頁內插入影象，並通過該標記的屬性對圖片內容進行控制，最常用的兩個屬性為src屬性和alt屬性，分別用於設定影象的位置和替換文字，這個影象的位置實際上就是影象的地址，比如：www.haomoons.com/haomoons.jpg，這就是一個圖片的地址，這個地址可以是絕對地址，也可以是相對地址。
而alt屬性，作用很大，多使用它可以增加搜尋引擎的收錄，因為搜尋引擎是不能抓取影象的內容的，而這個alt屬性指定的替換文字就是對該圖片的說明，而搜尋引擎是認識這個替換文字的。
其實，這個alt屬性最初設計出來，是針對那些不能顯示圖片的情況而設計的，就是一旦遇到種種原因影象顯示不出來，那麼這個替換文字可以起到一定的提示作用。
這個img標記還有兩個屬性，分別為width和height屬性，這兩個屬性用於控制網頁中圖片顯示的寬度和高度，單位為畫素或百分值。
還有一些其他的不太常用的屬性，我們也來學習一下吧：
1. hspace和vspace屬性
這兩個屬性用於圖文混排的情況下使用，hspace用於指定影象的左右邊距，vspace用於指定影象的上下邊距，這個邊距即是文字和影象之間相隔的距離，單位為畫素。
2. border屬性
這個屬性用於設定影象的邊框，其取值只能為正整數，單位為畫素。
3. align屬性
這個屬性用於在圖文混排的情況下設定影象與文字的對齊方式，分兩種情況：
● 在垂直方向
這時，align的取值可以為
▲ top:影象與文字頂部對齊
▲ middle:影象與文字中央對齊
▲ bottom:影象與文字底部對齊
● 在水平方向
▲ left：影象居左，文字居右
▲ right:影象居右，文字居左
另外，使用換行標記br的clear屬性，可以將換行後的文字移到影象的下邊。
下面我們來寫一個例項，看程式碼：
例14：（10.html）
<html>
<head>
<title> ----使用影象</title>
</head>
<body>
<center>
<p>
<img src="ad-1.jpg" alt="百度紅客吧宣傳圖" align="left" border="1" height="200" width="200">
<font face="宋體" color="teal">這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們
一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧
紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！<br>這裡是百度貼吧紅客吧，我們一直在努力做的更好，我們歡迎你的到來！
</font>
</p>
<p>
<img src="ad-2.gif" alt="2010年，依然不是嫖客..." align="right" border="1">
<font face="楷體_gb2312" color="red">
我是不是嫖客，這裡由我來給大家講解一下HTML語言，嫖客多謝朋友們的支援！<br>我是不是嫖客，這裡由我來給大家講解一下HTML語言，嫖客多謝朋友們的支援！<br>我是不是嫖客，這裡由我來給大家講解一下HTML語言，嫖客多謝朋友們的支援！<br>我是不是嫖客，這裡由我來給大家解一下HTML語言，嫖客多謝朋友們的支援！<br>我是不是嫖客，這裡由我來給大家講解一下HTML語言，嫖客多謝朋友們的支援！
</font>
</p>
</center>
</body>
</html>
我們來看一下執行效果：
由於影象太大，所以有些模糊，不過還是能看出效果的。
OK,第十節課完美結束，朋友們看完課程以後多實踐，自己琢磨著多寫點程式碼出來，寫寫你就會了，不然記得不牢靠的。
朋友們，再見。
第十一節、使用多媒體檔案
這幾天有些不舒服，所以廢話就不多說了，上節課我們使用img標記在網頁中插入了圖片，其實用這個標記還可以在網頁中插入多媒體檔案（就是視訊）。
在用img屬性播放視訊檔案時，需要用到以下屬性：
1. controls:使用這個選項後，如果有多媒體檔案，則在網頁中顯示一套視訊控制元件，即視訊控制按鈕。
2. dynsrc：用它來指定視訊檔案的地址。
3. start：指定何時開始播放檔案，它的取值可以是fileopen（頁面開啟即播放），還可以是mouseover（滑鼠置於上方播放）
4. loop：指定視訊檔案的播放次數，若想讓其迴圈播放，則應將該屬性值指定為infinite。
5. loopdelay：指定兩次播放之間的間隔時間，以毫秒為單位
另外需要說明的一點是，在這裡也可以使用src屬性，就是說dynsrc和src可以同時使用，這樣做的意思是若計算機沒有多媒體功能，則顯示該影象，若有多媒體功能，不顯示影象。
從上邊可以看出，雖然src和dynsrc可以同時使用，但它們之間存在一個優先順序的問題，明顯的，dynsrc的優先順序高於src。
下面我們還是來看程式碼吧：
例15：（11.html）
<html>
<head>
<title> ----使用多媒體檔案</title>
</head>
<body>
<font face="楷體_gb2312" color="teal">
<center>
使用多媒體檔案示例
</center>
</font>
<hr size="2" width="80%" color="teal" noshade>
<!--插入了一條寬度為2，長度為整個頁面80%的，顏色為淺藍色的無陰影的水平線-->
<p align="center">
<img dynsrc="clock.avi" controls loop="infinite" loopdelay="1000" start="mouseover">
<!--這裡我想讓視訊在頁面中間播放，但img標記本身沒有這個屬性，所以用段落標記將其位置居中。-->
</p>
</body>
</html>
我這裡指定的是當滑鼠放上去的時候播放，我們來看一下執行效果：
播放前：
我把滑鼠放上去：
OK，滑鼠放上去即開始播放。
今天就說到這了，朋友們明天見
第十二節、使用字幕和背景音樂
今天我們來說一下在HTML中插入滾動字幕和在網頁中使用背景音樂。
我們使用marquee標記來顯示滾動文字，該標記具有下列屬性：
1. align屬性：指定字幕與周圍文字的對齊方式，其取值可以是top（上對齊）、middle（中間對齊）、buttom（底部對齊）
2. behavior屬性：指定文字動畫的型別，其取值可以是scroll、side、alternate
3. bgcolor屬性：指定文字動畫的背景顏色
4. direction屬性：指定文字動畫的移動方向，其取值可以是down、up、left、right，預設值為left，即由右向左移動。
5. height屬性：指定文字動畫的高度，單位為畫素或百分比
6. hspace屬性：指定字幕外部邊緣與瀏覽器視窗之間的左右距離，以畫素為單位，其值為整數。
7. vspace屬性：指定字幕外邊緣與瀏覽器上下邊緣的距離，單位為畫素
8. loop屬性：指定字幕滾動的次數，這個屬性的取值與上節課我們講視訊時那個loop屬性相同。
9. scrollamount屬性：指定字幕每次移動的距離，以畫素為單位，其值為整數
10. scrolldealy屬性：指定前後兩次播放的間隔時間，值為整數，單位為畫素
OK,這些就是字幕標記marquee的全部屬性了，下面我們先彆著急著看程式碼，我們再來說一下如何在網頁中使用背景音樂，就是在網頁開啟的時候即播放音樂。
用的標記為bgsound標記，需要注意的是，該標記只能放在我們的程式碼的head部分，bgsound屬性具有下列屬性：
1. balance屬性：指定如何將聲音分成左聲道和右聲道，取值為-10000~+10000，預設值為0
2. loop屬性：指定聲音播放的次數，若值為0，則播放一次，若為-1，則迴圈播放，知道頁面被解除安裝。
3. src屬性：指定聲音檔案的位置
4. volume屬性：指定聲音高低，其取值為-10000~0，預設值為0
好了，我們把marquee標記的標記和bgsound標記的標記全部說完了，下面我們來寫一段程式碼，既播放字幕又配合著背景音樂。
例16：（12.html）
<html>
<head>
<title> ----使用字幕和背景音樂</title>
<bgsound src="honker.mid" loop="-1">
</head>
<body>
<div align="center">
<P>
<marquee loop="infinite" behavior="scroll" bgcolor="black" direction="left"
scrollamount="2">
<font face="黑體" color="red">
<big>
這裡是百度紅客吧，歡迎你的到來！
</big>
</font>
</marquee>
</p>
<p>
<marquee loop="infinite" behavior="slide" bgcolor="black" direction="right"
scrollamount="2">
<font face="黑體" color="red">
<big>
我們在努力做的更好！
</big>
</font>
</marquee>
</p>
</div>
</body>
</html>
我們來看一下執行效果：
而在網頁載入完的時候，我們指定的背景音樂已經開始播放了。
好了，前面基礎的終於說的差不多了，今天就說到這裡吧，明天開始說表格的應用，朋友們，明天見。
第十三節、建立基本表格
從今天開始，我們將一起接觸到在HTML中很重要的一部分—表格的應用，因為幾乎每個網頁的佈局都離不開表格的支援，所以，關於表格的內容異常重要，朋友們一定要多加練習才是。
一個表格由表頭、行、單元格組成，這些元素分別用不同的標記來定義，表格通過table定義，表頭（即表格的標題）由caption來定義，行由tr來定義，單元格由td定義。
今天我們就來建立一個基本的表格，看程式碼：
例17：（13-1.html）
<html>
<head>
<title> ----建立一個基本表格</title>
</head>
<body>
<center>
<table>
<caption>表頭：百度紅客吧</caption>
<tr>
<td>第一列標題</td>
<td>第二列標題</td>
<td>第三列標題</td>
</tr>
<tr>
<td>百度紅客吧</td>
<td>百度紅客吧</td>
<td>百度紅客吧</td>
</tr>
<tr>
<td>不是嫖客</td>
<td>不是嫖客</td>
<td>不是嫖客</td>
</tr>
<!--依次迴圈，一直到表格結束...-->
</table>
</center>
</body>
</html>
我們來看一下執行效果：
可以看到，頁面中並沒有一般表格都有的邊框，但可以看出來，頁面顯示的內容是按照表格的佈局來顯示的，下面我來給table標記加上一個屬性，即border屬性，這個屬性指定表格的邊框粗細。
即將上面的第7行程式碼修改為：
<table border="1">
修改後我們再來看一下執行效果：
例18：（13-2.html）
OK,這裡已經可以非常明顯的看出，這是一個表格了，大家看程式碼的時候對著我講的那些標記一個一個對照，慢慢的你就會了，不要著急。
好了，今天這節課就結束了，我是不是嫖客，朋友們明天再見。
第十四節、設定表格的屬性
昨天我們初步接觸了表格，今天我們就來學習一下表格標記table的各個屬性，從而使我們獲得對錶格的更多控制，下面是table標記的屬性：
1. align屬性：指定表格的對齊方式，取值可以為left（左對齊）、center（中間對齊）、right（右對齊）
2. background屬性：指定用作表格背景的影象位置。
3. bgcolor屬性：指定表格的背景顏色
4. border屬性：這個屬性我們在昨天已經接觸過了，我們用它來指定表格的邊框粗細
5. width屬性：指定表格的寬度，單位為畫素或百分比
6. bordercolor屬性：指定表格邊框的顏色，如果沒有指定邊框的粗細，則不應該使用該屬性
7. bordercolordark屬性：指定3D邊框的陰影大小，如果沒有指定邊框的粗細，則不應該使用該屬性
8. bordercolorlight屬性：指定3D邊框的高亮顯示顏色，如果沒有指定邊框的粗細，則不應該使用該屬性
9. cellpadding屬性：指定單元格內資料與單元格邊框之間的距離，單位為畫素
10. cellspacing屬性：指定單元格之間的間距，單位為畫素
總共10個屬性，其實很多都是不常用的，從第6個往後的屬性都不怎麼常用（至少對我來說， ）
下面我們來寫一段程式碼：
例19：（14.html）
<html>
<head>
<title> ----設定表格的屬性</title>
</head>
<body>
<table align="center" width="80%" border="1" bgcolor="white"
bodercolordark="gray" bordercolorlight="green">
<!--我這裡將表格的對齊方式設為中間對齊，表格寬度為頁面寬度的80%，這個778是
製作網頁時的一般規範寬度，將表格的邊框粗細設為1畫素，並使用了3D邊框，邊框陰影顏色為灰色，高亮顏色為綠色，我這裡沒有用背景顏色，而是用了一個背景影象-->
<tr>
<th>第一列標題</th>
<th>第二列標題</th>
<th>第三列標題</th>
<!--這裡的th標記跟td標記差不多，th標記為標題專用的標記，就是一般的單元格用td，標題單元格用th。-->
</tr>
<tr>
<td>百度紅客吧</td>
<td>不是嫖客</td>
<td>歡迎你的到來！</td>
</tr>
<tr>
<td>紅客吧原創教程</td>
<td>你的關注</td>
<td>是我最大的動力</td>
</tr>
<tr>
<td>2010年，我相信</td>
<td>你我的紅客吧</td>
<td>一定會發展</td>
</tr>
</table>
</body>
</html>
下面我們來看一下執行效果：
OK，朋友們一定要對照著課程把程式碼仔細的看看，然後一個字母一個字母的自己敲出來，不擔心學不會。
今天這節課結束，咱們明天見。
第十五節、設定表格中行的屬性
上一節我們說的是設定表格的屬性，那麼今天我們就來學習一下設定表格中行的屬性，我們知道行的標記為tr，那麼下面就是這個標記的屬性：
1. align屬性：指定行中單元格的水平對齊方式，取值與我們前面講的相同。
2. valign屬性：指定行中單元格的垂直對齊方式，取值為top（頂端對齊）、middle（中間對齊）、bottom（底部對齊）、baseline（基線對齊）
3. background屬性：指定行的背景影象
4. bgcolor屬性:指定行的背景顏色
5. bordercolordark屬性：指定行的3D邊框陰影顏色
6. bordercolorlight屬性：指定行的3D邊框的高亮顏色
下面我們來建立一個表格，使不同行具有不同的背景顏色：
例20：（15.html）
<html>
<head>
<title> ----設定表格中行的屬性</title>
</head>
<body>
<table align="center" border="1" width="80%">
<caption>設定行的屬性示例</caption>
<!--下面的三行不僅背景顏色不同，而且對齊方式也不同-->
<tr align="left" bgcolor="red">
<th>第一列標題</th>
<th>第二列標題</th>
<th>第三列標題</th>
</tr>
<tr align="center" bgcolor="yellow">
<td>百度紅客吧</td>
<td>百度紅客吧</td>
<td>百度紅客吧</td>
</tr>
<tr align="right" bgcolor="teal">
<td>不是嫖客</td>
<td>不是嫖客</td>
<td>不是嫖客</td>
</tr>
</table>
</body>
</html>
我們來看一下程式碼的執行效果：
OK，達到了我們想要的效果，本節課結束。
嫖客謝謝你的支援！
第十六節、設定單元格的屬性
上節課我們說的是設定行的屬性，那麼這節課我們就來說一下在表格中最小的組成單位—-單元格的屬性設定。
單元格td的屬性有以下幾種：
1. align屬性：指定單元格內文字的對齊方式
2. background屬性：指定單元格的背景影象
3. bordercolor屬性：指定單元格的邊框顏色，這個屬性必須在table標記的border已設定並且其值非零時可用，這個想想就明白了，如果人家設定的表格都沒有邊框那這個屬性當然沒用了。
4. bordercolordark屬性：指定單元格的3D邊框陰影顏色
5. bordercolorlight屬性：指定單元格的3D邊框的高亮顏色
6. colspan屬性：指定合併單元格時一個單元格跨越的表格的列數
7. rowspan屬性：指定合併單元格時一個單元格跨越的行數
8. nowrap屬性：若指定該屬性，則避免瀏覽器將單元格中的文字換行
9. valign屬性：指定單元格中文字的垂直方向對齊方式，其取值可以為top、middle、buttom、baseline，預設值為middle
下面我們來為16個單元格設定16種不同的背景顏色：
例21：（16.html）
<html>
<head>
<title> ----設定單元格的屬性</title>
</head>
<body>
<table align="center" border="1" width="80%">
<caption>設定單元格的屬性示例</caption>
<tr>
<th bgcolor="aqua">第一列標題</th>
<th bgcolor="black"><font
color="white">第二列標題</font></th><!--這一句背景是黑色，所以用font標記將單元格內的文字顏色
設定為白色，下面仍有這種情況-->
<th bgcolor="blue"><font color="white">第三列標題</font></th>
<th bgcolor="fuchsia">第四列標題</th>
</tr>
<tr>
<td bgcolor="gray">百度紅客吧</td>
<td bgcolor="green">百度紅客吧</td>
<td bgcolor="lime">百度紅客吧</td>
<td bgcolor="maroon"><font color="white">百度紅客吧</font></td>
</tr>
<tr>
<td bgcolor="navy"><font color="white">不是嫖客</font></td>
<td bgcolor="olive">不是嫖客</td>
<td bgcolor="purplr"><font color="white">不是嫖客</font></td>
<td bgcolor="red">不是嫖客</td>
</tr>
<tr>
<td bgcolor="silver">期待關注</td>
<td bgcolor="teal">期待關注</td>
<td bgcolor="white">期待關注</td>
<td bgcolor="yellow">期待關注</td>
</tr>
</table>
</body>
</html>
我們來看一下程式碼的執行效果：
OK，本節課就說這麼多了，至此為止，關於表格的內容就介紹這麼多了，下一節課開始我們開始講框架。朋友們再見。
第十七課、設定框架集的屬性
今天我們來介紹一下HTML中應用同樣很廣泛的一樣知識：框架。
我來簡單的介紹一下什麼是框架：
使用框架可以將瀏覽器視窗分為多個窗格，在每個窗格中都可以顯示一個網頁，從而實現在一個網頁中顯示多個不同頁面的效果。
我們需要理解的是，框架與框架之間是各自獨立的，在每個框架中可以顯示任意網頁，這些框架就等於是一個單獨的新的頁面，只不過框架是把這些不同的頁面給它們組合到一起放到一個頁面裡了，這樣我們在表面上看來，效果跟一個網頁一樣，表面看不出分別。
框架網頁通過一個或多個frameset和frame標記來定義，需要注意的是，在使用了框架的網頁裡，我們使用framrset標記取代原body的位置，就是在head標記結束後，直接跟上frameset標記，而不再使用body標記。
另外，還有一點需要我們瞭解，就是有的低版本瀏覽器不支援框架，這時，我們可以使用noframes標記來指定當瀏覽器不支援框架時要顯示的內容。
還有就是，frameset標記是定義框架集的標記，frame標記定義框架，frame總是被包含在frameset標記中的，就像表格中的行和單元格總被包含在表格中一樣。
其中，frameset標記具有下列屬性：
1. cols屬性：建立縱向分隔框架時使用該屬性指定各個框架的列寬，其取值有三種形式：畫素、百分比（%）、相對尺寸（*）。比如說，如果我們想將瀏覽器視窗分為三列，第一列佔瀏覽器視窗寬度的30%，第二列寬度為200畫素，第三列為瀏覽器的剩餘寬度，則我們可以將frameset屬性的cols屬性的值設為“30%,200,*”，如果將cols屬性的值設為“*,*,*”，則將瀏覽器視窗分為等寬的三個窗格，如果將其值設為“*,2*,3*”，則表示中間的窗格的寬度為左邊窗格寬度的2倍，右邊窗格的寬度為左邊窗格寬度的3倍。
2. rows屬性：建立橫向分隔框架時使用該屬性指定各個框架的行高，取值方式與cols相同，但，需要注意的是，cols屬性和rows屬性不可同時使用，若要建立同時包含橫向分隔框架和縱向分隔框架，則應使用巢狀框架。
3. frameborder屬性：指定框架周圍是否顯示三維邊框，其取值為1（顯示）、0（不顯示），該屬性的預設值為1
4. framespacing屬性：指定框架之間的間隔，單位為畫素，如果我們不指定該屬性，則框架之間沒有間隔。
下面我們來寫一段程式碼，看看程式碼很多問題稍微琢磨一下就明白了：
例22：（17.html）
<html>
<head>
<title> ----設定框架集的屬性</title>
</head>
<frameset rows="60,*,60"> <!--這個框架集是總框架集，表示將整個頁面分為橫向的三個窗格-->
<frame> <!--代表橫向窗格中的第一個框架，即最上面的窗格,一個frame標記代表一個框架-->
<frameset cols="100,*"> <!--代表一個框架集，表示將第二個已劃分的窗格繼續分為縱向的兩個窗格-->
<frame> <!--代表一個框架，這個框架是已劃分的縱向框架中的第一個框架，即左邊的框架-->
<frame> <!--代表一個框架，這個框架是已劃分的縱向框架中的第二個框架，即右邊的框架-->
</frameset> <!--巢狀的框架集結束-->
<frame> <!--代表一個框架，即總框架集中的最後一個框架-->
<!--以上是我們的框架的所有內容，下面是當瀏覽器不支援框架時要顯示的提示資訊。-->
<noframes>
<body>
<center>
<font size="6" color="teal">
抱歉，您的瀏覽器不支援框架！
</font>
</center>
</body>
</noframes>
</html>
這裡我沒有指定frameset標記的frameborder屬性的值，即該屬性為預設值1，即顯示三維邊框。
我們來看一下執行效果：
那麼，我們接下來把frameborder屬性的值設為0，即不讓瀏覽器顯示三維邊框，我們將上邊程式碼的第五行程式碼改為：
<frameset rows="60,*,60" frameborder="0">
改完後我們再來看一下執行效果：
可以看到，這是一個跟空白頁面一模一樣的頁面，所以說效果是相同的，只是這個頁面確實包含了4個框架。
OK，今天就說到這吧，明天詳細講框架屬性的設定。
嫖客謝謝你的支援。
第18節、使用框架
上節課我們說了設定框架集的屬性及建立巢狀框架的方法，今天我們來介紹一下設定框架的屬性，再舉個例項出來看看在框架中顯示網頁的效果。
通過上節課的學習，我們應該已經知道，表示框架的標記為frame，那麼我們再來說一下這個標記的幾個屬性及這些屬性的作用：
1. frameborder屬性：指定是否顯示三維邊框，這個屬性上節課講過。
2. marginheight屬性：指定框架的高度，單位為畫素
3. marginwidth屬性：指定框架的寬度，單位為畫素
4. name屬性：指定框架的名稱
5. nosize屬性：若指定了該屬性，則不能調整框架的大小
6. scrolling屬性：指定框架是否可以滾動，其取值可以為yes（允許滾動）、no（禁止滾動）、auto（在需要時滾動）。
7. src：指定要在框架裡顯示的頁面的地址
下面我們來建立一個框架頁，並在每個框架裡分別顯示不同的網頁，然後來看看效果：
例23：（18-main.html）
<html>
<!--這個頁面是框架頁面，是主要頁面。-->
<head>
<title> ----使用框架</title>
</head>
<frameset rows="100,*">
<frame name="frame-top" src="23-top.html">
<frameset cols="100,*">
<frame name="frame-left" src="23-left.html">
<frame name="frame-right" src="23-right.html">
</frameset>
<noframe>
<body>
<font color="teal">
抱歉，該網頁使用了框架，但您的瀏覽器不支援框架！
</font>
</body>
</noframe>
</frameset>
</html>
下面是18-top.html的程式碼：
<html>
<!--這個頁面是頭部網頁。-->
<head>
<title>頭部網頁</title>
</head>
<body>
<center>
<h2>這個是頭部網頁。</h2>
</center>
</body>
</html>
下面是18-left.html的程式碼：
<html>
<!--這個頁面是左側網頁。-->
<head>
<title>左側網頁</title>
</head>
<body>
<h2>這個是左側網頁。</h2>
</body>
</html>
下面是18-right.html的程式碼：
<html>
<!--這個頁面是右側網頁。-->
<head>
<title>右側網頁</title>
</head>
<body>
<h2>這個是右側網頁，我們在製作網頁時常將這個框架作為正文頁面。</h2>
</body>
</html>
好了，程式碼我們已經全部寫完了，下面我們來看一下執行效果吧：
好了，效果出來了，這就是框架，這就是在一個瀏覽器窗口裡顯示多個不同頁面的方法，我們再來改一下程式碼，把18-main.html的第6行，改為:
<frameset rows="100,*" frameborder="0">
這樣就取消了三維邊框的顯示，再來執行一下看看：
這樣在表面看起來，就真的跟一個普通頁面差不多了吧？
OK，今天就說這麼多吧，朋友們多看看程式碼，一定要把程式碼弄懂了才好。
今天這節課結束，咱們的關於框架的課程就沒有了，下節課開始講不同種類超連結的建立。
第十九節、瞭解超連結和路徑的概念
朋友應該知道什麼是超連結吧？就是當你把滑鼠放上去的時候滑鼠會變成手型，點選即可實現跳轉，用書面解釋，超連結就是由源端點到目標端點的一種跳轉，源端點可以是一段文字、一副影象、等物件，目標端點可以是任意型別的網路資源，如一個網頁、一副影象、一首歌曲、一段視訊、一個程式等，按照目標端點的不同，也就是按照連結指向的檔案的不同，可以將超連結分成以下幾種形式：
1. 檔案連結：這種連結是我們最常用的連結，這個指向的檔案如果是一個網頁，那麼即實現的是從一個網頁向另一個網頁跳轉，如果指向的檔案是一個rar壓縮包或其他檔案，則實現的是這些資源的下載。這裡需要提一下的是，當瀏覽器遇到它不能解析的檔案時，它會提示你是否下載該檔案，比如當你的瀏覽器遇到一個連結指向一個.exe檔案，它是肯定無法解析的，那麼它就會彈出一個對話方塊，提示你讓你下載，這就是我們平時使用的“目標另存為”，但是，如果瀏覽器遇到了音訊檔案或視訊檔案的話，它可能會自己呼叫系統自帶的播放器去播放這個檔案，這樣就實現了線上聽音樂。
2. 錨點連結：這種連結的目標端點是網頁中的一個確定的位置，這個位置可以是位於當前頁內的，也可以是位於其他頁面內的，這種連結在遇到長文件時有用，能讓人迅速獲得自己所需要的資訊，而不必花費很多時間將整篇文件全部讀完。
3. E-mail連結：通過這種連結可以啟動電子郵件客戶端程式（如Outlook或Foxmail等），從而實現直接為該連結指定的人寫信的效果。這裡看不懂沒關係，稍後我們寫段程式