教程一、基本標(biāo)志
 
1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
 
    Html是英文 HyperText Markup Language 的縮寫,中文意思是“超文本標(biāo)志語言”,用它編寫的文件(文檔)的擴展名是.html或.htm,它

們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫字板或 FrontPage Editor 等編輯工具來編寫Html文件。Html語言使用標(biāo)志對的

方法編寫文件,既簡單又方便,它通常使用<標(biāo)志名></標(biāo)志名>來表示標(biāo)志的開始和結(jié)束(例如<html></html>標(biāo)志對),因此在Html文檔中這樣

的標(biāo)志對都必須是成對使用的。在此教程中,我先講一下Html的基本標(biāo)志:

1.<html></html>
    <html>標(biāo)志用于Html文檔的最前邊,用來標(biāo)識Html文檔的開始。而</html>標(biāo)志恰恰相反,它放在Html文檔的最后邊,用來標(biāo)識Html文檔的

結(jié)束,兩個標(biāo)志必須一塊使用。

2.<head></head>
    <head>和</head>構(gòu)成Html文檔的開頭部分,在此標(biāo)志對之間可以使用<title></title>、<script></script>等等標(biāo)志對,這些標(biāo)志對都是

描述Html文檔相關(guān)信息的標(biāo)志對,<head></head>標(biāo)志對之間的內(nèi)容是不會在瀏覽器的框內(nèi)顯示出來的。兩個標(biāo)志必須一塊使用。

3.<body></body>
    <body></body>是Html文檔的主體部分,在此標(biāo)志對之間可包含<p>、</p>、 <h1>、</h1>、<br>、<hr>等等眾多的標(biāo)志,它們所定義的文本

、圖像等將會在瀏覽器的框內(nèi)顯示出來。兩個標(biāo)志必須一塊使用。<body>標(biāo)志中還可以有以下屬性:屬性
 用途
 示例
 
<body bgcolor="#rrggbb"> 設(shè)置背景顏色。 <body bgcolor="red">紅色背景
<body text="#rrggbb"> 設(shè)置文本顏色。 <body text="#0000ff">藍(lán)色文本
<body link="#rrggbb"> 設(shè)置鏈接顏色。 <body link="blue">鏈接為藍(lán)色
<body vlink="#rrggbb"> 設(shè)置已使用的鏈接的顏色。 <body vlink="#ff0000">
<body alink="#rrggbb"> 設(shè)置正在被擊中的鏈接的顏色。 <body alink="yellow">
    說明:以上各個屬性可以結(jié)合使用,如<body bgcolor="red" text="#0000ff">。引號內(nèi)的rrggbb是用六個十六進(jìn)制數(shù)表示的RGB(即紅、綠

、藍(lán)三色的組合)顏色,如#ff0000對應(yīng)的是紅色。此外,還可以使用Html語言所給定的常量名來表示顏色:Black、White、Green、Maroon、

Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal,如<body text="Blue">表示<body></body>標(biāo)志對

中的文本使用藍(lán)色顯示在瀏覽器的框內(nèi)。

4.<title></title>
    使用過瀏覽器的人可能都會注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息,那些信息一般是網(wǎng)頁的“主題”,要將您的網(wǎng)頁的主題顯

示到瀏覽器的頂部其實很簡單,只要在<title></title>標(biāo)志對之間加入您要顯示的文本即可。注意:<title></title>標(biāo)志對只能放在

<head></head>標(biāo)志對之間。

    下面是一個綜合的例子,仔細(xì)閱讀,您便可以了解以上各個標(biāo)志對在一個Html文檔中的布局或所使用的位置。
例1 Html文檔中基本標(biāo)志的使用
<html>

<head>
<title>顯示在瀏覽器最上邊藍(lán)色條中的文本</title>
</head>

<body bgcolor="red" text="blue">
<p>紅色背景、藍(lán)色文本</p>
</body>

</html>
 

教程二、格式標(biāo)志
 
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文檔的基本標(biāo)志,但我們還不知道怎樣在瀏覽器中顯示文本之類的東西,這正是我們在教程二中將要談到的。

在學(xué)習(xí)之前,必須強調(diào)一下,我們這個教程中所講的格式標(biāo)志統(tǒng)統(tǒng)都是用于<body></body>標(biāo)志對之間的。

1.<p></p>
    <p></p>標(biāo)志對是用來創(chuàng)建一個段落,在此標(biāo)志對之間加入的文本將按照段落的格式顯示在瀏覽器上。另外,<p>標(biāo)志還可以使用align屬性

,它用來說明對齊方式,語法是:<p align=""></p>。align可以是Left(左對齊)、Center(居中)和Right(右對齊)三個值中的任何一個。如<p

align="Center"></p>表示標(biāo)志對中的文本使用居中的對齊方式。

2.<br>
    <br>是一個很簡單的標(biāo)志,它沒有結(jié)束標(biāo)志,因為它用來創(chuàng)建一個回車換行,這么一說我想您該會使用了吧。在<br>的使用上還有一定的

