本文最后更新于45 天前，其中的信息可能已经过时，如有错误请发送邮件到3449421627@qq.com

HTML

单标签

    1<br>2
    <hr>水平线标签

不需要包裹东西的都用单标签

文本格式化标签

图像标签

图像默认是等比例缩放。

标签链接

<a href="https://codecraft.xin">1   </a>

href这里一定要加协议，不能直接写网址，不然默认是file的协议。

属性 target=”_blank”新的标签页打开页面

如果在href里面写一个 # 那就不会跳转

音频

<audio src="https://www.runoob.com/try/demo_source/horse.ogg" controls>1 </audio>

controls（音频控制台）属性名和属性值一模一样，直接写属性名就可以了

loop (循环播放)，也是属性名和属性值。

视频

<video autoplay muted loop controls src="https://www.w3school.com.cn/i/movie.ogg" > </video>

muted属性，静音播放

autoplay是自动播放，和muted配合使用的，单独使用，不行，被禁了。

无序列表

ul嵌套li,ul是无序列表，li是列表条目

ul标签里面只能写li标签，如果想写其他的就写在li标签里面

有序列表

ol是有序列表

li是列表条目

<ol>    
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ol>

定义列表

dl嵌套dt 和 dd

dl是定义列表总体 dl是定义列表标题 dd是列表详情

table标签

th会加粗

在网页中，表格默认没有边框线，可以用border加

结构更清晰

合并单元格

行合并，列合并

如果有结构标签，那一定只能在结构标签里合并，不能跨结构标签合并

表单input

type属性值

text和password的placeholder（属性）提示文字信息

radio属性

当页面一打开就默认选中一个，就添加checked

type=file

<input type="file" multiple>//选多个文件，mutiple属性就是多选

chekbox多选框

默认选中：checked

下拉菜单

select嵌套option select是下拉菜单，option是选项

下拉菜单默认选中一个

就是option的属性

<section>
    <option selected>四川</option>
</section>

文本域标签

textarea可以允许输入多行文本，input就只有单行

文本框默认有个拖拽功能，可以自由拖动大小，后面要禁掉

label标签

增大标签范围

按钮button

div和span标签和字体实体

布局作用

div是独占一行的

span不是独占一行

div被称为大盒子

span是小盒子

字符实体

主要是有时候需要在页面显示标签，而不被解析，就要用字符实体

一般都是空格< >这三个符号，因为空格，无论有多少个空格，都只会显示一个

CSS

写在head里面的title下面的style里面

引进方法

用link引入，然后href是代码放的路径

选择器

标签选择器

类选择器

一个标签可以使用多个类名使用方法，class属性写多个类名，类名用空格隔开

id选择器

id选择器一般配合js使用的，很少用来设置css

定义id选择器

#red {

}

使用id选择器

<div id="red">

通配符选择器

就一个*,不需要调用，选择所有的标签，用相同的样式

* {

}

这个的用法是为了清除一些html默认样式，清除了我们自己调整就行了

一些属性

background-color背景颜色

字体修饰属性

浏览器的默认字体大小为16px

font-weight 控制粗细

写400就是去掉加粗，700就是加粗

font-style作用：清除文字默认的倾斜效果，或者让文字倾斜的属性italic

line-height：设置多行文本的间距

属性：数字+px（行高）

数字（当前的font-size的倍数）

文字垂直居中的技巧。

将height-line的px设置跟div的height相同就行了

这个技巧只适用于单行文字。

如果有两行的话，会超出盒子div

div {
height:"100px",
line-weight:"100px"
}

字体族

font-family

font-family:楷体

font复合属性

简写方式，一个属性放多个值，各个属性用空格隔开，必须按顺序写

font必须写字号和字体，不然不生效

text-indent文字首航缩进

div {
text-indent:2em;
}

text-align控制文字水平对齐方式

属性值 left左对齐默认的，center是居中对其，right是右对齐

但是这个居中对其的本质是文字对其了，不是标签对其

如果想要图片居中，那就要img居中，那就要把img放进div里面然后在父级，div里面text-align居中

文字修饰线

属性名：text-decoration

none没有下划线

underline添加下划线

文字颜色

属性名：color

颜色写法

            color: rgb(0, 255, 1);
            color: rgba(0,0, 0,0.3);//a是透明度，在0-1之前（做半透明的方法）
            color:red
color: #RRGGBB;//16进制写颜色，如果两个都一样，可以简写为一个color: #RGB

调试方法

谷歌调试，黄色感叹号就是错误了

复合选择器

定义：由两个或者多个基础选择器，通过不同的方式组合而成

作用：更准确，更高效的选择目标元素（标签）

后代选择器

后代选择器会选择所有后代，后代之前用空格隔开

div span {
	color:red,
}

子代选择器

父选择器 > 儿子选择器

并集选择器

选中多组标签设置相同的样式

