HTML+CSS学习笔记

最新推荐文章于 2024-07-01 11:31:42 发布

计算机设计（软件、大数据）

最新推荐文章于 2024-07-01 11:31:42 发布

阅读量505

点赞数 6

文章标签： html css 学习前端

本文链接：https://blog.csdn.net/qq_45157317/article/details/137920660

版权

一、网页前端实训

字符实体

&nbsp；空格

https://www.runoob.com/html/html-entities.html

<!-- 声明html5文档 -->
<!DOCTYPE html>
<!-- 根元素 -->
<html lang="en">
    <!-- 头部 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="keywords" content=""> -->
    <!-- 网页刷新 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
    <title>Document</title>
</head>
<!-- 主体 -->
<body>
    今天&nbsp;&nbsp;&nbsp;&nbsp; &copy;&yen;下雨！


</body>
</html>

语义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        语义标签：负责网页的结构
        块元素：h、p、div
        行内元素：q、em、strong、q、br、span
        没有任何语义的标签有：div、span
     -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- em属于强调类型的标签、strong -->
<p>段<em>落</em>标<strong>签</strong></p>
<!-- 换行标签 -->
    </br>
<q>短引文</q>
<span></span>
</body>
</html>

布局标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>头部标签</header>
    <footer>页脚，网页底部</footer>
    <nav>导航栏</nav>
    <main>
        主体
        <nav>导航栏</nav>
        <article>代表独立文章</article>
        <aside>表示与主体相关部分，但不是导航栏,只是一个侧边栏</aside>
    </main>
    <div></div>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 有序列表 -->
    <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
        <li>第五项</li>
    </ol>
    <!-- 无序列表 -->
    <ul>
        <li>milk</li>
        <li>
            chinese
            <ul>
                <li>english
                    <ul>
                        <li>english</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>water</li>
    </ul>

    <!-- 自定义列表 -->
    <dl>
        <dt>表示要定义的内容</dt>
        <dd>用来对表示饿内容进行解释</dd>

        <dt>表示要定义的内容1</dt>
        <dd>用来对表示饿内容进行解释</dd>

        <dt>表示要定义的内容2</dt>
        <dd>用来对表示饿内容进行解释</dd>

        <dt>江苏省</dt>
        <dd>南京市</dd>
        <dd>苏州市</dd>
    </dl>
</body>
</html>

超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- href：路径，跳转页面的路径 -->、
    <!-- 外部地址 -->
    <a href="https://www.baidu.com">去百度</a>
    <a href="mailto:123@qq.com">发邮件</a>
    <a href="tel:+13333333333">打电话</a>

    <!-- 
        内部地址
        ../表示当前文件所在目录的上一级目录
        ./表示当前文件所在的目录

        target：
            _self：默认值，代表当前标签跳转
            _blank：在新的页面中打开超链接
     -->
    <a href="./html/4.列表.html" target="_blank">超链接</a>
</body>
</html>