技巧,如果您把<br>加在<p></p>標(biāo)志對的外邊,將創(chuàng)建一個大的回車換行,即<br>前邊和后邊的文本的行與行之間的距離比較大,若放在

<p></p>的里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小,您不妨試試看。

3.<blockquote></blockquote>
    在<blockquote></blockquote>標(biāo)志對之間加入的文本將會在瀏覽器中按兩邊縮進(jìn)的方式顯示出來。

4.<dl></dl><dt></dt><dd></dd>
    <dl></dl>用來創(chuàng)建一個普通的列表,<dt></dt>用來創(chuàng)建列表中的上層項目,<dd></dd>用來創(chuàng)建列表中最下層項目,<dt></dt>和

<dd></dd>都必須放在<dl></dl>標(biāo)志對之間。看一下下邊的例子您就會明白了:

例2 創(chuàng)建一個普通列表
<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>標(biāo)志對用來創(chuàng)建一個標(biāo)有數(shù)字的列表;<ul></ul>標(biāo)志對用來創(chuàng)建一個標(biāo)有圓點 的列表;<li></li>標(biāo)志對只能在<ol></ol>或

<ul></ul>標(biāo)志對之間使用,此標(biāo)志對用來創(chuàng)建一個列表項,若<li></li>放在<ol></ol>之間則每個列表項加上一個數(shù)字,若在<ul></ul>之間

則每個列表項加上一個圓點。請看下邊的例子:

例3 標(biāo)有數(shù)字或圓點的列表
<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>

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

中國城市

北京
上海
廣州
美國城市

華盛頓
芝加哥
紐約
6.<div></div>
    <div></div>標(biāo)志對用來排版大塊Html段落,也用于格式化表,此標(biāo)志對的用法與<p></p>標(biāo)志對非常相似,同樣有align對齊方式屬性,讀

者可以自己試試看。
 


教程三、文本標(biāo)志
 
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>
    上一個教程中我們已經(jīng)講了如何在瀏覽器中輸出文本,以及文本輸出的格式,這個教程中我們將談一談文本輸出的字體,如斜體、黑體字

、下加一劃線等等。在本教程的最后給出了一個文本標(biāo)志的綜合示例,希望讀者能認(rèn)真閱讀。

1.<pre></pre>
    <pre></pre>標(biāo)志對用來對文本進(jìn)行預(yù)處理操作。

2.<h1></h1>……<h6></h6>
    Html語言提供了一系列對文本中的標(biāo)題進(jìn)行操作的標(biāo)志對:<h1></h1>……<h6></h6>,即一共有六對標(biāo)題的標(biāo)志對。<h1></h1>是最大的標(biāo)

題,而<h6></h6>則是最小的標(biāo)題,也即是標(biāo)志中 h 后面的數(shù)字越大標(biāo)題文本就越小。如果您的Html文檔中需要輸出標(biāo)題文本的話,便可以使

用這六對標(biāo)題標(biāo)志對中的任何一對。

3.<b></b><i></i><u></u>
    經(jīng)常使用 WORD 的人對這三對標(biāo)志對一定很快就能掌握。<b></b>用來使文本以黑體字的形式輸出;<i></i>用來使文本以斜體字的形式輸

出;<u></u>用來使文本以下加一劃線的形式輸出。后邊將會有一個綜合的例子,所以此處就不再作詳細(xì)講解了。

4.<tt></tt><cite></cite><em></em><strong></strong>
    這些標(biāo)志對的用法和上邊的一樣,差別只是在于輸出的文本字體不太一樣而已。<tt></tt>用來輸出打字機風(fēng)格字體的文本;

<cite></cite>用來輸出引用方式的字體,通常是斜體;<em></em>用來輸出需要強調(diào)的文本(通常是斜體加黑體);<strong></strong>則用來輸

出加重文本(通常也是斜體加黑體)。這些標(biāo)志對的示例也將在后邊綜合的例子中出現(xiàn)。

5.<font></font>
    <font></font>是一對很有用的標(biāo)志對,它可以對輸出文本的字體大小、顏色進(jìn)行隨意地改變,這些改變主要是通過對它的兩個屬性 size

和 color 的控制來實現(xiàn)的。size屬性用來改變字體的大小,它可以取值:-1、1和+1;而color屬性則用來改變文本的顏色,顏色的取值是我們

在教程一中講過的十六進(jìn)制RGB顏色碼或Html語言給定的顏色常量名。具體用法請看下邊綜合的例子。

例4 文本標(biāo)志的綜合示例
<html>
<head>
<title>文本標(biāo)志的綜合示例</title>
</head>

<body text="blue">
<h1>最大的標(biāo)題</h1>
<h3>使用h3的標(biāo)題</h3>
<h6>最大的標(biāo)題</h6>
<p><b>黑體字文本</b> </p>
<p><i>斜體字文本</i> </p>
<p><u>下加一劃線文本</u> </p>
<p><tt>打字機風(fēng)格的文本</tt></p>
<p><cite>引用方式的文本</cite></p>
<p><em>強調(diào)的文本</em></p>
<p><strong>加重的文本</strong></p>
<p><font size="+1" color="red">size取值“+1”、color取值“red”時的文本</font></p>
</body>
</html>

    本例在瀏覽器中顯示的結(jié)果如下:

