Web笔记

最新推荐文章于 2024-05-09 12:41:58 发布

BlueMozeer

最新推荐文章于 2024-05-09 12:41:58 发布

阅读量830

点赞数

本文链接：https://blog.csdn.net/qq_40185402/article/details/127919464

版权

Html
一、大前端
1.前端能做什么
APP、小程序、游戏、网站、微信公众号、H5
2.Web与Internet
Internet：全球性计算机互联网，俗称：因特网、国际互联网…
互联网有很多的应用，网站见得最多的应用 —— WEB
3.浏览器
百度、夸克、UC、360、QQ…
谷歌、火狐、Edge、Safari、欧朋
4.编辑器
记事本、Editplus、vscode、hbuilder、Dreamweaver、sublime

二、 HTML入门
1.前端开发涉及到的三个语言
HTML: 负责网页的基本内容结构
CSS: 负责网页美化
JS: 负责网页的行为/交互效果
2.HTML概述
HTML : 超文本标记语言，可以简单理解就是一个网页
HTML语言，标记也称为标签，运行在浏览器
-> <标记名称>
超文本：文本、图片、视频、声音、超链接…
3.HTML特点
以.html或者.htm为后缀名
浏览器会解析执行html文件多中的代码(从上往下，从左往右)

三、 HTML语法规范
1.语法基础
标签格式：用尖括号来包裹
<标签名称>
分类：
(1)双标签形式
<标签名称>内容部分</标签名称>
(2)单标签形式
既是开始，又是结束
<标签名称> 或者 <标签名称 />
HTML5以后推荐使用第1种
2.文档类型声明

写在第1行，声明当前HTML版本为HTML5，浏览器就会按照这个规范来解析
3.网页结构

是网页的根标签，一个网页只有一个根标签网页的头部，定义网页的配置信息网页的主体，展示内容

head之间可以放的内容

设置网页的标题设置网页的编码，防止出现乱码 4.注释不被浏览器解析运行的代码格式用于增强代码的可读性，解释代码快捷键 ctrl + / 添加/取消注释

四、HTML标签
1.文本样式标签
文字加粗
文字倾斜
文字下划线
文字删除线
HTML提供了一组有语义的标签
strong 加粗 em 倾斜 ins 下划线 del 删除
说明：如果有文字的话，通常选择后边有语义的标签。
2.换行标签

或者
单标签形式
3.标题标签

h1 ~ h6
单独占一行，文字h1最大，h6最小，有加粗效果，上下方向有边距
4.段落标签

段落内容

单独占一行，上下方向有边距 5.水平线标签

或者

单标签会在页面中出现一条独占一行的分割线 6.图片标签常见的图片格式：jpg/jpeg、png、gif 单标签属性： src=”图片资源的路径” width=”图片的宽度，单位是像素(px)或者百分比” height=”图片的高度，单位是像素(px)或者百分比” alt=”图片加载失败时显示的文字” 如果只是设置宽度或者高度，另一个方向会等比例缩放。如果宽度和高度同时设置，可能会出现比例失真 7.路径(URL) (1)相对路径相对于当前的html 兄弟资源直接写资源名称兄弟资源的儿子先找兄弟再找儿子兄弟/儿子找父亲：../ (2)绝对路径是一个完整的路径，使用网络资源的时候，就会使用绝对路径 https://n.sinaimg.cn/default/crawl/48/w550h298/20220801/01b4-49b8d133ce3457eadcba26190d8e214b.png 优点节省本服务器的存储空间缺点资源不稳定，一旦远程服务器删除图片资源，本地服务器也就无法访问 8.标签的属性 <标签名称属性名=”属性值” 属性名=”属性值”>

五、链接
1．空链接
同时会跳转到顶部
2．锚点链接
步骤1：定义锚点，在任意标签中添加属性id=”锚点名称”

步骤2：跳转到锚点位置

六、分区标签
1.div —— 块分区

专门用于对网页布局，会独占一行，是最基本的分区标签 2.span —— 行分区处理同一行文本中，出现了不同的样式的时候。

七、表格
用于格式化数据
1.表格的语法
table 表格标签，所有内容都要放到这个里边
tr 行标签，要写在table中
td 列标签，要写在tr中
2.可选标签
caption 表格的标题
thead 表头部分
tbody 表格的主体部分
th 列标签，加粗/居中效果
3.表格的属性
table的属性
border=”” 设置边框
width=”” 设置宽度
4.不规则表格(单元格合并)
rowspan=”n” 跨行，从当前开始，向下合并n个单元格(删除被合并)
colspan=”n” 跨列，从当前开始，向右合并n个单元格(删除被合并)
八、列表
1.有序列表

有序列表
列表项1
列表项2
…

2.无序列表

无序列表
列表项1
列表项1
…

3.自定义列表(了解)

自定义列表被解释的名称

列表——对以上名称的解释

… 九、表单用于收集用户的数据，最终发送给后端 1.表单控件 input 标签 2.input标签 type 设置input标签的类型，默认值text value 设置默认值，不写这个属性也是存在的，用户输入的值都会进入到这个属性中 (1)文本输入框 (2)密码框 (3)提交按钮将收集的数据发送给另一个页面(后端) (4)重置将表单控件中的内容恢复初始状态 (5)普通按钮点击没有效果，后期用于JS中 (6)复选框 checked 设置选中状态 (7)单选框 name用于将多个单选框成一组，只能选中其中一个 (8)文件域用于设置要上传的文件 multiple 允许用户上传多个文件 3.form标签用于按钮提交 4.多行文本域标签设置默认值 5.下拉列表选项 selected 用于设置某一项默认的选中状态

CSS

一、表单——关联控件(label)
用于进行form中文本与控件的关联

二、CSS概述
CSS: 层叠样式表/级联样式表
1995年诞生，2010年推出了CSS3
样式：颜色、背景、位置、大小、边框、阴影、动画…
总结：CSS用于控制HTML标签样式

三、CSS的书写位置
1.行内/内联样式
<开始标签 style=”color: red; background: pink;”></结束标签>
style=”给当前的标签设置样式”
color 属性名 pink属性值
属性名和属性值之间用冒号隔开，一个属性写完以英文的分号结束。
2.内部样式
在html中的head标签之间加入style标签，在标签内部写CSS样式

3.外部样式
把CSS样式写在外部的一个CSS文件中
在html中head标签之间加入link标签，引入一个外部CSS文件

4.样式优先级 !important > 行内样式 >(内部样式=外部样式)>浏览器默认样式 color: blue!important; 注意：尽量不要使用important，级别过高，将来无法进行覆盖。 5.使用场景行内样式：会和HTML混杂写在一起，不好修改；一般用于JS中动态变化样式内部样式：可以减少服务器请求次数，加快网站的打开速度；大型网站（百度首页，京东首页…）选择这种方法外部样式：结构上显得简洁规范，便于后期维护。会请求多次，影响网站的打开速度。后期还可以实现代码的复用四、选择器用于查找标签，告诉浏览器要把样式渲染给指定的标签选择器 { CSS样式 } 1.通用选择器会选择所有的html标签 * { color: red } 用于给所有的标签设置公共的样式，选择器优先级非常低 2.标签选择器标签名称{ CSS属性 } 选中指定的html标签优点：使用非常方便缺点：选择面太广，不利于项目使用 3.类选择器 .类名称{ CSS样式 } <标签 class=”类名称1 类名称2”>

(4)获取文本框的输入焦点
input:focus{
CSS样式
}

8.属性选择器
通过标签的属性来查找标签

input[type]{
}
查找input标签中含有type属性
[type]{
}
查找所有标签中含有type属性的
[type=”text”]{
}
查找所有标签中含有type属性，并且值是text的

五、选择器
9.后代选择器
选中某个标签的子孙后代
.box span{ } 选择box类下表所有的后代span
注意事项：空格就是后代选择器
10.直接子代选择器
在标签中直接找儿子
.box2>span{ }
.box2>p>span{ }
11.兄弟选择器
往后找兄弟标签
h1~p{ } 查找h1标签后，兄弟标签为p的
12.相邻兄弟选择器
往后找紧邻的第一个兄弟
h4+p{ } 查找h4标签后紧邻的p标签
注意事项：紧邻选择器后边不能有其它的标签
13.并列选择器
标签同时被多个选择器查找到
p.c1{ } 同时满足被选择器p和选择器.c1找到
注意事项：选择器之间不能有空格
14.伪元素
是附加在标签中的一种选择器，会生成一个行内分区
标签::before{ } 在标签开始的位置插入内容
标签::after{ } 在标签结束的位置插入内容
content 表示要生成的行内分区的内容(必须添加)
可以设置生成内容的样式

六、CSS样式
边框样式 border: 宽度线的类型颜色;
border: 1px solid red;
实线
宽度 width
高度 height

七、CSS样式优先级
1.不同选择器样式不同
当多个选择器选中同一个元素，不同的样式都会生效，它们之间不会产生冲突，样式会叠加。
2.不同选择器样式相同
权重相同的情况下，后边的把前边的给覆盖
CSS中有一些样式可以继承的，父元素的样式会传递给子元素
3.选择器权重计算
选择器权重
继承样式无
通用选择器 0
标签选择器 1
类(伪类)选择器 10
ID选择器 100
行内样式 style=”” 1000
!important 优先级最高 10000

总结：
选择器权重会叠加，但注意权重叠加不会越级
例如：11个类选择器不会超过一个id选择器
常用的选择器：
标签选择器、类选择器、后代选择器、直接子代选择器、群组选择器、伪类选择器、伪元素选择器…

八、CSS中的值和单位
1.颜色值(写法)
颜色单词 rgb rgba 16进制 16进制简写
红色 red rgb(255,0,0) rgba(255,0,0,1) #FF0000 #F00
rgba 分别表示红色，绿色，蓝色，透明度
颜色值范围0~255 透明度范围0~1
2.尺寸写法
像素(px)：电脑屏幕上的一个发光点
百分比(%)：占父元素的尺寸的比例
em 倍率：相对于父元素字体大小的倍率
3.CSS属性
font-size 字体大小
text-indent: 2em; 文本缩进，缩进两个文字是2em

九、流和文档(标准)流
流：标签的有序排列
文档流，网页中每个元素都会按照各自的特征进行排列
例如：每个div会独占一行
1.所有的标签分为三种显示形态
块级元素：会独占一行，有宽高属性 div h1~h6 p ul ol li dl dt dd
行内元素：会和其它的行内共处一行，没有宽高属性 span b u I s a…
行内块元素：会和其它的行内共处一行，有宽度属性 input select textarea
img 图片标签是一种特殊的，行内替换元素。
2.改变显示模式
display: inline; 转为行内元素
display: block; 转为块状元素
display: inline-block; 转为行内块元素
小技巧：去除图片底部空隙，给图片添加 display：block

