HTML代碼教程
教程一、基本標(biāo)志
1.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
Html是英文 HyperText Markup Language 的縮寫(xiě)，中文意思是“超文本標(biāo)志語(yǔ)言”，用它編寫(xiě)的文件(文檔)的擴(kuò)展名是.html或.htm，它們是可供瀏覽器解釋瀏覽的文件格式。您可以使用記事本、寫(xiě)字板或 FrontPage Editor 等編輯工具來(lái)編寫(xiě)Html文件。Html語(yǔ)言使用標(biāo)志對(duì)的方法編寫(xiě)文件，既簡(jiǎn)單又方便，它通常使用<標(biāo)志名></標(biāo)志名>來(lái)表示標(biāo)志的開(kāi)始和結(jié)束(例如<html></html>標(biāo)志對(duì))，因此在Html文檔中這樣的標(biāo)志對(duì)都必須是成對(duì)使用的。在此教程中，我先講一下Html的基本標(biāo)志：
1.<html></html>
<html>標(biāo)志用于Html文檔的最前邊，用來(lái)標(biāo)識(shí)Html文檔的開(kāi)始。而</html>標(biāo)志恰恰相反，它放在Html文檔的最后邊，用來(lái)標(biāo)識(shí)Html文檔的結(jié)束，兩個(gè)標(biāo)志必須一塊使用。
2.<head></head>
<head>和</head>構(gòu)成Html文檔的開(kāi)頭部分，在此標(biāo)志對(duì)之間可以使用<title>< /title>、<script></script>等等標(biāo)志對(duì)，這些標(biāo)志對(duì)都是描述Html文檔相關(guān)信息的標(biāo)志 對(duì)，<head></head>標(biāo)志對(duì)之間的內(nèi)容是不會(huì)在瀏覽器的框內(nèi)顯示出來(lái)的。兩個(gè)標(biāo)志必須一塊使用。
3.<body></body>
<body></body>是Html文檔的主體部分，在此標(biāo)志對(duì)之間可包含<p>、< /p>、<h1>、</h1>、<br>、<hr>等等眾多的標(biāo)志，它們所定義的文本、圖像等將 會(huì)在瀏覽器的框內(nèi)顯示出來(lái)。兩個(gè)標(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">
說(shuō)明:以上各個(gè)屬性可以結(jié)合使用，如<body bgcolor="red" text="#0000ff">。引號(hào)內(nèi)的rrggbb是 用六個(gè)十六進(jìn)制數(shù)表示的RGB(即紅、綠、藍(lán)三色的組合)顏色，如#ff0000對(duì)應(yīng)的是紅色。此外，還可以使用Html語(yǔ)言所給定的常量名來(lái)表示顏 色：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、 Fuchsia、Silver、Red、Blue和Teal，如<body text="Blue">表示<body></body>標(biāo)志對(duì)中的文本使用藍(lán)色顯示在瀏覽器的框內(nèi)。
4.<title></title>
使用過(guò)瀏覽器的人可能都會(huì)注意到瀏覽器窗口最上邊藍(lán)色部分顯示的文本信息，那些信息一般是網(wǎng)頁(yè)的“主題”，要將您的網(wǎng)頁(yè)的主題顯示到瀏覽器的頂部其實(shí)很簡(jiǎn) 單，只要在<title></title>標(biāo)志對(duì)之間加入您要顯示的文本即可。注意：<title>< /title>標(biāo)志對(duì)只能放在<head></head>標(biāo)志對(duì)之間。
下面是一個(gè)綜合的例子，仔細(xì)閱讀，您便可以了解以上各個(gè)標(biāo)志對(duì)在一個(gè)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>
上一個(gè)教程中我們講了Html文檔的基本標(biāo)志，但我們還不知道怎樣在瀏覽器中顯示文本之類(lèi)的東西，這正是我們?cè)诮坛潭袑⒁劦降摹Ｔ趯W(xué)習(xí)之前，必須強(qiáng)調(diào) 一下，我們這個(gè)教程中所講的格式標(biāo)志統(tǒng)統(tǒng)都是用于<body></body>標(biāo)志對(duì)之間的。
1.<p></p>
<p></p>標(biāo)志對(duì)是用來(lái)創(chuàng)建一個(gè)段落，在此標(biāo)志對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。另外，<p>標(biāo)志還可以使用align屬性，它用來(lái)說(shuō)明對(duì)齊方式，語(yǔ)法是：<p align=""></p>。align可以是Left(左對(duì)齊)、Center(居中)和Right(右對(duì)齊)三個(gè)值中的任何一個(gè)。如<p></p>表示標(biāo)志對(duì)中的文本使用居中的對(duì)齊方式。
2.<br>
<br>是一個(gè)很簡(jiǎn)單的標(biāo)志，它沒(méi)有結(jié)束標(biāo)志，因?yàn)樗脕?lái)創(chuàng)建一個(gè)回車(chē)換行，這么一說(shuō)我想您該會(huì)使用了吧。在<br>的使用上還有一定的技巧，如果您把<br>加在<p></p>標(biāo)志對(duì)的外邊，將創(chuàng)建一個(gè)大的回車(chē)換行，即<br>前邊和后邊的文本的行與行之間的距離比較大，若放在<p></p>的里邊則<br>前邊和后邊的文本的行與行之間的距離將比較小，您不妨試試看。
3.<blockquote></blockquote>
在<blockquote></blockquote>標(biāo)志對(duì)之間加入的文本將會(huì)在瀏覽器中按兩邊縮進(jìn)的方式顯示出來(lái)。
4.<dl></dl><dt></dt><dd></dd>
<dl></dl>用來(lái)創(chuàng)建一個(gè)普通的列表，<dt></dt>用來(lái)創(chuàng)建列表中的上層項(xiàng)目，<dd></dd>用來(lái)創(chuàng)建列表中最下層項(xiàng)目，<dt></dt>和<dd></dd>都必須放在<dl></dl>標(biāo)志對(duì)之間。看一下下邊的例子您就會(huì)明白了：
例2 創(chuàng)建一個(gè)普通列表
<html>
<head>
<title>一個(gè)普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中國(guó)城市</dt>
<dd>北京 </dd>
<dd>上海 </dd>
<dd>廣州 </dd>
<dt>美國(guó)城市</dt>
<dd>華盛頓 </dd>
<dd>芝加哥 </dd>
<dd>紐約 </dd>
</dl>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國(guó)城市
北京
上海
廣州
美國(guó)城市
華盛頓
芝加哥
紐約
5.<ol></ol><ul></ul><li></li>
<ol></ol>標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表；<ul></ul>標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表；<li></li>標(biāo)志對(duì)只能在<ol></ol>或<ul></ul>標(biāo)志對(duì)之間使用，此標(biāo)志對(duì)用來(lái)創(chuàng)建一個(gè)列表項(xiàng)，若<li></li>放在<ol></ol>之間則每個(gè)列表項(xiàng)加上一個(gè)數(shù)字，若在<ul></ul>之間則每個(gè)列表項(xiàng)加上一個(gè)圓點(diǎn)。請(qǐng)看下邊的例子：
例3 標(biāo)有數(shù)字或圓點(diǎn)的列表
<html>
<head>
<title></title>
</head>
<body text="blue">
<ol>
<p>中國(guó)城市 </p>
<li>北京 </li>
<li>上海 </li>
<li>廣州 </li>
</ol>
<ul>
<p>美國(guó)城市 </p>
<li>華盛頓 </li>
<li>芝加哥 </li>
<li>紐約 </li>
</ul>
</body>
</html>
此例在瀏覽器中的顯示如下:
中國(guó)城市
1. 北京
2. 上海
3. 廣州
美國(guó)城市
? 華盛頓
? 芝加哥
? 紐約
6.<div></div>
<div></div>標(biāo)志對(duì)用來(lái)排版大塊Html段落，也用于格式化表，此標(biāo)志對(duì)的用法與<p></p>標(biāo)志對(duì)非常相似，同樣有align對(duì)齊方式屬性，讀者可以自己試試看。
教程三、文本標(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>
上一個(gè)教程中我們已經(jīng)講了如何在瀏覽器中輸出文本，以及文本輸出的格式，這個(gè)教程中我們將談一談文本輸出的字體，如斜體、黑體字、下加一劃線(xiàn)等等。在本教程的最后給出了一個(gè)文本標(biāo)志的綜合示例，希望讀者能認(rèn)真閱讀。
湘公網(wǎng)安備:43011102000856號(hào) 
點(diǎn)擊加載更多評(píng)論>>