最大的標(biāo)題
使用h3的標(biāo)題
最大的標(biāo)題
黑體字文本

斜體字文本

下加一劃線文本

打字機風(fēng)格的文本

引用方式的文本

強調(diào)的文本

加重的文本

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


教程四、圖像標(biāo)志
 
1.<img>
2.<hr>
    再簡單樸素的網(wǎng)頁如果只有文字而沒有圖像的話將失去許多活力,圖像在網(wǎng)頁制作中是非常重要的一個方面,Html語言也專門提供了<img>

標(biāo)志來處理圖像的輸出。

1.<img>
    <img>標(biāo)志并不是真正地把圖像給加入到Html文檔中,而是將標(biāo)志對的src屬性賦值,這個值是圖形文件的文件名,當(dāng)然包括路徑,這個路

徑可以是相對路徑,也可以是網(wǎng)址。實際上就是通過路徑將圖形文件嵌入到您的文檔中。您可能并不知道什么是相對路徑,我現(xiàn)在就來講一講

相對路徑。所謂相對路徑是指您所要鏈接或嵌入到當(dāng)前Html文檔的文件與當(dāng)前文件的相對位置所形成的路徑。假如您的Html文件與圖形文件(文

件名假設(shè)是logo.gif)在同一個目錄下,則可以將代碼寫成<img src="logo.gif">;假如您的圖形文件放在當(dāng)前的Html文檔所在目錄的一個子目

錄(子目錄名假設(shè)是images)下,則代碼應(yīng)為<img src="images/logo.gif">;假如您的圖形文件放在當(dāng)前的Html文檔所在目錄的上層目錄(目錄

名假設(shè)是home)下,則相對路徑就必須是準(zhǔn)網(wǎng)址了,即用“../”表示您的網(wǎng)站,然后在后邊緊跟文件在您的網(wǎng)站中的路徑,假設(shè)home是您的網(wǎng)

站下的一個目錄,則代碼應(yīng)為<img src="../home/logo.gif">,若home是您的網(wǎng)站下的目錄king下邊的一個子目錄,則代碼應(yīng)該變?yōu)?lt;img

src="../king/home/logo.gif">了。現(xiàn)在您對相對路徑應(yīng)該有所了解了吧!
    必須強調(diào)一下,src屬性在<img>標(biāo)志中是必須賦值的,是標(biāo)志中不可缺少的一部分。除此之外,<img>標(biāo)志還有alt、align、border、

width和height屬性。align是圖像的對齊方式,在前邊的教程中已經(jīng)講了很多了,這里就不再提了。border屬性是圖像的邊框,可以取大于或

者等于0的整數(shù),默認(rèn)單位是像素。width和Height屬性是圖像的寬和高,默認(rèn)單位也是象素。alt屬性是當(dāng)鼠標(biāo)移動到圖像上時顯示的文本。

2.<hr>
    <hr>標(biāo)志是在Html文檔中加入一條水平線,它可以直接使用,具有size、color、width和noshade屬性。size是設(shè)置水平線的厚度,而

width是設(shè)定水平線的寬度,默認(rèn)單位是像素。想必大家對color屬性已經(jīng)很熟悉了,在此就不再用多講。noshade屬性不用賦值,而是直接加入

標(biāo)志即可使用,它是用來加入一條沒有陰影的水平線(不加入此屬性水平線將有陰影)。
    下面是本教程的一個綜合例子。

例5 圖像標(biāo)志舉例
<html>
<head>
<title>圖像標(biāo)志的綜合示例</title>
</head>

<body>
<p align="center"><img src="../logo468_60.gif" alt="網(wǎng)頁制作" WIDTH="468" HEIGHT="60"></p>

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

教程五、表格標(biāo)志
 
1.<table></table>
2.<tr></tr><td></td>
3.<th></th>
    表格標(biāo)志對于制作網(wǎng)頁是很重要的,我希望您能記住這一點,現(xiàn)在很多很多網(wǎng)頁都是使用多重表格,主要是因為表格不但可以固定文本或

圖像的輸出,而且還可以任意的進(jìn)行背景和前景顏色的設(shè)置。但愿您也能熟練使用表格來制作您的主頁。

1.<table></table>
    <table></table>標(biāo)志對用來創(chuàng)建一個表格。它有以下屬性:屬性
 用途
 
<table bgcolor=""> 設(shè)置表格的背景色。
<table border=""> 設(shè)置邊框的寬度,若不設(shè)置此屬性,則邊框?qū)挾饶J(rèn)為0。
<table bordercolor=""> 設(shè)置邊框的顏色。
<table bordercolorlight=""> 設(shè)置邊框明亮部分的顏色(當(dāng)border的值大于等于1時才有用)。
<table bordercolordark=""> 設(shè)置邊框昏暗部分的顏色(當(dāng)border的值大于等于1時才有用)。
<table cellspacing="">  設(shè)置表格格子之間空間的大小。
<table cellpadding="">  設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小。
<table width=""> 設(shè)置表格的寬度,單位用絕對像素值或總寬度的百分比。
    說明:以上各個屬性可以結(jié)合使用。有關(guān)寬度、大小的單位用絕對像素值。而有關(guān)顏色的屬性使用十六進(jìn)制RGB顏色碼或Html語言給定的顏

