购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.3 div和span

对于div和span这两个元素,不少新手也不知道它们之间有什么区别,使用起来也很随便。因此,这里有必要简单介绍一下。

div和span没有任何语义,正是因为没有语义,这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下。

(1)div是块元素,可以包含任何块元素和行内元素,不会与其他元素位于同一行;span是行内元素,可以与其他行内元素位于同一行。

(2)div常用于页面中较大块的结构划分,然后配合CSS来操作;span一般用来包含文字等,它没有结构的意义,纯粹是应用样式。当其他行内元素都不适合的时候,可以用span来配合CSS操作。

其实,除了div和span外,还有一个label标签。div和span是无语义标签,但label是有语义标签。label只适用于表单中,用于显示在输入控件旁边的说明性文字。关于label标签,我们在后面“2.5 表单语义化”一节会详细介绍。

举例:

在浏览器预览效果如图1-1所示。

图1-1 div和span

分析:

在这个例子中,我们想要对“视觉化思考”这几个文字加粗或者改变颜色,此时可以使用span包含文字,然后再进行样式修改。事实上,span标签往往都是用来配合CSS来修饰元素的。

对于div和span,大家经过一些实践,自然而然会有更深刻的理解,在此就不啰嗦了。 JDo0HsiTcmJlKGZqGI96eFgWMWW8EClS7ua1nNl46v9eaZY2HlAuI/PNQhRfmE7D

点击中间区域
呼出菜单
上一章
目录
下一章
×