快捷導(dǎo)航

HTML 30分鐘入門(mén)教程

更新時(shí)間：2007年03月30日 00:00:00 作者：

運(yùn)行下面的代碼就可以了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh" xml:lang="zh"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />     <meta http-equiv="Content-Language" content="zh-CN" />     <title>HTML 30分鐘入門(mén)教程</title>     <meta name="keywords" content="HTML,網(wǎng)頁(yè),網(wǎng)頁(yè)制作,教程,入門(mén)" />     <meta name="description" content="30分鐘內(nèi)讓你明白HTML是什么，并對(duì)它有一些基本的了解。一旦入門(mén)后，你可以從網(wǎng)上找到更多更詳細(xì)的資料來(lái)繼續(xù)學(xué)習(xí)。" />     <meta name="author" content="deerchao" />     <style type="text/css">             h1 {text-align:center}             p {text-indent:2em; line-height:140%; margin:auto 10px}             span {margin:3px}             .code { border:solid 1px gray; background-color:#eee}             .name { font-weight:bold }             dl {margin-left:20px}             dt {font-weight:bold}             .trans {color:red}     </style>  </head> <body language="javascript" onload="return window_onload()"> <h1>HTML 30分鐘入門(mén)教程</h1> <p style="text-align:center">作者：deerchao 來(lái)源:<a href="http://www.unibetter.com">unibetter大學(xué)生社區(qū)</a> 轉(zhuǎn)載請(qǐng)注明來(lái)源</p> <h2>本文目標(biāo)</h2> <p>30分鐘內(nèi)讓你明白HTML是什么，并對(duì)它有一些基本的了解。一旦入門(mén)后，你可以從網(wǎng)上找到更多更詳細(xì)的資料來(lái)繼續(xù)學(xué)習(xí)。</p> <h2>什么是HTML</h2> <p>HTML是英文Hyper Text Mark-up Language(超文本標(biāo)記語(yǔ)言)的縮寫(xiě)，它規(guī)定了自己的語(yǔ)法規(guī)則，用來(lái)表示比"文本"更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE,FireFox等）軟件知道HTML語(yǔ)言的語(yǔ)法，可以用來(lái)查看HTML文檔。目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁(yè)都是使用HTML編寫(xiě)的。</p> <h2>HTML是什么樣的</h2> <p>簡(jiǎn)單地來(lái)說(shuō)，HTML的語(yǔ)法就是給文本加上表明文本含義的<span id="ublnpf9mb"    class="name">標(biāo)簽</span>(Tag)，讓用戶(hù)（人或程序）能對(duì)文本得到更好的理解。</p> <p>下面是一個(gè)最簡(jiǎn)單的HTML文檔：</p> <div   id="ublnpf9mb"   class="code"> &lt;html&gt;     &nbsp; &lt;head&gt;     &nbsp; &nbsp; &lt;title&gt;第一個(gè)Html文檔&lt;/title&gt;     &nbsp; &lt;/head&gt;     &nbsp; &lt;body&gt;     &nbsp; &nbsp; 歡迎訪問(wèn)&lt;a &gt;Unibetter大學(xué)生社區(qū)&lt;/a&gt;!     &nbsp; &lt;/body&gt;&lt;/html&gt; </div> <p>     所有的HTML文檔都應(yīng)該有一個(gè)&lt;html&gt;標(biāo)簽，&lt;html&gt;標(biāo)簽可以包含兩個(gè)部分:&lt;head&gt;和&lt;body&gt;。</p> <p>     &lt;head&gt;標(biāo)簽用于包含整個(gè)文檔的一般信息，比如文檔的標(biāo)題（&lt;title&gt;標(biāo)簽用于包含標(biāo)題），對(duì)整個(gè)文檔的描述，文檔的關(guān)鍵字等等。文檔的具體內(nèi)容就要放在&lt;body&gt;標(biāo)簽里了。</p>  <p>&lt;a&gt;標(biāo)簽用于表示鏈接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時(shí)，點(diǎn)擊&lt;a&gt;標(biāo)簽括起來(lái)的內(nèi)容時(shí)，通常會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面。這個(gè)要跳轉(zhuǎn)到的頁(yè)面的地址由&lt;a&gt;標(biāo)簽的href屬性指定。上面的&lt;a &gt;中，href屬性的值就是http://www.unibetter.com。</p> <h2>HTML文檔可以包含的內(nèi)容</h2> <p>通過(guò)不同的標(biāo)簽，HTML文檔可以包含不同的內(nèi)容，比如文本，鏈接，圖片，列表，表格，表單，框架等。</p> <dl> <dt>文本</dt> <dd>HTML對(duì)文本的支持是最豐富的，你可以設(shè)置不同級(jí)別的標(biāo)題，分段和換行，可以指定文本的語(yǔ)義和外觀，可以說(shuō)明文本是引用自其它的地方，等等等等。</dd> <dt>鏈接</dt> <dd>鏈接用來(lái)指出內(nèi)容與另一個(gè)頁(yè)面或當(dāng)前頁(yè)面某個(gè)地方有關(guān)。</dd> <dt>圖片</dt> <dd>圖片用于使頁(yè)面更加美觀，或提供更多的信息。</dd> <dt>列表</dt> <dd>列表用于說(shuō)明一系列條目是彼此相關(guān)的。</dd> <dt>表格</dt> <dd>表格是按行與列將數(shù)據(jù)組織在一起的形式。也有不少人使用表格進(jìn)行頁(yè)面布局。</dd> <dt>表單</dt> <dd>表單通常由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁(yè)面更有交互性。</dd> <dt>框架</dt> <dd>框架使頁(yè)面里能包含其它的頁(yè)面。</dd> </dl> <h2>HTML文檔格式詳細(xì)說(shuō)明</h2> <p>前面介紹了HTML文檔的基本格式，下面再做一個(gè)詳細(xì)說(shuō)明。</p> <p>HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創(chuàng)建，編輯，因?yàn)樗膬?nèi)容在本質(zhì)也只是一些文本。</p> <p>在HTML文本中，用尖括號(hào)括起來(lái)的部分稱(chēng)為標(biāo)簽。如果想在正文里使用尖括號(hào)（或者大與號(hào)小與號(hào)，總之是同一個(gè)東西），必須使用<span id="ublnpf9mb"    class="name">字符轉(zhuǎn)義</span>，也就是說(shuō)轉(zhuǎn)換字符的原有意義。&lt;應(yīng)該使用<span id="ublnpf9mb"    class="trans">&amp;lt;</span>代替，&gt;則使用<span id="ublnpf9mb"    class="trans">&amp;gt;</span>，至于&amp;符號(hào)本身,則應(yīng)該使用<span id="ublnpf9mb"    class="trans">&amp;amp;</span>替代（不得不說(shuō)的是有很多HTML文檔沒(méi)有遵循這個(gè)規(guī)則，常用的瀏覽器也都能夠分析出&到底是一個(gè)轉(zhuǎn)義的開(kāi)始，還是一個(gè)符號(hào)，但是這樣做是不推薦的）。</p> <p>標(biāo)簽本質(zhì)上是對(duì)它所包含的內(nèi)容的說(shuō)明，可能會(huì)有屬性，來(lái)給出更多的信息。比如&lt;img&gt;（圖片）標(biāo)簽有src屬性（用于指明圖片的地址），width和height屬性（用于說(shuō)明圖片的寬度和高度）。HTML里能使用哪些標(biāo)簽，這些標(biāo)簽分別可以擁有哪些屬性，這些都是有規(guī)定的，知道了這里說(shuō)的基本知識(shí)之后，學(xué)習(xí)HTML其實(shí)也就是學(xué)習(xí)這些標(biāo)簽了。本文后面會(huì)對(duì)常用的HTML標(biāo)簽做出簡(jiǎn)短的介紹。</p> <p>標(biāo)簽通常有開(kāi)始部分和結(jié)束部分（也被稱(chēng)為開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽），它們一起限定了這個(gè)標(biāo)簽所包含的內(nèi)容。屬性只能在開(kāi)始標(biāo)簽中指定，屬性值可以用單引號(hào)或雙引號(hào)括起來(lái)。結(jié)束標(biāo)簽都以/加上標(biāo)簽名來(lái)表示。有時(shí)候，有些標(biāo)簽并不包含其它內(nèi)容（只包括自己的屬性，甚至連屬性都沒(méi)有），這種情況下，可以寫(xiě)成類(lèi)似這樣：&lt;img src="logo.gif" /&gt;。注意最后的一個(gè)空格和一個(gè)反斜杠，它說(shuō)明這個(gè)標(biāo)簽已經(jīng)結(jié)束，不需要單獨(dú)的結(jié)束標(biāo)簽了。</p> <p>某些標(biāo)簽包含的內(nèi)容中還可以有新的標(biāo)簽，新的標(biāo)簽名甚至可能還可以與包含它的標(biāo)簽的名稱(chēng)相同（哪些標(biāo)簽可以包含標(biāo)簽，可以包含哪些標(biāo)簽也是有規(guī)定的）。比如：</p> <div   id="ublnpf9mb"   class="code"> &lt;div&gt;&nbsp; &lt;div&gt;分類(lèi)目錄...&lt;/div&gt;&nbsp; &lt;div&gt;當(dāng)前分類(lèi)內(nèi)容列表...&lt;/div&gt;&lt;/div&gt; </div> <p>在這種情況下，最后出現(xiàn)的標(biāo)簽應(yīng)該最先結(jié)束。</p> <p>HTML文檔里所有的空白符（空格，Tab，換行，回車(chē)）會(huì)被瀏覽器忽略，唯一的例外是空格，對(duì)空格的處理方式是所有連續(xù)的空格被當(dāng)成一個(gè)空格，不管有一個(gè)，還是兩個(gè)，還是100個(gè)。之所以有這樣的規(guī)則是因?yàn)楹雎钥瞻追茏屖褂肏TML的作者以他覺(jué)得最方便的格式來(lái)排列內(nèi)容，比如可以在每個(gè)標(biāo)簽開(kāi)始后增加縮進(jìn)，標(biāo)簽結(jié)束后減少縮進(jìn)。由于英語(yǔ)文本中空格用得很普遍（用于分隔單詞），所以對(duì)空格做了這樣的特殊處理。如果要顯示連續(xù)的空格（比如為了縮進(jìn)），應(yīng)該用<span id="ublnpf9mb"    class="trans">&amp;nbsp;</span>來(lái)代表空格。</p> <h2>常用標(biāo)簽介紹</h2> <h3>     文本</h3> <p>最常用的標(biāo)簽可能是&lt;font&gt;了，它用于改變字體，字號(hào)，文字顏色。</p> <div   id="ublnpf9mb"   class="code"> &lt;font size="6"&gt;6&lt;/font&gt;&lt;font size="4"&gt;4&lt;/font&gt;&lt;font color="red" size="5"&gt;紅色的5&lt;/font&gt;&lt;font face="黑體"&gt;黑體的字&lt;/font&gt; </div> <p>加粗，下劃線，斜體字也是常用的文字效果，它們分別用&lt;b&gt;,&lt;u&gt;,&lt;i&gt;表示：</p> <div   id="ublnpf9mb"   class="code"> &lt;b&gt;Bold&lt;/b&gt;&lt;i&gt;italic&lt;/i&gt;&lt;u&gt;underline&lt;/u&gt; </div> <p>還有一些標(biāo)簽，用來(lái)指出包含的文本有特殊的意義，比如&lt;abbr&gt;（表示縮寫(xiě)），&lt;em&gt;（表示強(qiáng)調(diào)），&lt;strong&gt;（表示更強(qiáng)地強(qiáng)調(diào)）,&lt;cite&gt;（表示引用），&lt;address&gt;（表示地址）等等。這些標(biāo)簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒(méi)有任何效果，也可能不同的瀏覽器對(duì)這些標(biāo)簽的顯示效果完全不同。</p> <p>一篇很長(zhǎng)的文章，如果有合適的小標(biāo)題的話(huà)，就可以快速地對(duì)它的內(nèi)容進(jìn)行大致的了解。在HTML里，用來(lái)表示標(biāo)題的標(biāo)簽有：&lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt;，它們分別表示一級(jí)標(biāo)題，二級(jí)標(biāo)題，三級(jí)標(biāo)題...</p> <div   id="ublnpf9mb"   class="code"> &lt;h1&gt;HTML 30分鐘教程&lt;/h1&gt;&lt;h2&gt;什么是HTML&lt;/h2&gt;...&lt;h2&gt;HTML是什么樣的&lt;/h2&gt;... </div> <h3>     圖片</h3> <p>     &lt;hr&gt;標(biāo)簽用于在頁(yè)面上添加橫線?？梢酝ㄟ^(guò)指定width和color屬性來(lái)控制橫線的長(zhǎng)度和顏色。</p> <div   id="ublnpf9mb"   class="code"> &lt;hr width="90%" color="red" /&gt; </div> <p>&lt;img&gt;標(biāo)簽用于在頁(yè)面上添加圖片，src屬性指定圖片的地址，如果無(wú)法打開(kāi)src指定的圖片，瀏覽器通常會(huì)在頁(yè)面上需要顯示圖片的地方顯示alt屬性定義的文本。</p> <div   id="ublnpf9mb"   class="code"> &lt;img src="http://www.w3.org/Icons/valid-xhtml10" alt="圖片簡(jiǎn)介" /&gt; </div> <h3>     鏈接</h3> <p>超級(jí)鏈接用&lt;a&gt;標(biāo)簽表示，href屬性指定了鏈接到的地址。&lt;a&gt;標(biāo)簽可以包含文本，也可以包含圖片。</p> <div   id="ublnpf9mb"   class="code"> &lt;a &gt;Unibetter大學(xué)生論壇&lt;/a&gt;&lt;a &gt;&lt;img src="http://www.w3.org/Icons/valid-xhtml10" alt="驗(yàn)證HTML" /&gt;&lt;/a&gt; </div> <h3>分段與換行</h3> <p>由于HTML文檔會(huì)忽略空白符，所以要想保證正常的分段換行的話(huà)，必須指出哪些文字是屬于同一段落的，這就用到了標(biāo)簽&lt;p&gt;。</p> <div   id="ublnpf9mb"   class="code"> &lt;p&gt;這是第一段。&lt;/p&gt;&lt;p&gt;這是第二段。&lt;/p&gt; </div> <p>也有人不用&lt;p&gt;，而用&lt;br&gt;。&lt;br&gt;只表示換行，不表示段落的開(kāi)始或結(jié)束，所以通常沒(méi)有結(jié)束標(biāo)簽。</p> <div   id="ublnpf9mb"   class="code"> 這是第一段。&lt;br&gt;這是第二段。&lt;br /&gt;這是第三段。 </div> <p>有時(shí)，要把文檔看作不同的部分組合起來(lái)的，比如一個(gè)典型的頁(yè)面可能包括三個(gè)部分：頁(yè)頭，主體，頁(yè)腳。&lt;div&gt;標(biāo)簽專(zhuān)門(mén)用于標(biāo)明不同的部分：</p> <div   id="ublnpf9mb"   class="code"> &lt;div&gt;頁(yè)頭內(nèi)容&lt;/div&gt;&lt;div&gt;主體內(nèi)容&lt;/div&gt;&lt;div&gt;頁(yè)腳內(nèi)容&lt;/div&gt; </div> <h3>表格</h3> <p>HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動(dòng)換行。為了實(shí)現(xiàn)分欄的效果，很多人使用表格（&lt;table&gt;）進(jìn)行頁(yè)面排版（雖然HTML里提供表格的本意不是為了排版）。</p> <p>&lt;table&gt;標(biāo)簽里通常會(huì)包含幾個(gè)&lt;tr&gt;標(biāo)簽，&lt;tr&gt;代表表格里的一行。&lt;tr&gt;標(biāo)簽又會(huì)包含&lt;td&gt;標(biāo)簽，每個(gè)&lt;td&gt;代表一個(gè)單元格。</p> <div   id="ublnpf9mb"   class="code"> &lt;table&gt;&nbsp; &lt;tr&gt;&nbsp;&nbsp;&nbsp; &lt;td&gt;2000&lt;/td&gt;&lt;td&gt;悉尼&lt;/td&gt;&nbsp; &lt;/tr&gt;&nbsp; &lt;tr&gt;&nbsp;&nbsp;&nbsp; &lt;td&gt;2004&lt;/td&gt;&lt;td&gt;雅典&lt;/td&gt;&nbsp; &lt;/tr&gt;&nbsp; &lt;tr&gt;&nbsp;&nbsp;&nbsp; &lt;td&gt;2008&lt;/td&gt;&lt;td&gt;北京&lt;/td&gt;&nbsp; &lt;/tr&gt;&lt;/table&gt; </div> <p>&lt;tr&gt;標(biāo)簽還可以被&lt;table&gt;里的&lt;thead&gt;或&lt;tbody&gt;或&lt;tfoot&gt;包含。它們分別代表表頭，表正文，表腳。在打印網(wǎng)頁(yè)的時(shí)候，如果表格很大，一頁(yè)打印不完，&lt;thead&gt;和&lt;tfoot&gt;將在每一頁(yè)出現(xiàn)。</p> <p>&lt;th&gt;和&lt;td&gt;非常相似，也用在&lt;tr&gt;里邊，不同的是&lt;th&gt;代表這個(gè)單元格是它所在的行或列的標(biāo)題。</p> <div   id="ublnpf9mb"   class="code"> &lt;table&gt;&nbsp; &lt;thead&gt;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;th&gt;時(shí)間&lt;/th&gt;&lt;th&gt;地點(diǎn)&lt;/th&gt;&lt;/tr&gt;&nbsp; &lt;/thead&gt;&nbsp; &lt;tbody&gt;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;2000&lt;/td&gt;&lt;td&gt;悉尼&lt;/td&gt;&lt;/tr&gt;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;2004&lt;/td&gt;&lt;td&gt;雅典&lt;/td&gt;&lt;/tr&gt;&nbsp;&nbsp;&nbsp; &lt;tr&gt;&lt;td&gt;2000&lt;/td&gt;&lt;td&gt;北京&lt;/td&gt;&lt;/tr&gt;&nbsp; &lt;/tbody&gt;&lt;/table&gt; </div> <h3>列表</h3> <p>表格用于表示二維數(shù)據(jù)（行，列），一維數(shù)據(jù)則用列表表示。列表可以分為無(wú)序列表（&lt;ul&gt;），有序列表（&lt;ol&gt;）和定義列表（&lt;dl&gt;）。前兩種列表更常見(jiàn)一些，都用&lt;li&gt;標(biāo)簽包含列表項(xiàng)目。</p> <p>無(wú)序列表表示一系列類(lèi)似的項(xiàng)目，它們之間沒(méi)有先后順序。</p> <div   id="ublnpf9mb"   class="code"> &lt;ul&gt;&nbsp; &lt;li&gt;蘋(píng)果&lt;/li&gt;&nbsp; &lt;li&gt;桔子&lt;/li&gt;&nbsp; &lt;li&gt;桃&lt;/li&gt;&lt;/ul&gt; </div> <p>有序列表中各個(gè)項(xiàng)目間的順序是很重要的，瀏覽器通常會(huì)自動(dòng)給它們產(chǎn)生編號(hào)。</p> <div   id="ublnpf9mb"   class="code"> &lt;ol&gt;&nbsp; &lt;li&gt;打開(kāi)冰箱門(mén)&lt;/li&gt;&nbsp; &lt;li&gt;把大象趕進(jìn)去&lt;/li&gt;&nbsp; &lt;li&gt;關(guān)上冰箱門(mén)&lt;/li&gt;&lt;/ol&gt; </div> <h3>框架</h3> <p>最后談一下框架，曾經(jīng)非常流行的技術(shù)，框架使一個(gè)窗口里能同時(shí)顯示多個(gè)文檔。主框架頁(yè)里面沒(méi)有&lt;body&gt;標(biāo)簽，取代它的是&lt;frameset&gt;。</p> <p>&lt;frameset&gt;標(biāo)簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（寬度）。</p> <p>&lt;frameset&gt;標(biāo)簽可以包含&lt;frame&gt;標(biāo)簽，每個(gè)&lt;frame&gt;標(biāo)簽代表一個(gè)文檔（src屬性指定文檔的地址）。</p> <p>如果覺(jué)得這樣的頁(yè)面還不夠復(fù)雜的話(huà)，還可以在&lt;frameset&gt;標(biāo)簽里包含&lt;frameset&gt;標(biāo)簽。</p> <div   id="ublnpf9mb"   class="code"> &lt;frameset rows="15%,*"&gt;&nbsp;&nbsp;&nbsp;&nbsp; &lt;frame src="top.html" name=title scrolling=no&gt;&nbsp;&nbsp;&nbsp;&nbsp; &lt;frameset cols="20%,*"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;frame src="left.html"     name=sidebar&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;frame src="right.html"     name=recipes&gt;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/frameset&gt;&lt;/frameset&gt; </div> <h2>30分鐘以后怎么辦</h2> <p>     這篇文章只是讓從沒(méi)有接觸過(guò)HTML的人對(duì)HTML有個(gè)初步的印象，所以很多東西都沒(méi)有談到。本文并沒(méi)有列出HTML中所有的標(biāo)簽，對(duì)于列出的標(biāo)簽也沒(méi)有介紹它們的全部屬性。另外，沒(méi)有提到的東西里還包括我覺(jué)得非常重要的CSS,     JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關(guān)系。不過(guò)這些也不太可能在30分鐘內(nèi)學(xué)會(huì)，好在只要入了門(mén)，就能利用網(wǎng)上很多資源繼續(xù)學(xué)習(xí)。當(dāng)然，如果有一本紙質(zhì)書(shū)，就更好了，這方面我推薦&lt;&lt;HTML與XHTML權(quán)威指南&gt;&gt;。下面是一些我覺(jué)得不錯(cuò)的網(wǎng)上資源：</p>   <ul>   <li><a >HTML語(yǔ)言參考（英文）</a></li>   <li><a >HTML教程</a></li> </ul> <h2> 一些我認(rèn)為你可能已經(jīng)知道的術(shù)語(yǔ)的參考</h2> <dl> <dt>文本</dt> <dd>文字</dd> <dt>文檔</dt> <dd>文件，通常指內(nèi)容是數(shù)據(jù)（而不是程序）的文件</dd> </dl> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: