div和span标签以及标签分类

最新推荐文章于 2021-09-29 14:56:44 发布

407指导员

最新推荐文章于 2021-09-29 14:56:44 发布

阅读量2.5w

点赞数 89

分类专栏： HTML5 文章标签： css html

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/109340499

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

div标签

什么是div标签

作用：一般用于配合css完成网页基本布局。

span标签

什么是span标签

作用：一般用于配合css修改网页中的一一些局部信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div和span标签</title>
    <style>
        .conter {
            width: 1000px;
            height: 500px;
            background: #f7fb8f;
            margin: auto;
            margin-bottom: 10px;
        }

        .footer {
            width: 1000px;
            height: 200px;
            background: #1ef942;
            margin: auto;
            margin-bottom: 10px
        }

        .header {
            width: 1000px;
            height: 80px;
            background: #c0d8c7;
            margin: auto;
            margin-bottom: 10px

        }

        .logo {
            width: 200px;
            height: 50px;
            background: pink;
            float: left;
            margin: 20px;
        }
        .mav {
            width: 600px;
            height: 50px;
            background: pink;
            float: right;
            margin: 20px;
        }
        .img3 {
            width: 600px;
            height: 50px;
            float: right;
        }
        .imgu {
            width: 200px;
            height: 50px;
            float: left;
        }

        .article {
            width: 650px;
            height: 400px;
            background: #f3ebf0;
            float: right;
            margin: 20px;
        }

        .aside {
            width: 250px;
            height: 400px;
            background: purple;
            float: left;
            margin: 20px;
        }
        .p1 { /*article中的标题*/
            text-align: center;
            text-decoration: underline;
            font-family: '宋体',serif;
            font-size: 30px;
            letter-spacing: 1px;
        }
        .p1 span {
            color: #6667ff;
            font-style: italic;
            font-size: 30px;
        }
        .p2 {
            text-align: center;
            text-decoration: none;
            font-family: '宋体','华文楷体',sans-serif;
            font-size: 20px;
            letter-spacing: 1px;
        }
        .p2 span {
            color: #0f1810;
            font-style: italic;
            font-size: 20px;

        }
        .p3 {
            text-align: center;
            font-size: 28px;
            font-family: "华文行楷",sans-serif;
        }


    </style>

</head>
<body>
<div class="header">
    <div class="logo">
        <img src="images/up.jpg" alt="不见了" class="imgu">
    </div>
    <div class="mav">
        <img src="images/1.jpg" alt="找不到了" class="img3">
    </div>
</div>

<div class="conter">
    <div class="aside"></div>
    <div class="article">
        <p class="p1">木兰花-<span>拟古绝词</span></p>
        <p class="p2">清 &nbsp;<span>纳兰性德</span></p>
        <p class="p3">人生若只如初见，何事秋风悲画扇</p>
        <p class="p3">等却变得故人心，却道故人心易变</p>
        <p class="p3">骊山语罢清宵半，泪雨霖铃终不怨</p>
        <p class="p3">何如薄幸锦衣郎，比翼连枝当日愿</p>
    </div>
</div>
<div class="footer"></div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9Q8zpUey-1603951962400)(D:%5C%E6%95%99%E5%AD%A6%E8%A7%86%E5%B1%8F%5C%E5%89%8D%E7%AB%AF%5C%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%5CHTML+CSS%E7%AC%94%E8%AE%B0%5CHTML%E8%AF%AD%E6%B3%95%E9%83%A8%E5%88%86%5Cimage-20201028231856456.png)]

它们之间的区别

1。div标签会独占一行，span标签不会。

2.div是一个容器级别的标签，span是一个文本级别的标签

容器级别标签和文本级别标签的区别

容器级别标签可以嵌套所有标签。

文本级别标签只可以嵌套文字/超链接/图片

容器级别标签

div h ul ol dl li dt dd …

文本级标签

span p buis strong em ins del….

一般情况下嵌套在div中, 或按照组标签来嵌套。

CSS中的标签分类

块级元素

会独占一行，所有的容器级元素块级元素，p也是块级元素。

行内元素

不会独占一行，文本级元素除了p，都是行内元素。

块级元素和行内元素区别

块级元素：1.独占一行

2.如果没有设置宽度，那么默认和父元素一样宽。如果设置了就和设置高度和宽度一样。

行内元素：1.不会独占一行

2.如果没有设置宽度，会默认和内容一样宽，且其设置了也不会发生改变。不可设置高度和宽度。

行内块级元素

为了让元素能过不独占一行，又可以设置宽度和高度。img input 。。。

显示模式的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示模式转换</title>

    <style>
        div {
            display: inline; /*转换为行内显示*/
            background: #1ef942;
            width: 200px;
            height: 150px;

        }
        span {
            display: block;/*转换为块级元素*/
            background: #6667ff;
            width: 200px;
            height: 150px;
        }

        .cc {
            background: aqua;
            width: 200px;
            height: 200px;
            display: inline-block;
        }
    </style>

</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span >我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>

通过display属性可以转换：

block块级

inline行内

inline-block 行内块级

在这里插入图片描述

将div转换为行内，span转化为块级，p转换为行内块级

407指导员

关注

89
点赞
踩
483

收藏

觉得还不错? 一键收藏
1
评论
div和span标签以及标签分类

div标签什么是div标签作用：一般用于配合css完成网页基本布局。span标签什么是span标签作用：一般用于配合css修改网页中的一一些局部信息<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div和span标签</title> <style> .conter {
复制链接

扫一扫

专栏目录