只承認一個個確實存在的東西，凡幹擾這一具體存在的空洞的普遍性概念都是無用的累贅和廢話，應當一律取消。如無必要，勿增實體。
---奧卡姆剃刀
周末找了兩個主題研究了一下：CSS Regex
看了《CSS禪意花園》，第一遍看完感覺意猶未盡，第二遍隨手記下關鍵之處：
1. HTML語言的本意是以結構化的方式表示文檔 。一些基本的HTML的元素被濫用於頁面配置中。例如Table就是用來顯示二維資料，而不是用於頁面配置，我們這樣用是因為它一直表現的良好。而Font本來是文檔層級的標籤的確是過度使用了。
2. HTML只關注文檔，至於樣式完全交給CSS來表現，這樣頁面就變成了兩層：HTML代表的文檔層，CSS代表的表現層，為了兩層之間的靈活可以添加JavaScript層。
3. 看看這行經常被我們順手刪掉的代碼：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
文件類型聲明讓瀏覽器和使用者（包括搜尋引擎）知道你使用的HTML語言類型，是一個健壯文檔所必需的。之後的Title應該概括當前頁的內容而不是千篇一律的標識系統名稱。
4. 原則：根據文檔的內容和結構選擇HTML元素，而不是HTML的樣式。
換句話說，HTML標籤使用得越少越好
例如用P包含段落而不是為了換行，blockquote包含引用的語句而不是為了縮排
5. 為什麼基於Web標準開發？更小的檔案 更快的下載速度 更好的可訪問性
（W3c content-accessibility guidelines）
6. XHTML標準中可用的HTML元素較少，使用了一些更有明確意義的，如果你沒有找到合適的標籤來描述一個結構可以使用span div代替。當然也要避免濫用DIV，嵌套太多層不是一個好主意。
7. 應用樣式可以使用class id前者是可以複用的，而後者在一個頁面上是獨一無二的
8. <script type="text/javascript" ></script>頁面上添加這樣一個空指令碼可以解決IE中文檔樣式短暫缺失的情況。
9. 頁面上如果使用了img那麼我們的頁面就被限制在這個確定的圖片中，推薦的替換方案是：
<div id="img"><span></span></div> span標籤的一個重要作用是映像替換
10. 基於標準的設計很重要的一個目標就是避免不必要的元素。
11. 內容決定樣式，如果內容本身就十分複雜，而且足夠吸引瀏覽者的注意那麼就沒有必要添加過多的修飾。
12. 表徵圖是簡化了的符號，用來標識某一個事物和概念，或者用一個抽象化的圖形來代替一段很長的文字。
13. 線條的作用是增加頁面的韻律和層次，但是過多的線條會給瀏覽者網格結構的暗示，無論你的原意是不是這樣。所以線條只用在最需要的地方。
14. 為頁面留白是一個很好的理念，文本需要呼吸的空間，瀏覽者需要思考的空間。間隔的空白並不是什麼都沒有，資訊顯示的方式更加優雅，讓瀏覽者倍感輕鬆。
15. 光和影的作用是增強真實感 距離感 和層次感，說到底是怎樣使用光源的問題。錯誤的使用光源會把問題搞糟，比如光影效果的不一致。
16. 形狀：圓形經常和女性、溫暖舒適 愛情聯絡在一起；圓弧經常和社區、群體、忍耐、運動、安全的含義。三角形通常讓人聯想到男性陽剛表達諸如強壯、攻擊、運動感等含義。瀏覽者的目光經常被稜角的方嚮導向，指向上方代表攻擊性，指向下方則暗示出消極的意義。方形暗示了力量和根基可以讓它看起來足夠的監視穩重。
17. 色彩：藍色是全世界範圍內都被廣泛接受的顏色。紅色和白色同時使用有加強的意義。綠色在美國讓人聯絡到金錢，在其它的文化環境中不一定。橙色標識降價，這也是一個世界範圍內的共識。黃色代表了溫暖樂觀。紫色一直是頁面配色的禁忌。棕色是一種中立顏色。黑色代表沉重，白色代表純潔，可是同時這兩種顏色都有悲傷和死亡的暗示。
不同的顏色還會引起瀏覽者不同的心理聯想。CSS現在支援17中顏色。
18. 圖案：是重複填充到指定地區的一小塊視覺元素；CSS background-repeat屬性就可以靈活的解決這個問題。
19. 布局：HTML文檔流按照聲明順序顯示在頁面上，absolute可以將文檔中的位置從原來的位置上刪除，並重新置放到新的任意位置上；float並不是定位選項而是給元素分配空間，然後然文檔中的其它元素自動環繞其周圍；float的優勢在於它保留在文檔之中而周圍的元素也清楚它的位置。
絕對位置是一個最直接最有效最簡單的布局方式，而如果那些需要考慮頁尾，或者其它元素需要瞭解周圍元素的布局，Float是不二之選。
20. IE瀏覽器會將浮動元素的水平外邊距加倍，權宜之計就是添加display：inline
21. 如果一個頁面需要分三欄而且有頭尾，分出的三欄又寬度高度不統一可以使用#Wraper
float的方式，然後Footer使用Clear：both來清除前面定義的浮動定義。
22. 巧妙的組合使用布局，唯一可能讓作品受限制的就是創造力。
23. 流式布局liquid頁面寬度使用百分比指定，所以瀏覽器大小變化的時候，頁面的寬度也變化。而固定式配置的時候頁面寬度是不變化的。
24. 頁面置中：路子1：在要置中的元素外面套一層Div，設定width 並將margin-left margin-right設定為Auto
路子2：設定text-align為center並應用到body上，遺憾的是我們還要添加一個文本居靠左對齊的代碼，因為內容文本也置中了。
路子3：組合使用自動外邊距和文本對齊：使用路子1並把text-align設定為left
路子4：負外邊距同時使用絕對位置：position：absolute left;50% margin_left:-380px 這是目前最好的方案
25. LOGO：為什麼很多網站都放在左上方？因為瀏覽者的目光首先落在這裡；
右上方的內容重要性略輸於左上方，但是還是高於其它部分的內容。
26. 內容溢出:使用浮動就一定要同時清除浮動,使用浮動的時候最容易出現的情況就是內容溢出.限制溢出的方法:1.清除浮動 2.同時使用overflow 這個方法比較好 3.斜有時候也會引起內容溢出4.單位使用em代替px
27. 映像:映像的格式有很多種，但是適合Web的只有三種：GIF JPEG PNG；Jpeg不支援透明度 GIF支援1位的透明設定 PNG支援8位的透明度
周末看的電影:《男兒當自強之莫欺少年窮》 主演：Beyond
周一的時候要記得給花換水！
Let life be beautiful like summer flowers and death like autumn leaves.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
