《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,大家经过一些实践,自然而然会有更深刻的理解,在此就不啰嗦了。

相关文章
|
4天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
17 0
|
4天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
22 0
|
4天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
14 0
|
2天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
19 4
Web前端网站(二)- 主页
|
3天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
21 1
Web前端网站(一) - 登录页面及账号密码验证
|
1天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
2天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
1天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
6天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
25 5
|
6天前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
10 3