作者：deerchao 轉(zhuǎn)載請(qǐng)注明來源
30分鐘內(nèi)讓你明白HTML是什么，并對(duì)它有一些基本的了解。一旦入門后，你可以從網(wǎng)上找到更多更詳細(xì)的資料來繼續(xù)學(xué)習(xí)。
HTML是英文Hyper Text Mark-up Language(超文本標(biāo)記語(yǔ)言)的縮寫，它規(guī)定了自己的語(yǔ)法規(guī)則，用來表示比“文本”更豐富的意義，比如圖片，表格，鏈接等。瀏覽器 （IE,FireFox等）軟件知道HTML語(yǔ)言的語(yǔ)法，可以用來查看HTML文檔。目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁(yè)都是使用HTML編寫的。
簡(jiǎn)單地來說，HTML的語(yǔ)法就是給文本加上表明文本含義的標(biāo)簽(Tag)，讓用戶（人或程序）能對(duì)文本得到更好的理解。
下面是一個(gè)最簡(jiǎn)單的HTML文檔：
點(diǎn)擊查看效果所有的HTML文檔都應(yīng)該有一個(gè)<html>標(biāo)簽，<html>標(biāo)簽可以包含兩個(gè)部分:<head>和<body>。
<head>標(biāo)簽用于包含整個(gè)文檔的一般信息，比如文檔的標(biāo)題（<title>標(biāo)簽用于包含標(biāo)題），對(duì)整個(gè)文檔的描述，文檔的關(guān)鍵字等等。文檔的具體內(nèi)容就要放在<body>標(biāo)簽里了。
<a>標(biāo)簽用于表示鏈接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時(shí)，點(diǎn)擊<a>標(biāo)簽括起來的內(nèi)容時(shí)， 通常會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面。這個(gè)要跳轉(zhuǎn)到的頁(yè)面的地址由<a>標(biāo)簽的href屬性指定。上面的<a >中，href屬性的值就是http://deerchao.net。
通過不同的標(biāo)簽，HTML文檔可以包含不同的內(nèi)容，比如文本，鏈接，圖片，列表，表格，表單，框架等。
前面介紹了HTML文檔的基本格式，下面再做一個(gè)詳細(xì)說明。
HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創(chuàng)建，編輯，因?yàn)樗膬?nèi)容在本質(zhì)也只是一些文本。
在HTML文本中，用尖括號(hào)括起來的部分稱為標(biāo)簽。如果想在正文里使用尖括號(hào)（或者大與號(hào)小與號(hào)，總之是同一個(gè)東西），必須使用字符轉(zhuǎn)義，也就是說轉(zhuǎn)換字符的原有意義。<應(yīng)該使用<代替，>則使用>，至于&符號(hào)本身,則應(yīng)該使用&替代（不得不說的是有很多HTML文檔沒有遵循這個(gè)規(guī)則，常用的瀏覽器也都能夠分析出&到底是一個(gè)轉(zhuǎn)義的開始，還是一個(gè)符號(hào)，但是這樣做是不推薦的）。
標(biāo)簽本質(zhì)上是對(duì)它所包含的內(nèi)容的說明，可能會(huì)有屬性，來給出更多的信息。比如<img>（圖片）標(biāo)簽有src屬性（用于指明圖片的地 址），width和height屬性（用于說明圖片的寬度和高度）。HTML里能使用哪些標(biāo)簽，這些標(biāo)簽分別可以擁有哪些屬性，這些都是有規(guī)定的，知道了 這里說的基本知識(shí)之后，學(xué)習(xí)HTML其實(shí)也就是學(xué)習(xí)這些標(biāo)簽了。本文后面會(huì)對(duì)常用的HTML標(biāo)簽做出簡(jiǎn)短的介紹。
標(biāo)簽通常有開始部分和結(jié)束部分（也被稱為開始標(biāo)簽和結(jié)束標(biāo)簽），它們一起限定了這個(gè)標(biāo)簽所包含的內(nèi)容。屬性只能在開始標(biāo)簽中指定，屬性值可以用單引 號(hào)或雙引號(hào)括起來。結(jié)束標(biāo)簽都以/加上標(biāo)簽名來表示。有時(shí)候，有些標(biāo)簽并不包含其它內(nèi)容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類 似這樣：<img src="logo.gif" />。注意最后的一個(gè)空格和一個(gè)反斜杠，它說明這個(gè)標(biāo)簽已經(jīng)結(jié)束，不需要單獨(dú)的結(jié)束標(biāo)簽了。
某些標(biāo)簽包含的內(nèi)容中還可以有新的標(biāo)簽，新的標(biāo)簽名甚至可能還可以與包含它的標(biāo)簽的名稱相同（哪些標(biāo)簽可以包含標(biāo)簽，可以包含哪些標(biāo)簽也是有規(guī)定的）。比如：
點(diǎn)擊查看效果在這種情況下，最后出現(xiàn)的標(biāo)簽應(yīng)該最先結(jié)束。
HTML文檔里所有的空白符（空格，Tab，換行，回車）會(huì)被瀏覽器忽略，唯一的例外是空格，對(duì)空格的處理方式是所有連續(xù)的空格被當(dāng)成一個(gè)空格，不 管有一個(gè)，還是兩個(gè)，還是100個(gè)。之所以有這樣的規(guī)則是因?yàn)楹雎钥瞻追茏屖褂肏TML的作者以他覺得最方便的格式來排列內(nèi)容，比如可以在每個(gè)標(biāo)簽開始 后增加縮進(jìn)，標(biāo)簽結(jié)束后減少縮進(jìn)。由于英語(yǔ)文本中空格用得很普遍（用于分隔單詞），所以對(duì)空格做了這樣的特殊處理。如果要顯示連續(xù)的空格（比如為了縮 進(jìn)），應(yīng)該用 來代表空格。
最常用的標(biāo)簽可能是<font>了，它用于改變字體，字號(hào)，文字顏色。
點(diǎn)擊查看效果加粗，下劃線，斜體字也是常用的文字效果，它們分別用<b>,<u>,<i>表示：
點(diǎn)擊查看效果還有一些標(biāo)簽，用來指出包含的文本有特殊的意義，比如<abbr>（表示縮寫），<em>（表示強(qiáng) 調(diào)），<strong>（表示更強(qiáng)地強(qiáng)調(diào)）,<cite>（表示引用），<address>（表示地址）等等。這些 標(biāo)簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒有任何效果，也可能不同的瀏覽器對(duì)這些標(biāo)簽的顯示效果完全不同。
一篇很長(zhǎng)的文章，如果有合適的小標(biāo)題的話，就可以快速地對(duì)它的內(nèi)容進(jìn)行大致的了解。在HTML里，用來表示標(biāo)題的標(biāo)簽 有：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>，它們分別 表示一級(jí)標(biāo)題，二級(jí)標(biāo)題，三級(jí)標(biāo)題...
點(diǎn)擊查看效果<hr>標(biāo)簽用于在頁(yè)面上添加橫線。可以通過指定width和color屬性來控制橫線的長(zhǎng)度和顏色。
點(diǎn)擊查看效果<img>標(biāo)簽用于在頁(yè)面上添加圖片，src屬性指定圖片的地址，如果無法打開src指定的圖片，瀏覽器通常會(huì)在頁(yè)面上需要顯示圖片的地方顯示alt屬性定義的文本。
點(diǎn)擊查看效果超級(jí)鏈接用<a>標(biāo)簽表示，href屬性指定了鏈接到的地址。<a>標(biāo)簽可以包含文本，也可以包含圖片。
點(diǎn)擊查看效果由于HTML文檔會(huì)忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬于同一段落的，這就用到了標(biāo)簽<p>。
點(diǎn)擊查看效果也有人不用<p>，而用<br>。<br>只表示換行，不表示段落的開始或結(jié)束，所以通常沒有結(jié)束標(biāo)簽。
點(diǎn)擊查看效果有時(shí)，要把文檔看作不同的部分組合起來的，比如一個(gè)典型的頁(yè)面可能包括三個(gè)部分：頁(yè)頭，主體，頁(yè)腳。<div>標(biāo)簽專門用于標(biāo)明不同的部分：
點(diǎn)擊查看效果HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動(dòng)換行。為了實(shí)現(xiàn)分欄的效果，很多人使用表格（<table>）進(jìn)行頁(yè)面排版（雖然HTML里提供表格的本意不是為了排版）。
<table>標(biāo)簽里通常會(huì)包含幾個(gè)<tr>標(biāo)簽，<tr>代表表格里的一行。<tr>標(biāo)簽又會(huì)包含<td>標(biāo)簽，每個(gè)<td>代表一個(gè)單元格。
點(diǎn)擊查看效果<tr>標(biāo)簽還可以被<table>里的<thead>或<tbody> 或<tfoot>包含。它們分別代表表頭，表正文，表腳。在打印網(wǎng)頁(yè)的時(shí)候，如果表格很大，一頁(yè)打印不完，<thead> 和<tfoot>將在每一頁(yè)出現(xiàn)。
<th>和<td>非常相似，也用在<tr>里邊，不同的是<th>代表這個(gè)單元格是它所在的行或列的標(biāo)題。
點(diǎn)擊查看效果表格用于表示二維數(shù)據(jù)（行，列），一維數(shù)據(jù)則用列表表示。列表可以分為無序列表（<ul>），有序列表（<ol>）和定義列表（<dl>）。前兩種列表更常見一些，都用<li>標(biāo)簽包含列表項(xiàng)目。
無序列表表示一系列類似的項(xiàng)目，它們之間沒有先后順序。
點(diǎn)擊查看效果有序列表中各個(gè)項(xiàng)目間的順序是很重要的，瀏覽器通常會(huì)自動(dòng)給它們產(chǎn)生編號(hào)。
點(diǎn)擊查看效果最后談一下框架，曾經(jīng)非常流行的技術(shù)，框架使一個(gè)窗口里能同時(shí)顯示多個(gè)文檔。主框架頁(yè)里面沒有<body>標(biāo)簽，取代它的是<frameset>。
<frameset>標(biāo)簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（寬度）。
<frameset>標(biāo)簽可以包含<frame>標(biāo)簽，每個(gè)<frame>標(biāo)簽代表一個(gè)文檔（src屬性指定文檔的地址）。
如果覺得這樣的頁(yè)面還不夠復(fù)雜的話，還可以在<frameset>標(biāo)簽里包含<frameset>標(biāo)簽。
點(diǎn)擊查看效果這篇文章只是讓從沒有接觸過HTML的人對(duì)HTML有個(gè)初步的印象，所以很多東西都沒有談到。本文并沒有列出HTML中所有的標(biāo)簽，對(duì)于列出的標(biāo)簽也沒有 介紹它們的全部屬性。另外，沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關(guān)系。不過這些也不太可能在30分鐘內(nèi)學(xué)會(huì)，好在只要入了門，就能利用網(wǎng)上很多資源繼續(xù)學(xué)習(xí)。當(dāng)然，如果有一本 紙質(zhì)書，就更好了，這方面我推薦<<HTML與XHTML權(quán)威指南>>。下面是一些我覺得不錯(cuò)的網(wǎng)上資源：
