理解css、div、javascript(js)，容器、內容與修飾，引起對將來網站的思考

　　在開發網站的過程當中，不斷理解網站的代碼構成，從抽象，逐步演變成頭腦中的預覽形象，這在不斷的工做中逐漸積累，併爲引導着對將來網頁優化、演變的思考。

　　div是容器，它包含着內容

　　對網頁中標籤的理解，常見有table、div、ul+li這些可理解爲容器，裏面裝着內容，如：h1-h六、p、a、img、b等內聯標籤。

　　而在開發中，爲了節約標籤增長減小維護層數，將p、a等內聯標籤賦予display:block的css屬性，使之成爲了塊級元素，實際上也造成了一個容器。

　　如今最新的html5標籤，如：header、footer、section、arcitle、nav等有語義的標籤，也都是塊級元素。在ie中爲了兼容html5標籤，也都用兼容性的腳本加上了display:block的屬性才能生效，那麼也能夠理解爲，這些元素也是容器。

　　既然容器的概念造成了，作爲內部元素的包裹，再往上一級呢?應該就是body，body其實也能夠理解爲一個div，整個網頁內容的容器嘛。

　　body再往上呢?就是html了，html也應該能夠算做是容器，也能夠加class，設置css屬性，那其實，整個html裏，都是容器套着容器，而核心所不一樣的，就是內容，這包含文本、圖片、音頻、視頻、地圖等一系列元素。

　　容器與內容，相輔相成，區別就是容器是結構控制，而內容是意義表達。

　　css的做用

　　單純的容器與內容是單調的，作爲修飾，就產生了修飾性的語言，css，針對容器進行樣式調整，例如：長、寬、邊框、間距、字體樣式等。

　　在最新的css3中，能夠用 .div-class:hover 這樣來設置一個div的鼠標hover時的樣式，在普通狀態下字體大小12px，hover狀態下字體14px，在div無hover的css中增長屬性transition:all .2s ease-out，就會產生一個0.2秒的過渡效果。而且經過更多屬性能夠作到翻轉、縮放、移動等諸多特效。

　　因此css不光能夠修飾網頁中容器、內容的表現形式，也能夠進行動態效果的設定。

　　javascript的做用

　　javascript(如下簡稱js)起到控制、操做的做用，讓容器、內容、css都「動」起來。

　　對於內容與元素的動畫控制，在沒有css3之前，打算作有過渡效果的文字放大、移動等動畫效果，是須要js來完成的，後來有了jQuery，極大的簡便了這一製做過程，如：$(‘div’).animate({‘font-size’:’14px’}, 200)，在0.2秒中將字體調整爲14px，但因爲最新的css3要比js的動畫效果更平滑、準確，體驗更好，但因爲css3的效果仍有必定侷限性，因此二者結合，將會產生更佳的效果。

　　js對內容的操做

　　js能夠獲取容器，並進行篩選，再深刻能夠對內容進行識別，觸發不一樣的處理方法。

　　js另外一個重要的做用就是容器內容的控制，它能夠改變容器中的內容。也能夠經過ajax技術獲取新的內容，替換掉容器原有內容。

　　隨之而來的思考

　　其實咱們的瀏覽器也能夠理解爲一個容器，換來換去的只是地址欄，url而已，瀏覽器沒變，變的是內容。

　　一樣，把html作爲容器，其實網站中許多頁面變來變去的只是內容，而框架基本沒變，但其實每個html頁面都把框架從新下載、加載了一次。

　　這是一種資源浪費。放大理解，能夠理解爲每次訪問一個內容頁，就是將瀏覽器從新下載了一次，再看到內容。

　　爲什麼不把不變的固定，將變的用js動起來?

　　在網站製做中已經實踐，如：http://www.igooda.cn/網站下方的新聞內容，點擊後採用bootstrap的彈窗效果顯示，ajax讀取網站內部內容，而不用打開新頁，並能夠進行一些控制。

　　其實一大罪魁禍首就是搜索引擎，也就是常見的SEO技術，爲了它的收錄網站，而且能在搜索結構中被搜索到，只能依據它的要求製做。

　　但其實搜索引擎也在倡導標籤簡化、結構清晰，但真正將整站用ajax跑起來，還真是一件頗有風險的事情。

　　目前，正在敢於嘗試一種可以妥善解決搜索引擎收錄問題且能最大化節約資源重複加載的方案。