HTML代碼教程

HTML代碼教程

教程一、基本標誌

1.<html></html>

2.<head></head>

3.<body></body>

4.<title></title>

    Html是英文 HyperText Markup Language 的縮寫,中文意思是“超文本標誌語言”,用它編寫的文件(文檔)的擴展名是.html或.htm,它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 FrontPage Editor 等編輯工具來編寫Html文件。Html語言使用標誌對的方法編寫文件,既簡單又方便,它通常使用<標誌名></標誌名>來表示標誌的開始和結束(例如<html></html>標誌對),因此在Html文檔中這樣的標誌對都必須是成對使用的。在此教程中,我先講一下Html的基本標誌:


1.<html></html>

    <html>標誌用於Html文檔的最前邊,用來標識Html文檔的開始。而</html>標誌恰恰相反,它放在Html文檔的最後邊,用來標識Html文檔的結束,兩個標誌必須一塊使用。


2.<head></head>

    <head>和</head>構成Html文檔的開頭部分,在此標誌對之間可以使用<title>< /title>、<script></script>等等標誌對,這些標誌對都是描述Html文檔相關信息的標誌 對,<head></head>標誌對之間的內容是不會在瀏覽器的框內顯示出來的。兩個標誌必須一塊使用。


3.<body></body>

    <body></body>是Html文檔的主體部分,在此標誌對之間可包含<p>、< /p>、<h1>、</h1>、<br>、<hr>等等衆多的標誌,它們所定義的文本、圖像等將 會在瀏覽器的框內顯示出來。兩個標誌必須一塊使用。<body>標誌中還可以有以下屬性: 

屬性 用途 示例

<body bgcolor="#rrggbb"> 設置背景顏色。 <body bgcolor="red">紅色背景

<body text="#rrggbb"> 設置文本顏色。 <body text="#0000ff">藍色文本

<body link="#rrggbb"> 設置鏈接顏色。 <body link="blue">鏈接爲藍色

<body vlink="#rrggbb"> 設置已使用的鏈接的顏色。 <body vlink="#ff0000">

<body alink="#rrggbb"> 設置正在被擊中的鏈接的顏色。 <body alink="yellow">

    說明:以上各個屬性可以結合使用,如<body bgcolor="red" text="#0000ff">。引號內的rrggbb是 用六個十六進制數表示的RGB(即紅、綠、藍三色的組合)顏色,如#ff0000對應的是紅色。此外,還可以使用Html語言所給定的常量名來表示顏 色:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、 Fuchsia、Silver、Red、Blue和Teal,如<body text="Blue">表示<body></body>標誌對中的文本使用藍色顯示在瀏覽器的框內。

4.<title></title>

    使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍色部分顯示的文本信息,那些信息一般是網頁的“主題”,要將您的網頁的主題顯示到瀏覽器的頂部其實很簡 單,只要在<title></title>標誌對之間加入您要顯示的文本即可。注意:<title>< /title>標誌對只能放在<head></head>標誌對之間。


    下面是一個綜合的例子,仔細閱讀,您便可以瞭解以上各個標誌對在一個Html文檔中的佈局或所使用的位置。

例1 Html文檔中基本標誌的使用

<html>


<head>

<title>顯示在瀏覽器最上邊藍色條中的文本</title>

</head>


<body bgcolor="red" text="blue">

<p>紅色背景、藍色文本</p>

</body>


</html>


教程二、格式標誌

1.<p></p>

2.<br>

3.<blockquote></blockquote>

4.<dl></dl><dt></dt><dd></dd>

5.<ol></ol><ul></ul><li></li>

6.<div></div>     

上一個教程中我們講了Html文檔的基本標誌,但我們還不知道怎樣在瀏覽器中顯示文本之類的東西,這正是我們在教程二中將要談到的。在學習之前,必須強調 一下,我們這個教程中所講的格式標誌統統都是用於<body></body>標誌對之間的。


1.<p></p>

    <p></p>標誌對是用來創建一個段落,在此標誌對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外,<p>標誌還可以使用align屬性,它用來說明對齊方式,語法是:<p align=""></p>。align可以是Left(左對齊)、Center(居中)和Right(右對齊)三個值中的任何一個。如<p align="Center"></p>表示標誌對中的文本使用居中的對齊方式。


2.<br>

    <br>是一個很簡單的標誌,它沒有結束標誌,因爲它用來創建一個回車換行,這麼一說我想您該會使用了吧。在<br>的使用上還有一定的技巧,如果您把<br>加在<p></p>標誌對的外邊,將創建一個大的回車換行,即<br>前邊和後邊的文本的行與行之間的距離比較大,若放在<p></p>的裏邊則<br>前邊和後邊的文本的行與行之間的距離將比較小,您不妨試試看。


