美感的HTML代碼

如何讓代碼具有美感?對於HTML而言,這一切都是手工活。讓我們看看標記語言如何能達到具有美感的境界。    

HTML5-HTML5及其新元素帶來了前所未有的美感。

DOCTYPE-HTML5擁有最佳的文檔類型。

Indentation-跳位字元與空格用於縮進代碼,以正確顯示標籤之間的父子關係,強調層級結構。

Charset-在所有內容之前,必須在頭部進行字元集聲明。

Title-網站標題簡單而清晰。首先表述該頁面的功能,在分隔符號之後,用網站標題結尾。

CSS-只用了一個簡單的樣式表(媒體類型已在樣式表中聲明),並且僅面向于優良的流覽器。IE6及更低版本將獲取通用的樣式表。

Body-為主體賦予ID,便能在無需更多標記的情況下,給不同頁面設定獨有的樣式。

JavaScript-從Google調用了jQuery(最具美感的JavaScript腳本庫)。僅載入了單個JavaScript文件。各腳本都在頁面底端進行引用。

FilePath-為提高效率,站點資源使用相對路徑。從適應轉載的角度考慮,內容性檔(如圖片)則採用絕對路徑。

ImageAttributes-圖片包含替換文字,主要是為圖片缺失情況而服務的,但同時也可用於驗證。為了提高渲染效率,圖片的寬度與高度最好也要說明。

MainContentFirst–頁面的主要內容應在,基本的標示及導航之後,而在任何輔助內容(如:邊欄)之前。

AppropriateDescriptiveBlock-LevelElements–HEADER、NAV、SECTION、ARTICLE、ASIDE……這些新出現的“描述區段”,都將比從前的DIV更好地描述內容。

Hierarchy–大寫標題標籤將起到實效,並跟隨著清晰的“層級結構”。

AppropriateDescriptiveTags–根據不同的需要,列表被標記為:未排序、已排序,以及並不常用的自定義列表。

CommonContentIncluded–在不同頁面所出現的相同內容,最好能從伺服器端包含到頁面中。(無論通過任何對你行之有效的方式、語言、CMS,等等。)

SemanticClasses–不僅需要設立正確的元素名稱,還更應做到類和ID的命名符合語意:即使沒有特定說明,它們也能起到描述的作用。(如“col”比“left”更好)

Classes–當多個元素需要用到類似樣式的時候,儘量為它們定義相同的類。(重用性)

IDs–當頁面中該元素僅出現一次的時候,儘量為它們定義ID,而請勿為不同元素定義相同ID。

DynamicElements–動態效果僅在確實所需的時候加入。

CharactersEncoded–當出現特殊字元的時候,請注意字元編碼。

FreeFromStyling-頁面上的一切無關樣式,甚至無需指明需要怎樣的樣式。頁面上的一切僅限以下三項:所需的站點資源、內容、描述。

Comments-在查看代碼的時候,那些並不需要特別強調,或者不是格外明顯的內容,將會被包括在評論之中。

Valid-全站的標記符合W3C驗證。注意標籤閉合,保證必要屬性,避免廢棄方法,等等。