- 061 月
-
HTML設計規範[2] XHTML網頁標誌語言的規則說明
CSS Layout設計首重HTML標籤的語義結構,除了要正確使用結構規則外,也要懂得選用正確的標籤以符合資料本身代表的意義,能夠對語義結構有精確的理解,才算是成功使用CSS Layout設計的第一步。而對於標籤結構我們目前選用的是XHTML 1.0這個標準。
XHTML的預設範例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Untitled</title> </head> <body> </body> </html>
XHTML的優點
- XHTML文件結構不像HTML那樣鬆散。
- XHTML文件可被大部份瀏覽器解讀顯示。
- HTML文件可輕易轉換成XHTML文件。
- 適用於不同的平台。
XHTML的規則
- 標籤名稱及屬性名稱都要用小寫。
- 所有標籤必須滿足巢狀排列,不可以交錯排列,且要有結束標籤。所有的標籤一定要有結束標籤,如果是空標籤的話 (base、img、br、hr、input…等等) 則要以「半型空格/>」結尾。
錯誤的巢狀結構: <div> <ul> <li>第一點</li> <li>第二點</li> </div> </ul> <br> 正確的巢狀結構: <div> <ul> <li>第一點</li> <li>第二點</li> </ul> <br /> </div>
- 屬性值用引號括住 單引號、雙引號皆可,若沒特殊考量統一使用雙引號。
- 特殊字元的使用 如果在文件內有用到『<』『>』『&』或空白時,需以特殊字元來表示,如『<』『>』『&』『 』等。
- 不可省略屬性值 所有屬性值,不能最小化處理,要寫成readonly=”readonly”、 disabled =”disabled”。
- 不可遺漏標籤的必要屬性 標籤必要的屬性指的是,有些標籤使用了就一定要加上該標籤的必要屬性,像是img的src、alt,form的action,area的alt,map的id等,彼此都是形影不離的,如果該屬性的確沒有值,可以設定成空值。
必要屬性列表:
- area:alt
- base:href
- form:action
- html:xmlns
- img:src, alt
- map:id
- meta:content
- optgroup:label
- param:name
- script:type
- style:type
- textarea:cols, rows
Posted by admin Posted on 06 1 月
Post Comments 0