3.<blockquote></blockquote>

    在<blockquote></blockquote>標誌對之間加入的文本將會在瀏覽器中按兩邊縮進的方式顯示出來。


4.<dl></dl><dt></dt><dd></dd>

    <dl></dl>用來創建一個普通的列表,<dt></dt>用來創建列表中的上層項目,<dd></dd>用來創建列表中最下層項目,<dt></dt>和<dd></dd>都必須放在<dl></dl>標誌對之間。看一下下邊的例子您就會明白了:


例2 創建一個普通列表

<html>

<head>

<title>一個普通列表</title>

</head>

<body text="blue">

<dl>

  <dt>中國城市</dt>

    <dd>北京 </dd>

    <dd>上海 </dd>

    <dd>廣州 </dd>

  <dt>美國城市</dt>

    <dd>華盛頓 </dd>

    <dd>芝加哥 </dd>

    <dd>紐約 </dd>

</dl>

</body>

</html>


    此例在瀏覽器中的顯示如下: 

中國城市 

北京 

上海 

廣州 

美國城市 

華盛頓 

芝加哥 

紐約 


5.<ol></ol><ul></ul><li></li>

    <ol></ol>標誌對用來創建一個標有數字的列表;<ul></ul>標誌對用來創建一個標有圓點的列表;<li></li>標誌對只能在<ol></ol>或<ul></ul>標誌對之間使用,此標誌對用來創建一個列表項,若<li></li>放在<ol></ol>之間則每個列表項加上一個數字,若在<ul></ul>之間則每個列表項加上一個圓點。請看下邊的例子:


例3 標有數字或圓點的列表

<html>

<head>

<title></title>

</head>


<body text="blue">

<ol>

<p>中國城市 </p>

<li>北京 </li>

<li>上海 </li>

<li>廣州 </li>

</ol>


<ul>

<p>美國城市 </p>

<li>華盛頓 </li>

<li>芝加哥 </li>

<li>紐約 </li>

</ul>

</body>

</html>


    此例在瀏覽器中的顯示如下: 

中國城市 

1. 北京 

2. 上海 

3. 廣州 

美國城市 

? 華盛頓 

? 芝加哥 

? 紐約 

6.<div></div> 

    <div></div>標誌對用來排版大塊Html段落,也用於格式化表,此標誌對的用法與<p></p>標誌對非常相似,同樣有align對齊方式屬性,讀者可以自己試試看。

教程三、文本標誌

1.<pre></pre>

2.<h1></h1>……<h6></h6>

3.<b></b><i></i><u></u>

4.<tt></tt><cite></cite><em></em><strong></strong>

5.<font></font>     

上一個教程中我們已經講了如何在瀏覽器中輸出文本,以及文本輸出的格式,這個教程中我們將談一談文本輸出的字體,如斜體、黑體字、下加一劃線等等。在本教程的最後給出了一個文本標誌的綜合示例,希望讀者能認真閱讀。


1.<pre></pre>

    <pre></pre>標誌對用來對文本進行預處理操作。


2.<h1></h1>……<h6></h6>

    Html語言提供了一系列對文本中的標題進行操作的標誌對:<h1></h1>……<h6></h6>,即一共有六對標題的標誌對。<h1></h1>是最大的標題,而<h6></h6>則是最小的標題,也即是標誌中 h 後面的數字越大標題文本就越小。如果您的Html文檔中需要輸出標題文本的話,便可以使用這六對標題標誌對中的任何一對。


3.<b></b><i></i><u></u>

    經常使用 WORD 的人對這三對標誌對一定很快就能掌握。<b></b>用來使文本以黑體字的形式輸出;<i></i>用來使文本以斜體字的形式輸出;<u></u>用來使文本以下加一劃線的形式輸出。後邊將會有一個綜合的例子,所以此處就不再作詳細講解了。


4.<tt></tt><cite></cite><em></em><strong></strong>

    這些標誌對的用法和上邊的一樣,差別只是在於輸出的文本字體不太一樣而已。<tt></tt>用來輸出打字機風格字體的文本;<cite></cite>用來輸出引用方式的字體,通常是斜體;<em></em>用來輸出需要強調的文本(通常是斜體加黑體);<strong></strong>則用來輸出加重文本(通常也是斜體加黑體)。這些標誌對的示例也將在後邊綜合的例子中出現。