十、盒子模型
1.边框
border-top/right/bottom/left: 宽度线的类型颜色
3个属性顺序不分先后
线的类型：solid 实线、dashed 虚线、 dotted 点状线
border-width 边框宽度
border-color 边框颜色 transparent 透明色
border-style 边框样式（线的类型）
border:none; 去除边框
2.内边距
padding: 10px; 上下左右相同
padding: 10px 20px; 上下左右
padding: 10px 20px 30px; 上左右下
padding: 10px 20px 30px 40px; 上右下左
标准(W3C)盒模型
盒子实际宽度=内容宽度+左右内边距+左右边框
盒子实际高度=内容高度+上下内边距+上下边框
怪异盒模型
盒子实际宽度就是内容的宽度(width)
盒子实际高度就是内容的高度(height)
3.切换盒模型
box-sizing: content-box; 内容盒子(标准盒模型) —— 默认的
box-sizing: border-box; 边框盒子（怪异盒模型）
4.外边距
margin: 10px; 上下左右相同
margin: 10px 20px; 上下左右
margin: 10px 20px 30px; 上左右下
margin: 10px 20px 30px 40px; 上右下左
margin-top/right/bottom/left 控制其中一个方向
上右下左
5.盒子在网页中占的空间大小
水平方向：左右的外边距 + 盒子实际宽度
垂直方向：上下的外边距 + 盒子实际高度
十一、行内元素的内边距
行内元素的水平方向的内边距正常生效；垂直方向会产生“视觉生效”，实际上没有生效。
十二、外边距特点
1.外边距合并
(1)在文档流中，垂直方向的两个盒子之间的外边距会产生合并，取最大值。
(2)在父元素的第一个子元素中，设置上边距，会出现在父元素顶部
解决方法：
1.改用给父元素添加内边距
2.给父元素添加上边框
3.给父元素添加溢出隐藏属性
overflow:hidden;
2.通过外边距实现盒子水平居中
版心：指的是页面布局中主体内容所在的区域
盒子水平居中 margin: 0 auto;
3.外边距取值
正负值都可以使用，正值会增加距离，负值会减少，缩短距离
0距离是紧挨着
负值一旦使用可能会产生重叠的现象。
十三、去除标签样式
标签中有自带的内外边距，需要去除这些样式
*{
margin: 0;
padding: 0;
}

text-align: 盒子文本水平对齐方式 left/center/right
HTML特殊字符
在网页中产生空格
< <
> >
© 产生版权分号©
https://blog.csdn.net/jack_rose_me/article/details/124603494

十四、元素中内容溢出
当前标签中如果内容出现溢出，通常是盒子宽高固定的情况才会出现溢出。
overflow: visible; 溢出可见
overflow: hidden; 溢出隐藏
overflow: scroll; 显示滚动条，强制出现滚动条
overflow: auto; 自动出现滚动条，根据内容多少自动出现的
十五、元素的显示和隐藏
1.脱离文档流的隐藏
display: none; 元素隐藏后，不再保留空间
如果要让元素显示出来，可以添加 display: block;
2.不脱离文档流的隐藏
visibility: hidden; 元素隐藏后，还会保留空间
visibility: visible; 默认值，可见
3.不脱离文档流 —— 元素透明
opacity: 0; 元素透明, 还会保留空间
值的范围 0~1 1是不透明
注意事项：包括元素中的内容

十六、背景
background-color 背景颜色
background-image 背景图像，通过url() 设置图像的路径
background-repeat 背景图像的平铺方式
Repeat 整个重复，把盒子铺满
Repeat-x 横向重复
Repeat-y 纵向重复
No-repeat 不重复，只显示一张图片
background-position: 水平方向垂直方向; 背景图像定位
正值往右、往下移动；负值往左、往上移动
特殊的值
水平方向： left/center/right
垂直方向： top/center/bottom
以上四个属性可以综合到一起
background: 颜色图像定位重复；
顺序上不分先后顺序，可以是一个值或者多个值。
十七、精灵图
CSS Sprite，翻译过来叫做精灵图/雪碧图，图片处理的一种方式
UI设计会把网页上一些修饰性的图标整合到一张图片上，需要哪一部分，通过背景定位查找对应的位置
优点：减少了对服务器请求次数
用法：
(1)将精灵图作为背景图
(2)通过背景定位定位到对应的图标部分
十八、行高
line-height 设置一行所占高度的值
作用：
(1)让一行文本在盒子中垂直居中（盒子的高度和行高相同）
(2)控制段落中(多行文本)行间距
十九、背景渐变
渐变通常线性渐变用的最多
Background-image: linear-gradient(颜色1,颜色2，颜色3…)
角度设置
Background-image: linear-gradient(角度deg, 颜色1,颜色2，颜色3…)
范围设置
Background-image: linear-gradient(角度deg, 颜色1 百分比,颜色2百分比，颜色3 百分比…)

二十、背景图片大小

没有设置默认是图片本身的大小
background-size: 水平方向垂直方向
background-size: 100% 100%; 使用图片将盒子铺满，可能会出现变形
background-size: cover; 将整个盒子铺满，多余的部分被裁减，不变形
background-size: contain; 至少将图片完全显示，可能会有空白区域

二十一、元素的美化和装饰
1.边框的圆角
Border-radius: 10px; 四个角度相同
Border-top-left-radius: 可以设置其中一个角度
Border-radius: 20px 40px; 左上/右下右上/左下
Border-radius: 20px 30px 40px; 左上右上/左下右下
Border-radius: 10px 20px 30px 40px; 左上右上右下左下
Border-radius: 50%; 正圆或者椭圆
Border-radius: 高度的一半；胶囊型
2.盒子阴影
Box-shadow:
值1：必须，水平方向的偏移量
值2：必须，垂直方向的偏移量
值3：可选，羽化，值越大模糊度越强
值4：可选，扩展半径
值5：可选，颜色，默认黑色
值6：可选，内外侧阴影，内侧inset，默认是外侧
3.去除表单中自带的外轮廓线
Outline: none;

二十二、浮动
float: left/right
目的：为了让多个盒子成一行展示
特点：会脱离文档流，不再占位
浮动产生的结果
父盒子中，如何子盒子都浮动起来，父盒子不能再被子盒子撑开 —— 高度塌陷
浮动盒子如果不设置宽度，宽度就是内容的宽度
可以让行内元素块状化，具有了宽高属性
浮动可以去除图片空白边距
浮动可以解决了外边距合并（父盒子中第一个子盒子的上边距合并）
浮动影响后边的盒子，通常父盒子中如果有一个子盒子浮动，就都浮动。
二十三、解决高度塌陷 —— 清除浮动
1.给父盒子设置高度
适用于在网页布局中，高度是确定的情况，例如：网页头部、导航条…
2.清除浮动 —— 溢出隐藏法
在浮动盒子的父盒子中添加溢出隐藏属性
overflow: hidden;
不足：有些定位到外部的盒子也会被隐藏
3.清除浮动 —— 额外标签法
在所有浮动盒子的最后边添加一个空的div，然后给div添加样式clear:both;
不足：会多出一个空标签
注意：只能添加一个块状标签，不能使用行内标签
4.清除浮动 —— 伪元素
.clearfix::after{
content: “”;
display: block;
clear: both;
}
在所有浮动盒子的父盒子中调用clearfix
二十四、去除列表自带的样式
ul {
list-style: none;
}
二十五、文本处理
1.字号（字体大小）
font-size
谷歌浏览器默认文字大小16px，最小不能小于12px
可以继承的
em 相对于父元素的文字大小
rem 相对于根元素html的文字大小
2.字体家族
font-family: 字体1, 字体2,….
值可以写一种或者多种；如果是多种，先查找第1个，如果没有这种会往后查找…
注意：字体是有版权，如果是中文需要用引号包裹
3.字体体重（重量）
font-weight: 字体体重
normal 正常大小
bold 加粗
100~900之间，是100的倍数，默认是400
4.颜色
color: 文字颜色
5.文本水平对齐方式
text-align: left(左侧) / center(居中) / right(右侧)
6.行高
line-height
文本在盒子垂直居中：行高和高度相同
控制段落的行间距
7.文本修饰线
text-decoration: underline 下划线
text-decoration: line-through 删除线
text-decoration: none 无线条(用于取消自带的修饰线)
8.首行缩进
text-indent: 首行缩进

CSS属性查找
https://www.w3school.com.cn/css/index.asp

二十六、布局标签
header 定义头部
nav 定义导航
section 定义一个区域
aside 定义侧边栏
article 定义内容(文章)
footer 定义底部
二十七、定位
使用定位改变盒子的位置
静态定位(默认)、相对定位、绝对定位、固定定位、粘性定位
常用的定位：相对定位、绝对定位、固定定位
1.相对定位
position: relative
相对于元素原来的位置进行定位，可以使用left/right 、top/bottom来控制水平位置和垂直的位置
(1)相对定位没有脱离文档流，还会保留原来的位置，撑开父盒子，不影响父盒子
(2)对比外边距
外边距会影响到后边的盒子，相对定位不会挤开后边的盒子0
2.绝对定位
position: absolute
绝对定位会脱离文档流，不再占位
使用绝对定位的盒子会参照离自己最近有“非静态定位”的祖先元素。
通过left/top、top/bottom控制水平和垂直位置
如果要相对于父盒子，通常给父盒子设置相对定位：子绝父相
垂直居中
top:50%; margin-top: 自身高度一半;
水平居中
Left:50%; margin-left: 自身宽度一半;
(1)行内元素定位后会块状化，具有了宽高属性
(2)定位中出现了重叠，通过z-index控制层级，值是一个整数，越大越靠前，默认是0

二十八、浮动特殊情况
在文档流下，浮动盒子的父盒子如果不设置高度，会出现高度塌陷
如果浮动盒子的父盒子也设置浮动，则会被子盒子撑开，不会出现高度塌陷

二十九、行内块
1.行内块水平居中
给父盒子设置文本水平居中 text-align:center;
2.去除行内块自带外边距
给父盒子设置字体大小为0 font-size:0;

三十、固定定位
position: fixed;
会脱离文档流，相对于当前的窗口
三十一、高级选择器
1.属性选择器
标签[属性名] 查找标签中含有指定属性
标签[属性名=”属性值”] 查找标签中属性为固定值的
标签[属性名^=”属性值”] 查看属性中以指定的值开始的元素
标签[属性名$=”属性值”] 查看属性中以指定的值结束的元素
标签[属性名*=”属性值”] 查找属性中含有某个值的元素
2.结构伪类选择器
查找第1个
:nth-child(1) 或者 :first-child
查找最后1个
:nth-child(最后一个的编号) 或者 :last-child
查找第n个
:nth-child(n)
查找倒数第n个
:nth-last-child(n)
查找奇数
:nth-child(odd) 或者 :nth-child(2n+1) 或者 :nth-child(2n-1)
查找偶数
:nth-child(even) 或者 :nth-child(2n)
查找倍数
:nth-child(3n)
3.目标伪类选择器
:target
通过a标签的href属性触发目标伪类选择器，通过关联元素的id来进行查找，在目标元素上添加 :target
文字1

三十二、弹性布局
之前接触的布局方式：流失布局、浮动布局、定位布局。
弹性布局（flex布局）：flexbox，弹性盒模型
优势：自动分配空间，不需要计算
劣势：父盒子需要高度

