网页的结构与表现原则总的来说为：

• 先按结构和语义编写代码
• 然后进行CSS样式设置
• 减少HTML与CSS契合度（精简页面结构）

我们可以通过一个微博用户发言信息列表的制作案例来分析该原则。以下是该案例的整体实现效果：

 

从初学者的角度来看：

初学者往往会将这个结构分成多个DIV，看起来基本上就是以下几块：

实现代码：

1  2  3  4     
      5      6     15 16 17     
     
      18         
      
       19             
       20         
      
21         
      
       22             
       10分钟之前23             
       
歪嘴的肖恩
24             
       
老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度
25         
      
26     
     
27 28 

从中级前端的角度来看：

左边的图片所在的DIV是可以省略的，就变成这样几块：

实现代码：

1  2  3  4     
      5      6     15 16 17     
     
      18         
      19         
      
       20             
       10分钟之前21             
       
歪嘴的肖恩
22             
       
老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度
23         
      
24     
     
25 26 

从高级前端的角度来看：

 所有的元素放在一个DIV中，结构更简单了，单纯的将图片移出来：

 实现代码：

1  2  3  4     
      5      6     15 16 17     
     
      18         
      19         
      10分钟之前20         
      
歪嘴的肖恩
21         
      
老师一直强调的是代码的简洁，减少代码的冗余，理论上确实应该如此，但是过于简洁的代码有可能对后期的优化维护造成一定难度，这是一个相互矛盾的方向，我觉得重要的是宝把握好这个度
22     
     
23 24