5.<font></font>

    <font></font>是一對很有用的標誌對,它可以對輸出文本的字體大小、顏色進行隨意地改變,這些改變主要是通過對它的兩個屬性 size 和 color 的控制來實現的。size屬性用來改變字體的大小,它可以取值:-1、1和+1;而color屬性則用來改變文本的顏色,顏色的取值是我們在教程一中講過的十六進制RGB顏色碼或Html語言給定的顏色常量名。具體用法請看下邊綜合的例子。


例4 文本標誌的綜合示例

<html>

<head>

<title>文本標誌的綜合示例</title>

</head>


<body text="blue">

<h1>最大的標題</h1>

<h3>使用h3的標題</h3>

<h6>最大的標題</h6>

<p><b>黑體字文本</b> </p>

<p><i>斜體字文本</i> </p>

<p><u>下加一劃線文本</u> </p>

<p><tt>打字機風格的文本</tt></p>

<p><cite>引用方式的文本</cite></p>

<p><em>強調的文本</em></p>

<p><strong>加重的文本</strong></p>

<p><font size="+1" color="red">size取值“+1”、color取值“red”時的文本</font></p>

</body>

</html>


    本例在瀏覽器中顯示的結果如下:

最大的標題

使用h3的標題

最大的標題

黑體字文本 

斜體字文本 

下加一劃線文本 

打字機風格的文本

引用方式的文本

強調的文本

加重的文本

size取值“+1”、color取值“red”時的文本

教程四、圖像標誌

1.<img>

2.<hr>     再簡單樸素的網頁如果只有文字而沒有圖像的話將失去許多活力,圖像在網頁製作中是非常重要的一個方面,Html語言也專門提供了<img>標誌來處理圖像的輸出。


1.<img>

    <img>標誌並不是真正地把圖像給加入到Html文檔中,而是將標誌對的src屬性賦值,這個值是圖形文件的文件名,當然包括路徑,這個路徑可以是相對路徑,也可以是網址。 實際上就是通過路徑將圖形文件嵌入到您的文檔中。您可能並不知道什麼是相對路徑,我現在就來講一講相對路徑。所謂相對路徑是指您所要鏈接或嵌入到當前 Html文檔的文件與當前文件的相對位置所形成的路徑。假如您的Html文件與圖形文件(文件名假設是logo.gif)在同一個目錄下,則可以將代碼寫 成<img src="logo.gif">;假如您的圖形文件放在當前的Html文檔所在目錄的一個子目錄(子目錄名假設是images)下,則代碼應爲& lt;img src="images/logo.gif">;假如您的圖形文件放在當前的Html文檔所在目錄的上層目錄(目錄名假設是home)下,則相對路 徑就必須是準網址了,即用“../”表示您的網站,然後在後邊緊跟文件在您的網站中的路徑,假設home是您的網站下的一個目錄,則代碼應爲<img src="../home/logo.gif">,若home是您的網站下的目錄king下邊的一個子目錄,則代碼應該變爲<img src="../king/home/logo.gif">了。現在您對相對路徑應該有所瞭解了吧!

    必須強調一下,src屬性在<img>標誌中是必須賦值的,是標誌中不可缺少的一部分。除此之外,<img>標誌還有alt、align、border、width和height屬性。align是圖像的對齊方式,在前邊的教程中已經講了很多了,這裏就不再提了。border屬性是圖像的邊框,可以取大於或者等於0的整數,默認單位是像素。width和Height屬性是圖像的寬和高,默認單位也是象素。alt屬性是當鼠標移動到圖像上時顯示的文本。


2.<hr>

    <hr>標誌是在Html文檔中加入一條水平線,它可以直接使用,具有size、color、width和noshade屬性。size是設置水平線的厚度,而width是設定水平線的寬度,默認單位是像素。想必大家對color屬性已經很熟悉了,在此就不再用多講。noshade屬性不用賦值,而是直接加入標誌即可使用,它是用來加入一條沒有陰影的水平線(不加入此屬性水平線將有陰影)。

    下面是本教程的一個綜合例子。


例5 圖像標誌舉例

<html>

<head>

<title>圖像標誌的綜合示例</title>

</head>


<body>

<p align="center"><img src="http://image.netsh.com/hp/before/logo.jpg" alt="網頁製作" WIDTH="120" HEIGHT="60"></p>


<hr width="600" size="1" color="#0000FF">

</body>

</html>


    本例在瀏覽其中的顯示結果如下:

 

教程五、表格標誌

1.<table></table>

2.<tr></tr><td></td>