开启弹性布局图片

在父盒子中添加属性 display: flex
2.主轴的排列方向
flex-direction
分为行(横向)模式和列(纵向)模式
row 行模式，正向排列（默认的）
row-reverse 行模式，反向排列
column 列模式，正向排列
column-reverse 列模式，反向排列

说明：主轴可以是水平，也可以是垂直；如果设置主轴为水平，垂直方向为交叉轴，如果设置主轴为垂直，水平方向为交叉轴。

3.容器和项目
父盒子叫做容器，给父盒子开启弹性布局
子盒子叫做项目，会将行内元素块状化
4.主轴的对齐方式
Justify-content 定义项目在主轴上的对齐方式
flex-start 主轴起点对齐
flex-end 主轴终点对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目平均分配间距
space-evenly 项目之间的间距是相同的
5.项目的换行
flex-wrap
no-wrap 不换行，默认的
wrap 换行，当容器的宽度小于项目宽度，会出现换行
wrap-reverse 在换行的同时，反向排列
6.主轴排列和项目换行的综合写法
flex-flow: 主轴排列项目换行
例如： row wrap
7.交叉轴对齐方式
align-items:
flex-start 起点对齐
flex-end 终点对齐
center 居中对齐

注意事项：只是针对于交叉轴只有一行

三十三、弹性布局
1.交叉轴对齐
用于交叉轴有多行的情况
align-content:
flex-start 开始对齐
flex-end 结束对齐
center 居中对齐
space-between 两端对齐
space-around 每个项目左右平均分配边距
space-evenly 项目之间平均分配边距

2.项目排序规则
order
默认值是0，可以是负数，数字越小，排序越靠前
3.项目的增长规则
flex-grow 用于对剩余空间的分配
默认为0，有剩余空间的时候，不会分配
如果设置为1，有剩余空间的时候，会自动放大，占全部剩余空间
如果每个项目中都有这个属性，则表示要分配剩余空间的比例
第1个项目1，第2个项目2，第3个项目1
1/(1+2+1) 2/(1+2+1) 1/(1+2+1)
4.项目的收缩规则(了解)
flex-shrink
项目在容器中的收缩规则，只有项目总的宽度超过了容器才会使用这个属性
默认值1，当容器空间不足时，项目默认收缩
如果值0，当容器空间不足时，项目不会收缩
当值为n，表示空间不足的时候，项目收缩的比例
例如：项目1收缩值1，项目2收缩值1，项目3收缩值2
1/(1+1+2) 1/(1+1+2) 2/(1+1+2)
5.项目的初始尺寸(了解)
flex-basis
项目在主轴上的初始尺寸，一旦这个属性设置以后原来宽度（高度）就会失效
如果主轴在水平方向，宽度会失效
如果主轴在垂直方向，高度会失效
6.综合写法
flex: 增长规则收缩规则初始尺寸；
如果只写一个值，表示增长规则，例如 flex:1
三十四、过渡
表示元素两种样式的变化过程
Transition: 要过渡的属性总时长延时运行曲线
过渡的属性： all 代表所有的属性可以省略
总时长：整个过渡的时长，单位是秒(s)
延时：在过渡执行前要等待的时长可以省略
运动曲线：运动速度，通常使用匀速linear；默认是ease（先快再慢）

cubic-bezier.com
注意事项：除了总时长和延时两者有先后之分，其它不分先后顺序。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/css_animated_properties
三十五、转换(2D)
包含有位移、旋转、缩放、倾斜(斜切)
1.位移
transform: translate(水平方向, 垂直方向)
transform: translateX(水平方向)
transform: translateY(垂直方向)
转换的特点
不会脱离文档流，继续占位
属性值中使用的百分比相同对自身的值
只有行内块和块状元素可以使用，行内元素不能使用
2.旋转
transform: rotate(角度deg) 沿着中心点旋转
transform: rotateX(角度deg) 沿着x轴旋转
transform: rotateY(角度deg) 沿着y轴旋转
3.设置转换中心点
transform-origin: 水平方向垂直方向;
4.缩放
transform: scale(倍数) 等比例缩放
transform：scaleX(倍数) 沿着x轴缩放
transform: scaleY(倍数) 沿着y轴缩放
5.倾斜(斜切) —— 了解
transform: skew(水平方向, 垂直方向)
如果只写一个值表示水平方向
transform: skewX(水平方向)
transform: skewY(垂直方向)
三十六、动画
1.定义动画
@keyframes 自定义动画名称{
from {
动画的开始属性
}
to {
动画结束的属性
}
}
多组动画
@keyframes 自定义动画名称 {
0%{ }
20% { }
…
100% { }
}
2.调用动画
animation: 动画名称总时长延时运动曲线运动次数是否反向播放状态
运动次数默认是1，无限循环infinite
是否交替，默认是不交替，交替是alternate
播放状态，默认是播放，running，暂停是paused
控制动画暂停
animation-play-state: running/paused;
三十七、兼容性
针对于低版本的浏览器，CSS中加入了浏览器专属前缀
谷歌/Safari -webkit-
火狐 -moz-
欧朋 -o-
三十八、文字阴影

text-shadow: 水平垂直羽化颜色

响应式网页：根据设备的宽度自动切换
三十九、媒体查询

@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width:1200px) { }
@media (min-width:1400px) { }

四十、视口标签
为了让网页的宽度为设备的宽度

快捷键 meta:vp

四十一、bootstrap
是Twitter公司的开发的UI框架，用于响应式网站开发的一款框架
使用文档
https://v5.bootcss.com/docs/5.1/getting-started/introduction/
1.容器
container 用于设置响应式的版心
container-fluid 宽度为100%的容器

2.断点
已经写好的媒体查询

3.表格

table是基础的类，也可以根据需要添加不同的类
table-striped 条纹效果，隔行换色

em 相对于父元素的文字大小
rem 相对于根元素(html)的文字大小

四十二、栅格化布局

将一个盒子分成了12份，在不同的设备宽度下，可以设置占的份数(n)
1400以上 col-xxl-{n}
1200以上 col-xl-{n}
992以上 col-lg-{n}
768以上 col-md-{n}
576以上 col-sm-{n}
设置盒子的偏移量
让盒子左侧留出空白列
offset-{n}

四十三、图标字体
1.下载图标字体和对应的CSS文件
2.在网页中引入CSS文件
3.查找图标对应的代码，粘贴即可

四十四、SCSS
CSS预处理器，可以让CSS成为一种编程语言
增加了变量、函数、循环、判断… 让CSS编程变的更加简洁清晰
除了SCSS以后，还有less、stylus等CSS预处理器
网址 www.sasscss.com
1.编译
(1)版本
早起SCSS文件的后缀名 .sass，版本3开始后缀名 .scss
(2)步骤
新建一个.scss文件
使用scss插件编译文件，就会生成css文件

四十五、SCSS规则
1.注释
//注释的内容
2.嵌套
后代选择器可以嵌套在内
.box {
span{ }
}
编译后
.box span{ }

四十六、SCSS的基本语法
1.变量
使用 $声明变量；用于保存重复使用的值
$width: 200px; 变量保存了一个长度值
$shadow: 5px 7px 5px rgba(0,0,0,0.5); 变量保存了一个阴影的值
.box {
width: $width;
box-shadow: $shadow;
}
2.父选择器
使用&代表上一级的选择器，也就是父选择器
搭配伪类、子代等选择器
.box{
&:hover{ }
&>span{ }
}
.box:hover{ }
.box>span{ }

四十七、混入
@mixin 创建混合指令的语法
@include 调用混合指令
@mixin boa( $a,$ b,$c) {
width: $a;
height: $b;
border-radius: $c;
}
.box {
@include boa(400px,200px,5px); //混入进来
}

MYSQL
一.数据的存储方式有哪些
特定的文件/内存/第三方云服务器/数据库服务器
二.什么是数据库
数据库按照一定的形式来组织存储数据，目的是为了便于操作数据 —— 增删改查
三.数据库发展历史
网状数据库 -> 层次型数据库 -> 关系型数据库 -> 非关系型数据库(NoSQL)

关系型数据库逻辑结构
Server -> Database -> Table -> Row -> Column
数据库服务器数据库数据表行列

四.mysql数据库
oracle：MySQL
马丁：MariaDB
xampp
服务器套装，保护多款服务器端软件，包含mysql，…
1.mysql部署结构
(1)服务器端：负责存储、维护数据 —— 银行的数据库服务器
C:/xampp/mysql/bin/mysqld.exe 启动文件
占用端口3306
(2)客户端：负责连接服务器，对数据进行操作 —— 银行的ATM机
C:/xampp/mysql/bin/mysql.exe
2.使用客户端连接服务器端
mysql.exe -h127.0.0.1 -P3306 -uroot -p
-h 连接的服务器，IP地址/域名 127.0.0.1/localhost 自己电脑的IP地址和域名
-P mysql所占用的端口
-u 提供用户名，root是mysql的管理员账户
-p 提供root对应的密码，xampp下root密码为空
mysql -uroot 简写形式
连接命令结束不能加分号
练习：反复的尝试连接，连接后退出连接。
3.常用的管理命令
quit; 退出服务器的连接
show databases; 显示所有的数据库
use 数据库名称; 进入指定的数据库
show tables; 显示所有的数据表
desc 数据表名称; 描述指定的数据表的表头有哪些项

五.SQL命令
结构化查询语言，用于操作关系型数据库服务器，主要对数据进行增删改查
1.SQL命令运行方式
(1)交互模式
客户端输入一行，点击回车，服务器就执行一行，适用于临时性的查看数据。

(2)脚本模式
把要执行的所有命令写在一个脚本文件中，一次性的提交给服务器执行，适用于批量的操作数据。

mysql -uroot<拖拽要提交的脚本文件回车
2.SQL命令的语法规范
(1)一条SQL命令可以跨越多行，以英文的分号作为结束
(2)SQL命令不区分大小写，习惯上关键字大写，非关键字小写
(3)假设某一条SQL命令出现语法错误，则此条命令往后所有命令不再执行
(4)分为单行注释和多行注释
– 单行注释
#单行注释
/* 多行注释 */

六.常见的SQL命令
1.丢弃数据库，如果存在
drop database if exists 数据库名称;
2.创建新的数据库
create database 数据库名称;
3.进入创建的数据库
use 数据库名称;
4.创建数据表
create table 数据表名称(
列名称列类型,
…
);

mysql单词
http://www.codece.com/archives/152

七、数据操作
1.插入数据
insert into 数据表名称 values(…);
2.删除数据
delete from 数据表名称 where 条件;
3.修改数据
update 数据表名称 set 列名称=值, … where 条件;
4.查询数据
select * from 数据表名称;
八、计算机存储字符
1.如何存储英文字符
ASCII：对所有的英文及其符号进行编码，总共有128个
Latin-1：对欧洲字符进行了编码，总共有256个，兼容ASCII；MySQL默认使用这种编码
2.如何存储中文字符
GB2312：对6000多汉字进行了编码，兼容ASCII
GBK：对2万多汉字进行了编码，兼容GB2312
Unicode：对世界上主流国家常用的语言进行了编码，具体有三种存储方案，utf-8，utf-16，utf-32
3.解决中文乱码
(1)确保脚本文件的编码是utf8
(2)设置客户端连接服务器端编码为utf8
set names utf8;
(3)设置服务器端创建数据库存储字符的编码为utf8
charset=utf8

4.针对于个别情况，还是出现乱码
退出交互模式
执行 chcp 65001 将命令行编码改为utf-8
重新进入交互模式查询数据

MySQL可视化操作
链接:https://pan.baidu.com/s/1H83zMsr0lavOGymYzmdD8w
提取码:ga2x
九、列类型
在创建数据表的时候，指定的列存储的数据类型
create table t1(
nid 列类型
);
1.数值型
tinyint 微整型，占1个字节，范围-128~127
smallint 小整型，占2个字节，范围-32768~32767
int 整型，占4个字节，范围-2147483648~2147483647
bigint 大整型，占8个字节，范围
float 单精度浮点型，占4个字节，存储的值越大精度越低
double 双精度浮点型，占8个字节，存储的值越大精度越低
decimal(M,D) 定点小数，占16个字节，M代表总的有效位数，D代表小数点后的位数
boolean 布尔型，只有两个值，分别是true和false，存储只有两个值的数据，例如：性别、是否为会员、是否为推荐商品…
true和false是关键字，不能加引号
布尔型在使用的时候会转为tinyint，true转为1，false转为0，也可以直接插入1或者0
2.日期时间型
date 日期型格式 ‘2022-10-30’
time 时间型格式 ‘14:55:30’
datetime 日期时间型格式 ‘2022-10-30 14:55:30’
3.字符串型
varchar(M) 变长字符串，不会产生空间浪费，数据操作速度相对慢，常用于存储变化长度的数据，例如：姓名、文字标题、详情… M的最大值是65535
char(M) 定长字符串，可能会产生空间浪费，数据操作速度相对快，常用于存储固定长度的数据，例如：手机号码、身份证号码… M的最大值是255
text(M) 大型变长字符串，M的最大值4G
varchar(5) char(5)
a a\0 a\0\0\0\0
ab ab\0 ab\0\0\0
一二三一二三\0 一二三\0\0
选择合理列类型
create table t1(
id int,
title varchar(64),
birthday date,
age tinyint,
phone char(11),
sex boolean
);

数据库存储图片，存储的是图片的路径
img/1.jpg
img/huawei.png

十、列约束
mysql可以对插入的值进行验证，例如：编号不能出现重复、性别只能是男或者女、一个人的成绩范围0~100之间… 只有符合条件才允许插入
create table t1(
pid int 列约束
);
1.主键约束 —— primary key
声明了主键约束的列上，不允许插入重复的值，一个表中只能有一个主键约束，通常加在编号列，会加快数据的查询速度
null 表示一个暂时无法确定的值，例如：暂时无法确定商品的价格、无法确定一个员工的手机、家庭住址…
null 是关键字，不能加引号
主键约束禁止插入null
2.非空约束 —— not null
声明了非空约束的列，禁止插入null。

3.唯一约束 —— unique
声明了唯一约束的列不允许插入重复的值，一个表中可以使用多次唯一约束
允许插入null，甚至多个null
一旦使用了唯一约束，可能会影响到数据的默认排序
4.检查约束 —— check
也称为自定义约束，可以自己指定约束条件
create table student(
score tinyint check(score>=0 && score<=100)
);
mysql不支持检查约束，极大影响数据插入速度。
5.默认值约束 —— default
(1)设置默认值
create table ht_event(
ctime date default ‘2022-8-31’
);
如果不设置默认值，则为null
(2)应用默认值
①在插入值的位置，使用default关键字，就会自动应用默认值
insert into ht_event values(3,‘事件测试’, default);
②给指定的列提供值，没有出现的列会自动应用默认值
insert into ht_event(eid, title) values(4,‘事件测试’);
6.外键约束
声明了外界约束的列插入的值必须在另一个表的主键列出现，目的确保两个表之间建立关联。
外键列要和对应的主键列的类型要保持一致
foreign key(外键列) references 另一个表(主键列)

十一、自增列
auto_increment：自动增长，声明了自增列，只需要赋值为null，就会获取最大值然后加1插入
注意事项：必须添加在整数型的主键列

十二、简单查询
1.查询特定的列
实例：查询出所有员工的编号和姓名
select eid,ename from emp;
练习：查询出所有员工的姓名，性别，生日，工资
select ename,sex,birthday,salary from emp;

2.查询所有的列
select * from emp;

3.给列起别名
示例：查询出所有员工的编号，姓名，使用一个字母作为别名
select eid as a,ename as name from emp;
练习：查询出所有员工的姓名，性别，工资，使用1个字母作为别名
select ename as a,sex as b,salary as c from emp;
select ename a,sex b,salary c from emp;

4.显示不同的记录
示例：查询出员工都分布在哪些部门
select distinct deptid from emp;
练习：查询出都有哪些性别的员工

5.查询时执行计算
示例：查询出所有员工的姓名及其年薪
select ename,salary*12 from emp;
练习：假设每个员工增长2000，年终奖30000，查询出所有员工的姓名及其年薪，使用一个字母作为别名；
select ename,(salary+2000)1280+30000 as s from emp;

6.查询的结果排序
示例：查询出所有的部门，结果按照编号升序排列
select * from dept order by did asc;
示例：查询出所有的部门，结果按照编号降序排列
desc -> descendant 降序的
desc -> descrobe 描述
select * from dept order by did desc;
练习：查询出所有的员工，结果按照工资的降序排列
select * from emp order by salary desc;
练习：查询出所有的员工，结果按照年龄从大到小排序
select * from emp order by birthday asc;
练习：结果按照名字排序
select * from emp order by ename asc;
练习：查询出所有的员工，结果按照工资降序排列，如果工资相同，就按照姓名降序排列
select * from emp order by salary desc,ename;
练习：查询出所有的员工，结果按照性别升序排列，如果性别相同按照年龄从大到小排列
select * from emp order by sex asc,birthday;

7.条件查询
查询出编号为5的员工
select * from emp where eid=5;
练习：查询姓名为原批的员工
select * from emp where ename=‘原批’;
练习：查询出所有的女员工
select * from emp where sex=0 order by ename desc;
练习：查询出20号部门的员工
select * from emp where deptid=20;
练习：查询出公司在8000以上的员工有哪些
select * from emp where salary>8000;
比较运算符：> < >= <= !=(不等于)
练习：查询出不在20号部门的员工
select * from emp where deptid!=20;
练习：查询出没有明确部门的员工
select * from emp where deptid is NULL;
练习：查询出有明确部门的员工
select * from emp where deptid is not NULL;

练习：查询出工资在8000~10000之间的员工有哪些
select *from emp where salary>=8000 && salary <= 10000;
练习：查询出8000以下的男员工
select * from emp where salary<8000 && sex=1;
select * from emp where salary<8000 and sex=1;
练习：查询出10000以上或者8000以下的员工有哪些
select * from emp where salary>10000 || salary<8000;
练习：查询出20号部门或者30号部门的员工有哪些
select * from emp where deptid=20 or deptid=30;
select * from emp where deptid in(20,30);
练习：查询出不在20号部门并且不在30号部门的员工
select * from emp where deptid not in(20,30);
练习，全部保留注释写一遍
练习查询出工资在6000在10000之间的男员工，要求结果按照工资的降序排列
select * from emp where salary>=6000 && salary<=1000 && sex = 1
order by salary desc;

8.模糊条件查询
示例：查询出姓名中含有字母e的员工
select *from emp where ename like ‘%e%’;
练习：查询出姓名中以e结尾的员工
select *from emp where ename like ‘%e’;
练习：查询出姓名中倒数第2个字母是e的员工
selece *from emp where ename like ‘%e_’;

9.分页查询
查询的结果有太多，一次显示不完
需要有两个已知的条件，当前页码、每页的数据量
每页开始查询的值=（当前页码-1）*每页的数据量
语法：
select * from emp limit 开始查询的值,每页的数据量；
练习：假设每页显示5条数据，查询出前4页
第1页
select *from emp order by salary limit 0,6;
第2页
select *from emp limit 6,6;
第3页
select *from emp limit 12,6;
第4页
select from emp limit 18,6;
注意事项：不能写计算，不能打引号
十三、复杂查询
1.聚合查询，需要一组聚合函数
count() sum() avg() max() min()
数量总和平均最大最小
示例：查询出所有员工的数量
select count() from emp;
练习：使用编号列查询数量；
select count(eid) from emp; – 21
练习：使用所属部门列查询数量
select count(deptid) from emp; – 20
练习：查询出所有女员工的工资总和
select sum(salary) from emp where sex=0;
练习：查询出20号部门的平均工资
select avg(salary) from emp where deptid=20;
练习：查询出10号部门的最高工资
select max(salary) from emp where deptid=10;
练习：查询出年龄最大的女员工
select min(birthday) from emp where sex=0;

2.分组查询
示例：查询出男女员工的数量，工资总和分别是多少
select count(eid),sum(salary),sex from emp group by sex;
练习：查询出各部门的平均工资，最高工资，最低工资
select avg(salary),max(salary),min(salary),deptid from emp group by deptid;
函数 year() 获取日期中的年份部分
select year(‘2022-09-01’) ;
示例：查询出1990年出生的员工
select * from emp where year(birthday)=1990;
练习：查询出每个员工的姓名及其出生的年份
select ename,year(birthday) from emp;

3.子查询：多个查询命令的组合，把一个查询的结果作为另一个的查询条件
示例：查询出年龄最大的女员工
步骤1：查询出年龄最大的女员工的生日
select min(birthday) from emp where sex=0
步骤2：通过生日查询员工
select *from emp where birthday = ‘1983-07-15’;
综合
select *from emp where birthday=(select min(birthday) from emp where sex=0)
练习：查询出高于平均工资的员工有哪些
select *from emp where salary>(select avg(salary) from emp);
练习：查询出和xin同一个部门的员工
select *from emp where deptid=(select deptid from emp where ename=‘xin’);
select *from emp where deptid=(select deptid from emp where ename=‘xin’) && ename!=‘xin’;
练习：查询出和tom同一年出生的员工有哪些
select *from emp where year(birthday)=(select year(birthday) from emp where ename=‘tom’) && ename!=‘tom’;

4.多表查询，要查询的列分布在多个表中
示例：查询出所有员工的姓名及其部门名称
select ename,dname from emp,dept where deptid=did;
select emp.ename,dept.dname from emp,dept where emp.deptid=dept.did;
内连接
select ename,dname from emp inner join dept on deptid=did;

JS
一、JS概述
1.历史
1995年，JS最早出现在网景的浏览器中
1996年，IE中也开始出现了JS
1997年，制定了JS的标准规范，ECMAScript
2009年，JS开始向后端发展，出现了Node.js
2.JS的学习步骤
了解背景知识 > 搭建开发环境 > 打印输出hello world > 变量和常量 > 数据类型 > 运算符 > 逻辑结构 > 函数和对象 > 第三方的库和框架 > vue react 小程序 > 个人项目

