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

相关文章
|
18天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
63 0
|
17天前
|
JavaScript 前端开发 NoSQL
前端node如何学习进阶知识
【7月更文挑战第8天】 深化JavaScript基础,精通Node.js核心模块(如fs、http)与事件循环机制,学习Express框架及异步编程(回调、Promise、async/await),掌握数据库交互,参与实战项目,关注Node.js最新技术和最佳实践,以此提升进阶技能。
26 8
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
24天前
|
前端开发
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
css 拉伸 resize —— 实现可拉伸的div(含限制拉伸的尺寸)
20 1
|
5天前
|
存储 JSON API
实战派教程!Python Web开发中RESTful API的设计哲学与实现技巧,一网打尽!
【7月更文挑战第22天】构建RESTful API实战:**使用Python Flask设计图书管理API,遵循REST原则,通过GET/POST/PUT/DELETE操作处理/books及/books/&lt;id&gt;。示例代码展示资源定义、请求响应交互。关键点包括HTTP状态码的使用、版本控制、错误处理和文档化。本文深入探讨设计哲学与实现技巧,助力理解RESTful API开发。
16 0
|
24天前
|
前端开发 JavaScript UED
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
只会用插件可不行,这些前端动画技术同样值得收藏-CSS篇
22 0
|
24天前
|
前端开发 JavaScript 编译器
如何在CSS中写变量?一文带你了解前端样式利器
如何在CSS中写变量?一文带你了解前端样式利器
22 0
|
24天前
|
前端开发
前端 CSS 经典:模拟 material 文本框
前端 CSS 经典:模拟 material 文本框
12 0
|
24天前
|
前端开发
前端 CSS 经典:图层放大的 hover 效果
前端 CSS 经典:图层放大的 hover 效果
14 0
|
24天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
20 0