网页开发从无到有——html前端学习（二）

1、html中的 div 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
    <div style="color:#FF00FF">
        <h1>同一个div里面的东西用同一种</h1>
        <p>CCS</p>
        <p>div标签定义 HTML 文档中的一个分隔区块或者一个区域部分</p>
        <p>div标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化</p>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述

敲黑板：

div标签的作用
1、div 标签可以用来划分 HTML 结构,从而配合 CSS 来整体控制某一块的样式。
2、div 标签是块级元素，它可用做组合其它 HTML 元素的容器。
3、div 标签可以用作严格的组织工具，可以加以 id 或 class 来标记 div 标签，使代码结构看上去更舒服

2、html中的 span 标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
    <p>span用于对文档中的<span style="color:pink">行内元素进行组合</span></p>
    <p>span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;<span></span>如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异</p>
    <p>span标签<span style="color:blue;font-weight:bold">提供了一种将文本的一部分或者文档的一部分独立出来</span>的方式</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述
敲黑板：

1、span用于对文档中的行内元素进行组合
2、span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异
3、span标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

3、div和span同时使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span的用法</title>
</head>
<body>
    <div style="color:#FF00FF">
        <p>span用于对文档中的<span style="color:pink">行内元素进行组合</span></p>
        <p>span标签没有固定的格式表现,当对它应用样式时,它才会产生视觉上的变化;<span></span>如果不对 span 应用样式,那么 span元素中的文本与其他文本不会任何视觉上的差异</p>
        <p>span标签<span style="color:blue;font-weight:bold">提供了一种将文本的一部分或者文档的一部分独立出来</span>的方式</p>
    </div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里插入图片描述
敲黑板：

div和span同时出现，并且设置了其style，那么此时span的优先级高，sapn范围之外的采用div的样式

相关阅读:
使用CFimagehost源码搭建无需数据库支持的PHP免费图片托管私人图床
云计算中的负载均衡技术，确保资源的平衡分配
数据分析与可视化项目技术参考
【AI视野·今日NLP 自然语言处理论文速览第五十二期】Wed, 11 Oct 2023
基于5G网络的智能车间MES设计方案
企业数字化办公利器——华为云桌面Workspace
Element-UI的使用——表格el-table组件去除边框、滚动条设置、隔行变色、去除鼠标悬停变色效果(基于less)
Studying-代码随想录训练营day15| 222.完全二叉树的节点个数、110.平衡二叉树、257.二叉树的所有路径、404.左叶子之和
祖冲之序列密码算法高性能硬件实现关键技术研究
vue3路由跳转传参

原文地址：https://blog.csdn.net/weixin_40301728/article/details/125474748