Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

HTML設計規範[2] XHTML網頁標誌語言的規則說明

CSS Layout設計首重HTML標籤的語義結構,除了要正確使用結構規則外,也要懂得選用正確的標籤以符合資料本身代表的意義,能夠對語義結構有精確的理解,才算是成功使用CSS Layout設計的第一步。而對於標籤結構我們目前選用的是XHTML 1.0這個標準。

XHTML的預設範例

?View Code HTML4STRICT

1
2
3
4
5
6
7
8
9
10
11
<!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的優點

  1. XHTML文件結構不像HTML那樣鬆散。
  2. XHTML文件可被大部份瀏覽器解讀顯示。
  3. HTML文件可輕易轉換成XHTML文件。
  4. 適用於不同的平台。

XHTML的規則

  1. 標籤名稱及屬性名稱都要用小寫。
  2. 所有標籤必須滿足巢狀排列,不可以交錯排列,且要有結束標籤。所有的標籤一定要有結束標籤,如果是空標籤的話 (base、img、br、hr、input…等等) 則要以「半型空格/>」結尾。
    ?View Code HTML4STRICT

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    錯誤的巢狀結構:
    <div>
    <ul>
    <li>第一點</li>
    <li>第二點</li>
    </div>
    </ul>
    <br>
     
    正確的巢狀結構:
    <div>
    <ul>
    <li>第一點</li>
    <li>第二點</li>
    </ul>
    <br />
    </div>
  3. 屬性值用引號括住 單引號、雙引號皆可,若沒特殊考量統一使用雙引號。
  4. 特殊字元的使用 如果在文件內有用到『<』『>』『&』或空白時,需以特殊字元來表示,如『&lt;』『&gt;』『&amp;』『&nbsp;』等。
  5. 不可省略屬性值 所有屬性值,不能最小化處理,要寫成readonly=”readonly”、 disabled =”disabled”。
  6. 不可遺漏標籤的必要屬性 標籤必要的屬性指的是,有些標籤使用了就一定要加上該標籤的必要屬性,像是img的src、alt,form的action,area的alt,map的id等,彼此都是形影不離的,如果該屬性的確沒有值,可以設定成空值。

必要屬性列表:

  • area:alt
  • base:href
  • form:action
  • :xmlns
  • img:src, alt
  • map:id
  • meta:content
  • optgroup:label
  • param:name
  • script:type
  • style:type
  • textarea:cols, rows

Leave a Reply

*