舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

「HTML-良好的寫作風格」修訂間的差異

出自 MozTW Wiki

 
行 1: 行 1:
html 實在相當簡單,每一個 tag 的名稱也是根據英文簡稱來命名的,所以也很好記憶,但是,當 html 碼愈來愈多的情況下,要維護就變得不是那麼容易了,你可以籍由一些良好的寫作風格來減轉你維護的負擔。
+
[[HTML]] 實在相當簡單,每一個標籤(tag)的名稱也是根據英文簡稱來命名的,所以也很好記憶,但是,當 HTML 碼愈來愈多的情況下,要維護就變得不是那麼容易了,你可以籍由一些良好的編製風格來減轉你維護的負擔。
  
# tag 有頭就有尾(空元素除外),不要輕易省去尾部:
+
<!-- 編製 = 良好 = authoring -->
#* 基本上這種語法是不被允許的,可是 IE 卻可容許這種不合法的語法,這間接造成使某些人忽略這個問題,而造成許多其他的瀏覽器無法正常瀏覽,另外,有頭無尾也容易造成原始碼維護上的困難。
+
 
# 善用縮排,層次更清楚:
+
良好的編製三原則:簡單、清楚、正確
#* 很多人寫網頁不會管那麼多,寫了就寫了,但是如果不利用縮排,卻將原始碼全部擠在一堆,到時候維護起來,真的是有害健康。
+
 
# 利用注釋語法<nowiki><!--  --></nowiki>區別不同的原始碼區塊:
+
# 原始碼要寫的<strong>正確</strong>,通常這很容易就可看出了
#* 如果有常看其他較專業的網頁原始碼,有時候他們會加註<nowiki><!-===top bar===-></nowiki>,用來表示接下來的區塊是用來描述網頁的某部份,這時如果要修改的話,直接從註釋的部份找就很容易了。
+
#* 標籤有頭就有尾(空元素除外),不要輕易省去尾部。常用的空元素為 &lt;hr&gt;、&lt;img&gt;、&lt;link&gt;、與 &lt;br&gt;。
 +
#* 巢套(nesting)的順序要正確,例如要寫 <code>&lt;p&gt;&lt;strong&gt;XXX&lt;/strong&gt;&lt;/p&gt;</code> 而不是 <code>&lt;p&gt;&lt;strong&gt;XXX&lt;/p&gt;&lt;/strong&gt;</code>
 +
#* 巢套要符合邏輯,例如你可以寫 <code>&lt;td&gt;&lt;a href="hello"&gt;hello&lt;/a&gt;&lt;/td&gt;</code>(表格欄位 td 內包括超鏈結),但不能倒過來寫 <code>&lt;a href="hello"&gt;&lt;td&gt;hello&lt;/td&gt;&lt;/a&gt;</code>。一般如果懂標籤的意思就能猜出正確的用法,所以可以不用背。
 +
#* 一句品管名言說「品質是製造出來的,不是檢測出來的」。有許多設計師僅依賴在瀏覽器(如 Internet Explorer (IE) 與 Firefox )上測試來檢測網頁的品質,這是不正確的做法。另外,所有的瀏覽器都有容錯功能,這使得錯誤不容易在瀏覽器上看出,並且這些錯誤可能會隨著多次網頁編輯演化而造成一些怪現象。要保持原始碼的正確性與維護性最好的作法便是在編製時有良好的紀律。
 +
# 原始碼要寫的<strong>清楚</strong>
 +
#* 善用縮排,層次更清楚:
 +
#** 很多人寫網頁不會管那麼多,寫了就寫了,但是如果不利用縮排,卻將原始碼全部擠在一堆,到時候維護起來,真的是有害健康。
 +
#* 原始碼要能不解自明 (self-explanatory)
 +
#** 善用好的 CSS class 名稱與 title 或 alt 等屬性可以增加原始碼易讀性。舉例來講,<code>&lt;img title="公司簡介,工作機會,與投資資訊" alt="關於我們" src="images/about-button" class="瀏覽按鈕"&gt;</code> 說明如何利用 HTML 本身來解釋自己(當然,實做上不一定需要用到全部)。
 +
#* 利用注釋語法<nowiki><!--  --></nowiki>區別不同的原始碼區塊:
 +
#** 如果有常看其他較專業的網頁原始碼,有時候他們會加註<nowiki><!-===top bar===-></nowiki>,用來表示接下來的區塊是用來描述網頁的某部份,這時如果要修改的話,直接從註釋的部份找就很容易了。
 +
#** 注意不要過度依賴注釋,應把它當成無法用 HTML 本身來說明 HTML 的最後辦法。
 +
 
 +
[[Category:HTML]]
 +
{{link|推廣專案|HTML}}

於 2005年5月24日 (二) 09:38 的修訂

HTML 實在相當簡單,每一個標籤(tag)的名稱也是根據英文簡稱來命名的,所以也很好記憶,但是,當 HTML 碼愈來愈多的情況下,要維護就變得不是那麼容易了,你可以籍由一些良好的編製風格來減轉你維護的負擔。


良好的編製三原則:簡單、清楚、正確

  1. 原始碼要寫的正確,通常這很容易就可看出了
    • 標籤有頭就有尾(空元素除外),不要輕易省去尾部。常用的空元素為 <hr>、<img>、<link>、與 <br>。
    • 巢套(nesting)的順序要正確,例如要寫 <p><strong>XXX</strong></p> 而不是 <p><strong>XXX</p></strong>
    • 巢套要符合邏輯,例如你可以寫 <td><a href="hello">hello</a></td>(表格欄位 td 內包括超鏈結),但不能倒過來寫 <a href="hello"><td>hello</td></a>。一般如果懂標籤的意思就能猜出正確的用法,所以可以不用背。
    • 一句品管名言說「品質是製造出來的,不是檢測出來的」。有許多設計師僅依賴在瀏覽器(如 Internet Explorer (IE) 與 Firefox )上測試來檢測網頁的品質,這是不正確的做法。另外,所有的瀏覽器都有容錯功能,這使得錯誤不容易在瀏覽器上看出,並且這些錯誤可能會隨著多次網頁編輯演化而造成一些怪現象。要保持原始碼的正確性與維護性最好的作法便是在編製時有良好的紀律。
  2. 原始碼要寫的清楚
    • 善用縮排,層次更清楚:
      • 很多人寫網頁不會管那麼多,寫了就寫了,但是如果不利用縮排,卻將原始碼全部擠在一堆,到時候維護起來,真的是有害健康。
    • 原始碼要能不解自明 (self-explanatory)
      • 善用好的 CSS class 名稱與 title 或 alt 等屬性可以增加原始碼易讀性。舉例來講,<img title="公司簡介,工作機會,與投資資訊" alt="關於我們" src="images/about-button" class="瀏覽按鈕"> 說明如何利用 HTML 本身來解釋自己(當然,實做上不一定需要用到全部)。
    • 利用注釋語法<!-- -->區別不同的原始碼區塊:
      • 如果有常看其他較專業的網頁原始碼,有時候他們會加註<!-===top bar===->,用來表示接下來的區塊是用來描述網頁的某部份,這時如果要修改的話,直接從註釋的部份找就很容易了。
      • 注意不要過度依賴注釋,應把它當成無法用 HTML 本身來說明 HTML 的最後辦法。
個人工具