網(wǎng)頁組成部分
- 一般來說，一個網(wǎng)頁分為三個部分組成夺谁，HTML標(biāo)簽結(jié)構(gòu)廉赔，CSS樣式表現(xiàn)，Javascript行為匾鸥，這樣構(gòu)成一個動態(tài)交互的網(wǎng)頁
- 這三部分的劃分也體現(xiàn)了分離的思想蜡塌，減少了契合度，有利于頁面的維護勿负，但是我們很少注重到頁面的結(jié)構(gòu)馏艾，見到一個頁面都是怎么想去css樣式去實現(xiàn)，出現(xiàn)問題就不斷加div包裹奴愉，或者隨意的刪減標(biāo)簽琅摩，這樣做是很不好的，一是自己累的要死躁劣，二是也不有利于標(biāo)簽的語義化迫吐，不利于瀏覽器的解析和搜索引擎爬蟲的查找库菲，可是當(dāng)我一旦重視頁面的標(biāo)簽結(jié)構(gòu)和便簽的語義化后账忘，你會發(fā)現(xiàn)結(jié)構(gòu)簡單清晰，代碼寫的少熙宇，效率更高鳖擒。
案列
- 接下來以一個用戶評論的實例來看一看真正的結(jié)構(gòu)語義化。
![P0B$}1Z8{E8DX1LP9SIZH]2.png](http://upload-images.jianshu.io/upload_images/3361706-bf68300f38f6f1e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 大家一般看到這個簡單的板塊烫止，還不好寫蒋荚，一般新手的思路是這樣的：
這就是典現(xiàn)的div砌磚塊布局，div包裹馆蠕，左邊一個div包裹圖片實現(xiàn)樣式期升，右邊一個div包裹實現(xiàn)內(nèi)容樣式，這就是濫用div啊互躬，我們來看一看這種方式的寫法
<div class="demo01">
<div class="left">
<img class="userPic" src="images/head01.jpg" width="50" height="50" />
</div>
<div class="right">
<span class="pubTime">10分鐘前</span>
<h6>櫻桃小丸子</h6>
<p>神奇教育是由教育部高等教育司2001年12月批準(zhǔn)立項試點播赁，2005年4月正式批準(zhǔn)運營的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國的學(xué)員提供學(xué)歷(專升本吼渡，高起專)和非學(xué)歷教育咨詢容为、報名、學(xué)習(xí)輔導(dǎo)、課程考試坎背、交費等7X24小時學(xué)習(xí)支持服務(wù)***88888888替劈。</p>
</div>
</div>
.demo01{width:600px; overflow:hidden}
.demo01 .left{ width:100px; float:left}
.demo01 .left .userPic{margin-left:20px}
.demo01 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo01 .right h6{ margin-bottom:5px}
.demo01 .right .pubTime{ float:right;color:#999; margin-top:-8px}我們可以看出寫法1的代碼結(jié)構(gòu)語義化較差，多了2個無用的div包裹得滤，對CSS樣式掌握的很膚淺陨献，只會用div浮動來實現(xiàn)位置的效果。
-
那么再看看一般的人會怎么實現(xiàn)這個效果懂更。
<div class="demo02"> <img class="userPic" src="images/head01.jpg" width="50" height="50" /> <div class="right"> <span class="pubTime">10分鐘前</span> <h6>櫻桃小丸子</h6> <p>奧鵬教育是由教育部高等教育司2001年12月批準(zhǔn)立項試點湿故，2005年4月正式批準(zhǔn)運營的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國的學(xué)員提供學(xué)歷(專升本膜蛔，高起專)和非學(xué)歷教育咨詢坛猪、報名、學(xué)習(xí)輔導(dǎo)皂股、課程考試墅茉、交費等7X24小時學(xué)習(xí)支持服務(wù)400-810-6736。</p> </div></div>
.demo02{width:600px; overflow:hidden}
.demo02 .userPic{float:left; margin-left:20px}
.demo02 .right{ width:458px; float:right; padding:20px;background-color: #EEF7FF;border: 1px solid #CCC}
.demo02 .right h6{ margin-bottom:5px}
.demo02 .right .pubTime{ float:right;color:#999; margin-top:-8px} 我們看到方法2的實現(xiàn)方式好一點呜呐，一是語義化更好就斤，減少了無用的div class為left的標(biāo)簽，css樣式的代碼也少些的一行蘑辑，因為小白不知道CSS中圖片可以用浮動和marigin來調(diào)整好位置洋机，不需要直接在外層包裹一個div來浮動。
-
最后洋魂，我們再來看看一個合格的前端工程師是怎么實現(xiàn)這個效果的：
<div class="demo03">
<img class="userPic" src="images/head01.jpg" width="50" height="50" />
<h5>櫻桃小丸子</h5>
<p>奧鵬教育是由教育部高等教育司2001年12月批準(zhǔn)立項試點绷旗，2005年4月正式批準(zhǔn)運營的遠(yuǎn)程教育公共服務(wù)體系，為遍布全國的學(xué)員提供學(xué)歷(專升本副砍，高起專)和非學(xué)歷教育咨詢衔肢、報名、學(xué)習(xí)輔導(dǎo)豁翎、課程考試角骤、交費等7X24小時學(xué)習(xí)支持服務(wù)400-810-6736。</p>
<span class="pubTime">10分鐘前</span>
</div>.demo03{width: 460px;padding:20px;position: relative;background-color: #EEF7FF;border: 1px solid #CCC; margin-left:100px} .demo03 h6{ margin-bottom:5px} .demo03 .dialog p{text-indent: 2em; line-height:20px} .demo03 .userPic{ float:left; margin:-20px 0 0 -100px} .demo03 .pubTime{position:absolute; top:10px; right:20px; color:#999;} 我們來分析以下最后一種寫法心剥，明顯結(jié)構(gòu)的語義化更好邦尊，直接將2個無用的div標(biāo)簽給去掉了，同時CSS的代碼更少优烧，這也要求我們必須對CSS有很好的掌握蝉揍，圖片直接用浮動和margin調(diào)整到指定位置，同時給右側(cè)的標(biāo)簽留下間距匙隔，為容器設(shè)置相對定位疑苫，為里面的子元素設(shè)置絕對定位熏版，可以達到調(diào)整元素位置的效果，這也反應(yīng)了合格的前端工程師在一個簡單的案例上為了實現(xiàn)結(jié)構(gòu)語義化更好捍掺，綜合使用了CSS的3大武器：定位+浮動+margin
參考視頻：慕課網(wǎng)css的網(wǎng)頁布局結(jié)構(gòu)和表現(xiàn)原則
