网页结构与表现原则
网页的结构与表现原则总的来说为：
- 先按结构和语义编写代码
- 然后进行CSS样式设置
- 减少HTML与CSS契合度（精简页面结构）
我们可以通过一个微博用户发言信息列表的制作案例来分析该原则。以下是该案例的整体实现效果：
从初学者的角度来看：
初学者往往会将这个结构分成多个DIV，看起来基本上就是以下几块：
实现代码：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;} 10 p{overflow: hidden;} 11 12 #demo1 .left{float: left; width: 160px; text-align: center;} 13 #demo1 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;} 14 </style> 15 </head> 16 <body> 17 <div id="demo1"> 18 <div class="left"> 19 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像"> 20 </div> 21 <div class="right"> 22 <span>10分钟之前</span> 23 <h6>歪嘴的肖恩</h6> 24 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p> 25 </div> 26 </div> 27 </body> 28 </html>
从中级前端的角度来看：
左边的图片所在的DIV是可以省略的，就变成这样几块：
实现代码：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;} 10 p{overflow: hidden;} 11 12 #demo2 img{float: left;margin-left: 40px;} 13 #demo2 .right{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;} 14 </style> 15 </head> 16 <body> 17 <div id="demo2"> 18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像"> 19 <div class="right"> 20 <span>10分钟之前</span> 21 <h6>歪嘴的肖恩</h6> 22 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p> 23 </div> 24 </div> 25 </body> 26 </html>
从高级前端的角度来看：
所有的元素放在一个DIV中，结构更简单了，单纯的将图片移出来：
实现代码：
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>test</title> 6 <style> 7 *{margin:0; padding:0;} 8 img{width: 80px; height: auto;} 9 span{color: #ccc;float: right;font-size: 12px;} 10 p{overflow: hidden;} 11 12 #demo3{width: 440px; padding: 20px; margin-left: 160px;background-color: #dafffb; border: 1px solid #ccc;} 13 #demo3 img{float: left;margin: -20px 0 0 -140px;} 14 </style> 15 </head> 16 <body> 17 <div id="demo3"> 18 <img src="http://v1.qzone.cc/avatar/201311/12/02/54/528127ffc047e093.jpg%21200x200.jpg" alt="头像"> 19 <span>10分钟之前</span> 20 <h6>歪嘴的肖恩</h6> 21 <p>老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度</p> 22 </div> 23 </body> 24 </html>