锚点跳转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>汉皇重色思倾国，御宇多年求不得。</p>
    <p>杨家有女初长成，养在深闺人未识。</p>
    <p>天生丽质难自弃，一朝选在君王侧。</p>
    <p> 回眸一笑百媚生，六宫粉黛无颜色。</p>
    <p>春寒赐浴华清池，温泉水滑洗凝脂。</p>
    <p>侍儿扶起娇无力，始是新承恩泽时。</p>
    <p><a href="#a1">云鬓花颜金步摇，芙蓉帐暖度春宵。</a></p>
    <p>春宵苦短日高起，从此君王不早朝。</p>
    <p>承欢侍宴无闲暇，春从春游夜专夜。</p>
    <p> 后宫佳丽三千人，三千宠爱在一身。</p>
    <p>金屋妆成娇侍夜，玉楼宴罢醉和春。</p>
    <p>姊妹弟兄皆列土，可怜光彩生门户。</p>
    <p>遂令天下父母心，不重生男重生女。</p>
    <p>骊宫高处入青云，仙乐风飘处处闻。</p>
    <p>缓歌慢舞凝丝竹，尽日君王看不足。</p>
    <p>渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>
    <p>九重城阙烟尘生，千乘万骑西南行。</p>
    <p>翠华摇摇行复止，西出都门百余里。</p>
    <p>六军不发无奈何，宛转蛾眉马前死。</p>
    <p>花钿委地无人收，翠翘金雀玉搔头。</p>
    <p>君王掩面救不得，回看血泪相和流。</p>
    <p>黄埃散漫风萧索，云栈萦纡登剑阁。</p>
    <p>峨嵋山下少人行，旌旗无光日色薄。</p>
    <p>蜀江水碧蜀山青，圣主朝朝暮暮情。</p>
    <p>行宫见月伤心色，夜雨闻铃肠断声。</p>
    <p>天旋地转回龙驭，到此踌躇不能去。</p>
    <p>马嵬坡下泥土中，不见玉颜空死处。</p>
    <p>君臣相顾尽沾衣，东望都门信马归。</p>
    <p>归来池苑皆依旧，太液芙蓉未央柳。</p>
    <p>芙蓉如面柳如眉，对此如何不泪垂。</p>
    <p>春风桃李花开夜，秋雨梧桐叶落时。</p>
    <p>西宫南苑多秋草，落叶满阶红不扫。</p>
    <p>梨园弟子白发新，椒房阿监青娥老。</p>
    <p>夕殿萤飞思悄然，孤灯挑尽未成眠。</p>
    <p>迟迟钟鼓初长夜，耿耿星河欲曙天。 </p>
    <p>鸳鸯瓦冷霜华重，翡翠衾寒谁与共。</p>
    <p>悠悠生死别经年，魂魄不曾来入梦。</p>
    <p>临邛道士鸿都客，能以精诚致魂魄。</p>
    <p>为感君王辗转思，遂教方士殷勤觅。</p>
    <p>排空驭气奔如电，升天入地求之遍。</p>
    <p>上穷碧落下黄泉，两处茫茫皆不见。</p>
    <p>忽闻海上有仙山，山在虚无缥渺间。</p>
    <p>楼阁玲珑五云起，其中绰约多仙子。</p>
    <p id="a1">中有一人字太真，雪肤花貌参差是。</p>
    <p>金阙西厢叩玉扃，转教小玉报双成。</p>
    <p>闻道汉家天子使，九华帐里梦魂惊。</p>
    <p>揽衣推枕起徘徊，珠箔银屏迤逦开。</p>
    <p>云鬓半偏新睡觉，花冠不整下堂来。</p>
    <p> 风吹仙袂飘飖举，犹似霓裳羽衣舞。</p>
    <p>玉容寂寞泪阑干，梨花一枝春带雨。</p>
    <p>含情凝睇谢君王，一别音容两渺茫。</p>
    <p>昭阳殿里恩爱绝，蓬莱宫中日月长。</p>
    <p>回头下望人寰处，不见长安见尘雾。</p>
    <p>惟将旧物表深情，钿合金钗寄将去。</p>
    <p>钗留一股合一扇，钗擘黄金合分钿。</p>
    <p>但令心似金钿坚，天上人间会相见。</p>
    <p>临别殷勤重寄词，词中有誓两心知。</p>
    <p>七月七日长生殿，夜半无人私语时。</p>
    <p> 在天愿作比翼鸟，在地愿为连理枝。</p>
    <p>天长地久有时尽，此恨绵绵无绝期。</p>
    <a href="#">回到顶部</a>
</body>
</html>

图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src:图片的地址
        alt:对图片的解释，会被搜索引擎检索
        width:指定图片的宽度
        height：指定图片的高度
        如果在后期使用过程中，可以只设置宽度和高度的其中一个，另外一个会等比例缩放
     -->
    <img width="400px" src="./img/aoteman.webp" alt="奥特曼">
</body>
</html>

内联格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        src:地址，即将引入的地址
        framborder：0：不显示边框、1：显示边框
        width:设置内联框架的宽度
        height:设置内敛框架的高度
        必须同时设置才能生效
     -->
    <iframe width="1000px" src="https://new.qq.com/" frameborder="1"></iframe>
</body>
</html>

音视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        controls:代表控件
        loop：指定循环播放
        autoplay：设置自动播放

        embed：兼容所有版本的浏览器
     -->
    <audio src="./audio/01.mp3" controls loop autoplay></audio>
    <embed src="./audio/01.mp3">
</body>
</html>

视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        controls:代表控件
        loop：指定循环播放
        autoplay：设置自动播放
        embed：兼容所有版本的浏览器
     -->
    <audio src="./audio/01.mp3" controls loop ></audio>
    <!-- <embed src="./audio/01.mp3"> -->
        <!-- 视频 -->
    <!-- <video src="./video/wu.mp4" controls></video> -->
    <!-- 引入外部视频 -->
    <!-- <video></video> -->
    <a href="https://v.qq.com/txp/iframe/player.html?vid=c0046oljgds">腾讯视频</a>
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=c0046oljgds" allowFullScreen="true"></iframe>
</body>
</html>

CSS语法与选择器