div,
p,
span {
color:red,
}

交集选择器

p.box{
color:red,
}

两个选择器连在一起写，中间不要任何符合。并且如果遇到标签选择器，要放到最前面

伪类选择器

表示元素的状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器:hover{css属性}

        a:hover {
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
<div><a href="" >123</a></div>

任何标签都可以选中鼠标悬停效果

按顺序写，不然可能样式不生效

CSS特性

用于化简代码，定位问题，并解决问题

继承性

子级默认继承父级的文字控制属性

如果标签自己有样式，则用自己默认的样式，不继承

层叠性

特点：相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

谁的优先级高，样式生效

技巧：选择器选中的范围越大，那他的优先级越低

公式：

!important是一个提权功能，优先级最高，慎用

优先级叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算

公式：每一级之前不存在进位

Emment写法

写法：代码的简写方法，输入缩写的vscode会自动生成对应的代码

HTML

CSS

大多都是直接写首字母

w500//就是width:500px
w500+h500+rgb//就是长宽高颜色都给你弄好了

背景图

属性名：background-image (bgi)

属性值：url(背景图url)

background-image: url(./img/1.jpg);

背景图默认是平铺（复制）的效果，如果图片铺不满div，就复制铺满

控制背景图不平铺

background-repeat:no-repect//不平铺,图片显示在盒子左上角
background-repeat:repect//这就是浏览器的默认效果
background-repeat:repect-x//水平方向平铺
background-repeat:repect-y//水平方向平铺

背景图位置

属性名：background-position(bgp)

属性值：水平方向位置垂直方向位置

关键字：left right center top bottom

坐标（数字+px,正负都可以）

    background-position: right 100px;
    background-position: 20px 100px;
    background-position: right left;

提示

关键字取值方法写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

属性名background-size(bgz)

属性值：关键字，百分比，数字＋单位

关键字：cover:等比例缩放背景图以完全覆盖背景区，可能背景图片部分看不见

contain：等比例缩放背景图，肯背景区部分留白

百分比：100%的时候，图片的宽度和盒子宽度一样，图片的高度根据图片等比例缩放。

背景图固定

background-attachment(bga)

属性值：fixed

复合属性

复合写法

blackground

.div{
    width: 100px;
    height: 200px;
    background: red url(./第三天/images/2.webp) no-repeat center center/contain;
    }

显示模式

img默认是行内块，div默认是块级，span默认是行内

转换显示模式

属性名：display block(常用) incline-block（行内块）也常用

综合案例

<!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>
        .box {
            width: 200px;
            height: 400px;
            background:#3064bb;
        }
        .container {
            height: 80px;
            color:aliceblue;
            font-size: 20px;
            text-align: center;
            line-height: 80px;
        }
        .container:hover {
            background-color: #608dd9;
            font-style: italic;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="container">html</div>
    <div class="container">CSS</div>
    <div class="container">JAVASCRIPT</div>
    <div class="container">Vue</div>
    <div class="container">React</div>
</div>
</body>
</html>

实现效果

综合案例2

<!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>
        .banner{
            height: 500px;background-color: #f3f3f4;
            background: url(springtime1.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
            text-align: right;
        }
        .banner h2{
            height: 100px;
            line-height: 100px;
            font-weight: 400;
        }
        .banner p{
            height: 20px;
            color: #333333;
            line-height: 20px;
        }
        .banner a{
            width: 125px;
            height: 40px;
            display: inline-block;
            text-align: center;
            line-height: 40px;
            text-decoration: none;
            background-color: #f06b1f;
            color: #f3f3f4;
        }
    </style>
</head>
<body>
    <div class="banner">
<h2>让创造产生价值</h2>
<p>我们希望小游戏平台可以提供无限的可能，让每个创作者都可以将他们的才华和创意传递给用户</p>
<a href="#">我要报名</a>
    </div>
</body>
</html>

实现效果

结构伪类选择器

伪元素选择器

像素大厨-工具

PxCook直接智能识别psd的文件了，特别方便，各种元素的像素点都能看到，甚至还能直接识别css

盒子模型

盒子模型的重要组成部分

内容区域 width height

内边距 padding(出现在内容和盒子的边缘之间)

边框线 border

外边距 margin(出现在盒子外面)

<!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>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 
             solid #000;
             padding: 20px;
             margin: 50px;
        }
    </style>
</head>
<body>
<div class="box">盒子</div>
</body>
</html>

边框线

属性名 border(bd)

属性名边框线粗细线条样式颜色（不区分顺序）

常见线条的样式

solid 实线

dashed 虚线

dotted 点线

设置单方向的框线

内边距

写法

padding-方向名词：像素

或者直接写padding，那四个方向都有内边距

多值写法

padding是一个复合属性

从上开始顺时针转圈，如果一边没数，那就看另一边的数

尺寸计算

盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

有两种解决方法。

1.手动减法，增加了多少的padding和border那就减少对应的width和height

2.启动内减模式，设置box-sizing:border-box

        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px dotted #000;
             padding: 100px;
             box-sizing: border-box;
        }

外边距

margin也是+四个方位像素，就是距离，差不多和padding

加margin不会撑大盒子的尺寸

版心居中

        .box{
             margin: 0 auto;
        }

上下外边距无所谓，在左右边距要设置auto这样就能自适应实现居中的效果

清除标签默认样式

比如默认的内外边距

* {
margin:0;
padding:0;
box-sizing:border-box;
}

去掉有序无序列表前面的原点

li {
list-style : none;
}

元素溢出

外边距问题-合并和坍塌

垂直排列的两个盒子如果都有外边距，那不会让边距叠加，而是，取外边距最大的那个作为他们两个之间的外边距

塌陷问题

父亲级的标签，子级的添加，上外边距会产生坍塌问题

现象：导致父级一起向下移动

这种的现象的解决方法

1.不使用margin而是使用padding

2.父级设置overflow：hidden

3.父级设置 border-top

第二点和第三点实现的方法都是让浏览器认识到自己塌陷了出现了错误，然后自己又修正过来了，的原理

行内元素-内外边距的问题

行内元素添加margin和padding，无法改变元素垂直的位置，只能改变水平的位置

解决方法：给行内元素添加line-height可以改变垂直位置

圆角与盒子阴影

属性名：border-radius

属性值：数字+px/百分比

        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px dotted #000;
             padding: 10px;
             box-sizing: border-box;
             margin: 0 auto;
             border-radius:20px ;/* 也可以写border-radius: 20px 20px 20px 20px;记忆，从左上角顺时针赋值，没有取值的角与对角取值相同 */
        }