色常量名(如 Silver 為銀色)

2.<tr></tr><td></td>
    <tr></tr>標(biāo)志對用來創(chuàng)建表格中的每一行。此標(biāo)志對只能放在<table></table>標(biāo)志對之間使用,而在此標(biāo)志對之間加入文本將是無用的

,因為在<tr></tr>之間只能緊跟<td></td>標(biāo)志對才是有效的語法,<td></td>標(biāo)志對用來創(chuàng)建表格中一行中的每一個格子,此標(biāo)志對也只有放

在<tr></tr>標(biāo)志對之間才是有效的,您想要輸入的文本也只有放在<td></td>標(biāo)志對中才有效(即才能夠顯示出來)。<table></table>、

<tr></tr>和<td></td>標(biāo)志對的關(guān)系如下所示:

最外層,創(chuàng)建一個表格--> <table>
  創(chuàng)建一行-->  <tr>
    創(chuàng)建一個格子(這里總共創(chuàng)建了三個格子)-->   <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設(shè)置一個表格格子跨占的列數(shù)(缺省值為1);rowspan設(shè)置一個表格格子跨占的行數(shù)(缺

省值為1);nowrap禁止表格格子內(nèi)的內(nèi)容自動斷行。

3.<th></th>
    <th></th>標(biāo)志對用來設(shè)置表格頭,通常是黑體居中文字。

    看一看下邊的例子就明白以上標(biāo)志對的用法了。

例6 表格標(biāo)志的綜合示例
<html>
<head>
<title>表格標(biāo)志的綜合示例</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">曼聯(lián)</td>
    <td width="17%" align="center">紐卡斯?fàn)?lt;/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>

    本例在瀏覽器中顯示的結(jié)果如下:

意大利 英格蘭 西班牙
AC米蘭 佛羅倫薩 曼聯(lián) 紐卡斯?fàn)?巴塞羅那 皇家社會
尤文圖斯 桑普多利亞 利物浦 阿申納 皇家馬德里 ……
拉齊奧 國際米蘭 切爾西 米德爾斯堡 馬德里競技 ……
 


教程六、鏈接標(biāo)志
 
1.<a href=""></a>
2.<a name=""></a>
    教程六的內(nèi)容不是很多,而且很簡單。鏈接是Html語言的一大特色,正因為有了它,我們對內(nèi)容的瀏覽才能夠具有靈活性和網(wǎng)絡(luò)性。

1.<a href=""></a>
    本標(biāo)志對的屬性href是無論如何不可缺少的,標(biāo)志對之間加入需要鏈接的文本或圖像(鏈接圖像即加入<img src="">標(biāo)志)。href的值可以

是URL形式,即網(wǎng)址或相對路徑,也可以是mailto:形式,即發(fā)送E-Mail形式。對于第一種情況,語法為<a href="URL"></a>,這就能創(chuàng)建一個

超文本鏈接了,例如:
    <a href="
http://xld.home.chinaren.net/">這是我的網(wǎng)站</a>
    對于第二種情況,語法為<a href="
mailto:EMAIL"></a>,這就創(chuàng)建了一個自動發(fā)送電子郵件的鏈接,mailto:后邊緊跟想要制動發(fā)送的電

子郵件的地址(即E-Mail地址),例如:
    <a href="
mailto:xiaolida@263.net">這是我的電子信箱(E-Mail信箱)</a>
    此外,<a href=""></a>還具有target屬性,此屬性用來指明瀏覽的目標(biāo)幀,我們將在講幀標(biāo)志時作詳細(xì)的說明,這里您只要知道如果不使

用target屬性,當(dāng)瀏覽者點擊了鏈接之后將在原來的瀏覽器窗口中瀏覽新的Html文檔,若target的值等于“_blank”,點擊鏈接后將會打開一

個新的瀏覽器窗口來瀏覽新的Html文檔。例如:
    <a href="
http://xld.home.chinaren.net/" target="_blank">這是我的網(wǎng)站</a>

2.<a name=""></a>
    <a name=""></a>標(biāo)志對要結(jié)合<a href=""></a>標(biāo)志對使用才有效果。<a name=""></a>標(biāo)志對用來在Html文檔中創(chuàng)建一個標(biāo)簽(即做一個

記號),屬性name是不可缺少的,它的值也即是標(biāo)簽名,例如:
    <a name="標(biāo)簽名">此處創(chuàng)建了一個標(biāo)簽</a>
    創(chuàng)建標(biāo)簽是為了在Html文檔中創(chuàng)建一些鏈接,以便能夠找到同一文檔中的有標(biāo)簽的地方。要找到標(biāo)簽所在地,就必須使用<a href=""></a>