3.<th></th>     表格標誌對於製作網頁是很重要的,我希望您能記住這一點,現在很多很多網頁都是使用多重表格,主要是因爲表格不但可以固定文本或圖像的輸出,而且還可以任意的進行背景和前景顏色的設置。但願您也能熟練使用表格來製作您的主頁。


1.<table></table>

    <table></table>標誌對用來創建一個表格。它有以下屬性: 

屬性 用途

<table bgcolor=""> 設置表格的背景色。

<table border=""> 設置邊框的寬度,若不設置此屬性,則邊框寬度默認爲0。

<table bordercolor=""> 設置邊框的顏色。

<table bordercolorlight=""> 設置邊框明亮部分的顏色(當border的值大於等於1時纔有用)。

<table bordercolordark=""> 設置邊框昏暗部分的顏色(當border的值大於等於1時纔有用)。

<table cellspacing=""> 設置表格格子之間空間的大小。

<table cellpadding=""> 設置表格格子邊框與其內部內容之間空間的大小。

<table width=""> 設置表格的寬度,單位用絕對像素值或總寬度的百分比。

    說明:以上各個屬性可以結合使用。有關寬度、大小的單位用絕對像素值。而有關顏色的屬性使用十六進制RGB顏色碼或Html語言給定的顏色常量名(如 Silver 爲銀色)

2.<tr></tr><td></td>

    <tr></tr>標誌對用來創建表格中的每一行。 此標誌對只能放在<table></table>標誌對之間使用,而在此標誌對之間加入文本將是無用的,因爲 在<tr></tr>之間只能緊跟<td></td>標誌對纔是有效的語 法,<td></td>標誌對用來創建表格中一行中的每一個格子, 此標誌對也只有放在<tr></tr>標誌對之間纔是有效的,您想要輸入的文本也只有放在<td>< /td>標誌對中才有效(即才能夠顯示出來)。<table></table>、<tr>< /tr>和<td></td>標誌對的關係如下所示:

最外層,創建一個表格--> <table>

  創建一行--> <tr>

    創建一個格子(這裏總共創建了三個格子)--> <td>要輸出的文本只能放在此處</td>

<td>要輸出的文本只能放在此處</td>

<td>要輸出的文本只能放在此處</td>

</tr>

最外層--> </table>

    此外,<tr>還有align和valign屬性。align是水平對齊方式,取值爲left(左對齊)、center(居中)、right(右對齊);而valign是垂直對齊方式,取值爲top(靠頂端對齊)、middle(居中間對齊)或bottom(靠底部對齊)。<td>具有width、colspan、rowspan和nowrap屬性。width是格子的寬度,單位用絕對像素值或總寬度的百分比;colspan設置一個表格格子跨佔的列數(缺省值爲1);rowspan設置一個表格格子跨佔的行數(缺省值爲1);nowrap禁止表格格子內的內容自動斷行。


3.<th></th>

    <th></th>標誌對用來設置表格頭,通常是黑體居中文字。


    看一看下邊的例子就明白以上標誌對的用法了。


例6 表格標誌的綜合示例

<html>

<head>

<title>表格標誌的綜合示例</title>

</head>


<body>

<table border="1" width="80%" bgcolor="#E8E8E8" cellpadding="2" bordercolor="#0000FF"

bordercolorlight="#7D7DFF" bordercolordark="#0000A0">

  <tr>

    <th width="33%" colspan="2" valign="bottom">意大利</th>

    <th width="36%" colspan="2" valign="bottom">英格蘭</th>

    <th width="36%" colspan="2" valign="bottom">西班牙</th>

  </tr>

  <tr>

    <td width="16%" align="center">AC米蘭</td>

    <td width="16%" align="center">佛羅倫薩</td>

    <td width="17%" align="center">曼聯</td>

    <td width="17%" align="center">紐卡斯爾</td>

    <td width="17%" align="center">巴塞羅那</td>

    <td width="17%" align="center">皇家社會</td>

  </tr>

  <tr>

    <td width="16%" align="center">尤文圖斯</td>

    <td width="16%" align="center">桑普多利亞</td>

    <td width="17%" align="center">利物浦</td>

    <td width="17%" align="center">阿申納</td>

    <td width="17%" align="center">皇家馬德里</td>

    <td width="17%" align="center">……</td>

  </tr>

  <tr>

    <td width="16%" align="center">拉齊奧</td>

    <td width="16%" align="center">國際米蘭</td>

    <td width="17%" align="center">切爾西</td>

    <td width="17%" align="center">米德爾斯堡</td>

    <td width="17%" align="center">馬德里競技</td>

    <td width="17%" align="center">……</td>

  </tr>

</table>

</body>

