聲明:本文轉自deerchao的個人小站
本文目標
????30分鐘內(nèi)讓你明白HTML是什么,并對它有一些基本的了解。一旦入門后,你可以從網(wǎng)上找到更多更詳細的資料來繼續(xù)學習。
什么是HTML
????HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,它規(guī)定了自己的語法規(guī)則,用來表示比“文本”更豐富的意義,比如圖片,表格,鏈接等。瀏覽器(IE,FireFox等)軟件知道HTML語言的語法,可以用來查看HTML文檔。目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁都是使用HTML編寫的。
HTML是什么樣的
????簡單地來說,HTML的語法就是給文本加上表明文本含義的標簽(Tag),讓用戶(人或程序)能對文本得到更好的理解。
下面是一個最簡單的HTML文檔:

????所有的HTML文檔都應該有一個<html>標簽,<html>標簽可以包含兩個部分:<head>和<body>。
????<head>標簽用于包含整個文檔的一般信息,比如文檔的標題(<title>用于包含標題),對整個文檔的描述,文檔的關鍵字等等。文檔的具體內(nèi)容就要放在標簽里了。
????<a>標簽用于表示鏈接,在瀏覽器(如IE,Firefox等)中查看HTML文檔時,點擊<a>標簽括起來的內(nèi)容時,通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由<a>標簽的href屬性指定。上面的<a >中,href屬性的值就是http://deerchao.net。
HTML文檔可以包含的內(nèi)容
????通過不同的標簽,HTML文檔可以包含不同的內(nèi)容,比如文本,鏈接,圖片,列表,表格,表單,框架等。
文本
????HTML對文本的支持是最豐富的,你可以設置不同級別的標題,分段和換行,可以指定文本的語義和外觀,可以說明文本是引用自其它的地方,等等等等。
鏈接
????鏈接用來指出內(nèi)容與另一個頁面或當前頁面某個地方有關。
圖片
????圖片用于使頁面更加美觀,或提供更多的信息。
列表
????列表用于說明一系列條目是彼此相關的。
表格
????表格是按行與列將數(shù)據(jù)組織在一起的形式。也有不少人使用表格進行頁面布局。
表單
????表單通常由文本輸入框,按鈕,多選框,單選框,下拉列表等組成,使HTML頁面更有交互性。
框架
????框架使頁面里能包含其它的頁面。
HTML文檔格式詳細說明
????前面介紹了HTML文檔的基本格式,下面再做一個詳細說明。
????HTML文檔可以用任何文本編輯器(比如記事本,UltraEdit等)創(chuàng)建,編輯,因為它的內(nèi)容在本質也只是一些文本。
????在HTML文本中,用尖括號括起來的部分稱為標簽。如果想在正文里使用尖括號(或者大與號小與號,總之是同一個東西),必須使用字符轉義,也就是說轉換字符的原有意義。<應該使用<代替,>則使用>,至于&符號本身,則應該使用&替代(不得不說的是有很多HTML文檔沒有遵循這個規(guī)則,常用的瀏覽器也都能夠分析出&到底是一個轉義的開始,還是一個符號,但是這樣做是不推薦的)。
????標簽通常有開始部分和結束部分(也被稱為開始標簽和結束標簽),它們一起限定了這個標簽所包含的內(nèi)容。屬性只能在開始標簽中指定,屬性值可以用單引號或雙引號括起來。結束標簽都以/加上標簽名來表示。有時候,有些標簽并不包含其它內(nèi)容(只包括自己的屬性,甚至連屬性都沒有),這種情況下,可以寫成類似這樣:<img src = "logo,gif" />。注意最后的一個空格和一個反斜杠,它說明這個標簽已經(jīng)結束,不需要單獨的結束標簽了。
????某些標簽包含的內(nèi)容中還可以有新的標簽,新的標簽名甚至可能還可以與包含它的標簽的名稱相同(哪些標簽可以包含標簽,可以包含哪些標簽也是有規(guī)定的)。比如:

????在這種情況下,最后出現(xiàn)的標簽應該最先結束。
????HTML文檔里所有的空白符(空格,Tab,換行,回車)會被瀏覽器忽略,唯一的例外是空格,對空格的處理方式是所有連續(xù)的空格被當成一個空格,不管有一個,還是兩個,還是100個。之所以有這樣的規(guī)則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內(nèi)容,比如可以在每個標簽開始后增加縮進,標簽結束后減少縮進。由于英語文本中空格用得很普遍(用于分隔單詞),所以對空格做了這樣的特殊處理。如果要顯示連續(xù)的空格(比如為了縮進),應該用 來代表空格。
常用標簽介紹
文本
????最常用的標簽可能是<font>了,它用于改變字體,字號,文字顏色。

