JavaWeb学习之路(10)--HTML块级元素div与行级元素span

简介: 本文目录1. 块级元素2. 行级元素3. div标签4. span标签5. 小结

1. 块级元素

上一篇我们讲了<p>标签,它表示一个段落,在该便签后面会自动换行。


所以<p>标签是一个块级元素,它独自形成一块,跟后面的内容不会出现在同一行。


2. 行级元素

行级元素也可以称之为内联元素,就是在行的内部进行连接。所以行级元素是可以共同出现在同一行的,行级元素之后并不会换行。


3. div标签

<div>标签是一个标准的块级元素,它的效果跟<p>标签类似,都会将内容作为单独的块显示。


如果说这两个标签有何区别的话,p标签更多的表达了段落的意义。而如果写的一段代码想让它成为单独一块,但是这一块也不是一个段落,就可以采用div。


例如,一首诗歌,每一句要断行,但是每一句其实不算是一个段落,此时可以用div标签。


<body>

   <h1>春晓</h1>

   <div>春眠不觉晓</div>

   <div>处处闻啼鸟</div>

   <div>夜来风雨声</div>

   <div>花落知多少</div>

</body>

1

2

3

4

5

6

7

效果如下:


再多说一些的话,其实用p和div都行,一般来说div用的更多一点。


4. span标签

span标签是行级元素,它包裹的内容不会换行,如下代码:


<body>

   我是<span>中国</span>人

</body>

1

2

3

效果如下,可以发现span包裹的内容和前后的内容同处一行,而且效果上也没啥差别。


那么此时可能就会有疑问了,要span标签有何用?就像《悟空》里面唱的,我要这铁棒有啥用捏?


设计了这个标签,那必然是得有点用的。其实span包裹起来的部分,可以单独为其设置效果。比如在后面我们学习了文字颜色设置之后,我们只想把中国二字设为红色,其余字颜色不变。


那么我们就需要span标签将中国包起来,然后对该标签应用特定的文字样式。


这就是span存在的意义,它可以区分不同的内容,以便对不同的内容应用不同的样式或者行为。


5. 小结

说了这么多,其实只需要掌握div换行、span不换行。

相关文章
|
23天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
4天前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
12 3
|
13天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
16 1
|
23天前
|
移动开发 搜索推荐 UED
HTML元素
【6月更文挑战第1天】HTML元素
24 7
|
22天前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
18 5
|
22天前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
|
20天前
|
前端开发
前端基础学习(一)HTML入门
前端基础学习(一)HTML入门
11 0
前端基础学习(一)HTML入门
|
4天前
|
数据安全/隐私保护
杨老师课堂之网页制作HTML的学习入门-含有案例2
杨老师课堂之网页制作HTML的学习入门-含有案例
2 0
|
18天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
|
20天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。