div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。

这两个东西，都是最最重要的“盒子”。

 

1                <div>

2                         <h3>中国主要城市</h3>

3                         <ul>

4                                 <li>北京</li>

5                                 <li>上海</li>

6                                 <li>广州</li>

7                         </ul>

8                </div>

9         

10              <div>

11                       <h3>美国主要城市</h3>

12                       <ul>

13                               <li>纽约</li>

14                               <li>洛杉矶</li>

15                               <li>华盛顿</li>

16                               <li>西雅图</li>

17                       </ul>

18              </div>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

 

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span里面是放置小元素的，div里面放置大东西的：

1                                 <p>

2                                         简介简介简介简介简介简介简介简介

3                                         <span>

4                                                  <a href="">详细信息</a>

5                                                  <a href="">购买</a>

6                                         </span>

7                                 </p>

div标签是最最重要的布局标签：

1                <div class="header">

2                         <div class="logo"></div>

3                         <div class="nav"></div>

4                </div>

5                <div class="content">

6                         <div class="guanggao"></div>

7                         <div class="dongxi"></div>

8                </div>

9                <div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。