</html>


    本例在瀏覽器中顯示的結果如下: 

意大利 英格蘭 西班牙

AC米蘭 佛羅倫薩 曼聯 紐卡斯爾 巴塞羅那 皇家社會

尤文圖斯 桑普多利亞 利物浦 阿申納 皇家馬德里 ……

拉齊奧 國際米蘭 切爾西 米德爾斯堡 馬德里競技 ……

教程六、鏈接標誌

1.<a href=""></a>

2.<a name=""></a>     

教程六的內容不是很多,而且很簡單。鏈接是Html語言的一大特色,正因爲有了它,我們對內容的瀏覽才能夠具有靈活性和網絡性。


1.<a href=""></a>

    本標誌對的屬性href是無論如何不可缺少的,標誌對之間加入需要鏈接的文本或圖像(鏈接圖像即加入<img src="">標誌)。href的值可以是URL形式,即網址或相對路徑,也可以是mailto:形式,即發送E-Mail形式。對於第一種情況,語法爲<a href="URL"></a>,這就能創建一個超文本鏈接了,例如:

    <a href="http://www.netsh.com/">這是我的網站</a>

    對於第二種情況,語法爲<a href="mailto:EMAIL"></a>,這就創建了一個自動發送電子郵件的鏈接,mailto:後邊緊跟想要制動發送的電子郵件的地址(即E-Mail地址),例如:

    <a href="mailto:[email protected]">這是我的電子信箱(E-Mail信箱)</a>

    此外,<a href=""></a>還具有target屬性,此屬性用來指明瀏覽的目標幀,我們將在講幀標誌時作詳細的說明,這裏您只要知道如果不使用target屬性,當瀏覽者點擊了鏈接之後將在原來的瀏覽器窗口中瀏覽新的Html文檔,若target的值等於“_blank”,點擊鏈接後將會打開一個新的瀏覽器窗口來瀏覽新的Html文檔。例如:

    <a href="http://www.netsh.com/" target="_blank">這是我的網站</a>


2.<a name=""></a>

    <a name=""></a>標誌對要結合<a href=""></a>標誌對使用纔有效果。<a name=""></a>標誌對用來在Html文檔中創建一個標籤(即做一個記號),屬性name是不可缺少的,它的值也即是標籤名,例如:

    <a name="標籤名">此處創建了一個標籤</a>

    創建標籤是爲了在Html文檔中創建一些鏈接,以便能夠找到同一文檔中的有標籤的地方。要找到標籤所在地,就必須使用<a href=""></a>標誌對。例如要找到“標籤名”這個標籤,就要編寫如下代碼:

    <a href="#標籤名">點擊此處將使瀏覽器跳到“標籤名”處</a>

    注意:href屬性賦的值若是標籤的名字,必須在標籤名前邊加一個“#”號。


    下面是本教程的一個綜合示例:


例7 鏈接標誌的綜合示例

<html>

<head>

<title>鏈接標誌的綜合示例</title>

</head>


<body>

<p align="center" style="font-size:9pt;color:yellow;background:black"><br>

<a name="Top"><font color="red">創建標籤處</font></a><br>

<br>

<br>

歡迎想要學習網頁製作的同學訪問我的網站<br>

<a href="http://www.netsh.com/" target="_blank"><font color="lime">http://www.netsh.com/</font><br>

<br>

<img src="http://image.netsh.com/hp/before/logo.jpg"

alt="歡迎訪問&quot;網頁製作&quot;" border="0" width="468" height="60"></a><br>

<br>

本網站的主要內容<br>

<br>

<a href="index_Html.htm" target="_blank">Html教程</a><br>

<br>

<a href="../DHtml/index_DHtml.htm" target="_blank">動態Html教程</a><br>

<br>

<a href="../ASP/index_ASP.htm" target="_blank">ASP教程</a><br>

<br>

JavaScript教程<br>

<br>

VBScript教程<br>

<br>

<a href="../yqlj/yqlj.htm" target="_blank">友情鏈接</a><br>

<br>

我要留言<br>

<br>

作者介紹<br>

<br>

<br>

歡迎給我來信,我的E-Mail是:

<a href="mailto:[email protected]"><font color="lime">[email protected]</font></a><br>

<br>

<a href="#Top"><font color="lime">點擊此處回到標籤處</font></a><br>

<br>

</p>

</body>

</html>


    本例在瀏覽器中顯示的結果如下:





教程七、幀標誌

1.<frameset></frameset>

2.<frame>

3.<noframes></noframes>     

