《Web前端开发精品课 HTML与CSS进阶教程》——1.3 div和span-阿里云开发者社区

开发者社区> 开发与运维> 正文

《Web前端开发精品课 HTML与CSS进阶教程》——1.3 div和span

简介:

本节书摘来自异步社区《Web前端开发精品课 HTML与CSS进阶教程》一书中的第1章,第1.3节,作者: 莫振杰 更多章节内容可以访问云栖社区“异步社区”公众号查看。

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 表单语义化”一节会详细介绍。

举例:


<a href=https://yqfile.alicdn.com/2942ef442148db56338b5e3eced768be14fd1363.png" >

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


<a href=https://yqfile.alicdn.com/527699ddb511959e0b74b8d5abc8ee630672d79d.png" >

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

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章