内联样式（行内样式）

    <p>天生丽质难自弃，一朝选在君王侧。</p>
    <!-- 
        内联样式（行内样式）：
        直接写在元素标签中，每一个属性和属性值之间以:连接，每个属性之间以；分割
     -->
    <p style="color: red;font-size: 20px;">回眸一笑百媚生，六宫粉黛无颜色。</p>
    <p style="color: green;font-size: 20px;">春寒赐浴华清池，温泉水滑洗凝脂。</p>
    <p style="color: red;font-size: 20px;">侍儿扶起娇无力，始是新承恩泽时。</p>
    <p>云鬓花颜金步摇，芙蓉帐暖度春宵。</p>

缺点：

1.代码繁多，更加容易错误

2.不利于后期维护

内部样式表

 <style>
        /*  
        内部样式表
            由元素选择器选中对应元素，大括号中以键值对形式设置属性和属性值
        */
        p{
            color: blue;
            font-size: 20px;
        }
    </style>

缺点：

1.内部样式表只能对一个页面生效，如果想要其他页面也使用当前样式，就i需要把style部分进行复制粘贴

外部样式表

<!-- link标签引入外部文件，rel，href -->
    <link rel="stylesheet" href="./css/style.css">

css基本语法

选择器声明块

css选择器

通配选择器

作用：选中页面中所有的元素

语法：*

例子：*{}

 *{
            color: aqua;
            font-size: 15px;
        }

元素选择器

作用：根据元素名选中对应的标签

语法：elementname{}

例子：

p{
            color: blue;
            font-size: 20px;
        }
        span{
            color: red;
            font-size: 50px;
        }

类选择器

作用：根据元素的类型选中对应的标签

语法：.classname{}

例子：

    .green{
            color: green;
        }

可以重复使用

ID选择器

作用：根据id的属性值选中对应的标签

语法：#idname{}

例子：

 #red{
            color: red;
        }

属性选择器

作用：根据元素的属性值选中一个或者一组元素

语法：

例子：

/* 选中所有含有该属性的标签 */
        p[title]{
            color: blueviolet;
        }
        /* 选中含有指定属性值的标签 */
        p[title="abcde"]{
            color: brown;
        }
        /* 选中以指定值开头的标签 */
        p[title^="a"]{
            color: chartreuse;
        }
        /* 选中以指定值结尾的标签 */
        p[title$='c']{
            font-size: 80px;
        }
        /* 选中包含指定值的标签 */
        p[title*='c']{
            font-size: 50px;
            color: chocolate;
        }

 <p title="abcde">遂令天下父母心，不重生男重生女。</p>
    <p title="abc">骊宫高处入青云，仙乐风飘处处闻。</p>
    <p title="abd">缓歌慢舞凝丝竹，尽日君王看不足。</p>
    <p title="bcd">渔阳鼙鼓动地来，惊破霓裳羽衣曲。</p>
    <p title="abe">九重城阙烟尘生，千乘万骑西南行。</p>

复合选择器

作用：根据不同的元素选中标签，设置相同的样式

语法：选择器1，选择器2，…{}

例子：

p,span,h1{
            color: deepskyblue;
        }

颜色单位

    <!-- 
        rgb:r代表red，g代表green，b代表blue。各自取值范围0~255
        rgba:a代表透明度，0 0.5 1 取0的时候全透明，0.5半透明，1不透明

        十六进制：取值范围：00~ff 语法：#RRGGBB 如果颜色两位两位重复，则可以进行简写：#aabbcc => #abc
     -->
    <div id="box1" style="background-color: #a01c;"></div>

盒模型

在这里插入图片描述

200*200：内容区（content）

padding:内边距

border:边框

margin：外边距

边框

div.box{
            /* width和height设置的是盒子内容区的大小 */
            width: 200px;
            height: 200px;
            background-color: red;
            /* 
            设置边框后会影响盒子大小，
             border-width：设置边框的宽度，默认是3px
             border-style:设置边框的样式
                solid:实线
                dotted:点状虚线
                dashed:虚线
                double：双实线
            */
            /* border-bottom-width: 3px;
            border-bottom-color: black;
            border-bottom-style: solid;
            border-top-width: 10px;
            border-top-color: green;
            border-top-style: double;
            border-left-width: 3px;
            border-left-color: black;
            border-left-style: solid;
            border-right-width: 3px;
            border-right-color: black;
            border-right-style: solid; */
            /* 
            四个值：上 右 下 左
            三个值：上 左右 下
            两个值：上下 左右
            一个值：上下左右
            */
            /* border-width: 5px 10px 15px;
            border-color:  green blue black;
            border-style: dotted dashed double; */

            border: green solid 10px;
        
        }

