概述

div 和 span 是非常重要的标签. div 的语义是 division “分割”, span 的语义就是 span “范围, 跨度”. 在 CSS 课程中你将知道, 这两个东西, 都是最重要的 “盒子”.

div 标签

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

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

代码实现

<div>
    <h1>中国主要城市</h1>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>杭州</li>
    </ul>
</div>
<div>
    <h1>美国主要城市</h1>
    <ul>
        <li>纽约</li>
        <li>洛杉矶</li>
        <li>华盛顿</li>
        <li>西雅图</li>
    </ul>
</div>

执行结果:

span 标签

span 也是表达 “小区域, 小跨度” 的标签, 但是是一个文本级的标签. 也就是说, span 里面只能放置文字, 图片, 表单元素. span 里面不能放 p, h, ul, dl, ol, div.

span 里面是放置小元素的, div 里面是放置大东西的.

代码实现

<p>简介简介简介简介
    <span>
        <a href="">详细信息</a>
        <a href="">购买</a>
    </span>
</p>

<div class="header">
    <div class="logo"></div>
    <div class="nav"></div>
</div>
<div class="content">
    <div class="ad"></div>
    <div class="stuff"></div>
</div>
<div class="footer"></div>

div 标签是最重要的布局标签, 至于 class 是什么意思, css 课程里面我们会学习, 暂时先不用管.

注: 我们称这种模式叫做 “div + css”. div 标签负责布局, 结构, 分块, css 负责样式.