HTML 基礎
HTML(Hypertext Markup Language),中文全名為「超文字標記語言」,是一種用來組織架構並呈現網頁內容的標記語言。網頁內容的組成,可能包含了段落、清單、圖片或表格…等。透過這篇文章,希望能幫助大家對 HTML 及其功能有基本的認識。
HTML 到底是什麼?
HTML 是一種標記語言(markup language),而非一般熟知的程式設計語言;它會告訴瀏覽器該如何呈現你的網頁 ── 單純簡易或是極其複雜的頁面都沒問題。HTML 包含了一系列的元素,而元素包含了標籤與內容,我們用標籤來控制內容的呈現樣貌,例如字體大小、斜體粗體、在文字或圖片設置超連結等。舉例來說,請看看以下這個句子:
My cat is very grumpy
如果我們想讓這個句子自成一個段落,那麼可以在它前後分別加上段落標籤(<p>),它就變成一個段落元素了:
htmlCopy to Clipboard
<p>My cat is very grumpy</p>
HTML 元素的組成
讓我們來仔細的觀察一下,內容、標籤和元素的關係:

我們可以看到基本的架構:
- 起始標籤:先打角括弧,也就是大於、小於的符號「< >」,裡面再放入元素名稱,如上面的例子「<p>」。起始標籤代表這個元素從這裡開始。
- 結束標籤:與起始標籤一樣,只是在元素名稱前面多了個前置斜線「/」。很容易理解地,內容的最後加上結束標籤,代表這個元素的尾端。在寫 HTML 時,很容易忘了最後的結束標籤,提醒大家要多注意唷!
- 內容:這個元素的內容,以上面的例子來說,內容就是這句文字。
- 元素:由起始標籤、結束標籤、內容所組成。
元素還可以有「屬性(Attribute)」,請大家看看下面的例子:

屬性能提供更多的資訊(當然,這個資訊是幫助我們更有效及方便編輯,不會呈現在網頁上),屬性包含了屬性名稱與值,你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。
屬性的組成包含:
- 在元素名稱和屬性之間有一個空格(如果有多個屬性,屬性之間也需要有空格)
- 屬性名稱後面接著等於符號「=」
- 屬性包在起始標籤裡面,如範例所示