内边距

和边框相似

外边距

 /* 
            外边距：margin：
                margin-bottom：下外边距，不移动本身
                    正值：让下边的块向下移动
                    负值：让下边的块向上移动
                margin-top:上外边距，移动本身
                    正值：本身向下移动
                    负值：本身向上移动
                margin-left:左外边距，移动本身
                    正值：本身向右移动
                    负值：本身向左移动
                margin-right：右外边距，不移动本身
                    正值：让右边向右移动
                    负值：让右边向左移动
                边距重叠：（有利于开发）
                    如果两个值都是正值：
                        取最大值
                    如果两个值都是负值：
                        绝对值最大的值
                    如果两个值一正一负：
                        求和


            */
            margin-bottom: 50px;
            /* margin-left: -200px; */
        
        }
        div.box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-top: -100px;
        }

水平布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* margin-right: auto;
            margin-left: auto; */
            margin: 0 auto;
            overflow: auto;
        }
    </style>
</head>
<body>
    <!-- 
        水平方向：
            margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的宽度
            auto + 0 + 0 + 200 + 0 + 0 + auto = 1520
            margin-right = 1720
            margin-left = 1520
            1320/2=660
            这个等式是必须成立的，如果相加后的结果不相等。则成为过度约束。
            能够设置auto的只有三个值：width、margin-left、margin-right
        
        垂直方向：
            margin-top + padding-top + border-top + height + padding-bottom + border-bottom + margin-bottom = 总和
            溢出：
                overflow:
                    visible:默认值，溢出部分在父元素外显示
                    hidden:对溢出部分进行剪切
                    scroll:生成两个滚动条
                    auto：根据内容需求生成滚动条


     -->
     <div class="box">
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
        金阙西厢叩玉扃，转教小玉报双成
     </div>
</body>
</html>

行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        行内元素是不能设置宽度和高度的，默认宽度是被内容撑开的，高度也是默认被高度撑开

        */
        span{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 在行内元素中设置padding不会影响垂直方向上的页面布局 */
            padding: 100px;
            /* 边框border,垂直方向上不会影响页面布局 */
            border: 10px solid black;
            /* 外边距：margin，垂直方向上不会影响页面布局 */
            margin: 20px;
            display: block;
            /* 
            display用来设置元素的显示类型
                inline：默认值，代表行内元素
                block:将元素设置为块元素
                inline-block:将元素设置为行内块元素，既可以设置高度也可以设置宽度，并且不会独占一行
                table:将元素设置为表格
                none:元素在页面中不显示
             */
            /* display: none; */
            /* 
            visibility:用来设置元素是否展示
                hidden：元素在页面中隐藏，但是位置依然保留
             */
            visibility: hidden;
        }
        /* div#nav:hover div.box1{
            display: block;
        } */
        div.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /* display: none; */
        }
    </style>
</head>
<body>
    <span>行内元素</span>
    <span>行内元素</span>
    <!-- <div id="nav">导航栏</div> -->
    <div class="box1"></div>
    
    <!-- <span>行内元素</span> -->
</body>
</html>

浏览器的默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <title>Document</title>
    <style>
        /* body{
            margin: 0;
        } */
        div.box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

圆和椭圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /* 
            border-radius:用来设置圆角，圆角设置的是圆的半径大小
             */
            border-radius:100px ;
            /* border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 30px;
            border-bottom-left-radius: 40px; */
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <!-- 
        圆角：
     -->
     <div class="box"></div>
</body>
</html>

浮动

定义：可以让一个元素向父元素的左侧或者右侧移动

在这里插入图片描述

通过float设置元素的浮动：

left:向左浮动

