二十個不到的 HTML 元素及屬性

前言

這篇是配合我另一篇手刻 HTML 簡單入門文件而寫的，算是第二課。

我常常會說要靠 CSS 佈置網頁的話， HTML 只要記二十個不到就好了，感覺有點誇大，所以我想實際寫出來看看，是不是真的太誇大了，畢竟我用的 HTML 元素種類真的太少了。

另外相關主題的文章，可以用網頁設計這個分類看一下。還有，我寫的這系列教學文章都是以編寫 CSS 為主在介紹的，所以比較常用到的會寫前面一點。

更新：

• 2008.05.06 01:50 -- 簡要草稿版本發佈

元素：

1. html / head / title / meta / link / body
2. style / script
3. h1 ~ h6
4. p / br
5. div / span
6. a
7. img / object
8. b / em / code
9. ul / ol / li
10. dl / dt / dd
11. table / caption / tr / th / td
12. blockquote / pre / fieldset / legend
13. form / input / select / option / textarea / label
14. ※註解標籤（「<!-- -->」、「/* */」、「//」）

屬性：

1. title / alt
2. id / class / style
3. href / src
4. type / value / name

初步整理

....... 嗯，實際列出來看了一下，所有寫 CSS 時有機會用到的 HTML 其實還挺多的，不過就分類上的確沒有超過二十個。（汗）

總之這裡我只先介紹寫 Blog 時最常用的的那幾個就好，剩下的就請有興趣的人自己 Google 了。

頁面資訊

HTML 是由外而內，層層包住的結構。

最外層是定義出這個檔案為 HTML 規則的檔案，讓瀏覽器能用 HTML 規則顯示，而不是當成純文字文件格式輸出（有手刻過網頁的話應該知道這跟純文字網頁有何不同）。

穿過給瀏覽器看的那一層外皮後，再進一層，就是像肌肉骨格這類的大架構了。

然後外皮包肉骨，肉骨包內臟，最後在內層跑的就是血液和細胞一類，可以簡單分散成細小狀態來看的東西了。

HTML 中等同於人類外型及皮膚的，大概就是「 html , head , title , meta , link , body 」這些，有這些特徵，才看得出來是個完整的網頁，但是其實只有一部分也是可以「運作」的，但是會缺一些功能倒是。

基本上這部分只要當初找到寫對的網頁，複製下來，自己確認一下自己要的有哪些，以後就是一直複製貼上使用而已，沒什麼需要手動去打字。

• html -- 說明這東西要用 HTML 規格繪製畫面用的。後面有時會接些 lang 之類的表示網頁的語言內容。另外寫在這元素的起始標籤前面的 !DOCTYPE 是要用來宣告使用哪一版本的規格、驗證要多嚴謹的（像 HTML 4.01 Transitional 或 XHTML 1.0 Strict 之類的）。除了 html 元素外，某些跨平台資料也會使用 xml 元素，這個等看到就知道有何不同了。
• head -- 裡面會包 meta 、 title 跟 link 或 style 、 script 一類的。這裡面放的，通常是希望在讀入包住網頁主要內容的 body 元素前，能先讓瀏覽器處理好的資訊。比如說 meta 配合 content 跟 http-equiv 兩個屬性及指定值，就能宣告網頁要使用什麼字元編碼方式來顯示內容，或者說是寫上「name="description"」，後面接 content 寫上網頁描述，這樣搜尋引擎就會丟出那個描述給搜尋到你網站的人看（meta 的應用挺多的，各位可以多多注意）；接著可能會寫 title 來宣告顯示在瀏覽器上方的網頁標題；最後則是連結一些外部資料、或是表示文件之間關係的 link ，還有處理 CSS 要用的 style 、處理 JavaScript 要用的 script 等元素。（這裡先看個印象就好）
• body -- 網頁要顯示的主要內容全都會裝在這裡面，不過有些已經寫在 head 裡面過的東西也可以再換個元素寫進來，加強表達迫力。（搜尋引擎在排序相關度時也會打比較高分的樣子）

區塊元素

就像人體的肉骨會包住臟器一樣，在 body 內的某些元素，也是可以包住一些元素的。

只是好比說膽臟包不住胸部那一塊肋骨，白血球吃不掉整顆肝臟， HTML 的元素也是有能包別人的跟不能包別人的分別，這點請慢慢花時間記。（最好是寫好後就丟給 HTML Validator 檢查一下）

（待寫）

行內元素

（待寫）

b, i, u, em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym http://www.w3.org/TR/html401/struct/text.html#h-9.2.1

屬性及值

屬性跟值這兩樣東西，拿骨頭來說明的話，元素是骨頭，屬性是人的頭骨，值則是這顆頭骨的大小，三者間的關係大概就是像這樣。

單一元素中，除了 id 以外，絕大部分的屬性都可以相安無事放在一起（當然也要可以給這元素用）；而有些屬性，如 class ，也可以放兩個以上的值（以 class 為例就是指複數的 class 名稱，大概可以寫成 class="A1 test TEST" 這種感覺）。

不過有些屬性內的值，大小寫是代表完全不同的兩樣東西，所以要注意一下。比如說像上面提到的 id 跟 class ，裡面寫 test 跟 TEST 代表的就是完全不同的東西。（不過 id 跟 class 用一樣的名稱並不會衝突倒是）

• id -- 寫 CSS 有很大機會用到，代表這個網頁檔案中，唯一的一個元素名稱（這的名稱我指的是 id="value" 中的 value），也就是 identification 啦。命名時盡量挑符合這元素用途的名稱為佳，比如說 header 、 sidebar 、 footer 或 MyPicture 、 NEWS 之類的，要注意開頭不可以是數字也不要使用符號（下底線的 "_" 倒是可以用）。另外配合 a 元素的頁內定錨功能（寫成「<a href="#ID_NAME">」這種感覺），可以點擊超連結後移動畫面到該元素的位置，當然跨文件時也一樣有用。
• class -- 寫 CSS 有非常多機會用到，算是一種分類屬性，舉例說像是一份列表中，有幾項是同樣需要注意的項目，就可以給他們同樣的 class 名稱（好比說 class="GOOD"），這樣 CSS 那邊改一下對應的 class 名稱選擇子的樣式規則，就可以一次變動相同名稱的資料了。印象中開頭不可以是數字的樣子，還有也不能使用符號。
• name -- 專門用來定錨用的，跟 id 一樣也是同一份網頁檔案中，一個 name 名稱只能出現一個，不然超連結在移動時，會不知道該停在哪一個上面。另外在處理 form 相關元素，還有編寫 JavaScript 時也有機會用到，這點等用到時再找資料來看就好。

其它

• HTMLクイックリファレンス