doctype – html5 擁有最佳的文檔類型
每當(dāng)我訪問精美的網(wǎng)站,我都情不自禁地會去查看源代碼這就好比你擁有一副x光眼鏡,能夠看到任何人——甚至透視他們的遮羞布這簡直是天經(jīng)地義的事情嘛!我迫不及待地想了解,這個精美的網(wǎng)站,是不是由同樣具有美感的代碼所寫成,而或者只是金玉其外敗絮其中代碼?美感?當(dāng)然!歸根結(jié)蒂,代碼如詩(譯注:“code is poetry”為著名博客系統(tǒng) wordpress 的宣傳語)這僅僅是最基礎(chǔ)的 html 而已,自然不如其它動態(tài)語言般復(fù)雜而優(yōu)雅,但它依舊保持了它的創(chuàng)造者所賦予的藝術(shù)筆觸
圖片有足夠大(譯注:2000×2000),你大可以把它打印出來并貼在你的個人儲物箱中,并讓你的朋友留下深刻印象話說回來,這的確是個令人糾結(jié)的大小我會放出 psd 原圖方便大家修改
hierarchy – 大寫標(biāo)題標(biāo)簽將起到實效,并跟隨著清晰的“層級結(jié)構(gòu)”
body – 為主體賦予 id,便能在無需更多標(biāo)記的情況下,給不同頁面設(shè)定獨有的樣式
3、原 psd
charset – 在所有內(nèi)容之前,必須在頭部進行字符集聲明
file path – 為提高效率,站點資源使用相對路徑從適應(yīng)轉(zhuǎn)載的角度考慮,內(nèi)容性文件(如圖片)則采用絕對路徑
ids – 當(dāng)頁面中該元素僅出現(xiàn)一次的時候,盡量為它們定義 id,而請勿為不同元素定義相同 id
javascript – 從 google (谷歌)調(diào)用了 jquery(最具美感的 javascript 腳本庫)僅加載了單個 javascript 文件各腳本都在頁面底端進行引用
classes – 當(dāng)多個元素需要用到類似樣式的時候,盡量為它們定義相同的類(重用性)
html5 – html5 及其新元素帶來了前所未有的美感
characters encoded – 當(dāng)出現(xiàn)特殊字符的時候,請注意字符編碼
4、原 html
早在兩年之前,我便寫過這個話題說來話長,何況正在到來的 html5 甚至比當(dāng)年的 xtml 1.1 更加讓 html 充滿美感所以,我更新了此文!
main content first – 頁面的主要內(nèi)容應(yīng)在,基本的標(biāo)示及導(dǎo)航之后,而在任何輔助內(nèi)容(如:邊欄)之前
dynamic elements – 動態(tài)效果僅在確實所需的時候加入
這就讓我不禁開始思考,如何讓代碼具有美感?對于 html 而言,這一切都是手工活讓我們看看標(biāo)記語言如何能達到具有美感的境界
appropriate descriptive block-level elements – header、nav、section、article、aside ……這些新出現(xiàn)的“描述區(qū)段”,都將比從前的 div 更好地描述內(nèi)容
beautiful-html-chs
譯者:雖然不算新文,但是圖文結(jié)合的方式相當(dāng)不錯亦根據(jù)更新后的文章增補及漢化了附圖
2、原 png
free from styling – 頁面上的一切無關(guān)樣式,甚至無需指明需要怎樣的樣式頁面上的一切僅限以下三項:所需的站點資源、內(nèi)容、描述
原文:http://css-tricks.com/what-beautiful-html-code-looks-like/
翻譯:http://horans.cn/what-beautiful-html-code-looks-like/
appropriate descriptive tags – 根據(jù)不同的需要,列表被標(biāo)記為:未排序、已排序,以及并不常用的自定義列表
title – 網(wǎng)站標(biāo)題簡單而清晰首先表述該頁面的功能,在分隔符之后,用網(wǎng)站標(biāo)題結(jié)尾
css – 只用了一個簡單的樣式表(媒體類型已在樣式表中聲明),并且僅面向于優(yōu)良的瀏覽器ie6 及更低版本將獲取通用的樣式表
valid – 全站的標(biāo)記符合 w3c 驗證注意標(biāo)簽閉合,保證必要屬性,避免廢棄方法,等等
【相關(guān)資料】
common content included – 在不同頁面所出現(xiàn)的相同內(nèi)容,最好能從服務(wù)器端包含到頁面中)
comments – 在查看代碼的時候,那些并不需要特別強調(diào),或者不是格外明顯的內(nèi)容,將會被包括在評論之中
semantic classes – 不僅需要設(shè)立正確的元素名稱,還更應(yīng)做到類和 id 的命名符合語意:即使沒有特定說明,它們也能起到描述的作用(如“col”比“left”更好)
image attributes – 圖片包含替換文字,主要是為圖片缺失情況而服務(wù)的,但同時也可用于驗證為了提高渲染效率,圖片的寬度與高度最好也要說明
1、原文
indentation – 制表符與空格用于縮進代碼,以正確顯示標(biāo)簽之間的父子關(guān)系,強調(diào)層級結(jié)構(gòu)