right：向右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 
            设置浮动后，水平方向的过度约束不存在了，块元素不再独占一行
            */
            float: left;
        }
        /* div.box2{
            width: 200px;
            height: 200px;
            background-color: green; */
            /* 
            float设置向左浮动，脱离文档流 
            float设置向左浮动后位置是由html的结构决定的，谁在前面，浮动时候就在前面
            */
            /* float: right; */
            /* margin-left: 200px;
            margin-top: -200px; */
        /* } */
        /* div.box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: right; */
            /* margin-left: 400px;
            margin-top: -200px; */
        /* } */
        div.box4{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 
            设置浮动后不会脱离父元素，会在父元素中左右移动
            设置浮动后不会遮盖文字，文字会在块元素周围从左向右排序展示
             */
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1">
        <!-- <div class="box4"></div> -->
    </div>
    爱是一种感情，是一种最幸福的感觉，有关爱都是很温馨快乐的人或者是事。下面是由出国留学网小编为大家整理的“关于爱的一段文字”，仅供参考，欢迎大家阅读。
    <div class="box2"></div>
    <div class="box3"></div>
    
</body>
</html>

简单布局

在这里插入图片描述

<body>
    <!-- 头部 -->
    <div class="box1"></div>
    <!-- 主体 -->
    <div class="box2">
        <!-- 主体左 -->
        <div class="left"></div>
        <!-- 主体中 -->
        <div class="center">
            <!-- 主体内头部 -->
            <div class="cheade"></div>
            <!-- 主体内下边左 -->
            <div class="cbleft"></div>
            <!-- 主体内下边中 -->
            <div class="cbcenter"></div>
            <!-- 主体内下边右 -->
            <div class="cbright"></div>
        </div>
        <!-- 主体右 -->
        <div class="right"></div>
    </div>
    <!-- 页脚 -->
    <div class="box3"></div>
</body>
</html>

 <style>
        /* 头部 */
        div.box1{
            width: 1000px;
            height: 100px;
            border: red 3px solid;
            /* 居中 */
            margin: 0 auto;
        }
        /* 中间主体 */
        div.box2{
            width: 1000px;
            height: 400px;
            border: red 3px solid;
            margin: 30px auto;
        }
        /* 页脚 */
        div.box3{
            width: 1000px;
            height: 100px;
            border: red 3px solid;
            margin: 0 auto;
        }

        /* 
        主体左侧
        外边距：80px
        剩余：920px

         */
        div.left{
            height: 360px;
            width: 230px;
            border: red 3px solid;
            margin: 17.6px 20px;
            float: left;
        }
        /* 主体中 */
        div.center{
            height: 360px;
            width: 440px;
            border: red 3px solid;
            float: left;
            margin-top: 17.6px;
        }
        /* 主题右 */
        div.right{
            width: 230px;
            height: 360px;
            border: red 3px solid;
            margin: 17.6px 20px;
            float: left;
        }

        /* 主体中内的上 */
        div.cheade{
            width: 400px;
            height: 100px;
            border: red 3px solid;
            margin: 17.6px 17.6px;
        }

        /* 主体中内的下左 */
        div.cbleft{
            width: 118.4px;
            height: 197.6px;
            border: red 3px solid;
            margin-left: 17.6px;
            float: left;
        }
        /* 主体中内的下中 */
        div.cbcenter{
            width: 118.4px;
            height: 197.6px;
            border: red 3px solid;
            float: left;
            margin: 0 17.6px;
        }

         /* 主体中内的下右 */
         div.cbright{
            width: 118.4px;
            height: 197.6px;
            border: red 3px solid;
            float: left;
            /* margin: 0 17.6px; */
        }
    </style>

定位

postion：

static:不开启定位，元素是静止的

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位

sticky:开启元素的粘滞定位

相对定位

偏移量（offset）：

top

bottom

left

right

div.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 开启相对定位 */
            position: relative;
        }
        div.box2{
            width: 200px;
            height: 200px;
            /* margin-top: -200px;
            margin-left: 200px; */
            background-color: green;
            position: relative;
            top:-200px;
            left: 200px;
        }

在这里插入图片描述

绝对定位

div.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 开启相对定位 */
            /* position: relative; */
            /* 
            开启绝对定位：
                脱离文档流
                是针对开了相对定位的父元素块进行移动
            包含快：
                谁包含了它，这个谁就是它的包含块
             */
            position: absolute;
            top:0px;
            left:0px;
        }
div.box4{
            width: 200px;
            height: 200px;
            background-color: blue;
            position: absolute;
            top: 0px;
            left: 0px;
        }

在这里插入图片描述

固定定位

div.box4{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 
            开启固定定位后，会针对根元素进行移动
            */
            position: fixed;
            top: 100px;
            left: 0px;
            /* font-size: 14px; */
            /* position: absolute;
            top: 0px;
            left: 0px; */
        }

在这里插入图片描述

粘滞定位

 div.box5{
            width: 200px;
            height: 200px;
            background-color: orange;
            /* 
            开启粘滞定位
            */
            position: sticky;
            top: 100px;
            left: 0px;
        }

在这里插入图片描述

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1" width="50%" align="center">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td rowspan="2">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
    </table>
    
    
    <form action="./2.语义标签.html">
        <input type="text" name="phone">
        <input type="password" name="password">
        <!-- <input type="submit" value="提交"> -->
        <button>注册</button>
    </form>
</body>
</html>