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

最新推荐文章于 2024-05-23 11:23:05 发布

在逆境中蜕变

最新推荐文章于 2024-05-23 11:23:05 发布

阅读量138

点赞数

分类专栏： Web前端/后端文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_40301728/article/details/125474748

版权

Web前端/后端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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>

在这里插入图片描述

敲黑板：

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、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>