網(wǎng)站制作NEWS
使用HTML代碼編輯網(wǎng)頁模板的注意事項
好的HTML代碼是一個漂亮網(wǎng)站的基礎(chǔ)。當(dāng)我教別人CSS的時候, 我總是首先告訴他們: 良好的CSS只存在于良好的HTML標(biāo)記基礎(chǔ)上。這就好像一間房子需要一個堅固的地基一樣,對不? 整潔、語義化的HTML標(biāo)記具有很多的優(yōu)勢,但卻還是有很多網(wǎng)站使用著并不友好的標(biāo)記寫法。
讓我們來看一些寫得并不友好的HTML標(biāo)記, 并針對這些問題進行討論,從而學(xué)習(xí)如何書寫整潔規(guī)范的HTML標(biāo)記。
注: Chris Cyier在這里使用了兩個文檔來進行本文的代碼說明: bad code 和 good code 。大家學(xué)習(xí)的時候請參考著這兩個文件。
1. 嚴格的 DOCTYPE
我們要做到這一點,只需要按正確的步驟來做即可。 沒必要去討論是否使用HTML 4.01或 XHTML 1.0,兩者都對我們書寫正確的代碼提出了嚴格的要求。
但無論如何我們的代碼不應(yīng)該使用任何Tables表格來進行布局, 所以也就沒必要使用Transitional DOCTYPE.
注: 所謂的DTD就是文檔類型聲明,簡單來說,就是對特定文檔所定義的一些規(guī)則,這些規(guī)則包括一系列的元素和實體的聲明。XHTML文檔類型有三種: STRICT(嚴格類型), TRANSITIONAL(過渡類型)和 FRAMESET(框架類型)。目前,我們使用最多的是TRANSITIONAL,比如本站目前也是使用 XHTML 1.0 TRANSITIONAL。如果你的HTML代碼書寫的還算良好,那把現(xiàn)有的TRANSITIONAL 轉(zhuǎn)為STRICT還是比較方便的。反之,也不用太急著轉(zhuǎn),個人覺得,STRICT更嚴謹,但用TRANSITIONAL也并沒有太大影響。
2. Character set & encoding characters
在我們的 《head》 部份, 第一件事情就是聲明字符集。 我們使用了UTF-8, 但是把它放到了 《title》后面。 讓我們把字符集聲明移動到最上面,因為我們要讓瀏覽器在閱讀任何內(nèi)容之前就應(yīng)該知道以何種字符集來進行處理。
除了字符集聲明的位置外,《title》中出現(xiàn)的奇怪字符也是需要注意的問題,比如最常用的”&“字符,我們應(yīng)該使用字符實體”&“來替換它。
3. 適當(dāng)?shù)目s進
在書寫代碼的時候,縮進并不會影響網(wǎng)頁的外觀,但使用適當(dāng)?shù)目s進能使代碼更具可讀性,標(biāo)準(zhǔn)的縮進方法是當(dāng)你開始一個新的元素時縮進一個Tab位(或幾個空格)。另外,記得,關(guān)閉元素的標(biāo)簽與開始標(biāo)簽對齊。
注: 一些朋友會嫌書寫代碼的時候縮進比較麻煩,如果僅僅是你一個人閱讀這份代碼,那可能沒什么問題,你自己覺得OK就好。但如果是協(xié)作或你的作品是公開發(fā)布分享的,那書寫漂亮的可讀化性更高的代碼就很有必要了。
4. 使用外部CSS 和 JavaScript
我們有一些CSS代碼已經(jīng)延伸到我們的《head》部分。這是一個嚴重的犯規(guī),因為它它只能適用于單一的HTML網(wǎng)頁。保持獨立的CSS文件意味著未來的網(wǎng)頁可以鏈接到它們,并使用相同的代碼。Javascript也是同樣的道理。
注: 當(dāng)然,這個問題或許也并不是那么嚴重。比如作為WordPress主題來說,寫在《head》里面的代碼也就作用于所有WordPress頁面。但把CSS寫在《head》里面仍然是個非常不好的習(xí)慣。
五更分兩年年年稱心 一夜連兩歲歲歲如意 恭賀新春
多重隨機標(biāo)簽