????加粗,下劃線,斜體字也是常用的文字效果,它們分別用<b>,<u>,<i>,表示:

? ??還有一些標簽,用來指出包含的文本有特殊的意義,比如<abbr>(表示縮寫),<em>(表示強調(diào)),<strong>(表示更強地強調(diào)),<cite>(表示引用),<address>(表示地址)等等。這些標簽不是為了定義顯示效果而存在的,所以從瀏覽器里看它們可能沒有任何效果,也可能不同的瀏覽器對這些標簽的顯示效果完全不同。
????一篇很長的文章,如果有合適的小標題的話,就可以快速地對它的內(nèi)容進行大致的了解。在HTML里,用來表示標題的標簽有:<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,它們分別表示一級標題,二級標題,三級標題...

圖片
? ? <hr>標簽用于在頁面上添加橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。

? ? <img>標簽用于在頁面上添加圖片,src屬性指定圖片的地址,如果無法打開src指定的圖片,瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文本。

鏈接
????超級鏈接用<a>標簽表示,href屬性指定了鏈接到的地址.<a>標簽可以包含文本,也可以包含圖片.

分段與換行
????由于HTML文檔會忽略空白符,所以要想保證正常的分段換行的話,必須指出哪些文字是屬于同一段落的,這就用到了標簽<p>.

? ? 也有人不用<p>,而用<br>,<br>表示只換行,不表示段落的開始或結束,所以通常沒有結束標簽。

????有時,要把文檔看作不同的部分組合起來的,比如一個典型的頁面可能包括三個部分:頁頭,主體,頁腳。<div>標簽專門用于標明不同的部分:

表格
????HTML文檔在瀏覽器里通常是從左到右,從上到下地顯示的,到了窗口右邊就自動換行。為了實現(xiàn)分欄的效果,很多人使用表格(<table>)進行頁面排版(雖然HTML里提供表格的本意不是為了排版)。
? ? <table>標簽里通常會包含幾個<tr>標簽,<tr>表示表格的一行,<tr>標簽里面又包含一個<td>標簽,每個<td>標簽表示表格中的一個單元

????<tr>標簽還可以被<table>里的<thead>或<tbody>或<tfoot>包含。它們分別代表表頭,表正文,表腳。在打印網(wǎng)頁的時候,如果表格很大,一頁打印不完,<thead>和<tfoot>將在每一頁出現(xiàn)。
<th>和<td>非常相似,<tr>也用在里邊,不同的是<th>代表這個單元格是它所在的行或列的標題。

列表
????表格用于表示二維數(shù)據(jù)(行,列),一維數(shù)據(jù)則用列表表示。列表可以分為無序列(<ul>),有序列表(<ol>)和定義列表(<dl>)。前兩種列表更常見一些,都用<li>標簽包含列表項目。
????無序列表表示一系列類似的項目,它們之間沒有先后順序。

????有序列表中各個項目間的順序是很重要的,瀏覽器通常會自動給它們產(chǎn)生編號。

框架
????最后談一下框架,曾經(jīng)非常流行的技術,框架使一個窗口里能同時顯示多個文檔。主框架頁里面沒有<body>標簽,取代它的是<frameset>。
????<frameset>標簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行(列),以及每行(列)的高度(寬度)。
? ? <frameset>標簽可以包含<frame>標簽,每個<frame>標簽代表一個文檔(src屬性指定文檔的地址)。
????如果覺得<frameset>這樣的頁面還不夠復雜的話,還可以在<frameset>標簽里包含標簽。

30分鐘以后怎么辦
????這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象,所以很多東西都沒有談到。本文并沒有列出HTML中所有的標簽,對于列出的標簽也沒有介紹它們的全部屬性。另外,沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards,以及它們與HTML的關系。不過這些也不太可能在30分鐘內(nèi)學會,好在只要入了門,就能利用網(wǎng)上很多資源繼續(xù)學習。當然,如果有一本紙質書,就更好了,這方面我推薦<<HTML與XHTML權威指南>>。下面是一些我覺得不錯的網(wǎng)上資源: