web前端基础知识

HTML&CSS基础经典版

HTML：结构（页面元素和内容）
css：表现（网页元素的外观和位置等页面样式）
行为：JavaScript：行为（网页模型定义与页面交互）

排版标签
1. 排版标签标题标签：h系列标签重要程度依次递减
  
  特点：独占一行、h1-h6文字逐渐减小
2. 段落标签：p
  
  特点：段落之间存在间隙、独占一行
3. 换行标签：
4. 水平分割线：

文本格式化标签

场景：让文字加粗b strong、下划线u ins、倾斜i em、删除线s del等
语义：突出重要性的强调语境 strong、ins、em、del

图片标签

特点：单标签
src alt为图片标签的属性、属性之间没有顺序
src为属性名 =""为属性值
alt是替换文本当图片不显示的时候显示的文字
title时提示文本不仅可以为图片标签添加，还可以用于其他标签
width和height属性只需要给出一个值，另一个等比例缩放，好处就是图片不变形

路径的介绍

路径可分为：绝对路径（了解）相对路径（常用）
绝对路径例如：盘符开头：D\day01、完整的网络地址：https://www.itcast.cn
相对路径：从当前文件出发找目标文件的过程

相对路径之同级 **./**表示当前位置

相对路径之下级：images/baobao.jpg

相对路径之上级：**…/**表示上级

音频标签：audio

在这里插入图片描述

视频标签：video

添加muted在静音状态下自动播放

链接标签

href的作用是**调转地址**

在这里插入图片描述

在新窗口打开：属性名为target、取值：_blank

列表标签

自定义列表：dl dt dd

去掉无序列表小黑点：

li {
            /* 去除小圆点 */
            list-style: none;
        }

表格标签

table>tr>td
th为表头标签，有加粗效果
caption为表格大标题
结构标签：thead,tbody,tfoot

<!-- 结构标签：thead,tbody,tfoot -->

<body>
    <table border="1">
        <caption>学生成绩单</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>19</td>
                <td>33</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>44</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>王二</td>
                <td>20</td>
                <td>44</td>
            </tr>
        </tfoot>
    </table>
</body>

合并单元格

跨行并列：rowspan、跨列并列：colspan

遵循左上原则

列表标签

列表的应用场景
无序列表
有序列表
自定义列表

绝对路径

绝对路径：绝对路径例如：
- 盘符开头：D\day01
- 完整的网络地址：http://wdianjun.vcn.ink

特点：地址很长

相对路径

相对路径之同级 ./表示当前位置
相对路径之下级：**如：**images/baobao.jpg
相对路径之上级：**如：../**images/baobao.jpg

表单标签-input

input type="text"文本框
input type="password" 密码框
input type="radio" 单选框
input type="checkbox" 复选框

注意：

有相同name属性值的单选框为一组，一组中只能同时有一个被选
属性对于单选框有分组功能

占位符：placeholder

button按钮标签

如果不指定type值，button按钮默认为submit值
按钮要放在==表单域(form)==中才会有行为，否则就是一个普通按钮

按钮标签是双标签，可以插入其他标签如：图片

select下拉菜单

select标签：下拉菜单的整体
option标签：下拉菜单的每一项

selected属性：下来菜单的默认选中

lable标签

强调文本的作用

没有语义化的标签

div：独占一行
span：

语义化标签

网页头部

网页导航

网页底部

网页侧边栏

网页区块

网页文章

CSS：层叠样式表

css的引入方式

==内嵌式：==写在style标签中,一般写在head里
<style>
        li {
            color: brown;
            width: 200px;
            height: 200px;
            list-style: none;
        }
        
        .wuyu {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
==外联式：==写在一个单独的.css文件中
<style>
<link rel="stylesheet" href="./style/test.css">
</style>
==行内式：==写在标签的style属性中，大多数配合js使用

基础选择器

标签选择器

类选择器

id选择器

id必须是唯一的，不能出现两个标签有相同的id
<div id="w">你好，hello</div>

通配符选择器

清除内外边距,获取所有标签


        * {
            margin: 0;
            padding: 0;
        }

字体和文本样式

字体：

字体粗细

font=weight

字体样式

font-style

字体类型

font-family

层叠性

建立在相同的权重下，如相同的选择器，后面的会覆盖前面的

复合属性

font复合书写顺序：font：style weight size family
注意：

顺序不能乱
如果之前已经写了零散的font属性，当心可能会覆盖掉之前的

水平居中对齐 text-aling:center

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

文本修饰

添加下划线
- ```
text-decoration: underline;
```
删除线
- ```
text-decoration: line-through;
```
上划线
- ```
text-decoration: overline;
```
清除下划线
- ```
text-decoration: none;
```

行高line-height

控制一行的上下行间距

让单行文本垂直居中可以设置 line-height : 文字父元素高度
注意如果同时设置了行高和font复合，注意覆盖问题
书写顺序：font：style weight size/line-height family

颜色取值

rgba表示法：( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
- 取值范围0~1 ，1表示完全不透明

选择器进阶

复合选择器

后代选择器

根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
语法：选择器1 选择器2 {} 空格隔开
注意：后代包括：儿子、孙子…

并集选择器

作用：选中页面中同时满足多个选择器的标签
语法：选择器1选择器2 { css }
注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔，交集选择器中如果有标签选择器，标签选择器必须写在最前面

交集选择器

交集选择器：标签选择器在前，类选择器在后，中间没有空格
id是唯一的，不能做交集
交集选择器只可能是标签选择器 + 类选择器

hover伪类选择器

鼠标悬停在元素上的状态
可以用在任何标签上

背景相关属性

背景复合
- 复合写法：推荐：background：color image repeat position
背景位置如果是英文状态下可以颠倒位置

元素显示模式之块级元素

独占一行，可以设置宽高
宽度默认是父元素的宽度，高度默认由内容撑开

元素显示模式之行内元素

不可以设置宽高，一行多个显示

元素显示模式之行内块元素

一行可以显示多个
可以设置宽高
代表标签：input、textarea、button、select…
img标签有行内块元素特点

元素显示模式转换

转换成块级元素display:block
转换成行内块元素display:inline-block
转换成行内元素display:inline

html嵌套规范

p标签中不要嵌套div、p、h等块级元素
a标签不能嵌套a标签

css特性

继承性

子元素有默认继承父元素的特点
**控制文字的属性**都可以继承

原则：本身有就不会继承，没有就继承父级

层叠性
- 在优先级相同的条件下，后面的覆盖前面的
- 若优先级不同谁的优先级高，谁就覆盖

背景的复合写法

背景复合写法建议： color URL（）平铺位置 -
 background: skyblue url(./images/1.jpg) no-repeat bottom right;
注意：使用英文方位词不考虑顺序数字下第一个必须是x，第二个必须是y

盒子模型

padding内边距

            /* 四个值：上右下左 顺时针*/
            /* padding: 10px 20px 40px 80px; */
            /* 三个值：上 左右 下 */
            /* padding: 10px 20px 15px; */
            /* 两个值：上下 左右 */
            /* padding: 10px 20px; */
            /* 一个值：上下左右 */
            padding: 60px;

css3盒子模型

自动内减：box-sizing:border-box

margin外边距

合并现象

垂直布局的块级元素，上下margin会合并

最终距离为两者margin最大值
解决办法：只给一个盒子设置margin即可

行内元素设置上下外边距无效上下内边距也无效

margin的塌陷问题（重要）

现象：互相嵌套的块级元素，子元素的margin-top 会作用在父元素上

结果：导致父元素一起移动

解决方法：

触发BFC（块级盒子格式化上下文）

BFC可以解决浮动和塌陷问题

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden （超出部分隐藏）
转换成行内块元素
设置浮动

解决塌陷最佳办法给父级添加overflow：hidden

行内元素的margin和padding无效情况

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

结构伪类选择器

这个选择器是个逻辑并且的关系
比如div:nth-child(n) 表示要找一个div，这个div必须是某个元素的一个子元素

/* 选择第一个li */
        /* li:first-child {
            background-color: blue;
        } */
        /* 选中最后一个li */
        /* li:last-child {
            background-color: blue;
        } */
        /* 任选一个 */
        /* li:nth-child(n) {
            background-color: skyblue;
        } */
        /* 选择倒数第3个 */
        
        li:nth-last-child(3) {
            background-color: blue;
        }
       /* 选择后三个*/
        li:nth-last-child(-n+3)

结构伪类选择器之公式(重要)

/* li:nth-child(n) 小括号里不仅可以写数字还可以写公式 */
        /* 选择偶数 even或者2n*/
        /* li:nth-child(even) {
            background-color: red;
        } */
        /* 选择奇数 odd或者2n+1 */
        /* li:nth-child(odd) {
            background-color: blue;
        } */
        /* 选择前5个 -n+5 */
        
        li:nth-child(-n+5) {
            background-color: pink;
        }

易错点

/* 找到第一个li里面的a 两种写法*/
        /* li:nth-child(1) a {
            background-color: red;
        } */
        /* li:first-child a {
            background-color: red;
        } */
        /* 找到第五个li里的第3个a */
        
        li:nth-child(5) a:nth-child(3) {
            background-color: blue;
        }
        /* 找到后五个li里的a */
        li:nth-last-child(-n+3) {
            
        }

伪元素::before&::after

必须设置==content属性==才能生效
伪元素默认是行内元素

<!-- 伪元素的作用：在网页中装饰一些小图片 
    给父级添加伪元素-->
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .father::before {
            /* 内容必须写 */
            content: '加油';
        }
        
        .father::after {
            content: '奥利给';
        }
    </style>

==注意：==伪元素默认是行内元素，宽高不生效

.father::before {
            display: inline-block;
            /* 内容必须写 */
            content: '加油';
            width: 100px;
            height: 100px;
            background-color: blue;
        }
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usglb9AS-1646056445989)(C:\Users\Y\Desktop\博客内容\pic\效果1.png)]

标准流（文档流）

标准流就是**标签默认的排列方式 **如：div独占一行
标准流配合浮动和定位完成网页布局

几种居中总结

margin:0 auto
作用是让具有宽度的块级元素居中，行内块不行

text-align: center;
给一个块级元素或者行内块元素设置，让其内部文字或者行内块实现水平居中

line-height: ;
在展示文字的时候会有一个默认的行高，文字在行中肯定是默认居中的，如果行高设置的和元素一样高，那么文字就会在行中垂直居中。

浮动

浏览器在解析行内或行内块元素的时候，如果元素换行之间会有小缝隙
浮动作用：
1.图文环绕
2.让块级盒子在一行显示

浮动的特点：
1.浮动后的元素会脱离标准流（脱标），不占标准流的位置
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动一行显示多个，可以设置宽高
注意：浮动的元素不能通过text-align:center或者margin:0 auto
浮动元素具有标准流元素的特性，可以设置宽高，并且在一行展示多个

浮动的不良影响

css书写顺序（重要）

作用：浏览器执行效率更高

书写顺序：

display/浮动/定位
盒子模型：margin、padding、宽高、背景色
文字样式：font:

清除浮动

1.给父级设置高度

2.额外标签法

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both
缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

3.单伪元素清除法

给父级添加一个类clearfix

<div class="box1 clearfix">

.clearfix::after {
            content: '';
            display: block;
            clear: both;
            /* 补充代码，在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

4.双伪元素清除浮动（常用）

==特点：==不光能清除浮动还能解决塌陷（坑爹现象）问题

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

5.给父元素设置overflow : hidden

触发bfc

直接给父元素设置overflow : hidden
特点：方便

注意

版心注意：要清除浮动的影响，在上一级的父级 -->

<!-- 因为li浮动脱标撑不开父级的高度

项目通用css

/* 清除内外边距 */

* {
    margin: 0;
    padding: 0;
    /* 内减模式 */
    box-sizing: border-box;
}

a {
    /* 清除下划线 */
    text-decoration: none;
}

li {
    /* 清除小圆点 */
    list-style: none;
}


/* 清除浮动 */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    /* 版本兼容 */
    *zoom: 1;
}

body {
    background-color: #f3f5f7;
}

/* 版心 */
.wrapper {
    width: 1226px;
    margin: 0 auto;
}

定位

布局网页的三种方式

标准流
块级元素独占一行 → 垂直布局
行内元素/行内块元素一行显示多个 → 水平布局

浮动
可以让原本垂直布局的块级元素变成水平布局

定位
可以让元素自由的摆放在网页的任意位置
一般用于盒子之间的层叠情况

设置定位的步骤

属性名：position
设置偏移值
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则（离哪边近用哪个）

静态定位

静态定位，默认值为标准流

相对定位

特点

相对于自己原来位置进行移动
占有原来的位置-没有脱标
仍然具有标签原有的显示模式特点如：div相对定位后还是独占一行
配合子绝父相使用

定位小细节

如果有水平有left和right，以left为准，垂直有top和bottom，以top为准

绝对定位

先找以定位的父级，如果有这样的父级就以这个父级为参照物进行定位
有父级，但父级没有定位，以浏览器窗口为参照进行定位

特点

如果不给相对定位设置位移，那么就不会影响元素的位移，只是改变了定位

脱标，不占有原来的位置,与浮动不同，文字无法环绕绝对定位

改变标签的显示模式特点：具有==行内块特点==（在一行共存，宽高生效）

如果没有宽高也没有内容，盒子的宽度尺寸就是0

如果子级和父级的宽度相同可以设置width：100%

固定定位

特点

脱标不占位置
改变位置参考浏览器窗口
具备行内块特点

使用定位让盒子居中

绝对定位的盒子不能使用左右margin auto居中

 .box {
            position: absolute;
            left: 50%;
            margin-left: -150px;
            top: 50%;
            margin-top: -150px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

left：50%整个盒子移动到浏览器的中间偏右的位置
在margin-left:盒子宽度的一半取负数使盒子水平居中

top：50%整个盒子移动到浏览器的中间偏下的位置
在margin-top:盒子高度的一半取负数

transform: translate(-50% -50%); （自己宽度高度的一半）自动计算盒子宽度

图片垂直居中对齐

设置图片垂直居中 middle居中 :vertical-align: middle;

不同布局方式元素层级关系

标准流<浮动<定位
默认情况下定位的盒子后来者居上
**z-index：**取整；取值越大，显示顺序越靠上，默认值为0，必须配合定位才能生效。
浏览器默认把行内和行内块标签当做文字处理，默认基线对齐

装饰

基线

基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）

解决行内/行内块元素垂直对齐问题
当图片和文字在一行中显示时，其实底部不是对齐的

垂直对齐方式

属性名:vertical-align

属性值

项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

input与input标签对齐方式

 vertical-align: middle;
            box-sizing: border-box;

在这里插入图片描述
没对齐前

在这里插入图片描述
对齐后

图片在盒子里填不满有缝隙问题

在这里插入图片描述
前

在这里插入图片描述
后

给img添加代码：

img {
            /* vertical-align: middle; */
            display: block;
        }

==或==
img {
            vertical-align: middle;
            /* display: block; */
        }

光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor
常见属性值：

圆角边框：border-radius

常见取值：border-radius
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

overflow溢出部分显示效果

控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
-

元素本身隐藏

让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

常见属性值：

visibility：hidden
display：none
区别：
visibility：hidden 隐藏元素本身，并且在网页中占位置
display：none 隐藏元素本身，并且在网页中不占位置 ➢

注意点：
开发中经常会通过 display属性完成元素的显示隐藏切换
display：none；（隐藏）、 display：block；（显示）

元素整体透明度

属性名：opacity

属性值：0~1之间的数字

1：表示完全不透明 • 0：表示完全透明

注意点： opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
.box {
            width: 600px;
            height: 600px;
            background-color: blue;
            opacity: 0.5;
        }

边框合并

让相邻表格边框进行合并，得到细线边框效果
代码：border-collapse：collapse；

用css制作三角形（面试）

步骤
1.宽高设为0

2.四个边框设置不同颜色

3.想要哪个方向的角，就把其余三个方向角的边框颜色设为透明色transparent
.box {
            width: 0;
            height: 0;
            border-top: 50px solid blue;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

焦点伪类选择器

用于选中元素获取焦点时状态，常用于表单控件
input:focus {
            background-color: skyblue;
        }
获得焦点：把光标点进input 失去焦点：把光标从input里拿出去

链接伪类选择器

属性选择器

代码：

效果：

拓展

精灵图

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
精灵图的使用步骤
创建一个盒子
通过PxCook量取小图片大小，将小图片的宽高设置给盒子
将精灵图设置为盒子的背景图片
通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

background复合写法拓展：

注意点：
background-size和background连写同时设置时，需要注意覆盖问题
解决：要么单独的样式写连写的下面 ,要么单独的样式写在连写的里面
精灵图的标签都用行内标签：span、b、em

盒子阴影

属性名：box-shadow

默认情况下是外阴影（outset）、外阴影（insert）盒子阴影

过度

让元素样式慢慢变化，配合hover使用，增强网页交互体验

属性名：transition

常见取值：

注意点：

过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的 ① 给默认状态设置，鼠标移入移出都有过渡效果 ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

案例：
.box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transition: all 0.5s;
        }
        
        .box:hover {
            width: 600px;
            background-color: orange;
            box-shadow: 5px 10px 10px 5px #ccc;
        }
效果图：

骨架结构标签

DOCTYPE文档说明
文档类型声明，告诉浏览器该网页的 HTML版本

网页语言
常见语言：zh-CN 简体中文 / en 英
<html lang="en"> ``<html lang="zh-CN">

字符编码

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

SEO：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：

竞价排名

将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）

让文字消失

646056446002)]

注意点：

过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同的 ① 给默认状态设置，鼠标移入移出都有过渡效果 ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

案例：
.box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transition: all 0.5s;
        }
        
        .box:hover {
            width: 600px;
            background-color: orange;
            box-shadow: 5px 10px 10px 5px #ccc;
        }

骨架结构标签

DOCTYPE文档说明
文档类型声明，告诉浏览器该网页的 HTML版本

网页语言
常见语言：zh-CN 简体中文 / en 英
<html lang="en"> ``<html lang="zh-CN">

字符编码
万国码：

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码

SEO：搜索引擎优化

作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：

竞价排名

将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）

让文字消失

font-size: 0; 或者text-indent：取负值

web前端基础知识

HTML&CSS基础经典版

排版标签

文本格式化标签

图片标签

路径的介绍

音频标签：audio

视频标签：video

链接标签

列表标签

表格标签

合并单元格

列表标签

绝对路径

相对路径

表单标签-input

button按钮标签

select下拉菜单

lable标签

没有语义化的标签

语义化标签

CSS：层叠样式表

css的引入方式

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

清除内外边距,获取所有标签

字体和文本样式

字体：

字体大小

字体粗细

字体样式

字体类型

层叠性

复合属性

水平居中对齐 text-aling:center

文本修饰

行高line-height

颜色取值

选择器进阶

复合选择器

后代选择器

并集选择器

交集选择器

hover伪类选择器

背景相关属性

背景复合

复合写法：推荐：background：color image repeat position

元素显示模式之块级元素

元素显示模式之行内元素

元素显示模式之行内块元素

元素显示模式转换

html嵌套规范

css特性

背景的复合写法

盒子模型

padding内边距

css3盒子模型

margin外边距

合并现象

margin的塌陷问题（重要）

行内元素的margin和padding无效情况

结构伪类选择器

结构伪类选择器之公式(重要)

易错点

伪元素::before&::after

标准流（文档流）

几种居中总结

浮动

浮动的不良影响

css书写顺序（重要）

清除浮动

1.给父级设置高度

2.额外标签法

3.单伪元素清除法

4.双伪元素清除浮动（常用）

5.给父元素设置overflow : hidden

注意

复合写法：`推荐：background：color image repeat position`