標(biāo)志對。例如要找到“標(biāo)簽名”這個標(biāo)簽,就要編寫如下代碼:
    <a href="#標(biāo)簽名">點擊此處將使瀏覽器跳到“標(biāo)簽名”處</a>
    注意:href屬性賦的值若是標(biāo)簽的名字,必須在標(biāo)簽名前邊加一個“#”號。

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

例7 鏈接標(biāo)志的綜合示例
<html>
<head>
<title>鏈接標(biāo)志的綜合示例</title>
</head>

<body>
<p align="center" style="font-size:9pt;color:yellow;background:black"><br>
<a name="Top"><font color="red">創(chuàng)建標(biāo)簽處</font></a><br>
<br>
<br>
歡迎想要學(xué)習(xí)網(wǎng)頁制作的同學(xué)訪問我的網(wǎng)站<br>
<a href="
http://xld.home.chinaren.net/" target="_blank"><font color="lime">http://xld.home.chinaren.net/</font><br>
<br>
<img src="
http://xld.home.chinaren.net/logo468_60.gif"
alt="歡迎訪問&quot;網(wǎng)頁制作&quot;" border="0" width="468" height="60"></a><br>
<br>
本網(wǎng)站的主要內(nèi)容<br>
<br>
<a href="index_Html.htm" target="_blank">Html教程</a><br>
<br>
<a href="../DHtml/index_DHtml.htm" target="_blank">動態(tài)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:mayong419@126.net"><font color="lime">mayong419@126.net</font></a><br>
<br>
<a href="#Top"><font color="lime">點擊此處回到標(biāo)簽處</font></a><br>
<br>
</p>
</body>
</html>

    本例在瀏覽器中顯示的結(jié)果如下:

創(chuàng)建標(biāo)簽處


歡迎想要學(xué)習(xí)網(wǎng)頁制作的同學(xué)訪問我的網(wǎng)站
http://mayong419.blogchina.com

本網(wǎng)站的主要內(nèi)容

Html教程

動態(tài)Html教程

ASP教程

JavaScript教程

VBScript教程

友情鏈接

我要留言

作者介紹


歡迎給我來信,我的E-Mail是:mayong419@126.com

點擊此處回到標(biāo)簽處

 

教程七、幀標(biāo)志
 
1.<frameset></frameset>
2.<frame>
3.<noframes></noframes>
    幀是由英文Frame翻譯過來的,它可以用來向瀏覽器窗口中裝載多個Html文件。即每個Html文件占據(jù)一個幀,而多個幀可以同時顯示在同一

個瀏覽器窗口中,它們組成了一個最大的幀,也即是一個包含多個Html文檔的Html文件(我稱它為主文檔)。幀通常的使用方法是在一個幀中放

置目錄(即可供選擇的鏈接),然后將Html文件顯示在另一個幀中。

1.<frameset></frameset>
    <frameset></frameset>標(biāo)志對放在幀的主文檔的<body></body>標(biāo)志對的外邊,也可以嵌在其他幀文檔中,并且可以嵌套使用。此標(biāo)志對

用來定義主文檔中有幾個幀并且各個幀是如何排列的。它具有rows和cols屬性,使用<frameset>標(biāo)志時這兩個屬性至少必須選擇一個,否則瀏

覽器只顯示第一個定義的幀,剩下的一概不管,<frameset></frameset>標(biāo)志對也就沒有起到任何作用了。rows用來規(guī)定主文檔中各個幀的行定

位,而cols用來規(guī)定主文檔中各個幀的列定位。這兩個屬性的取值可以是百分?jǐn)?shù)、絕對像素值或星號(“*”),其中星號代表那些未被說明的空

間,如果同一個屬性中出現(xiàn)多個星號則將剩下的未被說明的空間平均分配。同時,所有的幀按照rows和cols的值從左到右,然后從上到下排列

。示例如下:<frameset rows="*,*,*"> 總共有三個按列排列的幀,每個幀占整個瀏覽器窗口的1/3
<frameset cols="40%,*,*"> 總共有三個按行排列的幀,第一個幀占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個幀
<frameset rows="40%,*" cols="50%,*,200"> 總共有六個幀,先是在第一行中從左到右排列三個幀,然后在第二行中從左到右再排列三個幀,即

兩行三列,所占空間依據(jù)rows和cols屬性的值,其中200的單位是像素

2.<frame>
    <frame>標(biāo)志放在<frameset></frameset>之間,用來定義某一個具體的幀。<frame>標(biāo)志具有src和name屬性,這兩個屬性都是必須賦值的

。src是此幀的源Html文件名(包括網(wǎng)絡(luò)路徑,即相對路徑或網(wǎng)址),瀏覽器將會在此幀中顯示src指定的Html文件;name是此幀的名字,這個名字

是用來供超文本鏈接標(biāo)志<a href="" target="">中的target屬性用來指定鏈接的Html文件將顯示在哪一個幀中。例如定義了一個幀,名字是

