- 相關(guān)推薦
關(guān)于HTML 30分鐘入門(mén)教程
運行下面的代碼就可以了
{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}
本文目標
30分鐘內讓你明白HTML是什么，并對它有一些基本的了解。一旦入門(mén)后，你可以從網(wǎng)上找到更多更詳細的資料來(lái)繼續學(xué)習。
什么是HTML
HTML是英文Hyper Text Mark-up Language(超文本標記語(yǔ)言)的縮寫(xiě)，它規定了自己的語(yǔ)法規則，用來(lái)表示比"文本"更豐富的意義，比如圖片，表格，鏈接等。瀏覽器（IE,FireFox等）軟件知道HTML語(yǔ)言的語(yǔ)法，可以用來(lái)查看HTML文檔。目前互聯(lián)網(wǎng)上的絕大部分網(wǎng)頁(yè)都是使用HTML編寫(xiě)的。
HTML是什么樣的
簡(jiǎn)單地來(lái)說(shuō)，HTML的語(yǔ)法就是給文本加上表明文本含義的標簽(Tag)，讓用戶(hù)（人或程序）能對文本得到更好的理解。
下面是一個(gè)最簡(jiǎn)單的HTML文檔：
歡迎訪(fǎng)問(wèn)Unibetter大學(xué)生社區!
所有的HTML文檔都應該有一個(gè)標簽，標簽可以包含兩個(gè)部分:和。
標簽用于包含整個(gè)文檔的一般信息，比如文檔的標題（
標簽用于表示鏈接，在瀏覽器（如IE,Firefox等）中查看HTML文檔時(shí)，點(diǎn)擊標簽括起來(lái)的內容時(shí)，通常會(huì )跳轉到另一個(gè)頁(yè)面。這個(gè)要跳轉到的頁(yè)面的地址由標簽的href屬性指定。上面的中，href屬性的值就是http://www.unibetter.com。
HTML文檔可以包含的內容
通過(guò)不同的標簽，HTML文檔可以包含不同的內容，比如文本，鏈接，圖片，列表，表格，表單，框架等。
文本 HTML對文本的支持是最豐富的，你可以設置不同級別的標題，分段和換行，可以指定文本的語(yǔ)義和外觀(guān)，可以說(shuō)明文本是引用自其它的地方，等等等等。 鏈接 鏈接用來(lái)指出內容與另一個(gè)頁(yè)面或當前頁(yè)面某個(gè)地方有關(guān)。 圖片 圖片用于使頁(yè)面更加美觀(guān)，或提供更多的信息。 列表 列表用于說(shuō)明一系列條目是彼此相關(guān)的。 表格 表格是按行與列將數據組織在一起的形式。也有不少人使用表格進(jìn)行頁(yè)面布局。 表單 表單通常由文本輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁(yè)面更有交互性。 框架 框架使頁(yè)面里能包含其它的頁(yè)面。 HTML文檔格式詳細說(shuō)明
前面介紹了HTML文檔的基本格式，下面再做一個(gè)詳細說(shuō)明。
HTML文檔可以用任何文本編輯器（比如記事本，UltraEdit等）創(chuàng )建，編輯，因為它的內容在本質(zhì)也只是一些文本。
在HTML文本中，用尖括號括起來(lái)的部分稱(chēng)為標簽。如果想在正文里使用尖括號（或者大與號小與號，總之是同一個(gè)東西），必須使用字符轉義，也就是說(shuō)轉換字符的原有意義。<應該使用<代替，>則使用>，至于&符號本身,則應該使用&替代（不得不說(shuō)的是有很多HTML文檔沒(méi)有遵循這個(gè)規則，常用的瀏覽器也都能夠分析出&到底是一個(gè)轉義的開(kāi)始，還是一個(gè)符號，但是這樣做是不推薦的）。
標簽本質(zhì)上是對它所包含的內容的說(shuō)明，可能會(huì )有屬性，來(lái)給出更多的信息。比如
�。▓D片）標簽有src屬性（用于指明圖片的地址），width和height屬性（用于說(shuō)明圖片的寬度和高度）。HTML里能使用哪些標簽，這些標簽分別可以擁有哪些屬性，這些都是有規定的，知道了這里說(shuō)的基本知識之后，學(xué)習HTML其實(shí)也就是學(xué)習這些標簽了。本文后面會(huì )對常用的HTML標簽做出簡(jiǎn)短的介紹。
標簽通常有開(kāi)始部分和結束部分（也被稱(chēng)為開(kāi)始標簽和結束標簽），它們一起限定了這個(gè)標簽所包含的內容。屬性只能在開(kāi)始標簽中指定，屬性值可以用單引號或雙引號括起來(lái)。結束標簽都以/加上標簽名來(lái)表示。有時(shí)候，有些標簽并不包含其它內容（只包括自己的屬性，甚至連屬性都沒(méi)有），這種情況下，可以寫(xiě)成類(lèi)似這樣：
。注意最后的一個(gè)空格和一個(gè)反斜杠，它說(shuō)明這個(gè)標簽已經(jīng)結束，不需要單獨的結束標簽了。
某些標簽包含的內容中還可以有新的標簽，新的標簽名甚至可能還可以與包含它的標簽的名稱(chēng)相同（哪些標簽可以包含標簽，可以包含哪些標簽也是有規定的）。比如：
分類(lèi)目錄...
當前分類(lèi)內容列表...
在這種情況下，最后出現的標簽應該最先結束。
HTML文檔里所有的空白符（空格，Tab，換行，回車(chē)）會(huì )被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個(gè)空格，不管有一個(gè)，還是兩個(gè)，還是100個(gè)。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺(jué)得最方便的格式來(lái)排列內容，比如可以在每個(gè)標簽開(kāi)始后增加縮進(jìn)，標簽結束后減少縮進(jìn)。由于英語(yǔ)文本中空格用得很普遍（用于分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮進(jìn)），應該用來(lái)代表空格。
常用標簽介紹 文本
最常用的標簽可能是了，它用于改變字體，字號，文字顏色。
64紅色的5黑體的字
加粗，下劃線(xiàn)，斜體字也是常用的文字效果，它們分別用,,表示：
Bolditalicunderline
還有一些標簽，用來(lái)指出包含的文本有特殊的意義，比如（表示縮寫(xiě)），（表示強調），（表示更強地強調）,（表示引用），
（表示地址）等等。這些標簽不是為了定義顯示效果而存在的，所以從瀏覽器里看它們可能沒(méi)有任何效果，也可能不同的瀏覽器對這些標簽的顯示效果完全不同。
一篇很長(cháng)的文章，如果有合適的小標題的話(huà)，就可以快速地對它的內容進(jìn)行大致的了解。在HTML里，用來(lái)表示標題的標簽有：
,
,
,
,
,
，它們分別表示一級標題，二級標題，三級標題...
HTML 30分鐘教程
什么是HTML
...
HTML是什么樣的
... 圖片
標簽用于在頁(yè)面上添加橫線(xiàn)�？梢酝ㄟ^(guò)指定width和color屬性來(lái)控制橫線(xiàn)的長(cháng)度和顏色。
標簽用于在頁(yè)面上添加圖片，src屬性指定圖片的地址，如果無(wú)法打開(kāi)src指定的圖片，瀏覽器通常會(huì )在頁(yè)面上需要顯示圖片的地方顯示alt屬性定義的文本。
鏈接
超級鏈接用標簽表示，href屬性指定了鏈接到的地址。標簽可以包含文本，也可以包含圖片。
Unibetter大學(xué)生論壇
分段與換行
由于HTML文檔會(huì )忽略空白符，所以要想保證正常的分段換行的話(huà)，必須指出哪些文字是屬于同一段落的，這就用到了標簽
。
這是第一段。
這是第二段。
也有人不用
，而用
。
只表示換行，不表示段落的'開(kāi)始或結束，所以通常沒(méi)有結束標簽。
這是第一段。
這是第二段。
這是第三段。
有時(shí)，要把文檔看作不同的部分組合起來(lái)的，比如一個(gè)典型的頁(yè)面可能包括三個(gè)部分：頁(yè)頭，主體，頁(yè)腳。
標簽專(zhuān)門(mén)用于標明不同的部分：
頁(yè)頭內容
主體內容
頁(yè)腳內容
表格
HTML文檔在瀏覽器里通常是從左到右，從上到下地顯示的，到了窗口右邊就自動(dòng)換行。為了實(shí)現分欄的效果，很多人使用表格（
�。┻M(jìn)行頁(yè)面排版（雖然HTML里提供表格的本意不是為了排版）。
標簽里通常會(huì )包含幾個(gè)標簽，代表表格里的一行。標簽又會(huì )包含
| 標簽，每個(gè) | 代表一個(gè)單元格。 |
| 2000 | 悉尼 |
| 2004 | 雅典 |
| 2008 | 北京 |
標簽還可以被
里的或或包含。它們分別代表表頭，表正文，表腳。在打印網(wǎng)頁(yè)的時(shí)候，如果表格很大，一頁(yè)打印不完，和將在每一頁(yè)出現。
里邊，不同的是
| 和 | 非常相似，也用在 |
|---|---|
| 代表這個(gè)單元格是它所在的行或列的標題。 |
| 時(shí)間 | 地點(diǎn) |
|---|---|
| 2000 | 悉尼 |
| 2004 | 雅典 |
| 2000 | 北京 |
列表
表格用于表示二維數據（行，列），一維數據則用列表表示。列表可以分為無(wú)序列表（
�。�，有序列表（
�。┖投x列表（
�。�。前兩種列表更常見(jiàn)一些，都用
標簽包含列表項目。
無(wú)序列表表示一系列類(lèi)似的項目，它們之間沒(méi)有先后順序。
蘋(píng)果
桔子
桃
有序列表中各個(gè)項目間的順序是很重要的，瀏覽器通常會(huì )自動(dòng)給它們產(chǎn)生編號。
打開(kāi)冰箱門(mén)
把大象趕進(jìn)去
關(guān)上冰箱門(mén)
框架
最后談一下框架，曾經(jīng)非常流行的技術(shù)，框架使一個(gè)窗口里能同時(shí)顯示多個(gè)文檔。主框架頁(yè)里面沒(méi)有標簽，取代它的是。
標簽的屬性Rows和Cols用于指定框架集(frameset)里有多少行（列），以及每行（列）的高度（寬度）。
標簽可以包含標簽，每個(gè)標簽代表一個(gè)文檔（src屬性指定文檔的地址）。
如果覺(jué)得這樣的頁(yè)面還不夠復雜的話(huà)，還可以在標簽里包含標簽。
30分鐘以后怎么辦
這篇文章只是讓從沒(méi)有接觸過(guò)HTML的人對HTML有個(gè)初步的印象，所以很多東西都沒(méi)有談到。本文并沒(méi)有列出HTML中所有的標簽，對于列出的標簽也沒(méi)有介紹它們的全部屬性。另外，沒(méi)有提到的東西里還包括我覺(jué)得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關(guān)系。不過(guò)這些也不太可能在30分鐘內學(xué)會(huì )，好在只要入了門(mén)，就能利用網(wǎng)上很多資源繼續學(xué)習。當然，如果有一本紙質(zhì)書(shū)，就更好了，這方面我推薦<>。下面是一些我覺(jué)得不錯的網(wǎng)上資源：
HTML語(yǔ)言參考（英文） HTML教程 一些我認為你可能已經(jīng)知道的術(shù)語(yǔ)的參考 文本 文字 文檔 文件，通常指內容是數據（而不是程序）的文件
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
【HTML 30分鐘入門(mén)教程】相關(guān)文章：
梵語(yǔ)入門(mén)教程08-20
CSS入門(mén)教程01-25
HTML的語(yǔ)言剖析10-13
過(guò)濾HTML代碼08-29
新手油畫(huà)入門(mén)教程09-16
紋繡入門(mén)教程06-25
HTML5和HTML4有何區別？08-29
收集的常用的HTML標簽01-22