常见的应用-正圆形状

给正方形盒子设置圆角属性值为宽度的一半/50%

 border-radius:50%

最大值是百分之50，超过了没有效果

胶囊形状

盒子本身是长方形才行

boder-radius设置为盒子高度的一半

阴影

属性名：box-shadow

属性值：X轴偏移量 Y轴偏移量模糊半径扩展半径颜色内外阴影

X轴偏移量 Y轴偏移量必须书写

默认是外阴影，内阴影需要添加inset

        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 1px dotted #000;
             padding: 10px;
             box-sizing: border-box;
             margin: 0 auto;
             border-radius:20px ;/* 也可以写border-radius: 20px 20px 20px 20px;记忆，从左上角顺时针赋值，没有取值的角与对角取值相同 */
             box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) inset;
        }

综合案例–产品卡片

CSS书写顺序

1.盒子模型属性

2.文字样式

3.圆角、阴影等修饰属性

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: white;
            border-radius: 5px;
            text-align: center;
            margin: 100px auto;
            padding-top:40px;
            box-shadow: 0px 0px 10px 0px #888888;
        }
        .box1 {
            width: 60px;
            height: 60px;
            border-radius: 50%;

            background: url(springtime1.jpg) no-repeat center;
            margin: 0px auto;
        }
        .box2 {
            font-size: 24px;
            font-weight: 700;
            margin: 0px auto;
            display: block;
            padding: 10px 0px;
        }
        .box3 {
            margin: 0px auto;
            display: block;
            padding: 10px 0px;
        }
        body {
            background-color: #f1f1f1;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <span class="box2">抖音直播SDK</span>
    <span class="box3">包含抖音直播看博功能</span>

</div>
</body>
</html>

实现效果

浮动或flex布局

标准流：也叫文档流，指的是标签在页面上默认的排布规则，例如：快元素独占一行，行内元素可以一行显示多个

HTML

单标签

文本格式化标签

图像标签

标签链接

音频

视频

无序列表

有序列表

定义列表

table标签

合并单元格

表单input

下拉菜单

文本域标签

label标签

按钮button

div和span标签和字体实体

字符实体

CSS

引进方法

选择器

一些属性

字体修饰属性

font-weight 控制粗细

字体族

font复合属性

text-indent文字首航缩进

text-align控制文字水平对齐方式

文字修饰线

文字颜色

调试方法

复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

伪类选择器

CSS特性

继承性

层叠性

优先级

Emment写法

背景图

属性名 ：background-image (bgi)

背景图位置

背景图缩放

背景图固定

复合属性

显示模式

转换显示模式

综合案例

综合案例2

结构伪类选择器

伪元素选择器

像素大厨-工具

盒子模型

边框线

内边距

尺寸计算

外边距

版心居中

清除标签默认样式

元素溢出

外边距问题-合并和坍塌

行内元素-内外边距的问题

圆角与盒子阴影

阴影

综合案例–产品卡片

浮动或flex布局

发送评论 编辑评论

推荐文章

属性名：background-image (bgi)

发送评论编辑评论