main,在幀中顯示的Html文件名是jc.htm,則代碼是<frame src="jc.htm" name="main">,當(dāng)您有一個鏈接,在點擊了這個鏈接后,文件

new.htm將要顯示在名為main的幀中,則代碼為<a href="new.htm" target="main">需要鏈接的文本</a>。這樣一來,就可以在一個幀中建立網(wǎng)

站的目錄,加入一系列鏈接,當(dāng)點擊鏈接以后在另一個幀中顯示被鏈接的Html文件。
此外,<frame>標(biāo)志還有scrolling和noresize屬性,scrolling用來指定是否顯示滾動軸,取值可以是“yes”(顯示)、“no”(不顯示)或

“auto”(若需要則會自動顯示,不需要則自動不顯示)。noresize屬性直接加入標(biāo)志中即可使用,不需賦值,它用來禁止用戶調(diào)整一個幀的大小

3.<noframes></noframes>
    <noframes></noframes>標(biāo)志對也是放在<frameset></frameset>標(biāo)志對之間,用來在那些不支持幀的瀏覽器中顯示文本或圖像信息。在此

標(biāo)志對之間先緊跟<body></body>標(biāo)志對,然后才可以使用我們在教程七以前講過的任何標(biāo)志。

    下邊是一個綜合示例:

例8 幀標(biāo)志的綜合示例

主文檔:
<html>
<head>
<title>幀標(biāo)志的綜合示例</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>

若想看此例在瀏覽器中顯示的結(jié)果請點擊在線示例。
 

教程八、表單標(biāo)志
 
1.<form></form>
2.<input type="">
3.<select></select><option>
4.<textarea></textarea>
    表單在Web網(wǎng)頁中用來給訪問者填寫信息,從而能獲得用戶信息,使網(wǎng)頁具有交互的功能。一般是將表單設(shè)計在一個Html文檔中,當(dāng)用戶填

寫完信息后做提交(submit)操作,于是表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上,經(jīng)過服務(wù)器上的 ASP 或 CGI 等處理程序處理后,再

將用戶所需信息傳送回客戶端的瀏覽器上,這樣網(wǎng)頁就具有了交互性。這里我們只講怎樣使用Html標(biāo)志來設(shè)計表單。

1.<form></form>
    <form></form>標(biāo)志對用來創(chuàng)建一個表單,也即定義表單的開始和結(jié)束位置,在標(biāo)志對之間的一切都屬于表單的內(nèi)容。<form>標(biāo)志具有

action、method和target屬性。action的值是處理程序的程序名(包括網(wǎng)絡(luò)路徑:網(wǎng)址或相對路徑),如:<form

action="http://xld.home.chinaren.net/counter.cgi">,當(dāng)用戶提交表單時,服務(wù)器將執(zhí)行網(wǎng)址http://xld.home.chinaren.net/上的名為

counter.cgi的CGI程序。method屬性用來定義處理程序從表單中獲得信息的方式,可取值為 GET 和 POST 的其中一個。GET方式是處理程序從

當(dāng)前Html文檔中獲取數(shù)據(jù),然而這種方式傳送的數(shù)據(jù)量是有所限制的,一般限制在1KB以下。POST方式與GET方式相反,它是當(dāng)前的Html文檔把

數(shù)據(jù)傳送給處理程序,傳送的數(shù)據(jù)量要比使用GET方式的大的多。target屬性用來指定目標(biāo)窗口或目標(biāo)幀。

2.<input type="">
    <input type="">標(biāo)志用來定義一個用戶輸入?yún)^(qū),用戶可在其中輸入信息。此標(biāo)志必須放在<form></form>標(biāo)志對之間。<input type="">標(biāo)

志中共提供了八種類型的輸入?yún)^(qū)域,具體是哪一種類型由type屬性來決定。請看下邊列表:type屬性取值
 輸入?yún)^(qū)域類型
 輸入?yún)^(qū)域示例
 
<input type="TEXT" size="" maxlength=""> 單行的文本輸入?yún)^(qū)域,size與maxlength屬性用來定義此種輸入?yún)^(qū)域顯示的尺寸大小與輸入的最大

字符數(shù)
 
<input type="SUBMIT"> 將表單內(nèi)容提交給服務(wù)器的按鈕
 
<input type="RESET"> 將表單內(nèi)容全部清除,重新填寫的按鈕
 
<input type="CHECKBOX" checked> 一個復(fù)選框,checked屬性用來設(shè)置該復(fù)選框缺省時是否被選中,右邊示例中使用了三個復(fù)選框 你喜歡哪些

教程:
Html入門動態(tài)HtmlASP
 
<input type="HIDDEN"> 隱藏區(qū)域,用戶不能在其中輸入,用來預(yù)設(shè)某些要傳送的信息  
<input type="IMAGE" src="URL"> 使用圖像來代替Submit按鈕,圖像的源文件名由src屬性指定,用戶點擊后,表單中的信息和點擊位置的X、Y坐

標(biāo)一起傳送給服務(wù)器
 
