网页布局结构和原则

网页组成部分

• 一般来说，一个网页分为三个部分组成，HTML标签结构，CSS样式表现，Javascript行为，这样构成一个动态交互的网页
• 这三部分的划分也体现了分离的思想，减少了契合度，有利于页面的维护，但是我们很少注重到页面的结构，见到一个页面都是怎么想去css样式去实现，出现问题就不断加div包裹，或者随意的删减标签，这样做是很不好的，一是自己累的要死，二是也不有利于标签的语义化，不利于浏览器的解析和搜索引擎爬虫的查找，可是当我一旦重视页面的标签结构和便签的语义化后，你会发现结构简单清晰，代码写的少，效率更高。

案列

• 接下来以一个用户评论的实例来看一看真正的结构语义化。

![P0B$}1Z8{E8DX1LP9SIZH]2.png](https://img.haomeiwen.com/i3361706/bf68300f38f6f1e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 大家一般看到这个简单的板块，还不好写，一般新手的思路是这样的：

Paste_Image.png

• 这就是典现的div砌砖块布局，div包裹，左边一个div包裹图片实现样式，右边一个div包裹实现内容样式，这就是滥用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月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务***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的代码结构语义化较差，多了2个无用的div包裹，对CSS样式掌握的很肤浅，只会用div浮动来实现位置的效果。

• 那么再看看一般的人会怎么实现这个效果。

     <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月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务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的实现方式好一点，一是语义化更好，减少了无用的div class为left的标签，css样式的代码也少些的一行，因为小白不知道CSS中图片可以用浮动和marigin来调整好位置，不需要直接在外层包裹一个div来浮动。

• 最后，我们再来看看一个合格的前端工程师是怎么实现这个效果的：
  <div class="demo03">
  <img class="userPic" src="images/head01.jpg" width="50" height="50" />
  <h5>樱桃小丸子</h5>
  <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点，2005年4月正式批准运营的远程教育公共服务体系，为遍布全国的学员提供学历(专升本，高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务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;}
  

• 我们来分析以下最后一种写法，明显结构的语义化更好，直接将2个无用的div标签给去掉了，同时CSS的代码更少，这也要求我们必须对CSS有很好的掌握，图片直接用浮动和margin调整到指定位置，同时给右侧的标签留下间距，为容器设置相对定位，为里面的子元素设置绝对定位，可以达到调整元素位置的效果，这也反应了合格的前端工程师在一个简单的案例上为了实现结构语义化更好，综合使用了CSS的3大武器：定位+浮动+margin

• 参考视频：慕课网css的网页布局结构和表现原则