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