<input type="PASSWARD"> 輸入密碼的區(qū)域,當(dāng)用戶輸入密碼時,區(qū)域內(nèi)將會顯示"*"號 請輸入您的密碼:
 
<input type="RADIO"> 單選按鈕類型,checked屬性用來設(shè)置該單選框缺省時是否被選中,右邊示例中使用了三個單選框 10月3日中韓國奧隊比

賽結(jié)果會是:
中國勝平局韓國勝
 

此外,八種類型的輸入?yún)^(qū)域有一個公共的屬性name,此屬性給每一個輸入?yún)^(qū)域一個名字。這個名字與輸入?yún)^(qū)域是一一對應(yīng)的,即一個輸入?yún)^(qū)域

對應(yīng)一個名字。服務(wù)器就是通過調(diào)用某一輸入?yún)^(qū)域的名字的value屬性來獲得該區(qū)域的數(shù)據(jù)的。而value屬性是另一個公共屬性,它可用來指定

輸入?yún)^(qū)域的缺省值。

3.<select></select><option>
    <select></select>標(biāo)志對用來創(chuàng)建一個下拉列表框或可以復(fù)選的列表框。此標(biāo)志對用于<form></form>標(biāo)志對之間。<select>具有

multiple、name和size屬性。multiple屬性不用賦值,直接加入標(biāo)志中即可使用,加入了此屬性后列表框就成了可多選的了;name是此列表框

的名字,它與上邊講的name屬性作用是一樣的;size屬性用來設(shè)置列表的高度,缺省時值為1,若沒有設(shè)置(加入)multiple屬性,顯示的將是一

個彈出式的列表框。
    <option>標(biāo)志用來指定列表框中的一個選項,它放在<select></select>標(biāo)志對之間。此標(biāo)志具有selected和value屬性,selected用來指

定默認(rèn)的選項,value屬性用來給<option>指定的那一個選項賦值,這個值是要傳送到服務(wù)器上的,服務(wù)器正是通過調(diào)用<select>區(qū)域的名字的

value屬性來獲得該區(qū)域選中的數(shù)據(jù)項的。請看下例:

Html代碼 瀏覽器顯示的結(jié)果
<form action="cgi-bin/tongji.cgi" method="post">
  <p>請選擇最喜歡的男歌星:
  <select name="gx1" size="1">
    <option value="ldh">劉德華
    <option value="zhxy" selected>張學(xué)友
    <option value="gfch">郭富城
    <option value="lm">黎明
  </select>
</form> 請選擇最喜歡的男歌星:
 劉德華 張學(xué)友 郭富城 黎明
 
<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>用來創(chuàng)建一個可以輸入多行的文本框,此標(biāo)志對用于<form></form>標(biāo)志對之間。<textarea>具有name、cols和

rows屬性。cols和rows屬性分別用來設(shè)置文本框的列數(shù)和行數(shù),這里列與行是以字符數(shù)為單位的。請看下邊的例子:

Html代碼 瀏覽器顯示的結(jié)果
<form action="cgi-bin/tongji.cgi" method="post">
  <p>您的意見對我很重要:
  <textarea name="yj" clos="20" rows="5">
        請將意見輸入此區(qū)域
  </textarea>
</form> 您的意見對我很重要: 請將意見輸入此區(qū)域
 
 
Html4.0 參考


--------------------------------------------------------------------------------
基本標(biāo)志
 
<html></html> 創(chuàng)建一個HTML文檔
<head></head> 設(shè)置文檔標(biāo)題和其它在網(wǎng)頁中不顯示的信息
<body></body> 設(shè)置文檔的主體部分

文檔整體屬性標(biāo)志
 
<body bgcolor=""> 設(shè)置背景顏色。使用名字或RGB的十六進(jìn)制值  
<body text=""> 設(shè)置文本顏色。使用名字或RGB的十六進(jìn)制值
<body link=""> 設(shè)置鏈接顏色。使用名 字或RGB的十六進(jìn)制值
<body vlink=""> 設(shè)置已使用的鏈接的顏色。使用名字或RGB的十六進(jìn)制值   
<body alink=""> 設(shè)置正在被擊中的鏈接的顏色。使用名字或RGB的十六進(jìn)制值

圖像標(biāo)志
 
<img src="name">
 在HTML文檔中嵌入一個圖像
<img src="name" align=""> 排列對齊一個圖像:左、中、右或上、中、下
<img src="name" border=""> 設(shè)置圖像的邊框的大小
<hr> 加入一條水平線
<hr size=""> 設(shè)置水平線的厚度
<hr width=""> 設(shè)置水平線的寬度。可以是百分比或絕對像素點
<hr noshade> 沒有陰影的水平線

表格標(biāo)志
 