幀是由英文Frame翻譯過來的,它可以用來向瀏覽器窗口中裝載多個Html文件。即每個Html文件佔據一個幀,而多個幀可以同時顯示在同一個瀏覽器窗 口中,它們組成了一個最大的幀,也即是一個包含多個Html文檔的Html文件(我稱它爲主文檔)。幀通常的使用方法是在一個幀中放置目錄(即可供選擇的鏈接),然後將Html文件顯示在另一個幀中。


1.<frameset></frameset>

    <frameset></frameset>標誌對放在幀的主文檔的<body></body>標誌對的外邊,也可以嵌在其他幀文檔中,並且可以嵌套使用。此標誌對用來定義主文檔中有幾個幀並且各個幀是如何排列的。它具有rows和cols屬性,使用<frameset>標誌時這兩個屬性至少必須選擇一個,否則瀏覽器只顯示第一個定義的幀,剩下的一概不管,<frameset></frameset>標誌對也就沒有起到任何作用了。rows用來規定主文檔中各個幀的行定位,而cols用來規定主文檔中各個幀的列定位。這兩個屬性的取值可以是百分數、絕對像素值或星號(“*”),其中星號代表那些未被說明的空間,如果同一個屬性中出現多個星號則將剩下的未被說明的空間平均分配。同時,所有的幀按照rows和cols的值從左到右,然後從上到下排列。示例如下: 

<frameset rows="*,*,*"> 總共有三個按列排列的幀,每個幀佔整個瀏覽器窗口的1/3

<frameset cols="40%,*,*"> 總共有三個按行排列的幀,第一個幀佔整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個幀

<frameset rows="40%,*" cols="50%,*,200"> 總共有六個幀,先是在第一行中從左到右排列三個幀,然後在第二行中從左到右再排列三個幀,即兩行三列,所佔空間依據rows和cols屬性的值,其中200的單位是像素

2.<frame>

    <frame>標誌放在<frameset></frameset>之間,用來定義某一個具體的幀。<frame>標誌具有src和name屬性,這兩個屬性都是必須賦值的。src是此幀的源Html文件名(包括網絡路徑,即相對路徑或網址),瀏覽器將會在此幀中顯示src指定的Html文件;name是此幀的名字,這個名字是用來供超文本鏈接標誌<a href="" target="">中的target屬性用來指定鏈接的Html文件將顯示在哪一個幀中。例如定義了一個幀,名字是main,在幀中顯示的Html文件名是jc.htm,則代碼是<frame src="jc.htm" name="main">,當您有一個鏈接,在點擊了這個鏈接後,文件new.htm將要顯示在名爲main的幀中,則代碼爲<a href="new.htm" target="main">需要鏈接的文本</a>。這樣一來,就可以在一個幀中建立網站的目錄,加入一系列鏈接,當點擊鏈接以後在另一個幀中顯示被鏈接的Html文件。

此外,<frame>標誌還有scrolling和noresize屬性,scrolling用來指定是否顯示滾動軸,取值可以是“yes”(顯示)、“no”(不顯示)或“auto”(若需要則會自動顯示,不需要則自動不顯示)。noresize屬性直接加入標誌中即可使用,不需賦值,它用來禁止用戶調整一個幀的大小。


3.<noframes></noframes>

    <noframes></noframes>標誌對也是放在<frameset></frameset>標誌對之間,用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。在此標誌對之間先緊跟<body></body>標誌對,然後纔可以使用我們在教程七以前講過的任何標誌。


    下邊是一個綜合示例:


例8 幀標誌的綜合示例


主文檔:

<html>

<head>

<title>幀標誌的綜合示例</title>

</head>

<frameset cols="25%,*">

<frame src="menu.htm" scrolling="no" name="Left">

<frame src="page1.htm" scrolling="auto" name="Main">

<noframes>

<body>

<p>對不起,您的瀏覽器不支持“幀”!</p>

</body>

</noframes>

</frameset>

</html>


menu.htm

<html>

<head>

<title>目錄</title>

</head>

<body>

<p><font color="#FF0000">目錄</font></p>

<p><a href="page1.htm" target="Main">鏈接到第一頁</a></p>

<p><a href="page2.htm" target="Main">鏈接到第二頁</a></p>

</body>

</html>


page1.htm

<html>

<head>

<title>第一頁</title>

</head>

<body>

<p align="center"><font color="#8000FF">這是第一頁!</font></p>

</body>

</html>


page2.htm

<html>

<head>

<title>第二頁</title>

</head>

<body>

<p align="center"><font color="#FF0080">這是第二頁!</font></p>

</body>

</html>


教程八、表單標誌

1.<form></form>

2.<input type="">

