頁面佈局與編寫(續3)

概述

心塞，天天寫一篇博文斷了，昨天沒挖坑。。。因此這篇是補寫昨天的。

廢話少說，最近寫了一些頁面，也看了一些別人寫的頁面，深有體會，記錄下來供之後開發時參考，相信對其餘人也有用。

階段

我以爲頁面佈局與編寫的學習有下面三個階段：

1. 能用基本的html,css和js實現效果了。
2. 發現用html,css和js實現效果的多種方法，而且可以比較不一樣方法的優劣。
3. 可以選用最優的方法編寫html,css和js，作到代碼健壯(bug兼容性好)、代碼清晰(後期容易維護)。

這篇博文並不討論怎麼用html,css和js實現效果，而是主要記錄了我在代碼健壯和清晰方面的一些心得。

背景

若是背景是一個背景圖片的話，那麼必定要設置背景顏色，而這個顏色和你的背景圖片的底色是同樣的。

應對這種狀況：因爲這樣或那樣的緣由，致使頁面的2個部分出現了空隙，沒有被背景圖片覆蓋到，若是不設置背景顏色的話，這個空隙就成了一條白邊很難看，設置了背景顏色的話，空隙的顏色就是背景顏色，完美融入背景圖片裏面。

class

div是一個包裹標籤，自己並無任何含義。因此全部的div都必須加一個class，用來描述它的用途。

應對這種狀況：若是不看css，直接看html的話，html必須是清晰易讀的，ul、img、li、a等標籤具備很好的語義，可是看div倒是一臉懵逼，由於它沒有任何語義，因此加上class以後，可以清晰的看出這個div是幹什麼的。

圖片型標籤

有一些標籤是利用background來存放圖片的，自己並無任何文字。對於這種標籤，必須加上圖片上面的文字(除非文字太多不然不用加)，而且用下面的代碼保證文字不會顯現出來：

text-indent: -9999;
font-size: 0;

應對這種狀況：若是樣式表加載不出來的話，那麼這個標籤等於消失了，可是若是有文字的話，就會給用戶看到你寫的文字。固然，更重要的做用是爲了方便SEO。

a仍是div

提供給js操做的標籤，自己並不須要url跳轉，這個時候用a標籤或者div標籤均可以，可是，若是這個js涉及到用戶操做的話，就必須使用相似下面的a標籤而不是div標籤：

<a href="javascript:void(0);"></a>

應對這種狀況：若是樣式表加載不出來的話，div標籤沒有任何樣式，用戶根本不知道這裏可以進行一些用戶操做；可是a標籤具備下劃線和藍色樣式，用戶一看就知道這裏具備一些互動的操做。