day06.05. HTML的div标签

追梦女孩ii

已于 2024-07-18 20:52:32 修改

阅读量155

点赞数 2

分类专栏： HTML 一阶段一阶段day06 文章标签： python 数据分析 html 前端算法

于 2024-06-19 10:30:00 首次发布

本文链接：https://blog.csdn.net/m0_61566562/article/details/139782688

版权

一阶段同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

HTML

23 篇文章 0 订阅

订阅专栏

一阶段day06

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
        div:一般用来做页面布局，页面中见得最多的一种标签
        特点：1.独占一行 标签外的内容自动换到下一行
             2.支持宽高  从上往下布局
             3.自身不带样式（一般要和css结合使用） 结合CSS style使用
        -->

<!--  以下三种写法是有区别的：
        第一种  不加标签 直接写：不会自动换行，无法调整句子之间的间隙
        第二种  p标签  上下句之间间隔很大，有段落间距  且p标签包含其他标签时可能会出错，包含不了其他标签
        第三种  div标签 （特点已上述）
  -->

    庆余年2很好看
    庆余年2很好看
    庆余年2很好看

    <hr>

    <p>庆余年2很好看</p>
    <p>庆余年2很好看</p>
    <p>庆余年2很好看</p>

    <hr>

<!--  style ：写css样式属性
       属性内容用双引号包裹，各个属性之间用分号间隔，属性内容用冒号隔开，支持设置宽高，宽高要加单位px（像素）
       color:red            字体颜色：红色
       background：pink     背景颜色
       width:200px          宽度  200像素   指的是整个div的宽高度
       height: 50px         高度  50 像素   指的是整个div的宽高度
                            style的宽高必须写单位px
    -->
    <div style="color:red；background：pink；
    width:200px；hight: 50px">庆余年2很好看</div>
    <div>庆余年2很好看</div>
    <div>庆余年2很好看</div>

</body>
</html>

<!--
拓展
    字体图标：iconfont

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <!--
        div:一般用来做页面布局，页面中见得最多的一种标签
        特点：1.独占一行 标签外的内容自动换到下一行
             2.支持宽高  从上往下布局
             3.自身不带样式（一般要和css结合使用） 结合CSS style使用
        -->

<!--  以下三种写法是有区别的：
        第一种  不加标签 直接写：不会自动换行，无法调整句子之间的间隙
        第二种  p标签  上下句之间间隔很大，有段落间距  且p标签包含其他标签时可能会出错，包含不了其他标签
        第三种  div标签 （特点已上述）
  -->

    庆余年2很好看
    庆余年2很好看
    庆余年2很好看

    <hr>

    <p>庆余年2很好看</p>
    <p>庆余年2很好看</p>
    <p>庆余年2很好看</p>

    <hr>

<!--  style ：写css样式属性
       属性内容用双引号包裹，各个属性之间用分号间隔，属性内容用冒号隔开，支持设置宽高，宽高要加单位px（像素）
       color:red            字体颜色：红色
       background：pink     背景颜色
       width:200px          宽度  200像素   指的是整个div的宽高度
       height: 50px         高度  50 像素   指的是整个div的宽高度
                            style的宽高必须写单位px
    -->
    <div style="color:red；background：pink；
    width:200px；hight: 50px">庆余年2很好看</div>
    <div>庆余年2很好看</div>
    <div>庆余年2很好看</div>

</body>
</html>

<!--
拓展
    字体图标：iconfont

-->