3.<select></select><option>

4.<textarea></textarea>     

表單在Web網頁中用來給訪問者填寫信息,從而能獲得用戶信息,使網頁具有交互的功能。一般是將表單設計在一個Html文檔中,當用戶填寫完信息後做提交(submit)操作,於是表單的內容就從客戶端的瀏覽器傳送到服務器上,經過服務器上的 ASP 或 CGI 等處理程序處理後,再將用戶所需信息傳送回客戶端的瀏覽器上,這樣網頁就具有了交互性。這裏我們只講怎樣使用Html標誌來設計表單。


1.<form></form>

    <form></form>標誌對用來創建一個表單,也即定義表單的開始和結束位置,在標誌對之間的一切都屬於表單的內容。<form>標誌具有action、method和target屬 性。action的值是處理程序的程序名(包括網絡路徑:網址或相對路徑),如:<form action="http://www.netsh.com/counter.cgi">,當用戶提交表單時,服務器將執行網址http: //www.netsh.com/上的名爲counter.cgi的CGI程序。method屬性用來定義處理程序從表單中獲得信息的方式,可取值爲 GET 和 POST 的其中一個。GET方式是處理程序從當前Html文檔中獲取數據,然而這種方式傳送的數據量是有所限制的,一般限制在1KB以下。POST方式與GET方 式相反,它是當前的Html文檔把數據傳送給處理程序,傳送的數據量要比使用GET方式的大的多。target屬性用來指定目標窗口或目標幀。


2.<input type="">

    <input type="">標誌用來定義一個用戶輸入區,用戶可在其中輸入信息。此標誌必須放在<form></form>標誌對之間。<input type="">標誌中共提供了八種類型的輸入區域,具體是哪一種類型由type屬性來決定。請看下邊列表: 

type屬性取值 輸入區域類型 輸入區域示例

<input type="TEXT" size="" maxlength=""> 單行的文本輸入區域,size與maxlength屬性用來定義此種輸入區域顯示的尺寸大小與輸入的最大字符數 <input type="SUBMIT"> 將表單內容提交給服務器的按鈕 <input type="RESET"> 將表單內容全部清除,重新填寫的按鈕 <input type="CHECKBOX" checked> 一個複選框,checked屬性用來設置該複選框缺省時是否被選中,右邊示例中使用了三個複選框 你喜歡哪些教程:

 Html入門 動態Html ASP<input type="HIDDEN"> 隱藏區域,用戶不能在其中輸入,用來預設某些要傳送的信息  

<input type="IMAGE" src="URL"> 使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定,用戶點擊後,表單中的信息和點擊位置的X、Y座標一起傳送給服務器 <input type="PASSWARD"> 輸入密碼的區域,當用戶輸入密碼時,區域內將會顯示"*"號 請輸入您的密碼: <input type="RADIO"> 單選按鈕類型,checked屬性用來設置該單選框缺省時是否被選中,右邊示例中使用了三個單選框 10月3日中韓國奧隊比賽結果會是:

 中國勝 平局 韓國勝

此外,八種類型的輸入區域有一個公共的屬性name,此屬性給每一個輸入區域一個名字。這個名字與輸入區域是一一對應的,即一個輸入區域對應一個名字。服務器就是通過調用某一輸入區域的名字的value屬性來獲得該區域的數據的。而value屬性是另一個公共屬性,它可用來指定輸入區域的缺省值。


3.<select></select><option>

    <select></select>標誌對用來創建一個下拉列表框或可以複選的列表框。此標誌對用於<form></form>標誌對之間。<select>具有multiple、name和size屬性。multiple屬性不用賦值,直接加入標誌中即可使用,加入了此屬性後列表框就成了可多選的了;name是此列表框的名字,它與上邊講的name屬性作用是一樣的;size屬性用來設置列表的高度,缺省時值爲1,若沒有設置(加入)multiple屬性,顯示的將是一個彈出式的列表框。

    <option>標誌用來指定列表框中的一個選項,它放在<select></select>標誌對之間。此標誌具 有selected和value屬性,selected用來指定默認的選項,value屬性用來給<option>指定的那一個選項賦值,這 個值是要傳送到服務器上的,服務器正是通過調用<select>區域的名字的value屬性來獲得該區域選中的數據項的。請看下例:

Html代碼 瀏覽器顯示的結果

<form action="cgi-bin/tongji.cgi" method="post">

  <p>請選擇最喜歡的男歌星:

  <select name="gx1" size="1">

    <option value="ldh">劉德華

    <option value="zhxy" selected>張學友

    <option value="gfch">郭富城

    <option value="lm">黎明

  </select>

