在開(kāi)發(fā)網(wǎng)站的過(guò)程中，不斷理解網(wǎng)站的代碼構(gòu)成，從抽象，逐步演變成頭腦中的預(yù)覽形象，這在不斷的工作中逐漸積累，并為引導(dǎo)著對(duì)未來(lái)網(wǎng)頁(yè)優(yōu)化、演變的思考。
div是容器，它包含著內(nèi)容
對(duì)網(wǎng)頁(yè)中標(biāo)簽的理解，常見(jiàn)有table、div、ul+li這些可理解為容器，里面裝著內(nèi)容，如：h1-h6、p、a、img、b等內(nèi)聯(lián)標(biāo)簽。
而在開(kāi)發(fā)中，為了節(jié)約標(biāo)簽增加減少維護(hù)層數(shù)，將p、a等內(nèi)聯(lián)標(biāo)簽賦予display:block的css屬性，使之成為了塊級(jí)元素，實(shí)際上也形成了一個(gè)容器。
現(xiàn)在最新的html5標(biāo)簽，如：header、footer、section、arcitle、nav等有語(yǔ)義的標(biāo)簽，也都是塊級(jí)元素。在ie中為了兼容html5標(biāo)簽，也都用兼容性的腳本加上了display:block的屬性才能生效，那么也可以理解為，這些元素也是容器。
既然容器的概念形成了，做為內(nèi)部元素的包裹，再往上一級(jí)呢?應(yīng)該就是body，body其實(shí)也可以理解為一個(gè)div，整個(gè)網(wǎng)頁(yè)內(nèi)容的容器嘛。
body再往上呢?就是html了，html也應(yīng)該可以算作是容器，也可以加class，設(shè)置css屬性，那其實(shí)，整個(gè)html里，都是容器套著容器，而核心所不同的，就是內(nèi)容，這包含文本、圖片、音頻、視頻、地圖等一系列元素。
容器與內(nèi)容，相輔相成，區(qū)別就是容器是結(jié)構(gòu)控制，而內(nèi)容是意義表達(dá)。
css的作用
單純的容器與內(nèi)容是單調(diào)的，做為修飾，就產(chǎn)生了修飾性的語(yǔ)言，css，針對(duì)容器進(jìn)行樣式調(diào)整，例如：長(zhǎng)、寬、邊框、間距、字體樣式等。
在最新的css3中，可以用 .div-class:hover 這樣來(lái)設(shè)置一個(gè)div的鼠標(biāo)hover時(shí)的樣式，在普通狀態(tài)下字體大小12px，hover狀態(tài)下字體14px，在div無(wú)hover的css中增加屬性transition:all .2s ease-out，就會(huì)產(chǎn)生一個(gè)0.2秒的過(guò)渡效果。并且通過(guò)更多屬性可以做到翻轉(zhuǎn)、縮放、移動(dòng)等諸多特效。
所以css不光可以修飾網(wǎng)頁(yè)中容器、內(nèi)容的表現(xiàn)形式，也可以進(jìn)行動(dòng)態(tài)效果的設(shè)定。
javascript的作用
javascript(以下簡(jiǎn)稱(chēng)js)起到控制、操作的作用，讓容器、內(nèi)容、css都“動(dòng)”起來(lái)。
對(duì)于內(nèi)容與元素的動(dòng)畫(huà)控制，在沒(méi)有css3以前，打算做有過(guò)渡效果的文字放大、移動(dòng)等動(dòng)畫(huà)效果，是需要js來(lái)完成的，后來(lái)有了jQuery，極大的簡(jiǎn)便了這一制作過(guò)程，如：$(‘div’).animate({‘font-size’:’14px’}, 200)，在0.2秒中將字體調(diào)整為14px，但由于最新的css3要比js的動(dòng)畫(huà)效果更平滑、準(zhǔn)確，體驗(yàn)更好，但由于css3的效果仍有一定局限性，所以?xún)烧呓Y(jié)合，將會(huì)產(chǎn)生更佳的效果。
js對(duì)內(nèi)容的操作
js可以獲取容器，并進(jìn)行篩選，再深入可以對(duì)內(nèi)容進(jìn)行識(shí)別，觸發(fā)不同的處理方法。
js另一個(gè)重要的作用就是容器內(nèi)容的控制，它可以改變?nèi)萜髦械膬?nèi)容。也可以通過(guò)ajax技術(shù)獲取新的內(nèi)容，替換掉容器原有內(nèi)容。
隨之而來(lái)的思考
其實(shí)我們的瀏覽器也可以理解為一個(gè)容器，換來(lái)?yè)Q去的只是地址欄，url而已，瀏覽器沒(méi)變，變的是內(nèi)容。
同樣，把html做為容器，其實(shí)網(wǎng)站中許多頁(yè)面變來(lái)變?nèi)サ闹皇莾?nèi)容，而框架基本沒(méi)變，但其實(shí)每一個(gè)html頁(yè)面都把框架重新下載、加載了一次。
這是一種資源浪費(fèi)。放大理解，可以理解為每次訪(fǎng)問(wèn)一個(gè)內(nèi)容頁(yè)，就是將瀏覽器重新下載了一次，再看到內(nèi)容。
為何不把不變的固定，將變的用js動(dòng)起來(lái)?
一大罪魁禍?zhǔn)拙褪撬阉饕妫簿褪浅Ｒ?jiàn)的SEO技術(shù)，為了它的收錄網(wǎng)站，并且能在搜索結(jié)構(gòu)中被搜索到，只能依據(jù)它的要求制作。
但其實(shí)搜索引擎也在倡導(dǎo)標(biāo)簽簡(jiǎn)化、結(jié)構(gòu)清晰，但真正將整站用ajax跑起來(lái)，還真是一件很有風(fēng)險(xiǎn)的事情。
目前，正在勇于嘗試一種能夠妥善解決搜索引擎收錄問(wèn)題且能最大化節(jié)約資源重復(fù)加載的方案。
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀(guān)的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無(wú)需額外費(fèi)用，即可穩(wěn)步提升排名至首頁(yè)。歡迎體驗(yàn)最佳的哈爾濱網(wǎng)站建設(shè)。