初识html

现实绑架幻想

已于 2023-07-14 11:25:16 修改

阅读量682

点赞数 1

文章标签： vscode javascript html5 css

于 2022-04-12 15:58:52 首次发布

本文链接：https://blog.csdn.net/m0_50843980/article/details/124125234

版权

1.创建文件，输入！回车

<!DOCTYPE html>
<!-- 当前文档使用html5的标准进行解析 -->
<html lang="en">
    <!-- 根标签 -->
    <head>
        <!-- 引入相关配置、描述文件 -->
        <meta charset="UTF-8">
        <!-- 使用utf-8的编码规则  防止中文乱码 -->
        <title>初识html</title>
    </head>
    <body>
        <!-- 正文内容 -->
    </body>
</html>

2.div（盒模型）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div</title>
    <style>
        /* 选择器 */
        /* 宽度：100像素 */
        /* 高度: 100像素 */
        div {
            width: 100px;
            height: 100px;
            color: red;
            background-color: green;
        } 
        
        /* 策哥: {
            姓名： 赵策,
            年龄：18，
            爱好：阅读
        } */

        /* width
        height
        border
        padding
        margin */
    </style>
</head>
<body>
    <!-- div: 无语意 -->
    <!-- 标签  -->
    <div>Hello World!</div>
</body>
</html>

3.border(外边线)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border</title>
    <style>
        div {
            /* width: 100px;
            height: 100px; */
            /* background-color: deepskyblue; */
            /* 边框：线宽 线型 线色 */
            /* solid: 实线
            dashed: 虚线
            dotted: 点线
            double: 双线 */
            /* border: 50px solid pink; */
            /* border-width: 10px;
            border-style: solid;
            border-color: orange; */

            /* border-bottom: 5px solid deeppink; */
            /* border-right-color: greenyellow; */

            /* 圆角 */
            /* border-radius: 50%; */

            /* 重点：边框会增大盒模型的面积 */

            /* 三角形 */
            width: 0;
            height: 0;
            border: 20px solid gold;
            border-right-color: transparent;
            border-left-color: transparent;
            border-bottom-color: transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

4.padding（内边线）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>padding</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 20px solid red;
            padding-right: 30px;

            /* padding: 10px 20px 30px 40px;  */
            /* padding-left: 50px; */

            /* 增大盒模型面积 */
        /* S = (b-l + p-l + w + p-r + b-r) * 
            (b-t + p-t + h + p-b + b-b) */
        }
    </style>
</head>
<body>
    <div>abcd</div>
</body>
</html>

5.margin（外边距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin  外边距</title>
    <style>
        div {
            /* 标签名选择器 权重1*/
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .d1 {
            /* class选择器 权重10 */
            margin-bottom: 100px
        }
        .d2 {
            margin-top: 150px;
        }

        .fa {
            width: 300px;
            height: 300px;
            background-color: gold;
            /* padding-top: 100px; */
            /* border: 1px solid red; */
            overflow: hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin-top: 100px;
        }



        /* 1. 叠压现象：常态下，两者之间的间距以大值为准  10遍*/
        /* 2. 塌陷问题： 10遍
            原因：
            父级的第一个子级是块标签，并且使用了margin或者margin-top
            解决方案：
            1. 不用margin，在父级使用padding-top
            2. 给父级一个border
            3. 在父级使用 overflow: hidden (溢出隐藏)
        */


    </style>
</head>
<body>
    <!-- <div class="d1">1</div>
    <div class="d2">2</div> -->
    <div class="fa">
        <div class="son"></div>
    </div>
</body>
</html>