doctype – html5 擁有最佳的文檔類型

每當我訪問精美的網站,我都情不自禁地會去查看源代碼這就好比你擁有一副x光眼鏡,能夠看到任何人——甚至透視他們的遮羞布這簡直是天經地義的事情嘛!我迫不及待地想了解,這個精美的網站,是不是由同樣具有美感的代碼所寫成,而或者只是金玉其外敗絮其中代碼?美感?當然!歸根結蒂,代碼如詩(譯注:“code is poetry”為著名博客系統 wordpress 的宣傳語)這僅僅是最基礎的 html 而已,自然不如其它動態語言般復雜而優雅,但它依舊保持了它的創造者所賦予的藝術筆觸

圖片有足夠大(譯注:2000×2000),你大可以把它打印出來并貼在你的個人儲物箱中,并讓你的朋友留下深刻印象話說回來,這的確是個令人糾結的大小我會放出 psd 原圖方便大家修改

hierarchy – 大寫標題標簽將起到實效,并跟隨著清晰的“層級結構”

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

3、原 psd

charset – 在所有內容之前,必須在頭部進行字符集聲明

file path – 為提高效率,站點資源使用相對路徑從適應轉載的角度考慮,內容性文件(如圖片)則采用絕對路徑

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

javascript – 從 google (谷歌)調用了 jquery(最具美感的 javascript 腳本庫)僅加載了單個 javascript 文件各腳本都在頁面底端進行引用

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

html5 – html5 及其新元素帶來了前所未有的美感

characters encoded – 當出現特殊字符的時候,請注意字符編碼

4、原 html

早在兩年之前,我便寫過這個話題說來話長,何況正在到來的 html5 甚至比當年的 xtml 1.1 更加讓 html 充滿美感所以,我更新了此文!

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

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

這就讓我不禁開始思考,如何讓代碼具有美感?對于 html 而言,這一切都是手工活讓我們看看標記語言如何能達到具有美感的境界

appropriate descriptive block-level elements – header、nav、section、article、aside ……這些新出現的“描述區段”,都將比從前的 div 更好地描述內容

beautiful-html-chs

譯者:雖然不算新文,但是圖文結合的方式相當不錯亦根據更新后的文章增補及漢化了附圖

2、原 png

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

原文:http://css-tricks.com/what-beautiful-html-code-looks-like/

翻譯:http://horans.cn/what-beautiful-html-code-looks-like/

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

title – 網站標題簡單而清晰首先表述該頁面的功能,在分隔符之后,用網站標題結尾

css – 只用了一個簡單的樣式表(媒體類型已在樣式表中聲明),并且僅面向于優良的瀏覽器ie6 及更低版本將獲取通用的樣式表

valid – 全站的標記符合 w3c 驗證注意標簽閉合,保證必要屬性,避免廢棄方法,等等

【相關資料】

common content included – 在不同頁面所出現的相同內容,最好能從服務器端包含到頁面中)

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

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

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

1、原文

indentation – 制表符與空格用于縮進代碼,以正確顯示標簽之間的父子關系,強調層級結構