標籤：des blog http io ar 使用 java strong sp
每當我訪問精美的網站，我都情不自禁地會去查看原始碼。這就好比你擁有一副X光眼鏡，能夠看到任何人——甚至透視他們的遮羞布。這簡直是天經地義的事情嘛！我迫不及待地想瞭解，這個精美的網站，是不是由同樣具有美感的代碼所寫成，而或者只是金玉其外敗絮其中。代碼？美感？當然！歸根結蒂，代碼如詩。（譯註：“Code is poetry”為著名部落格系統 Wordpress 的宣傳語。）這僅僅是最基礎的 HTML 而已，自然不如其它動態語言般複雜而優雅，但它依舊保持了它的創造者所賦予的藝術筆觸。
這就讓我不禁開始思考，如何讓代碼具有美感？對於 HTML 而言，這一切都是手工活。讓我們看看標記語言如何能達到具有美感的境界。
圖片有足夠大（譯註：2000x2000），你大可以把它列印出來並貼在你的個人儲物箱中，並讓你的朋友留下深刻印象。話說回來，這的確是個令人糾結的大小。我會放出 PSD 原圖方便大家修改。
- HTML5 - HTML5 及其新元素帶來了前所未有的美感。
- DOCTYPE - HTML5 擁有最佳的文件類型。
- Indentation - 定位字元與空格用於縮排代碼，以正確顯示標籤之間的父子關係，強調層級結構。
- Charset - 在所有內容之前，必須在頭部進行字元集聲明。
- Title - 網站標題簡單而清晰。首先表述該頁面的功能，在分隔字元之後，用網站標題結尾。
- CSS - 只用了一個簡單的樣式表（媒體類型已在樣式表中聲明），並且僅面向於優良的瀏覽器。IE6 及更低版本將擷取通用的樣式表。
- Body - 為主體賦予 ID，便能在無需更多標記的情況下，給不同頁面設定專屬的樣式。
- JavaScript - 從 Google （Google）調用了 jQuery（最具美感的 JavaScript 指令碼庫）。僅載入了單個 JavaScript 檔案。各指令碼都在頁面底端進行引用。
- File Path - 為提高效率，網站資源使用相對路徑。從適應轉載的角度考慮，內容性檔案（片）則採用絕對路徑。
- Image Attributes - 圖片包含替換文字，主要是為圖片缺失情況而服務的，但同時也可用於驗證。為了提高渲染效率，圖片的寬度與高度最好也要說明。
- Main Content First – 頁面的主要內容應在，基本的標示及導航之後，而在任何輔助內容（如：側邊欄）之前。
- Appropriate Descriptive Block-Level Elements – HEADER、NAV、SECTION、ARTICLE、ASIDE ……這些新出現的“描述區段”，都將比從前的 DIV 更好地描述內容。
- Hierarchy – 大寫標題標籤將起到實效，並跟隨著清晰的“層級結構”。
- Appropriate Descriptive Tags – 根據不同的需要，列表被標記為：未排序、已排序，以及並不常用的自訂欄表。
- Common Content Included – 在不同頁面所出現的相同內容，最好能從伺服器端包含到頁面中。（無論通過任何對你行之有效方式、語言、CMS，等等。）
- Semantic Classes – 不僅需要設立正確的元素名稱，還更應做到類和 ID 的命名符合語意：即使沒有特定說明，它們也能起到描述的作用。（如“col”比“left”更好）
- Classes – 當多個元素需要用到類似樣式的時候，盡量為它們定義相同的類。（重用性）
- IDs – 當頁面中該元素僅出現一次的時候，盡量為它們定義 ID，而請勿為不同元素定義相同 ID。
- Dynamic Elements – 動態效果僅在確實所需的時候加入。
- Characters Encoded – 當出現特殊字元的時候，請注意字元編碼。
- Free From Styling - 頁面上的一切無關樣式，甚至無需指明需要怎樣的樣式。頁面上的一切僅限以下三項：所需的網站資源、內容、描述。
- Comments - 在查看代碼的時候，那些並不需要特彆強調，或者不是格外明顯的內容，將會被包括在評論之中。
- Valid - 全站的標記符合 W3C 驗證。注意標籤閉合，保證必要屬性，避免廢棄方法，等等。
- 【相關資料】 1、原文 2、原 PNG 3、原 PSD 4、原 HTML
原文：http://css-tricks.com/what-beautiful-html-code-looks-like/
翻譯：http://horans.cn/what-beautiful-html-code-looks-like/
譯者：雖然不算新文，但是圖文結合的方式相當不錯。亦根據更新後的文章增補及漢化了附圖。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
早在兩年之前，我便寫過這個話題。說來話長，何況正在到來的 HTML5 甚至比當年的 XTML 1.1 更加讓 HTML 充滿美感。所以，我更新了此文！
HTML代碼的美感
