訪客留言簿

星期二, 5月 06, 2008

二十個不到的 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 時也有機會用到,這點等用到時再找資料來看就好。

其它

2 comments:

Grey 提到...

註解標籤寫反囉 XD

wini 提到...

哭哭,老是在記 g(reat) 是大於,還是 l(arge) 是大於,結果完全忘了自己想要先打的是哪個了。 >w<

謝啦 -w-/

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權