2.7 容器div和span

div是html里很常用的一种容器，它表达的是一块内容，在布局的时候用来做整体设计。例如：
<body>
    <div style="height:10vh;background:#ccc">
        顶端
    </div>
    <div style="height:20vh;background:#EEE">
        中间
    </div>
    <div style="height:10vh;background:#4E0">
        底部
    </div>
</body>
div是一个独占一行的元素，在后面可知道，这种是“盒子元素”。div是很常用的，随便一个网页都是满屏幕div：


而span也是一种容器，它用于文字。它表示一段文字。例如一段话里面有几个字需要特别的样式，例如红色，那么可以用span标注这几个字，然后用style来规定样式，例如下面的第一行的写法，李白将显示红色：
<p>
    <h2>将进酒·唐·<span style="color:red">李白</span>
    </h2>
    <br/>
    君不见，黄河之水天上来，奔流到海不复回。
    <br/>
    君不见，高堂明镜悲白发，朝如青丝暮成雪。
    <br/>
    人生得意须尽欢，莫使金樽空对月。
    <br/>
    天生我材必有用，千金散尽还复来。
    <br/>
    烹羊宰牛且为乐，会须一饮三百杯。
    <br/>
    岑夫子，丹丘生，将进酒，杯莫停。
    <br/>
    与君歌一曲，请君为我倾耳听。
    <br/>
    钟鼓馔玉不足贵，但愿长醉不愿醒。
    <br/>
    古来圣贤皆寂寞，惟有饮者留其名。
    <br/>
    陈王昔时宴平乐，斗酒十千恣欢谑。
    <br/>
    主人何为言少钱，径须沽取对君酌。
    <br/>
    五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
    <br/>
</p>
span是一种内联元素，它会和别的内联元素共享同一行，放不下才转行。
专属于div的属性:contentEditable
这个属性可以让div可以编辑，事实上，本网站的所有代码框都是div，它们的这个属性都是true
<div contentEditable="true">
    我的值可以编辑哦
</div>
<div contentEditable="false">
    我的值不可以编辑哦
</div>