<table></table> 創(chuàng)建一個表格
<tr></tr> 表格中的每一行
<td></td> 表格中一行中的每一個格子
<th></th> 設(shè)置表格頭:通常是黑體居中文字
<table border=""> 設(shè)置邊框的寬度
<table cellspacing="">  設(shè)置表格格子之間空間的大小
<table cellpadding="">  設(shè)置表格格子邊框與其內(nèi)部內(nèi)容之間空間的大小
<table width=""> 設(shè)置表格的寬度。用絕對像素值或總寬度的百分比 
<tr align=""> 設(shè)置表格格子的水平對齊方式(左中右)
<tr valign=""> 設(shè)置表格格子的垂直對齊方式(上中下)
<td colspan=""> 設(shè)置一個表格格子跨占的列數(shù)(缺省值為1)  
<td rowspan=""> 設(shè)置一個表格格子跨占的行數(shù)(缺省值為1)  
<td nowrap> 禁止表格格子內(nèi)的內(nèi)容自動斷行
 
 標(biāo)題標(biāo)志
 
<title></title>  將文檔的題目放在瀏覽器的標(biāo)題欄中

文本標(biāo)志
 
<pre></pre> 預(yù)先格式化文本
<h1></h1> 最大的標(biāo)題
<h6></h6> 最小的標(biāo)題
<b></b> 黑體字 
<i></i> 斜體字
<tt></tt> 打字機風(fēng)格的字體
<cite></cite> 引用,通常是斜體
<em></em> 強調(diào)文本(通常是斜體加黑體)
<strong></strong> 加重文本(通常是斜體加黑體)
<font size=""></font> 設(shè)置字體大小,從1到7
<font color=""></font> 設(shè)置字體的顏色,使用名字或RGB的十六進(jìn)制值

鏈接標(biāo)志
 
<a href="URL"></a> 創(chuàng)建超文本鏈接
<a href="
mailto:EMAIL">
</a> 創(chuàng)建自動發(fā)送電子郵件的鏈接
<a name="name"></a> 創(chuàng)建位于文檔內(nèi)部的書簽
<a href="#name"></a>  創(chuàng)建指向位于文檔內(nèi)部書簽的鏈接

幀標(biāo)志
 
<frameset></frameset> 放在一個幀文檔的<body>標(biāo)簽之前,也可以嵌在其他幀文檔中 
<frameset rows="value,value"> 定義一個幀內(nèi)的行數(shù),可以使用絕對像素值或高度的百分比 
<frameset cols="value,value"> 定義一個幀內(nèi)的列數(shù),可以使用絕對像素值或?qū)挾鹊陌俜直?
<frame> 定義一個幀內(nèi)的單一窗或窗區(qū)域 
<noframes></noframes>  定義在不支持幀的瀏覽器中顯示什么提示
<frame src="URL"> 規(guī)定幀內(nèi)顯示的HTML文檔
<frame name="name"> 命名幀或區(qū)域以便別的幀可以指向它
<frame marginwidth=""> 定義幀左右邊緣的空白大小,必須大于等于1
<frame marginheight="">  定義幀上下邊緣的空白大小,必須大于等于1
<frame scrolling=""> 設(shè)置幀是否有滾動欄,其值可以是"yes","no" 或"auto"
<frame noresize> 禁止用戶調(diào)整一個幀的大小 
 

 
 格式標(biāo)志
 
<p></p> 創(chuàng)建一個段落
<p align="">  將段落按左、中、右對齊  
<br> 插入一個回車換行符
<blockquote></blockquote> 從兩邊縮進(jìn)文本
<dl></dl> 定義列表
<dt> 放在每個定義術(shù)語詞前
<dd> 放在每個定義之前
<ol></ol> 創(chuàng)建一個標(biāo)有數(shù)字的列表
<ul></ul> 創(chuàng)建一個標(biāo)有圓點的列表
<li> 放在每個列表項之前,若在<ol></ol>之間則每個列表項加上一個數(shù)字,若在<ul></ul>之間則每個列表項加上一個圓點     
<div align=""></div> 用來排版大塊HTML段落,也用于格式化表

表單標(biāo)志
 
<form></form> 創(chuàng)建表單
<select multiple name="name" size=""></select> 創(chuàng)建滾動菜單,size設(shè)置在需要滾動前可以看到的表單項數(shù)目
<option> 設(shè)置每個表單項的內(nèi)容
<select name="name"></select> 創(chuàng)建下拉菜單
<option> 設(shè)置每個菜單項的內(nèi)容
<textarea name="name" cols=40 rows=8></textarea> 創(chuàng)建一個文本框區(qū)域,列的數(shù)目設(shè)置寬度,行的數(shù)目設(shè)置高度
<input type="checkbox" name="name"> 創(chuàng)建一個復(fù)選框,文字在標(biāo)簽后面
<input type="radio" name="name" value=""> 創(chuàng)建一個單選框,文字在標(biāo)志后面
<input type=text name="foo" size=20> 創(chuàng)建一個單行文本輸入?yún)^(qū)域,size設(shè)置以字符串的寬度
<input type="submit" value="name"> 創(chuàng)建提交(submit)按鈕
<input type="image" border=0 name="name" src="name.gif"> 創(chuàng)建一個使用圖象的提交(submit)按鈕
<input type="reset"> 創(chuàng)建重置(reset)按鈕


1.讀萬卷書
2.行千里路
3.閱人無數(shù)