网页开发从无到有——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的样式

相关阅读:
使用OpenSSL生成自签证书
工业智能网关BL110应用之五十三：实现西门子S7-200 PLC接入OPC UA 云平台
web前端期末大作业：基于html化妆品购物商城项目的设计与实现——化妆品官方网站设计与实现(HTML+CSS+JS)
JAVA毕业设计交通非现场执法系统计算机源码+lw文档+系统+调试部署+数据库
C# 一些工具集优化使用（String，Random，Assembly，Json）
综合项目实战--jenkins节点模式
最新ACR15.0新功能如何使用？ps插件camera raw15.0mac版新功能教程
[PAT练级笔记] 07 Basic Level 1009
IntelliJ IDEA中有什么让你相见恨晚的好用插件?
云计算 - 云安全探索

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