有基础的可以看
程序员必做50题
JavaScript高级程序设计

二、运行方式
1.内部写法

2.外部写法
(1)先创建01.js文件
(2)引入外部文件

三、JS语法规范
1.区分大小写
2.每行代码结束的分号可以省略
3.分为单行注释(//)和多行注释(/* */)

四、变量
用于存储数据的容器
1.声明
var x=1 声明一个变量
var a=2, b=3 声明多个变量
使用关键字var来声明变量，x表示变量名称，会在内存中开辟空间，然后把后边的值1存进去。
2.变量的命名规则
(1)变量名称可以由字母、数字、下划线(_)、美元符号($)组成
(2)不能以数字开头
(3)不能使用关键字
(4)不推荐使用汉字
语义化：看到变量名称就知道存的是什么内容。
username email
多个单词之间命名方式
user_name 下划线命名 userName 驼峰命名
yongHuMing
3.变量的赋值
变量声明不赋值为undefined(未定义)，是一个空值
变量允许多次赋值，并且赋不同类型的值(这是弱类型语言特点)，后边会把前边的给覆盖

JS单词
http://www.codece.com/archives/90

/* CSS注释 /
// JS单行注释
/ JS多行注释 */

五、常量
和变量一样，都是存储数据的容器
(1)声明后必须赋值，不允许为空
(2)不允许重新赋值
六、数据类型

分为原始类型和引用类型
原始类型分为数值型、字符串型、布尔型、未定义型、空

1.数值型
10进制
1 2 3 4 5 6 7 8 9 10 … 15 16
8进制：以0开头的数字，例如012
1 2 3 4 5 6 7 10 11 12…
16进制：以0X开头的数字，例如0XF 不区分大小写
1 2 3 4 5 6 7 8 9 a … f 10
浮点型
3140
3.14E3
31.4E2
2.字符串型
被引号所包裹的值，引号不区分单双引号
检测数据类型
typeof 值
‘number’/‘string’/‘boolean’/‘undefined’/‘object’
查看任意一个字符的编码
‘a’.charCodeAt()

3.布尔型
只有两个值，分别是true和false，表示真和假，用于保存只有两个值的数据，例如是否登录，是否为会员，是否已婚…
4.未定义型
只有一个值是undefined，表示一个空值；例如声明变量未赋值就是undefined
5.空
只有一个值是null，常和引用类型的数据一起使用

七、数据类型转换
分为隐式转换和强制转换
1.隐式转换
运算过程中，自动产生的转换
(1)数字+字符串数字转为字符串
2 +’3’ //‘23’
(2)数字+布尔型布尔型转为数字 true->1 false->0
2+true //3
2+false //2
(3)字符串+布尔型布尔型转为字符串
‘2’+true //‘2true’
JS中加号(+)的作用
数字之间的加法运算
字符串之间的拼接运算
NaN : Not a Number 不是一个数字，是在将一个值转换为数字的过程中，没有成功的得到数字结果就是NaN；NaN和任何数字执行数学运算结果还是NaN
函数：是一个功能体，提供若干的数据，返回结果。—— 饺子机
所有的隐式转换为数字会自动调用函数Number
2.强制转换
(1)强制转换为数字
Number()
Number(‘3’) //3
Number(‘3a’) //NaN
Number(true) //1
Number(false) //0
Number(undefined) //NaN
Number(null) //0
(2)强制转换为整型
parseInt()
用于将小数或者字符串转为整型，其它类型转换结果为NaN
parseInt(3.5) //3
parseInt(‘6a’) //6
parseInt(‘a6’) //NaN
(3)强制转换为浮点型(小数)
parseFloat()
用于将字符串转为浮点型，其它类型转换结果为NaN
parseFloat(‘3.14a’) //3.14
parseFloat(‘75’) //75
parseFloat(‘a3.14’) //NaN
(4)转字符串(了解)
toString()
用于将数字和布尔型转为字符串
var n=2
n.toString() //‘2’

八、运算符
表达式：由运算符连接的操作数据组成的格式，最终会是一个值
运算符分为算术运算符、比较运算符、逻辑运算符、位运算符、赋值运算符、三目运算符
1.算术运算符

- - / % ++ –
    % 取余
    ++ 自增，变量的值自动加1
    – 自减，变量的值自动减1
    var n2=3
    // 先把n2的值赋给n3，然后n2再执行自增
    var n3=n2++
    var n4=3
    // 先让n4执行自增，然后再把自增结果赋给n5
    var n5=++n4
    2.比较运算符

< >= <= == != === !==
== 等于，比较两个值是否相同
!= 不等于，比较两个值是否不相同
=== 全等于，不仅比较两个值是否相同，还会比较类型是否相同
!== 不全等于，比较的是两个值不相同或者类型不相同
(1)数字和字符串比较，字符串转为数字
3>‘10’ //false
(2)字符串之间比较，比较的是字符的编码
‘3’>‘10’ //true
‘3’ -> 51 ‘1’ -> 49
NaN和任何值比较(> < >= <= == ===)结果都是false
3.逻辑运算符
&& 逻辑与，关联的两个条件都是true结果是true，否则是false
|| 逻辑或，关联的两个条件有一个是true，结果是true，否则false
! 逻辑非，取反向 !true -> false !false -> true
短路逻辑
&& 当第一个条件为false，最终结果就是false，不再执行第二个条件
|| 当第一个条件为 true，最终结果就是true，不再执行第二个条件
4.位运算符（了解）
模拟计算机底层的运算，先把值转为2进制再进行运算，运算完再把结果转回成10进制
10进制 1 2 3 4 5 6 7
2进制 1 10 11 100 101 110 111

& 按位与，上下两位比较，都是1结果是1，否则是0
| 按位或，上下两位比较，有一个是1结果是1，否则是0
^ 按位异或，上下两位比较，不同是1，否则是0
5&7 3&5 7|13 9^15
101 011 0111 1001
111 101 1101 1111
——— ——— ——— ———
101 001 1111 0110
5 1 15 6
5.赋值运算符
= += -= *= /= %= …
赋值运算赋值：先执行运算再执行赋值
6.三目(元)运算符
一目运算符：由一个运算符连接了一个表达式 ++ – !
二目运算符：由一个运算符连接了两个表达式
三目运算符：由两个运算符连接了三个表达式
条件表达式 ? 表达式1 : 表达式2
当条件表达式为true，执行表达式1
当条件表达式为false，执行表达式2
九、操作网页元素
1.查找网页元素
给标签设置id属性，一个网页中id的值不能出现重复的
按钮
2.给按钮绑定事件，监听用户操作
btn.οnclick=function(){ 点击事件
一旦监听到用户的操作，要执行的内容
}
cont.οnfοcus=function(){ } （输入框）获取光标
cont.οnblur=function(){ } （输入框）失去光标
3.弹出警示框
alert()
4.修改标签之间的内容(修改HTML)

cont.innerHTML=值

5.修改标签的CSS样式

cont.style.样式名称=值例如：cont.style.display='none' cont.style.fontSize='20px' 属性名如果是多个单词组成，采用驼峰命名法

程序=数据+算法
程序的执行方式：顺序执行、选择执行、循环执行
十、流程控制(选择执行)
if语句
满30减15

if(条件表达式){
语句块
}
如果if后的语句块中只有一行语句，则大括号可以省略
以下值作为条件表达式会转为false: 0 NaN ‘’ undefined null

十一、流程控制
1.if-else语句

if(条件表达式) {
语句块1
}else{
语句块2
}
2.if-else嵌套
是多项判断

if(条件表达式1){
语句块1
}else if(条件表达式n){
语句块n
}else{
语句块n+1 // 以上所有的条件都是false
}
3.switch-case语句
是一种特殊的多项分支语句，条件只能进行全等于的比较
switch(表达式){
case 值1: //如果表达式和值1比较相同
语句块1
break //结束，跳出整个switch-case语句
case 值n:
语句块n
break
default: //表达式和每个值比较的都是false
语句块n+1
}
说明：如果表达式在和case的值比较过程中，一旦为true，就不再和后边case的值进行比较了。
十二、循环
循环是重复的执行相同或者相似的代码
循环的两个要素
循环条件：控制循环是否往后执行
循环体：要重复执行的相同或者相似代码
1.while循环

while(循环条件){
循环体
}
2.break
用于循环体，作用是强制结束循环
3.do-while循环

do{
循环体
}while(循环条件)
第一次执行循环体没有判断
从第二次开始才会进行判断循环条件

4.for循环

for(初始值; 循环条件; 增量){
循环体
}

5.break和continue
两者都是用于循环体
break 用于结束循环
continue 用于跳过剩余的循环体，还会继续往后执行
6.循环嵌套
在一个循环的循环体中出现了另一个循环，任意两种循环之间都可以相互嵌套

十三、函数
parseInt()/parseFloat()/Number()…
函数：是一个功能体，提供若干数据，返回结果
函数分为系统函数和自定义函数
自定义函数：用于封装要重复执行的代码

1.创建自定义函数
function 函数名称(){
函数体 —— 重复执行的代码
}
调用
函数名称() //就会执行一次函数体中的代码
2.创建带有参数的函数
function 函数名称(参数列表){ //用于接收外部传递的值
函数体
}
调用
函数名称(参数列表) //就是实际传递的值
创建函数时的参数叫做形参，调用函数时的参数叫做实参，实参会赋值给形参，两者的数量可以不匹配，如果形参未被赋值则为undefined

素数(质数)
在1以上的整数中，除了1和自身以外，不能被其它的数字整除。
9
1 2 3 4 5 6 7 8 9
3.创建带有返回值的函数
function 函数名称(参数列表){
函数体
return值 //返回值，外部调用后得到的结果
}
调用
函数名称(参数列表) //得到函数的返回值
return用于返回函数调用后的结果
如果函数中没有写return，或者return后没有值返回的结果是undefined
一旦return执行，就会结束函数的调用
对比return和break
return用于函数中，结束函数的调用
break用于循环和switch-case，结束循环或者switch-case语句

十四、变量的作用域
全局作用域，在函数以外的作用域，只有一个全局作用域
函数作用域，在函数以内的作用域，可能有多个函数作用域
全局变量，在全局作用域下声明的变量，可以在任意作用域下访问到
局部变量，在函数作用域下声明的变量，只能在所在的函数作用域访问到
在函数内，不加var声明的变量是全局变量
在程序执行前，会将var声明的变量提升到所在作用域的最前边，只是提升声明部分，赋值不提升
形参属于是局部变量，只能在函数内访问
十五、函数的作用域
全局函数，在全局作用域下创建的函数，可以在任意的作用域下调用
局部函数，在函数作用域下创建的函数，只能在当前的函数作用域下调用
作用域链：作用域之间嵌套所形成的作用域结构；在查找变量的时候，先往当前作用域下查找，如果没有会沿着作用域链往上一级不断查找。
函数提升，程序执行前，会将函数整体提升到所在作用域的最前边
十六、匿名函数
function(){ }
1.创建函数
函数声明
function fn(){
}
函数表达式
var fun=function(){
}
变量名称就是函数名称
以上两种写法是等价
正常的情况下，函数先提升，变量声明再提升
如果函数名称和变量名称相同，函数提升后，变量声明就不再提升了

(1)对比函数名称和函数名称()
函数名称，本质上是一个变量，变量中保存了一个函数类型的值
函数名称()，在调用函数，执行函数体中的代码
(2)对比函数声明和函数表达式区别
函数声明存在函数的整体提升，可以先写调用再写创建
函数表达式只是存在声明提升，必须先写创建再写调用
函数本身也是一个值，类型是’function’

部署到云服务器 = 前端+后端

2.解决全局污染
全局作用域：在一个html中script标签下，默认就是全局作用域；每一个外部的js文件，也都是在全局作用域下。
全局污染：全局变量的出现带来的影响
解决全局污染：匿名函数自调用
;(function (){ （注意开头的;）
在函数作用域，变量都是局部变量
})()

3.回调函数
就是把一个函数类型的值作为参数传递，传递的函数就称作回调函数；回调函数会自动调用
function xin(madai){
madai() //调用传递进来的函数
}
function ming(){
}
xin(ming)
xin(function(){ })
回调函数的作用：用于获取函数调用后的结果
获取函数调用后结果两种方式
①通过返回值
②通过回调函数，把值放入到回调函数的参数中

十七、递归
递归是函数内调用自身这个函数
递归使用不当会产生内存泄露(把分配的内存空间占满，无法运行其它程序)
递归本身是一个死循环，用递归解决循环的问题。
如何使用递归：要有边界条件，结合着return来使用

斐波那契数列：第1、2项的值是1，从第3项开始，每一项是前两项相加的和。
1 1 2 3 5 8 13 21 34 55

1 1 1 1 1 1
1 1 1 1
1 1 1
1 1
1 1
1
1
1

递归课后拓展
http://www.codece.com/archives/102
十八、系统函数
isNaN( ) 用于检测用户输入的值是否含有非数字，有->true 没有->false

十九、对象
是一组属性和方法的集合
一部手机：属性有颜色、尺寸、品牌、CPU、内存… 方法有打电话、玩游戏、看视频、听音乐、办公…
一辆汽车：属性有颜色、品牌… 方法有代步、拉货…
万物皆对象
1.JS对象分类
自定义对象：自己创建的对象
内置对象：JS提供的对象，可以直接使用
宿主对象：根据不同的环境划分
2.创建自定义对象（字面量）
使用{ }创建空对象
{ 属性名: 属性值, 属性名: 属性值, … }
属性名如果含有特殊字符，必须添加引号
3.访问属性
对象.属性名
对象[‘属性名’]
如果属性不存在结果是undefined
undefined出现位置：变量声明未赋值，函数没有返回值，函数中没有传参
4.创建自定义对象（内置构造函数）
new Object( ) 创建一个空对象{}，需要单独添加属性。
5.遍历属性
依次访问对象中的每个属性
for(var k in 对象){
k 属性名
对象[k] 属性值
}
6.检测属性是否存在
对象.属性名===undefined true -> 不存在 false -> 存在
对象.hasOwnProperty(‘属性名’) true -> 存在 false -> 不存在
‘属性名’ in 对象 true -> 存在 false -> 不存在

二十、模板字符串
反引号之间的内容就是模板字符串${JS表达式}
解决了字符串的拼接
二十一、对象中的方法
就是一个函数
var p={
name: ‘新哥’,
tan: function(){
this 指向调用当前方法的对象
}
}
p.tan() //调用方法
二十二、数据的存储
1.原始类型
直接将数据存储到栈内存
2.引用类型
包含函数、对象、数组
会将值存储到堆内存中，会自动生成一个地址
Var xin={ }
把对象的生成的地址保存到栈内存

引用类型数据如果不被任何的地址所指向就会自动销毁
null 是一个空地址，没有指向任何堆内存数据
如果要销毁引用类型的数据，只需要赋值为null即可

二十三、数组
数组是一组数据的集合，每个数据是一个元素
1.创建 —— 数组字面量
[元素1, 元素2, … ]
2.访问数组元素
下标(索引)：是JS自动为每个元素添加的编号，从0开始的一个整数 >=0
数组[下标]
如果元素不存在，返回的结果是undefined
3.数组的长度
数组.length 获取元素的个数
(1)在数组的末尾添加元素
数组[数组.length] = 值
(2)清空数组
数组.length = 0
4.创建数组 —— 内置构造函数
new Array(元素1, 元素2, …)
new Array(3) 初始化长度值，可以添加更多个元素
5.数组的分类
关联数组：以字符串作为下标（了解）
索引数组：以>=0的整数作为下标
6.数组和对象的区别
两种都可以存储一组数据，对象是通过属性存储每个值，数组是通过元素存储每个值
对象存储数据是无序的，可以不分先后顺序；数组存储的数据有序的，可以进行排列。
7.遍历数组元素
依次访问每个元素
for(var k in 数组){
k 下标
数组[k] 元素
}
for(var i=0;i<数组.length;i++){
i 下标
数组[i] 元素
}

二十四、数组
API：是JS中预定义的函数和方法
1．数组的API
数组中提供的方法
toString()
将数组转为字符串，元素之间用逗号分隔
join()
将数组转为字符串，可以指定元素之间的分隔符号
concat(数组1,数组2,…) 拼接多个数组
如何学习一个API：知道它的作用、参数、返回值
数组API还需要查看原数组是否会发生变化。
slice(start,end) 截取数组元素，start开始下标，end结束下标，end为空会截取到最后，如果下标为负数表示倒数，不包含结束的这一项。返回截取到元素，元素组不会发生变化。
reverse() 翻转数组元素，原数组会发生变化
sort() 对数组元素进行排序，默认是按照编码排序
sort( function(a,b){
return a-b //按照数字从大到小排列
return b-a //按照数字从小到大排列
})
push() 在数组的末尾添加元素，返回数组长度，原数组会发生变化
pop() 删除数组末尾的一个元素，返回删除的元素，原数组会发生变化
unshift() 在数组的开头添加元素，返回数组长度，原数组会发生变化
shift() 删除数组开头的一个元素，返回删除的元素，原数组会发生变化
indexOf() 检测数组汇总是否含有某个元素，存在返回下标，不存在返回-1
2．二维数组
用于对一组数据进行二次分类，数组中的元素还是数组
[[ ],[ ],[ ]]

3．字符串对象
包装对象
目的是让字符像对象一样，具有属性和方法；JS提供了三种包装对象，分别是字符串对象、布尔对象、数字对象。
new String() 将一个字符串包装为对象
String() 将一个值转为字符串
(1)转义字符
改变字符本身的意义
\’ 将具有特殊意义的引号转为普通字符
\n 将字符n转为换行符
\t 将字符t转为制表符（多个连续空格，Tab键功能）
(2)API
length 获取字符串的长度
charArt(下标) 通过下标获取某一个字符，也可以使用数组写法字符串[下标]
indexOf() 查找某个字符串第一次出现位置，返回下标，找不到返回-1
lastIndexOf() 查找某个字符串最后一次出现位置，返回下标，找不到返回-1
toUpperCase() 英文字母转大写
toLowerCase() 英文字母转小写
所有的字符串API都不会影响到原来的字符串
slice(start,end) 截取字符串，start 开始的下标，end 结束的下标，end为空截取到最后，不包含end本身，下标为负数表示倒数
split() 将字符串转为数组

二十五、Math对象
数学对象，提供了一组数学运算的API
不需要通过new来创建对象，就可以使用API
圆周率 Math.PI
绝对值 absolute Math.abs(-3)
取整 parseInt(3.14)
向上取整 Math.ceil(1.2)
向下取整 Math.floor(1.2)
四舍五入取整 Math.round(1.2)
计算x的y次方 pow(x,y)
获取一组数字最大值，不能直接写数组 max()
获取一组数字最小值，不能直接写数组 min()
获取随机数，范围>=0 & <=1 random( )
二十六、Date对象
用于日期时间的存储和计算
1．创建
new Date(‘2022/9/6 11:38:30’)
new Date( 2022,8,6,11,38,30 ) 第2个参数月份存储的值0~11 对应 1~12月
new Date( ) 存储当前操作系统的时间
new Date( 16300000000 ) 存储的是距离计算机元年的毫秒数
2．转为本地字符串
toLocaleString( ) 存在兼容性问题，只能用于项目开发调试
3．获取存储的值
getFullYear( ) 获取年
getMonth( ) 获取月份月份的值0~11
getDate( ) 获取日期
getHours( ) 获取小时
getMinutes( ) 获取分钟
getSeconds( ) 获取秒
getMilliseconds( ) 获取毫秒
getDay( ) 星期，范围0~6 对应日~六
getTime( ) 获取Date对象时间戳
Date.now( ) 获取当前时间的时间戳

4．设置存储的值
SetFullYear( ) 设置年
setMonth( ) 设置月
setDate( ) 设置日
setHours( ) 设置小时
setMinutes( ) 设置分
setSeconds( ) 设置秒
setMilliseconds( ) 设置毫秒

5．拷贝Date对象
new Date( Date对象 )
二十七、Number对象
New Number( ) 将一个数字包装为对象
Number( ) 将一个值强制转为数字
toFixed( n ) 保留小数点后n位

二十八、Boolean对象
New Boolean( ) 将一个布尔值包装为对象
Boolean( ) 将一个值强制转换为布尔型
!!值将一个值隐式转换为布尔型

二十九、错误处理
1．常见错误
语法错误(SyntaxError)：出现了中文符号，缺号半块括号等，代码书写不符合语法规范。
引用错误(ReferenceError)：使用了未声明的变量
类型错误(TypeError)：当前调用的不是一个函数类型
范围错误(RangerError)：超出了JS的规定范围，例如：递归使用不当
自定义错误：程序员自己指定的错误
throw 错误内容
2．错误处理
即使出现了错误，不会阻止后续代码执行
try{
尝试执行，可能会产生错误，出现错误不会阻止后续代码执行
}catch(err){
一旦try中出现错误，就会捕获错误，将错误信息放入到err中
}

NodeJS
一、ES6新特性
ECMAScript JS标准规范
ECMAScript6 -> ES6，是JS的第6套标准
ES2015 ES2016 … ES2022
1．块级作用域
let声明的变量也会提升，进入到暂时性的死区，只有在赋值后才允许访问
不允许重复声明
大括号之间的语句块就是块级作用域：例如：if、else、while、for… 在块级作用域下，let和const声明的只能在块级作用域下访问，是局部变量或者常量。
2．参数增强
可以给参数设置默认值
function add(a,b,c=0){
// es6之前设置默认值的方式
b=b || 0
}
add(5000)
逻辑运算符赋值，选择把其中一个表达式赋给变量；
如果执行了第一个表达式，没有执行第二个表达式，就会把第一个表达式赋给变量
如果执行了第一个表达式，又执行了第二个表达式，就会把第二个表达式赋给变量
var n1 =1 || 2
var n2 =3&&2
console.log(n1,n2)// 1,2
3．箭头函数
( )=>{ }
简化了匿名函数，不等价于匿名函数
sort( ( a,b )=>{
return a-b
} )
如果箭头函数的函数体中只有一行代码，并且是return形式，可以进一步简化
sort( (a,b)=>a-b )

二、Node.js概述
Node.js是JS的一种运行环境，通过这个环境可以让JS实现后端开发。
www.nodejs.org
1．对比JS
（1） JS运行在客户端浏览器，存在多种解释器，有代码兼容性问题；Node.js运行在服务器端，只有一种谷歌V8引擎解释器，没有代码兼容性问题。
（2）两者都有相同的内置对象、自定义对象，不同的宿主对象。
（3） JS用于操作网页元素，完成网页交互；Node.js用于服务器端操作，访问数据库、调用其他的服务器。
2．运行JS
都是在命令行下完成
（1）脚本模式
node 拖拽脚本文件

（2）交互模式
node 回车进入交互模式
两次ctrl+c 或者一次ctrl+d 退出交互模式

3．特点
属于单线程运行逻辑

三、全局对象
在任意作用域下，可以直接访问的对象
1．global对象
用来检测一个变量或者函数是否为全局的
var a=1
console.log( global.a )
JS下global名称为：window
Node.js下，每个文件都是一个局部作用域下，不存在全局污染
JS下，每个文件都是在全局作用域下，存在全局污染
2．console对象
控制台对象，提供了一组用于控制台输出的API
console.log(1) //打印日志
console.info(2) //打印消息
console.warn(3) //打印警告
console.error(4) //打印错误
console.time( ) //开始计时
console.timeEnd( ) //结束计时

3．process对象
进程：计算机上的每个软件都是进程
process.arch 查看当前cpu的架构
process.platform 查看当前的操作系统
process.pid 查看当前的进程编号
process.kill( ) 结束指定编号的进程

4．Buffer对象
缓冲区，用于临时存储数据，是一个内存空间。
//创建buffer，分配空间大小（单位字节），并存储字符串
var buf=Buffer.alloc(7,‘ycSB哈’) //汉字占3个字节
console.log(buf)
console.log( buf.toString( ) ) // 将Buffer数据转字符串

四、模块
每一个文件就是一个模块，每个模块都是一个功能体。
module.exports 当前模块暴露的对象，默认是一个空对象
require( ) 是一个函数，用于引入其他模块，得到暴露的对象
主模块：
//引入功能模块08_yan.js
//注意事项：引入同一级目录下的模块，必须写路径
//引入成功后，得到的是该模块暴露的对象
var obj=require(‘./08_yan.js’)
console.log(obj.ss)
功能模块：
08.yan.js
console.log(‘这是袁超的眼睛模块’)
//暴露输出一个圆的面积
var r=0
function S®{
return rr3.14
}
module.exports={ （这里的等号很容易忘，注意！）
ss:S, （这里一个逗号不能忘，否则报错）
}
模块下的局部变量
console.log(__filename)//当前模块的绝对路径+绝对名称
console.log(__dirname) //当前模块所在目录的绝对路径
五、模块分类
模块分为自定义模块、核心模块、第三方模块
以路径开头不以路径开头
文件模块 require(‘./circle.js’)
用于引入自定义模块
目录模块 require(‘./02_wenjian’)
会到目录下去寻找package.json中main属性对应的文件，如果找不到会自动寻找index.js require(‘02_wenjian’)

会自动到当前目录的node_modules目录中寻找02_wenjian目录模块，会一直往上一级目录的node_modules目录中寻找。用于引入第三方模块

六、包和NPM
CommonJS：是一种模块化规范，Node.js就是采用了这种规范，例如：引入模块用require，暴露用modile.exports
包（package）：指的是第三方模块，需要下载安装才可以使用，是目录的形式。
NPM：是用来管理包的工具模块，在Node.js安装的时候已经附带安装
npm –v 查看版本号
网站：npm (npmjs.com)
常用的NPM命令
npm init –y 初始化一个package.json文件，作为项目描述文件
npm install 包名称下载安装指定的包，会将所有包保存到node_modules目录，如果不存在会自动创建；在package.json中记录安装的这个包；还会生成package-lock.json文件，记录所有包的相关信息。
npm install 自动安装package.json中记录的包

七、网址（URL）
URL：统一资源定位，互联网上的任何资源（网页、图片、CSS、JS、视频、声音）都有对应的网址用于获取对应的资源
http://www.codeboy.com:9999/products.html?kw=小米#two
传输协议域名/IP地址端口号文件路径查询字符串锚点
查询字符串：前端往后端传递参数的一个形式，包含参数名和参数值两部分
参数名=参数值&参数名=参数值
user = admin&pwd =123456

new URL( ) 将一个网址转换为对象，可以获取网址中各个部分
searchParams 获取网址中的查询字符串部分
get( 参数名 ) 通过参数名获取参数值

八、定时器模块
提供一组定时器相关的全局函数
1．一次性定时器
开启
var timer=setTimeout( 回调函数,间隔时间 )

当间隔时间到了，会调用一次回调函数，时间单位是毫秒
清除
clearTimeout(timer)
2．周期性定时器
开启
var timer=setInterval( 回调函数,间隔时间)
每隔一段时间，调用一次回调函数

清除
clearInterval(timer)
3．立即执行定时器
开启
var timer=setlmmediate( 回调函数 )
清除
clearlmmediate(timer)
第二种立即执行定时器开启
如果和上面的一起执行，那么这个定时器会排在首位
process.nextTick( 回调函数 )
定时器中的回调函数会放入到主程序后的事件队列（一组回调函数组成）

同步和异步方法
同步：在主程序中执行，会组织主程序后续代码的执行；通过返回值获取结果。
异步：在一个独立的线程执行，不会阻止主程序后续代码的执行；通过回调函数获取结果
九、文件系统模块（fs）
用于操作服务器端的文件：例如：已经上传的图片、音乐，可以通过客户端删除。
需要先引入模块，才可以使用API
const 函数名=require(‘函数名’)
官方建议：const fs=require(‘fs’)

以下代码为同步方法 / 异步方法
1．查看文件状态
statSync(‘文件的路径’) / stat(‘文件的路径’，回调函数)
isFile( ) //是否为文件
isDirectroy( ) //是否为目录
2．清空写入文件
writeFileSync(‘文件的路径’，写入的值) / write(‘文件的路径’，写入的值，回调函数)
如果文件不存在，会创建文件然后写入值
如果文件已经存在，会先清空文件的内容然后写入值
3．追加写入文件
appendFileSync(‘文件的路径’，写入的值) / appendFile(‘文件的路径’，写入的值，回调函数)
如果文件不存在，会创建文件然后写入值
如果文件已经存在，会在文件的末尾追加写入值
4．读取文件
readFileSync(‘文件的路径’) / readFile(‘文件的路径’，回调函数)
读取的数据格式为Buffer
5．删除文件
unlinkSync(‘文件的路径’) / unlink(‘文件的路径’，回调函数)
6．检测文件是否存在
existsSync(‘文件的路径’) 返回一个布尔型的值
7．文件流
createReadStream(‘文件路径’) 以流的方式读取文件，会将文件分成多端
createWriteStream(‘文件路径’) 创建可写入的流
pipe() 管道，可以将读取的流添加到写入的流，完成文件拷贝
on(‘事件名称’,回调函数) 监听事件，一旦监听到事件会自动调用函数；事件名称是固定的字符串格式。

十、http协议
超文本传输协议，是客户端和WEB服务器之间的通信协议
1．常规（通用消息头）
请求方法：要对服务器端资源的操作方式，常用方法有GET/POST/DELETE/PUT
状态码：查看响应的结果
1**：服务器接收到部分请求，还会继续其它的请求
2**：成功的响应
3**：响应的重定向，跳转到另一个资源
4**：客户端错误
5**：服务器端错误
2．响应标头（响应报文） —— response
Location：设置要跳转的网址
Content-Type：设置响应的内容类型，解决中文乱码 text/html;charset=utf-8
3．请求标头（请求消息头）—— request

4． HTTP请求过程
（1）在浏览器中输入网址：服务器（域名/IP地址），端口
（2）浏览器与服务器建立连接：三次握手
（3）连接建立后，浏览器开发向服务器发送请求消息
（4）服务器端接收到消息，处理请求，将消息响应给浏览器
（5）浏览器与服务器断开连接，四次挥手
（6）浏览器解析响应的消息，将数据渲染成网页呈现给用户

5．请求的消息
（1）消息的格式

请求行：请求的方法、请求的地址、协议版本号

请求头部：
请求头部名：请求头部值
请求主体：有的有请求主体(post、put)，有的没有请求主体(get、delete)
（2）请求行解析
请求方法： get post delete put
请求的地址：要请求的服务器端的资源
协议版本号：HTTP/1.1
（3）请求头部解析
host：要请求的服务器端
Content-Type：请求的内容类型，post请求必须设置为
application/x-www-form-urlencoded
User-Agent：告诉服务器，当前浏览器版本和系统的一些参数
（4）请求主体解析
GET请求是没有请求主题，因为把请求的参数放在了URL中
POST请求才会将参数放入到请求主体，格式为
参数名=参数值&参数名=参数值
6．响应消息
（1）状态行

协议版本状态码原因短句
（2）响应的头部

Location 要跳转的地址
Content-Type 设置响应的内容类型
（3）响应主体
服务器端响应给客户端的结果；可能是html，js，css，json…

7．post请求，内容的编码类型
在传递参数的过程中，对数据进行的编码
application/x-www-form-urlencoded 允许任意的字符，编码格式
user=admin&pwd=123456
multipart/form-data 上传文件设置的编码格式
text/plain 纯文本格式
8．数据渲染
1.获取要渲染的HTML标签位置，给标签设置id值
2.修改标签的值，将指定的内容渲染 id值.innerHTML= 新的值

十一、http模块
是一个核心模块，可以用来创建WEB服务器
createServer( ) 创建WEB服务器
listen( ) 设置端口
通过事件监听浏览器的请求，一旦请求自动调用函数
on(‘request’,(req,res)=>{
res 响应对象
res.setHeader( ) 设置响应的消息头
res.write( ) 设置响应到浏览器的内容
res.end( ) 结束并发送响应
req 请求对象
req.url 请求的资源，格式 ‘/xxx’
req.method 请求的方法
} )
十二、express框架
基于Node.js平台，快速、开放、极简的WEB开发框架
https:\www.expressjs.com.cn
属于是第三方模块，需要先下载安装
npm install express
1．创建WEB服务器
const express=require(‘express’)
const app=express() //创建WEB服务器
app.listen(3000) //设置端口
2．路由
用来监听特定的一种请求；路由包含有三部分：请求的URL、请求的方法、回调函数
res 响应的对象
res.send() 设置响应的内容并发送
res.redirect() 设置响应的重定向
res.sendFile() 设置响应的文件，文件必须使用绝对路径 _dirname
req 请求的对象
req.method 获取请求的方法
req.url 获取请求的资源
req.query 获取get传递的参数

十三、路由传参
传参方式格式路由获取
get传递 http://127.0.0.1:3000/search?a=1&b=2 req.query{a:1,b:2}

十四、表单标签

表单用于提交按钮点击后，向服务器发请求 action 设置请求的URL method 设置请求的方法，默认是get 表单控件中的name，用于设置参数名，用来接收用户输入的值。十五、使用插件将post传参转对象在路由前边使用 app.use( express.urlencoded ( { extended: true //内部是否使用第三方模块转对象 }) ) 十六、params传递格式：http://127.0.0.1:3000/search/1/2 设置参数名 app.get(‘/search/:kw’,(req,res)=>{ req.params 获取params传递参数 }) http://127.0.0.1:3000/search/小米十七、路由器用来管理路由，包含一组路由；防止不同路由之间URL冲突路由器 //1.引入express模块 const router=express.Router( ) //2.创建路由器对象 //3.往路由器对象添加路由 module.exports = router //4.暴露路由器对象 1 WEB服务器 //1.引入路由器模块 //2.挂载路由器，添加前缀 app.use(‘/pro’,引入的路由器)

十八、中间件(插件)
用于拦截对服务器的请求；分为应用级中间件、路由级中间件、内置中间件、第三方中间件、错误处理中间件
1．应用级中间件
是一个函数，一旦拦截到以后会自动调用这个函数
function fn(req,res,next){
next() //往后执行，可能是下一个路由或者中间件
}
app.use( 拦截的URL, fn )
2．路由级中间件
就是路由器的使用，拦截到URL以后，到指定的路由器下寻找路由
app.use( URL, 路由器 )
3．内置中间件
express中提供的中间件，可以直接使用
(1)将post传参转为对象
app.use( express.urlencoded({
extended: true
}) )
(2)托管静态资源
静态资源：包括html、css、js、图片 … 都是固定的文件
托管静态资源：客户端如果要请求静态资源，不需要通过路由响应文件，而是让客户端自动的到指定的目录下寻找。
app.use( express.static(‘托管的目录’) )

4．第三方中间件
以第三方模块的形式出现，需要先下载安装才能使用
后期用到中间件 cors

5．错误处理中间件
在所有路由/路由器后边；拦截所有路由错误
app.use((err,req,res,next)=>{
err 路由传递的错误
res.send({code:500,msg:’服务器端错误’})
} )
在路由中，执行
next(err) 就可以往后请求到错误处理中间件
下图示例：

十九、mysql模块
在项目中使用
mysql.exe -h127.0.0.1 -P3306 -uroot -p
mysql -uroot
增删改查
insert into 数据表名称 values(一组值);
delete from 数据表名称 where 条件;
update 数据表名称 set 列=值, 列=值 where 条件;
select * from 数据表名称 where 条件;
是Node.js下专门用于操作mysql数据库的模块
属于第三方模块，需要先下载安装
npm install mysql

createConnection() 创建连接对象
connect() 测试连接
query(SQL命令, 回调函数) 执行SQL命令，通过回调函数获取结果

createPool( ) 创建连接池对象，产生多个连接
query( SQL 命令，数组，回调函数 ) 执行SQL命令，通过回调函数获取结果，数组中存放的是一组要被过滤的值，会自动替换SQL命令中的占位符。

上述写完后，在其他js引入

1．mysql模块开启执行多个SQL命令
在创建连接池对象中添加指令：multipleStatements:true可以开启一次执行多个SQL命令

占位符(?)：在SQL命令中负责占位，会被过滤的值替换

更简洁的方法：

SQL注入：用户提供的值中含有特殊的字符（一半是引号），会破坏原有的SQL命令，加入新的SQL命令；
mysql模块使用占位符就可以防止SQL注入
2．SQL命令成功的结果
查询数据：结果是数组
插入数据：结果是对象
删除数据：结果是对象，需要通过affectedRows判断，如果值为0说明删除失败，否则说明删除成功
修改数据：结果是对象，需要通过changedRows判断，如果值为0说明修改失败，否则说明修改成功

二十、接口
后端提供给前端的动态资源
RESTful接口：是一种接口的规范。
1．返回结果
格式为JSON（字符串形式对象，，包括状态码和消息说明，如果需要返回数据，还需添加查询的数据，例如
{“code”:400,”msg”:”该员工不存在”}
{“code”:200,”msg”:”查询成功”,”data”:查询的数据}

	send方法会自动将JS对象转为JSON

2．接口地址
包含有版本号和资源名称
资源名称使用复数形式
http://127.0.0.1:3000/v1.0/emps
用户登录
http://127.0.0.1:3000/v1/users/login

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
以上错误：多次执行了send方法
解决：只能执行一次
3．请求方法
get 获取资源（查询数据）
post 新建资源（插入数据）
delete 删除资源（删除数据）
put 修改资源（修改数据）
练习：添加一个删除员工的接口（delete /v1/emps），get传递员工的编号，执行SQL命令，删除编号对应的员工
使用APIPost，新建接口，测试删除员工接口

4．传参方式
get传递
用来过滤数据
例如：QQ音乐，歌手过滤；分页过滤
http://127.0.0.1:3000/v1/emps?pno=1&count=10
页码每页数据量
post传递
新建资源和修改资源
parms传递
传递单个资源

练习：添加修改员工数据接口（put /v1/emps），post传递的值有编号（修改条件），姓名、性别、生日、工资、部门；获取post传递的参数，执行SQL命令，修改编号对应的员工；如果修改失败响应{code:400,msg:’修改失败’}，否则{cide:200,msg:’修改成功’}
新建接口测试

练习：添加员工列表接口（get /v1/emps/list），get传递当前的页码pno和每页的数据量count，执行SQL命令，进行分页查询；最后响应{code:200,msg:’查询成功’,data:查询的数据

练习：添加新闻详情的接口(get /detail)，params传递新闻的编号（nid），获取传递的编号，查询编号对应的这条新闻，如果没有编号对应的数据，响应{code:400,msg:’该新闻不存在’}否则响应{code:200,msg:’查询成功’data:数据}

二十一、APIPost
专门用于接口测试的工具，会生成接口文档

二十二、AJAX
异步的JS和XML
使用AJAX可以实现局部渲染，增加用户体验
XML技术已经被JSON取代，成为前后端数据交换的一种格式。
JSON: 字符串对象，通常只放数组或者对象，对象的属性名必须用双引号，值是字符串也必须用双引号。 —— 也称为对象的序列化
1．创建一个能够发起HTTP请求的对象
var xhr=new XMLHttpRequest()
2．通过xhr打开服务器连接（要请求的接口）
xhr.open(参数1，参数2，参数3)
参数1：对应接口的请求的方法，例如:GET/POST 必须用大写
参数2：对应接口的地址
参数3：是否为异步请求，true->是 flase->否默认为true
3．添加事件，监听是否有服务器端响应，一旦响应会自动调用函数
xhr.onload = function(){
xhr.reponseText 接口响应的文本内容
}
4．向服务器端发送
xhr.send() 发送的请求消息，没有请求主体

二十三、expres跨域的问题
两个服务器之间端口不同会产生跨域，不允许别的服务器请求

引入cors模块，属于第三方中间件
const cors=require(‘cors’)
2．使用cor中间件
app.use( cors() )

二十四、JSON
JS对象表示法，是前后端数据交换的一种格式
JSON.parse( ) 将JSON转为JS
JSON.stringify( ) 将JS转为JSON
通常JSON只有数组和对象

完成删除功能，点击删除，获取传递的编号，请求删除的接口(DELETE http://127.0.0.1:3000/v1/emps/拼接编号)，如果删除成功，警示框弹出“删除成功”，否则弹出“删除失败”

完成员工列表，直接请求接口（get http://127.0.0.1:3000/v1/emps/list?pno=当前页码&count=每页数据量），完成效果

二十五、跨域错误

二十六、POST请求
Ajax中，post请求传递的参数放入到了请求主体，还需设置请求的内容类型
xhr.setRequestHeader(‘Context-Type’,’application/x-www-form-urlencoded’) 设置请求的内容类型，传递参数编码为 a=1&b=2 （数据库表头=数据）
xhr.send(‘a=1&b=2’) 传递的参数放入到了请求主体
注意事项：post和put两种都是将参数放入到请求主体

添加员工，点击按钮，获取用户输入的值，请求添加员工的接口（post http://127.0.0.1/v1/emps），警示框弹出“添加成功”

完成修改员工，点击提交，获取用户输入的值，请求接口(put http://127.0.0.1:3000/v1/emps)，如果修改成功，警示框弹出‘修改成功’，否则‘修改失败’

二十七、正则表达式
专门描述字符串中字符出现规则的表达式
正则表达式验证的是字符串格式，不是固定死字符串内容
字符集[]:[0123456789]=[0-9]，[a-z]，[A-Z]
预定义字符集：\d
量词：{6}代表最多6位
位置匹配：开始^，结束$
正则表达式函数：
test() 验证是否符合规则
repalce(/wo/ig, ‘**’) 查找并替换 i忽略大小写，g全局查找
trim() 去除字符串两端的空格
http://www.codece.com/archives/273 常用正则表达式

Gitee
一.VCS系统
版本控制系统，用于项目中文件的存储、共享、历史回退、合并、代码追踪文件历史。
常用的软件
CVS 2000年以前
SVN 2010年以前
Git 2010年以后
二.Git中的常用概念
工作目录：是一个目录，用于保存项目中所有的文件
暂存区：是内存中的一个区域，用于临时存储项目中文件的编号
Git仓库：是一个特殊的目录，保存项目中所有的文件变化记录

三.Git中的常用命令
打开git命令行窗口：在项目所在目录的空白位置，单击鼠标右键 -> 点击“git bash here”
git --version 查看当前git的版本号
1.第一次使用Git软件前，告诉Git你是谁
git config --global user.name “自定义用户名”
git config --global user.email “用户邮箱”
2.查看配置列表
git config --list

3.初始化一个Git仓库，用来管理当前项目
git init
会在当前的工作目录下创建.git目录，保存项目中所有的文件
注意事项：一定要在项目所在的目录下打开命令行。
4.查看Git系统的状态
git status
可以追踪到文件的变化，例如：新文件出现、修改了文件、删除了文件…
5.将工作目录的文件添加到暂存区
git add 文件名称将指定的文件添加到暂存区
git add . 将所有变化的文件添加到暂存区
6.将暂存区文件提交到Git仓库
git commit -m “提交说明”
提交说明给自己后期恢复用的，可以使用汉字
7.查看所有的提交日志
git log 只能查看之前的提交
git reflog 查看所有的提交和回退记录…
8.历史回退
git reset --hard 提交ID
从Git仓库恢复到工作目录
9.忽略文件
有些文件不需要Git系统来管理，可以忽略掉
使用编辑器创建文件 .gitignore，把要忽略的文件路径写进去
例如：node_modules目录通常就是要忽略的文件。