</form> 請選擇最喜歡的男歌星:

 <form action="cgi-bin/tongji.cgi" method="post">

  <p>請選擇最喜歡的女歌星:

  <select name="gx2" multiple size="4">

    <option value="zhmy">張曼玉

    <option value="wf" selected>王菲

    <option value="tzh">田震

    <option value="ny">那英

  </select>

</form> 請選擇最喜歡的女歌星:

 4.<textarea></textarea>

    <textarea></textarea>用來創建一個可以輸入多行的文本框,此標誌對用於<form>< /form>標誌對之間。<textarea>具有name、cols和rows屬性。cols和rows屬性分別用來設置文本框的列數和行數,這裏列與行是以字符數爲單位的。請看下邊的例子:

Html代碼 瀏覽器顯示的結果

<form action="cgi-bin/tongji.cgi" method="post">

  <p>您的意見對我很重要:

  <textarea name="yj" clos="20" rows="5">

        請將意見輸入此區域

  </textarea>

</form> 您的意見對我很重要: 


教程九、聲音標誌

1.<bgsound>

2.<embed></embed>     想在主頁中加入自己的聲音嗎?想讓別人進入你的主頁時聽到一聲親切的問候或一段簡要的介紹嗎?那麼快跟我來,輕鬆搞定,非常簡單.

    一般說來在主頁中加入聲音有三種方法,一是用<bgsound>標誌加入背景音樂;二是用<embed>標誌嵌入聲音; 另外一種則是用ActiveX控件中的ActiveMovie控件。第三種方法稍微複雜一些,在網頁多媒體開發方面有一定的用處。我們在這裏還是講最常用 的前兩種吧。 

1.<bgsound>

    用<bgSound>標誌加入背景音樂格式如下: <bgsound="你要加的音樂文件.wav" loop="播放的次數">其中loop屬性爲0時表示循環播放, 但bgsound標記只能適用於IE。有很多朋友使用FRONTPAGE做主頁,只須在頁面中點擊右鍵,選擇頁面屬性,選定背景樂就可以了。 其原理是使用bgsound標記。 

2.<embed></embed>

    用<embed>標誌嵌入聲音引用格式如下: <embed SRC=″你要加的音樂文件.wav″ WIDTH=145 HEIGHT=60>(該標誌屬性在文末有詳細說明)。聲音文件使用的是Windows的.wav或WWW的.au格式,但最適合做主頁背景音樂的 是以.mid爲後綴的MIDI音樂文件。實際上<embed>>標誌還可以引用如動畫文件、VRML文件等。 

現在我們來看一下怎樣利用Windows自帶的錄音軟件來錄製你自己的聲音。

      接上話筒,在桌面控制面板上點擊右鍵打開音量控制面板,去掉MICROPHPONE的靜音(如下圖)。如果沒有MICROPHPONE的選項,可打開控制面板上選項中的屬性,在MICROPHPONE的複選框上打勾。

 

再選擇WINDOWS開始菜單程序中的附件,打開娛樂中的錄音機,錄製自己的聲音(這就是放在主頁中的聲音了).你可以說一句"歡迎你來到我的主頁",錄下來後,保存成WAVE格式的文件,放到網站中,再用第一步的方法加到主頁中就可以了.

附:<EMBED>標記語法說明

SRC="文件名稱和路徑":設置背景音樂的路徑和名稱;

AUTOSTART="TRUE/FALSE":設置是否音樂文件一傳完後就開始播放,默認爲FALSE(否)

LOOP=" TRUE/FALSE/整數":設置重播次數,TRUE爲無限次重播,FALSE爲不重播,LOOP=某個整數,爲重播多少次。

VOLUME="0-100":設置音量,默認爲系統本身的音量;

STARTTIME="分:秒":設置歌曲開始播放的時間,如STARTTIME="00:20"爲從第20秒開始播放;

ENDTIME="分:秒":設置歌曲播放結束的時間 ;

WIDTH和HIGH="整數":設置控制面板的寬和高;

CONTROLS="CONSOLE/SMALLCONSOLE /PLAYBUTTON/PAUSEBUTTON/STOPBUTTON/VOLUMELEVER":設置控制面板的外觀 。CONSOLE爲正常大小的面板,SMALLCONSOLE爲較小的面板,PLAYBUTTON爲顯示播放按鈕,PAUSEBUTTON爲顯示暫停按 鈕, STOPBUTTON爲顯示停止按鈕,VOLUMELEVER爲顯示音量調節,若要隱藏控制面板可用HIDDEN=TRUE。 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章