關於HTML 30分鐘入門教程

執行下面的程式碼就可以了

{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是什麼，並對它有一些基本的瞭解。一旦入門後，你可以從網上找到更多更詳細的資料來繼續學習。

什麼是HTML

HTML是英文Hyper Text Mark-up Language(超文字標記語言)的縮寫，它規定了自己的語法規則，用來表示比"文字"更豐富的意義，比如圖片，表格，連結等。瀏覽器（IE,FireFox等）軟體知道HTML語言的語法，可以用來檢視HTML文件。目前網際網路上的絕大部分網頁都是使用HTML編寫的。

HTML是什麼樣的

簡單地來說，HTML的語法就是給文字加上表明文字含義的標籤(Tag)，讓使用者（人或程式）能對文字得到更好的理解。

下面是一個最簡單的HTML文件：

歡迎訪問Unibetter大學生社群!

所有的HTML文件都應該有一個標籤，標籤可以包含兩個部分:和。

標籤用於包含整個文件的一般資訊，比如文件的標題（

標籤用於表示連結，在瀏覽器（如IE,Firefox等）中檢視HTML文件時，點選標籤括起來的內容時，通常會跳轉到另一個頁面。這個要跳轉到的頁面的地址由標籤的href屬性指定。上面的中，href屬性的值就是http://www.unibetter.com。

HTML文件可以包含的內容

通過不同的標籤，HTML文件可以包含不同的內容，比如文字，連結，圖片，列表，表格，表單，框架等。

文字 HTML對文字的支援是最豐富的，你可以設定不同級別的`標題，分段和換行，可以指定文字的語義和外觀，可以說明文字是引用自其它的地方，等等等等。 連結 連結用來指出內容與另一個頁面或當前頁面某個地方有關。 圖片 圖片用於使頁面更加美觀，或提供更多的資訊。 列表 列表用於說明一系列條目是彼此相關的。 表格 表格是按行與列將資料組織在一起的形式。也有不少人使用表格進行頁面佈局。 表單 表單通常由文字輸入框，按鈕，多選框，單選框，下拉列表等組成，使HTML頁面更有互動性。 框架 框架使頁面裡能包含其它的頁面。 HTML文件格式詳細說明

前面介紹了HTML文件的基本格式，下面再做一個詳細說明。

HTML文件可以用任何文字編輯器（比如記事本，UltraEdit等）建立，編輯，因為它的內容在本質也只是一些文字。

在HTML文字中，用尖括號括起來的部分稱為標籤。如果想在正文裡使用尖括號（或者大與號小與號，總之是同一個東西），必須使用字元轉義，也就是說轉換字元的原有意義。<應該使用<代替，>則使用>，至於&符號本身,則應該使用&替代（不得不說的是有很多HTML文件沒有遵循這個規則，常用的瀏覽器也都能夠分析出&到底是一個轉義的開始，還是一個符號，但是這樣做是不推薦的）。

標籤本質上是對它所包含的內容的說明，可能會有屬性，來給出更多的資訊。比如

（圖片）標籤有src屬性（用於指明圖片的地址），width和height屬性（用於說明圖片的寬度和高度）。HTML裡能使用哪些標籤，這些標籤分別可以擁有哪些屬性，這些都是有規定的，知道了這裡說的基本知識之後，學習HTML其實也就是學習這些標簽了。本文後面會對常用的HTML標籤做出簡短的介紹。

標籤通常有開始部分和結束部分（也被稱為開始標籤和結束標籤），它們一起限定了這個標籤所包含的內容。屬性只能在開始標籤中指定，屬性值可以用單引號或雙引號括起來。結束標籤都以/加上標籤名來表示。有時候，有些標籤並不包含其它內容（只包括自己的屬性，甚至連屬性都沒有），這種情況下，可以寫成類似這樣：

。注意最後的一個空格和一個反斜槓，它說明這個標籤已經結束，不需要單獨的結束標籤了。

某些標籤包含的內容中還可以有新的標籤，新的標籤名甚至可能還可以與包含它的標籤的名稱相同（哪些標籤可以包含標籤，可以包含哪些標籤也是有規定的）。比如：

分類目錄...

當前分類內容列表...

在這種情況下，最後出現的標籤應該最先結束。

HTML文件裡所有的空白符（空格，Tab，換行，回車）會被瀏覽器忽略，唯一的例外是空格，對空格的處理方式是所有連續的空格被當成一個空格，不管有一個，還是兩個，還是100個。之所以有這樣的規則是因為忽略空白符能讓使用HTML的作者以他覺得最方便的格式來排列內容，比如可以在每個標籤開始後增加縮排，標籤結束後減少縮排。由於英語文字中空格用得很普遍（用於分隔單詞），所以對空格做了這樣的特殊處理。如果要顯示連續的空格（比如為了縮排），應該用來代表空格。

常用標籤介紹 文字

最常用的標籤可能是了，它用於改變字型，字號，文字顏色。

64紅色的5黑體的字

加粗，下劃線，斜體字也是常用的文字效果，它們分別用,,表示：

Bolditalicunderline

還有一些標籤，用來指出包含的文字有特殊的意義，比如（表示縮寫），（表示強調），（表示更強地強調）,（表示引用），

（表示地址）等等。這些標籤不是為了定義顯示效果而存在的，所以從瀏覽器裡看它們可能沒有任何效果，也可能不同的瀏覽器對這些標籤的顯示效果完全不同。

一篇很長的文章，如果有合適的小標題的話，就可以快速地對它的內容進行大致的瞭解。在HTML裡，用來表示標題的標籤有：

,

,

,

,

,

，它們分別表示一級標題，二級標題，三級標題...

HTML 30分鐘教程

什麼是HTML

...

HTML是什麼樣的

... 圖片

標籤用於在頁面上新增橫線。可以通過指定width和color屬性來控制橫線的長度和顏色。

標籤用於在頁面上新增圖片，src屬性指定圖片的地址，如果無法開啟src指定的圖片，瀏覽器通常會在頁面上需要顯示圖片的地方顯示alt屬性定義的文字。

連結

超級連結用標籤表示，href屬性指定了連結到的地址。標籤可以包含文字，也可以包含圖片。

Unibetter大學生論壇

分段與換行

由於HTML文件會忽略空白符，所以要想保證正常的分段換行的話，必須指出哪些文字是屬於同一段落的，這就用到了標籤

。

這是第一段。

這是第二段。

也有人不用

，而用

。

只表示換行，不表示段落的開始或結束，所以通常沒有結束標籤。

這是第一段。

這是第二段。

這是第三段。

有時，要把文件看作不同的部分組合起來的，比如一個典型的頁面可能包括三個部分：頁頭，主體，頁尾。

標籤專門用於標明不同的部分：

頁頭內容

主體內容

頁尾內容

表格

HTML文件在瀏覽器裡通常是從左到右，從上到下地顯示的，到了視窗右邊就自動換行。為了實現分欄的效果，很多人使用表格（

）進行頁面排版（雖然HTML裡提供表格的本意不是為了排版）。

標籤裡通常會包含幾個標籤，代表表格裡的一行。標籤又會包含

標籤還可以被

裡的或或包含。它們分別代表表頭，表正文，表腳。在列印網頁的時候，如果表格很大，一頁列印不完，和將在每一頁出現。

裡邊，不同的是

列表

表格用於表示二維資料（行，列），一維資料則用列表表示。列表可以分為無序列表（

），有序列表（

）和定義列表（

）。前兩種列表更常見一些，都用

標籤包含列表專案。

無序列表表示一系列類似的專案，它們之間沒有先後順序。

蘋果

桔子

桃

有序列表中各個專案間的順序是很重要的，瀏覽器通常會自動給它們產生編號。

開啟冰箱門

把大象趕進去

關上冰箱門

框架

最後談一下框架，曾經非常流行的技術，框架使一個窗口裡能同時顯示多個文件。主框架頁裡面沒有標籤，取代它的是。

標籤的屬性Rows和Cols用於指定框架集(frameset)裡有多少行（列），以及每行（列）的高度（寬度）。

標籤可以包含標籤，每個標籤代表一個文件（src屬性指定文件的地址）。

如果覺得這樣的頁面還不夠複雜的話，還可以在標籤裡包含標籤。

30分鐘以後怎麼辦

這篇文章只是讓從沒有接觸過HTML的人對HTML有個初步的印象，所以很多東西都沒有談到。本文並沒有列出HTML中所有的標籤，對於列出的標籤也沒有介紹它們的全部屬性。另外，沒有提到的東西里還包括我覺得非常重要的CSS, JavaScript, XHTML, XML, Web Standards，以及它們與HTML的關係。不過這些也不太可能在30分鐘內學會，好在只要入了門，就能利用網上很多資源繼續學習。當然，如果有一本紙質書，就更好了，這方面我推薦<>。下面是一些我覺得不錯的網上資源：

HTML語言參考（英文） HTML教程 一些我認為你可能已經知道的術語的參考 文字 文字 文件 檔案，通常指內容是資料（而不是程式）的檔案

[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]