web前端

一、

字体最大,共有六种标题，即

--

单标签

---

 

+文字

+文字

• 列表项目

注:

是实心圆
是空心圆
是实心方块
1. 列表项目
注:
按不同数字开头排序



注: 注:注: 在制作表格时必须要写

超链接不能嵌套超链接
p标签不能嵌套p标签
标题标签h1...h6也不能互相嵌套

form必须有action属性，表示提交地址
所有需要提交的数据,input必须有name属性
input按钮的文字，使用value属性表示
input必须放在form标签内才能提交











<!--一个文本输入框，并且这个输入框输入的数据可以提交到网页中>
name="自定义的名称"

get请求通常表示获取数据
post请求通常表示提交数据
get请求发送的数据都写在地址栏上，用户可见
post请求发送的数据用户不可见
get请求不能提交大量数据，但post可以，因此不要混用

span,一个容器标签，不具备任何特殊功能，仅当作容器来使用，用于包裹一段文本，便于给文本增加样式。
div,一个通用容器标签，不具备任何特殊功能，仅当容器来使用，可以包裹任何内容，也可以容器直接互相包裹。
<span style="font-size="24px;">



CSS内部样式,写在内。

border：solid/dashed/dotted+边框粗细+边框颜色
padding 0 15px 表示边框被拉长

行内样式>ID选择器>类选择器>标签选择器>通用选择器
<...style="..."> > #box{...} > .con{...} > div{...} > *{...}
1000>100>10>1>0

.p1{color:red;}
.p2{font-family:"华文中宋";}
.p3{font-size:26px;}
.p4{font-weight:bold;}
.p5{font-style:italic;}
.p6{font-indent:60px;}
.p7{test-align:center;}
.p8{line-height:100px;}
.p9{height:100px;background-color:gray;line-height:100px;} {!--垂直居中-->
.p10{text-decoration:underline;}

background-inage:url(+图片地址);
background-repeat:no-repeat;
background-passion:+水平方向上的对齐方式+竖直方向上的对齐方式;
background-passion:right center;

浮动元素会脱离网页文档，与其他元素发生重叠但是，不会与文字内容发生重叠
float:left;
float:right;

子元素浮动时，父元素可设置与子元素同等高度消除下一个元素与子元素造成的重叠，也可以在父元素里面设置overflow:auto或者clear:left/right/both消除造成的影响。
注:overflow作用于父元素，clear作用于下一个元素
clear表示下一个元素不受到上一个元素浮动的影响。

浮动元素在排列时，只参考前一个元素位置即可。
浮动元素不会覆盖文字内容
浮动元素不会覆盖图片内容
（因为图片本身也属于文本，可以图片看做是一个特殊的文字）
浮动元素不会覆盖表单元素
（输入框、单选按钮、复选框、按钮、下拉选择框等）

margin:0; <!-将边距设置成0-->
margin:auto;
margin-top
margin-right
margin-bottom
margin-left

padding 内填充
padding-top 顶部内填充
padding-right 右部内填充
padding-bottom 顶部内填充
padding-left 左部内填充

background: 背景色+背景图片+平铺方式，其中三者都能省略
border:边框宽度+边框样式+边框颜色，其中边框颜色可省略，默认为黑色，其他不可省略
font:斜体字+加粗+字号大小/行高+默认字体+（备用字体1，备用字体2...）
margin:上+右+下+左（顺时针方向）
padding:上+右+下+左（顺时针方向）
color:DarkGoldenRod;
color:rgb(184(红）,134（绿），11（蓝））;
color:#B8860B 184的16进制对应为B8，134的16进制对应为86,11的16进制对应为0B

块元素：可以设置宽高大小，默认宽度为100%，并且独占一行。如：p、ul，li、h1-h6、div、form、table等。
内联（行内）元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行。如：i、b、span、a等。
内联块元素：既能设置宽高大小，又能排在一行显示。如：img、input等。
display：block/inline/inline-block 表示块元素/内联（行内）元素/内联块元素

position:absolute;
position:relative;
position:fixed;

鼠标划入之后产生效果用hover
.text{
width=100px;height=100px;
background:black;
}
.text:hover{
background:pink;
}

box-sizing:border-box; 填充向内填充

邮箱输入框
URL输入框
数字输入框
input是单行文本输入
textarea是多行文本输入
placeholder 这个属性的作用是用来做文字提示
border-radius属性，设置一个元素的圆角半径
resize:表示重设大小
resize:vertical 垂直方向上调整大小
resize:horizontal 水平方向上调整大小
outline 消除轮廓、光圈
outline:宽度+样式+颜色
outline-offset 表示偏移的意思，这里指偏移原本的位置
resize: both（默认）/none/vertical/horizontal 随意调整大小/不可调整/仅垂直调整/仅水平调整
cursor : auto（默认）/crosshair/pointer/move 根据浏览器决定/十字线/一只小手/十字箭头

overflow: visible（默认）/hidden/auto 溢出部分可见/溢出部分隐藏/适当加入滚动条

伪类选择器 xxx: nth-of-type(index) index:同类型兄弟元素中的排名
属性选择器: xxx[ attr = val ] attl:属性名称 val:属性值
属性选择器: xxx[ href $= val ] $表示属性的结尾
属性选择器: xxx[ class ^= 'tap' ] ^表示属性的开头

xxx:first-child 选择第一个xxx元素
xxx:nth-of-type(even) 选择序号（同类型）为偶数的xxx元素
xxx:nth-of-type(odd) 选择序号（同类型）为奇数的xxx元素
xxx:nth-child(n) 选择序号（自然排序）为n的xxx元素
CSS重置
*{
margin: 0;padding: 0;
border: none; list-style: none;
}

appearance:none;外观清空
::after 伪元素选择器，需要加上content
input[type='checkbox']::after{
content:"";
}
linear-gradient(方向,开始颜色,结束颜色) 渐变效果
box-shadow:水平偏移 垂直偏移 模糊值 扩大值 影子颜色 阴影方向（内/外）默认向外
transion:要过渡的属性 过渡时间 过渡方式 延迟时间
ease：先慢后快再慢
linear：线性
ease-in：慢速开始
ease-out：慢速结束
ease-in-out：慢速开始慢速结束
:checked
input[type='checkbox']:checked{
} 它只能选择，所有被勾选的了checkbox

https://www.iconfont.cn/字体图标网页

transform: transformX/transformY/transformZ 位移
transform: scale(1.5); 缩放大小，默认是1
transform-origin: 50% 50%; 原点位置的调整，默认是正中间
transform: rotateX/rotateY/rotateZ 旋转
transform: perspective(500px); 透视（观察）距离，对于Chrome必须写在transform后的第一个位置才生效

@media screen and (max-width:1024px) {
} 响应式布局
text-shadow: 水平偏移 垂直偏移 模糊值 扩大值 影子颜色 阴影方向（内/外）默认向外 文字阴影效果

@keyframe 帧动画名称{
}
animation:帧动画名称 动画时长 infinite（动画无限循环）;

vertical-align只作用于inline-block，如果不是inline-block，那么vertical-align不生效，vertical-align调整垂直对齐方式
opacity: 1;元素完全不透明
opacity: 0;元素完全透明
rgba(R,G,B,透明度);

display: flex;
flex容器中float失效，vertical-align失效
flex-direction: row/column; 主轴水平/主轴垂直
justify-content: flex-start/flex-end/center/space-between/space-around;开始对齐（默认方式）/尾部对齐/中心对齐/两端对齐/自动分配间隔
flex容器默认是不换行的
flex-wrap: wrap; flex容器换行
flex-wrap: wrap-reverse; flex容器换行到上面
align-items: stretch/center/flex-start/flex-end/baseline; 交叉轴的对齐方式
flex-grow: 数字; 扩展比例
flex-shrink: 数字; 缩小比例

ctrl + s ：保存
crtl + a ：全选
ctrl + z ：撤销
ctrl + y ：前进
shift + end ：从头部选中一行
shift + home ：从尾部选中一行
shift + alt + ↓ ：快速复制一行
alt + ↑或↓ ：快速移动一行
tab ：向后缩进
tab + shift ：向前缩进
多光标 ：alt + 鼠标左键
ctrl + d ：相同元素的下一个

文本加粗
文本斜体
上标文本
下标文本
删除文本
插入文本

img -> 单标签
src:图片引入的地址
alt:当图片出现问题的时候，可以显示一段友好的提示文字
title:提示信息
width、height:图片的大小

a -> 双标签
href属性: 链接的地址
target属性: 可以改变链接的打开方式，默认情况下：在当前页面打开_self 新窗口打开_blank
base ->单标签：作用就是改变链接的默认行为的。

跳转锚点

号+id;

#号+name;

空格符： 
版权：©
注册商标：®
小于号：<
大于号：>
和号：&
人民币：¥
摄氏度：°

定义列表 -> dl dt dd 列表项需要添加标题和对标题进行描述的内容

：定义表格标题 cellpadding：单元格内的空间（内填充） cellspacing：单元格之间的空间 align：左右对齐方式 valign:上下对齐方式 复选框自动选好 苹果 复选框不可选 葡萄 下拉菜单 请选择 北京 上海 杭州 选择三个 多选 label：辅助标签 男 女

link标签
rel:属性指定资源跟页面的关系
href:属性资源的地址

background-attachment：背景图随滚动条移动的方式
scroll：默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移）
透明颜色：transparent

font-family：字体类型
font-weight：字体加粗
模式：正常（normal）加粗（bold）
写法：单词（normal、bold）|number（100 200...900，100到500都是正常的，600到900都是加粗的）

text-decoration：文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何修饰：none
注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写（针对英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
对齐方式：left、right、center、justify（两端点对齐）

letter-spacing：字之间的间距（针对中英文段落的）
word-spacing：词之间的间距（针对英文段落的）
英文和数字不自动折行的问题：
1.word-break：break-all;（非常强烈的折行）
2.word-wrap：break-word;（不是那么强烈的折行，会产生一些空白区域）

后代 M N {}
父子 M > N {}
兄弟 M ~ N {} 当面M下面的所有兄弟N标签
相邻 M + N {} 当前M下面相邻的标签

M[attr] {}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=：结束匹配
[][][]：组合匹配（需要满足方括号里的全部要求才能匹配）

M:伪类{}
:link 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）

CSS继承
文字相关的样式可以继承
布局相关的样式不能被继承（默认是不能继承的，但是可以设置继承属性inherit值）

box-sizing：
盒尺寸：可以改变盒子模型的展示形态
默认值：content-box：width、height -> content
border-box：width、height -> content padding border

盒子模型的一些问题
1.margin叠加问题，出现在上下margin同时存在的时候，会去上下中值较大的作为叠加的值。
2.margin传递问题，出现在嵌套的结构中，只针对margin-top的问题。

display：不占空间的隐藏
visibility：hidden 占空间的隐藏

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签
a标签是一个例外

透明度与手势
opacity：0（透明）~ 1（不透明）
0.5（半透明）
注：占空间、所有的子内容也会透明
raga（）：0 ~ 1
注：可以让指定的样式透明，而不影响其他样式
cursor：手势
default：默认箭头
准备图片：.cur、.ico
cursor:url(图片地址),auto;

最大、最小宽高
min-width、min-height
max-width、max-height
%单位：换算 -> 以父容器的大小进行换算的

float注意点
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给块元素添加，但也可以给内联元素添加
如何清除浮动
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高：不推荐，不能把宽高固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）

position:
static（默认）
relative
absolute
fixed
stick

relative：
如果没有定位偏移量，对元素本身没有任何影响
不使元素脱离文档流
不影响其他元素布局
left（右偏移）、top（下偏移）、right（左偏移）、bottom（上偏移）是相对于当前元素自身进行偏移的
absolute：
使元素完全脱离文档流
使内联元素支持宽高（使内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
fixed：
使元素完全脱离文档流
使内联元素支持宽高（使内联具备块特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位：
在指定的位置，进行黏性操作
z-index定位层级
默认层级为0
嵌套时候如果外层设置z-index则外层与外层比较，否则内层与外层比较

CSS添加省略号
width：必须有一个固定的宽
white-space：nowrap 不让内容折行
overflow：hidden 隐藏溢出内容
text-overflow:ellipsis 添加省略号

HTML和XHTML的区别
DOCTYPE文档及编码
元素大小写
属性布尔值
属性引号
图片的alt属性
单标签写法
双标签闭合

strong与b、em与i
表现形态都是文本加粗和文本斜体
区别在于，strong与em是具备语义化的，而b与i是不具备语义化的

blockquote：引用大段的段落解释
q：引用小段的短语解释
abbr：缩写或首字母缩略词
address：引用文档地址信息
cite：引用著作的标题

iframe元素会创建包含另外一个文档的内联框架（即行内框架）。
frameborder：规定是否显示框架周围的边框
width：定义iframe的宽度
height：定义iframe的高度
scrolling：规定是否在iframe中显示滚动条
src：规定在iframe中引入的URL
srcdoc：规定在iframe中显示的页面内容
应用场景：数据传输、共享代码、局部刷新、第三方介入等。

br：换行、wbr：软换行

pre与code：针对网页中的程序代码的显示效果。

map与area
给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。

embed与object
embed和object都表示能够嵌入一些多媒体，如flash动画、插件等。基本使用没有太多区别，主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成。

audio与video
audio标签标示嵌入音频文件，video标签表示嵌入视频文件，默认控件是不显示的，可通过controls属性来显示控件。
为了能够支持多个备选文件的兼容支持，可以配合source标签。
<audio src="音频的地址" controls（控件）loop（循环播放）autoplay（自动播放）>
<video src="视频的地址" controls（控件）loop（循环播放）autoplay（自动播放）>

ruby标签定义ruby注释（中文注音或字符），rt标签定义字符（中文注音或字符）的解释或发音。
bdo标签可覆盖默认的文本方向。
CSS覆盖默认的文本方向
elem{direction：rtl；unicode-bidi：bidi-override；}

link扩展
添加网站标题栏前的小图标：

加快网页访问：

HTML5新的语义化标签
header：页眉
footer：页脚
main：主体
hgroup：标题组合
nav：导航
注：header、footer、main 在一个网页中只能出现一次。

article：独立的内容
aside：辅助信息的内容
section：区域（类似div）
figure：描述图像或视频
figcaption：描述图像或视频的标题部分

标题部分

datalist：选项列表


details/summary：文档细节/文档标题

HTML

超文本标记语言

progress/meter：定义进度表/定义度量范围 time：定义日期或时间

今天是情人节，街上人很多。

mark：带有记号的文本

今天是情人节，街上人很多。

表格扩展学习
添加单线：border-collapse：collapse；
隐藏空单元：empty-cells：hide；
斜线分类：border/rotate
列分组：colgroup/col

美化表单控件
label + ：checked
position + opacity

新的input控件
email：电子邮箱输入框
url：网址输入框
number：数值输入框
range：滑动条
date/month/week：日期控件
search：搜索框
color：颜色控件
tel：电话号码输入框（在移动端会默认调起数字键盘）
time：时间控件

表单新属性
autocomplete：自动补全 默认on 关闭off
autofocus：获取焦点
required：不能为空
pattern：正则验证

method：数据传输方式
enctype：数据传输类型
name/value：数据的键值对

扩展标签
fieldset：表单内元素分组
legend：为fieldset元素定义标题

登录

用户名：
密码：

optgroup：定义选项组
苹果 香蕉 猕猴桃 黄瓜 白菜 茄子

触发BFC
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex
overflow除了visible以外的值（hidden、auto、scroll）
BFC特性及应用
解决margin叠加问题
解决margin传递问题
解决浮动问题
解决覆盖问题

IE
内核：Trident 前缀：-ms-
Firefox
内核：Gecko 前缀：-moz-
Opera
内核：Presto 前缀：-o-
Chrome
内核：Webkit 前缀：-webkit-
Safari
内核：Webkit 前缀：-webkit-
Opera、Chrome
内核：Blink

transition过渡
transition-property：规定设置过渡效果的CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-delay：定义过渡效果何时开始。
transition-function：规定速度效果的速度曲线。

transform变形
translate：位移
translateX：正值向右，负值向左
translateY：正值向下，负值向上
translateZ：（3d）
scale：缩放（值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放）
scaleX
scaleY
scaleZ（3d）
rotate：旋转（旋转的值，单位是角度deg）
rotateX（3d）
rotateY（3d）
rotateZ（和rotate是等值关系，正值按顺时针旋转，负值按逆时针旋转）
skew：斜切
skewX：单位也是角度，正值向左倾斜，负值向右倾斜
skewY

transform的注意事项：
1.变形操作不会影响到其他元素。
2.变形操作只能添加给块元素。
3.复合写法，可以同时添加多个变形操作。
执行是有顺序的，先执行后面的操作，再执行前面的操作。
transform会受到rotate、scale、skew的影响。（先变形在位移不影响位移，即先写位移在写变形）
4.transform-origin：基点的位置
x y z（3d）

animation动画
animation-name：设置动画的名字（自定义的）
animation-duration：动画的持续时间
animation-delay：动画的延迟时间
animation-iteration-count：动画的重复次数，默认值就是1，infinite无限次数
animation-timing-function：动画的运动样式
注：
1.运动结束后，默认情况下会停留在起始位置。
2.from -> 0% ， to -> 100%
animation-fill-mode：规定动画播放之前或之后，其动画效果是否可见
none（默认值）：在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
backwards：在延迟的情况下，让0%在延迟前生效
forwards：在运动结束之后，停到结束位置
both：backwards和forwards同时生效
animation-direction：属性定义是否应该轮流反向播放动画
alternate：一次正向（0%_{100%），一次反向（100%}0%）
reverse：永远都是反向，从100%~0%
normal（默认值）：永远都是正向，从0%~100%
animate.css
一款强大的预设css动画库
官网地址：http://daneden.github.io/animate.css/
基本使用：
animated：基类（基础的样式，每个动画效果都需要加）
infinite：动画的无限次数
例：

3D操作
transform：
rotateX（）：正值向上翻转
rotateY（）：正值向右翻转
translateZ（）：正值向前，负值向后
scaleZ（）：立体元素的厚度
3d写法
scale3d（）：三个值 x y z
translate3d（）：三个值 x y z
rotate3d（）：四个值0|1（x轴是否添加旋转角度）0|1（y轴是否添加旋转角度）0|1（z轴是否添加旋转角度）deg
perspective（景深）：离屏幕多远的距离去观察，值越大幅度越小。
perspective-origin：景深-基点位置，观察元素的角度。
transform-origin：center center -50px；（Z轴只能写数值，不能写单词）
transform-style：3D空间
flat（默认值2d）、preserve-3d（3d，产生一个三维空间）
backface-visibility：背景隐藏
hidden、visible（默认值）

background-size：背景图的尺寸大小
cover：覆盖
contain：包含
background-origin：背景图的填充位置
padding-box（默认）
border-box
content-box
background-clip：背景图的截切方式
padding-box
border-box（默认）
content-box
注：复合样式的时候，第一个是位置，第二个是截切

线性渐变
linear-gradient是值，需要添加到background-image属性上
.box{width: 300px;height: 300px;border: 1px solid black;background-image: linear-gradient(red,blue);}
point
.box{width: 300px;height: 300px;border: 1px solid black;background-image: linear-gradient(to right, red,blue);}
angle
.box{width: 300px;height: 300px;border: 1px solid black;background-image: linear-gradient(45deg, red,blue);}
color
percentage
.box{width: 300px;height: 300px;border: 1px solid black;background-image: linear-gradient(red 25%,blue 75%);}渐变从25%_75%，025%全红，75%~100%全蓝。
注：渐变的0度是在页面的下边，正值会按照顺时针旋转，负值按逆时针旋转。
径向渐变
radial-gradient：从中心向四周渐变
point
color
percentage
.box2{width: 300px;height: 300px;border: 1px solid black;background-image: radial-gradient(red 25%,blue 50%,yellow 75%);

font-face是CSS3中一个模块，它主要是把自己定义的web字体嵌入到你的网页中。
好处：
1.可以非常方便的改变大小和颜色。
2.放大后不会失真。
3.减少请求次数和提交加载速度。
4.简化网页布局。
5.减少设计师和前端工程师的工作量。
6.可使用计算机没有提供的字体。

自定义字体图标
https://icomoon.io/app：在线生成字体图标
text-shadow：
文字的阴影
x y blur color
注：阴影的默认颜色是跟文字样式颜色相同
注：通过逗号的方式进行分割，可以设置多阴影

box-shadow：
x y blur spread color inset 多阴影
注：盒子阴影的默认样色是黑色
注：默认就是外阴影，如果设置outset不起作用，可选的值只有inset表示内阴影

mask 遮罩
url repeat x y/w h 多遮罩
注：mask目前还没有标准化，所以需要添加浏览器前缀。
注：默认是x、y都平铺。

box-reflect
above 上
below 下
left 左
right 右
距离
遮罩|渐变
渐变：只是针对透明度的渐变，不能支持颜色的渐变。
扩展：利用scale为-1实现翻转。

blur模糊
filter：blur（）
calc计算
四则运算
注：减号左右两边需要空格隔开。

分栏布局
column-count：分栏的个数
column-width：分栏的宽度
column-gap：分栏的间距
column-rule：分栏的边线
column-span：合并分栏
注：column-width和column-count不要一起去设置。

CSS Hack分类
1.CSS属性前缀法
_ IE6
+、* IE6 IE7
\9 IE6 IE7 IE8 IE9
\0 IE8 IE9 IE10 IE11
2.选择器前缀法
*html IE6
*+html IE7
：root IE9以上及现代浏览器
3.IE条件注释法
IE
IE7
IE7以下
IE7以上
非IE7
IE10以上已经不支持注释法

IE低版本BUG
1.透明度
2.双边距
3.最小高度
4.图片边框

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

布局扩展
1.等高布局
利用margin-bottom负值与padding-bottom正值配合实现。
2.三列布局，左右固定，中间自适应
1.BFC方式
2.定位
3.浮动（双飞翼布局、圣杯布局）
margin负值
4.flex弹性

flex-direction
flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左向右。
row-reverse 显示为行。但方向和row属性值是反的
column 显示为列
column-reverse 显示为列。但方向和column属性值是反的
flex-wrap用来控制子项整体单行显示还是换行显示
nowrap 默认值，表示单行显示，不换行
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面。
flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
justify-content属性决定了主轴上子项的对齐和分布方式。
flex-start 默认值，表现为起始位置对齐。
flex-end 表现为结束位置对齐。
center 表现为居中对齐。
space-between 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly evenly是均匀、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
stretch 默认值，flex子项拉伸。
flex-start 表现为容器顶部对齐。
flex-end 表现为容器底部对齐。
center 表现为垂直居中对齐。
align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。
stretch 默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start 表现为起始位置对齐。
flex-end 表现为结束位置对齐。
center 表现为居中对齐。
space-between 表现为两端对齐。
space-around 每一行上下都享有独立不重叠的空白空间。
space-evenly 每一行元素都完全上下等分。
作用在flex子项上的CSS属性
order 可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0.
flex-grow 属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0.
flex-shrink 属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例，默认值是1.
flex-basis flex-basis定义了在分配剩余空间之前元素的默认大小。
flex flex属性是flex-grow，flex-shrink和flex-basis的缩写。
align-self align-self指控制单独某一个flex子项的垂直对齐方式。

grid布局
grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat（）语法进行简化操作。
grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属那个去。
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSSgrid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
justify-items和align-items
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
stretch 默认值，拉伸。表现为水平或垂直填充。
start 表现为容器左部或顶部对齐。
end 表现为容器右侧或底部对齐。
center 表现为水平或垂直居中对齐。
space-between 表现为两端对齐。
space-around 享有独立不重叠的空白空间。
space-evenly 平均分配空白空间。
grid-column-start 水平方向上占据的起始位置。
grid-column-end 水平方向上占据的结束位置。（span属性）
grid-row-start 垂直方向上占据的起始位置。
grid-row-end 垂直方向上占据的结束位置（span属性）
grid-column grid-column-start+grid-column-end的缩写。
grid-row grid-row-start+grid-row-end的缩写。
grid-area 表示当前网格所占有的区域，名字和位置两种表示方法。
justify-self 单个网格元素的水平对齐方式。
align-self 单个网格元素的垂直对齐方式。
place-self align-self和justify-self的缩写。
Viewport视口
在移动端viewport视口就是浏览器显示页面内容的屏幕区域。在viewport中有两种视口，分别表示为，visual1viewport（可视视口）和layout viewport（布局视口）。
visual1viewport固定大小跟屏幕大小相同，在上面，而layout viewport可改变大小，在厦下面。Layout viewport默认大小为980像素，可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewport设置成跟visual1viewport等同大小，方便进行网页制作。
通过标签进行设置，name属性指定viewport值，content属性进行视口配置。
width 设置layout viewport的宽度特定值，device-width表示设备宽。
height 设置layout viewport的高度特定值，一般不进行设置。
initial-scale 设置页面的初始缩放。
minimum-scale 设置页面的最小缩放。
maximum-scale 设置页面的最大缩放。
user-scalable 设置页面能否进行缩放。

单位：
em：是一个相对单位，1em等于当前元素或父元素的font-size值。
rem：是一个相对单位，1rem等于根元素的font-size的值。
vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%。

响应式布局
媒体类型
all 用于所有设备。
print 用于打印机和打印设备。
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备。
常见选项
媒体类型
and、not
min-width、max-width
orientation：portrait、orientation：landscape

Bootstrap
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
特色：
1.响应式布局
2.基于flex的栅格布局
3.丰富的组件和工具方法
4.常见的交互使用
官网：
https://getbootstrap.com/

Sass和Less
Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的
编码工作。
官网地址：http://lesscss.org/
VSCode插件：Easy LESS
官网地址：http://sass04-lang.com/
VSCode插件：Easy Sass

CSS新特性之shapes
shape-outside：margin-box/border-box/padding-box/content-box； 以margin/border/padding/content周围环绕
clip-path:polygon();以坐标裁出一个图形
shape-margin:文字环绕周围加边距

CSS新特性之scrollbar
CSS scrollbar用于实现自定义滚动条样式。
::-webkit-scrollbar：滚动条的高度大小
::-webkit-scrollbar-thumb：滚动条的样式
::-webkit-scrollbar-track：滚动条剩余部分的样式

CSS新特性之scrollsnap
CSS scroll snap（CSS滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。
scroll-snap-type: x mandatory
scroll-snap-align: start/center/end
可以有多个script标签，多个script标签是自上而下顺序执行
一个script标签只能专心的做一个事情

alert() 在当前页面上弹出一个警告框，警告框显示要显示的内容
document.wirte() 在当前页面上输出内容
console.log() 在控制台中输出内容

强制数据类型转换
Boolean()将其他的数据类型转换成布尔值
口诀：非0即真，非空即真。
Number()将其他的数据类型转换成数字
注：只有纯数字字符组成的字符串转数字，才能转为数字，其他都未NaN。
parseInt()
1.取整
2.将别的进制转化成十进制，必须传入字符串
parseFloat()取浮点数

每一个函数内部都有一个arguments，系统内置的。
arguments是用来存储实际传入的参数。
属性：
arguments.length 输出当前页面存储的参数个数
访问某一个数据：
arguments[下标];
【注】下标从0开始的。
【注】优先使用形参，除非特殊情况。

栈结构：
结构：从同一头进，从同一头出。
特点：先进后出。
数组的两个方法形成栈结构：
push
格式：数组.push(参数1,参数2...)
功能：给数组的末尾添加元素。
返回值：插完元素以后数组的长度。
pop()
格式：数组.pop()
参数：没有参数
返回值：取下一个元素
功能：从数组末尾取下一个元素

队列结构
结构：从末尾进，从头部出。
特点：先进先出。
push
shift()
格式：数组.shift()
参数：没有参数
功能：从数组的头部取下一个元素
返回值：取下的元素
unshift()
格式：数组.unshift(参数1,参数2...)
功能：从数组的头部取下一个元素
返回值：插完元素以后数组的长度。
concat()
1、拷贝原数组，生成新数组。
2、合并数组
格式：数组.concat(数组，数据...);
返回值：合并成的新数组。原数组不会改变。
【注】就算传入是数组，数组中元素中的元素要单独拆出来再进行合并。
slice()方法
格式：数组.slice(start,end); [start,end)
功能：可以基于当前数组获取指定区域元素，【start，en），提取出元素生成新数组。
返回值：生成的新数组，原数组不会发生任何的改变。
splice()
格式：数组.splice(start,length,数据1,数据2...)
参数：
start 开始截取的位置
length 截取的元素长度
第三个参数开始：在start位置，插入的元素。
返回值：截取下来的元素组成的数组。
增加
删除
修改（先删除，再添加）
join()
格式：数组.join(字符串)
功能：将数组中的元素，用传入的拼接符，拼接成一个字符串
返回值：拼接好的字符串。
reverse 逆序
sort:数组排序
格式：数组.sort() 默认从小到大排序，按照字符串排序。
参数：一个函数，代表要怎么去进行排序（固定用法）
严格模式：写在哪个作用域下，在哪个作用域下生效。
"use strict"
【注】尽量注意不要严格模式写在全局。
用了严格模式，会有什么变量：
1、全局变量声明时，必须加var
2、函数内重名属性
3、arguments对象不允许被动态改变
4、新增保留字：implements，interface，let，package，protected，public，static，yield。

indexOf()
格式：数组.indexOf(item, start);
参数：item 任意的数据
start 下标，可以不传入，默认是0
功能：在数组中查找第一次出现item元素下标，从start开始去查找
返回值：-1 没有查找到
>=0 查找到的元素的下标。
数组遍历
for循环
for...in
forEach（ECMA5新增）
var arr2 = [10, 20, 30, 40, 50];
arr2.forEach(function(item, index, arr){
document.write(item + "," + index + "," + arr2 + "
");
})
item当前遍历到的元素
index当前遍历到元素的下标
arr数组本身
map 映射
var arr3 = [10, 20, 30, 40, 50];
var new_arr1 = arr3.map(function(item, index, arr){
return item * 1.3;
})
alert(arr3);
alert(new_arr1);
filler()过滤
var arr4 = [10, 20, 30, 40, 50];
var new_arr2 = arr4.filter(function(item, index, arr){
return item > 20;
})
alert(arr4);
alert(new_arr2);
some 某些
【注】在数组中查找是否符合条件的元素，有返回true，没有返回false。
短线操作：只要找到符合条件的元素，后面的循环就停止了。
var arr5 = [10, 20, 30, 40, 50];
var res3 = arr5.some(function(item, index, arr){
return item > 20;
})
alert(arr5);
alert(res3);
every 每一个
【注】在数据中查找每一个元素是否有符合条件，符合返回true，不符合返回false。
短线操作：只要找到不符合条件的元素，后面的循环就停止了。
var arr6 = [10, 20, 30, 40, 50];
var res4 = arr6.every(function(item, index, arr){
return item > 20;
})
alert(arr6);
alert(res4);
reduce 归并
var arr7 = [10, 20, 30, 40, 50];
var res5 = arr7.reduce(function(prev, next, index, arr){
return prev + next;
})
alert(arr7);
alert(res5);
prev 第一次是 下标为0的元素
第二次开始 上一次遍历return的值
next 从下标1开始，当前遍历到的元素。
arr 数组本身

访问字符串中的字符
字符串.length 访问字符串中字符的个数。
访问字符串中单个字符：
字符串.charAt(下标) 【注】从0开始
字符串[下标]
【注】字符串是只读，字符串一旦被声明就没有办法被修改。
【注】在JS中，字符串既是基本数据类型，又是复合数据类型。

big() 用大号字体显示字符串
blink() 显示闪动字符串（IE下无效）
bold() 使用粗体显示字符串
fixed() 以打字机文本显示字符串
strike() 使用删除线来显示字符串
fontcolor() 使用指定颜色来显示字符串
fontsize() 使用指定尺寸来显示字符串
link() 将字符串显示为链接
sub() 把字符串显示为下标
sup() 把字符串显示为上标
document.write()中使用，用特殊的样式输出该字符串。

charCodeAt()
格式：字符串.charCodeAt(下标)
功能：访问字符串中对应下标字符的ASCII码值。
String.fromCharCode();
格式：String.fromCharCode(码值1,码值2...);
功能：将传入的ASCII码值转成对应的字符
返回值：组成的字符串
indexOf()
格式：str3.indexOf(str4,start);
参数：第一个参数，查找的字符串
start 从哪个下标开始去查找，如果不传入，默认从下标0开始查找
功能：在str3中查找str4第一次出现的位置，从start这个位置开始查找。
返回值：-1 说明没有查找到
var str3 = "abcabcabc";
var str4 = "abc";
var index1 = str3.indexOf(str4, 0);
alert(index1);
lastIndexOf()
格式：str5.lastIndexOf(str6);
功能：在str5中查找str6最后一次出现的位置
参数：第二个参数是开始查找的位置，查找的下标是从右往左数的。
返回值：-1 没有查找到
var str5 = "abcabcabc";
var str6 = "abc";
var index2 = str5.lastIndexOf(str6);
alert(index2);
search()
格式：str7.search(str8/str9);
参数：字符串/正则表达式
功能：在str7中查找str8/str9第一次出现的位置
返回值：-1 没有查找到
正则表达式
修饰符：i 忽略大小写 g 全局匹配
var str7 = "Abcabcabc";
var str8 = "abc";
var str9 = /abc/i;
var index3 = str7.search(str8);
var index4 = str7.search(str9);
alert(index3);
alert(index4);

substring
格式：字符串.substring(statr,end);
功能：将字符串中[start,end)提取这部分字符，生成一个新字符串
返回值：新生成的字符串
substr
格式：字符串.substr(statr,length);
返回值：新生成的字符串
slice（是数组）
格式：字符串.slice(start,end);
replace()
格式：supstr.replace(oldStr,newStr);
功能：用newStr将oldStr，替换掉，生成新字符串。
参数：
第一个参数传入的是字符串只能替换一次。
第一个参数 正则表达式
/xxx/ig i忽略大小 g全局匹配
返回值：替换成的新字符串。
split() 字符串分割
格式：字符串.split(分割符,length)
参数：
第一个参数，用这个分隔符对原字符串进行分割
第二个参数，控制返回的数组的元素格式，一般情况下不用。
功能：用分隔符对原字符串，进行字符串分割，将分割完毕以后的子串，放在数组中返回。
返回值：数组
注意：
1、相邻的两个分隔符，会产生空字符串 ""
2、分割符是空字符串"",直接将每一个字符，单独分割成子串，放在数组中返回
toLowerCase() 转成全小写
toUpperCase() 转成全大写
concat 字符串拼接

Math.random()
Math.max(num1,num2)
Math.min(num1,num2)
Math.abs(num)
Math.round(num) 四舍五入（成整数，只看小数后一位）
Math.ceil(num) 向上取整
Math.floor(num) 向下取整
Math.pow(x,y) x的y次方
Math.sqrt(num) 开平方
Math.sin()
Math.cos()
Math.PI = 180弧度
alert(Math.sin(30 * Math.PI / 180));

var d = new Date();
1、没有传入参数，默当前系统时间
2、传入参数
"2000-01-01"
"2000/01/01"
按照顺序，分别传入参数 年 月 日 时 分 秒 毫秒
alert(box.toDateString()); 以特定的格式显示星期几、月、日和年
alert(box.toTimeString()); 以特定的格式显示时、分、秒和地区
alert(box.toLocaleDateString()); 以特定地区格式显示星期几、月、日和年
alert(box.toLocaleTimeString()); 以特定地区格式显示时、分、秒和时区
alert(box.toUTCString()); 以特定的格式显示完整的UTC日期。
set/getDate() 从Date对象中返回一个月的某一天（1~31）
getDay() 从Date对象返回一周的某一天（0~6）
set/getMonth() 从Date对象中返回月份（0~11）
set/getFullYear() 从Date对象以四位数返回年份
set/getHours() 返回Date对象的小时（0~23）
set/getMinutes() 返回Date对象的分钟（0~59）
set/getSeconds() 返回Date对象的秒数（0~59）
set/getMilliseconds() 返回Date对象的毫秒
set/getTime() 返回1970年1月1日至今的毫秒数
getTimezoneOffset() 返回本地时间与格林威治标准时间（GMT）的分钟差

定时器
格式：var timer = setInterval(函数，毫秒数);
功能：每隔对应的毫秒数，执行一次传入的函数。
返回值：启动定时器的，系统分配的编号。
clearInterval(timer); 取消定时器

window方法 （一般情况下window可以省略）
alert()弹出警告框
confirm()弹出一个带确定和取消的提示框
返回值：如果点击确定，返回true
如果点击取消，返回false
prompt()弹出一个带输入框的提示框
参数：
第一个参数：面板上显示的内容
第二个参数：输入框里面的内容（可以不传入）
返回值：点击确认，返回输入框的内容
点击取消，返回null。
open()
第一个参数：跳转的url，打开一个新窗口，加载url
第二个参数：字符串，给打开的窗口起一个名字
第三个参数：一串特殊含义的字符串，可以控制打开窗口的属性
history 对象 window.history 掌管的是，当前窗口（注意补水浏览器）历史记录（只要加载url不一样就会产生历史记录）
属性
history.length 输出当前窗口历史记录的条数
方法
history.back()返回上一条历史记录
history.forward()前进到下一条历史记录
history.go()
参数： 0 刷新当前页面
正整数 前进n条记录
负整数 后退n条记录
location 地址栏
location.assign(url)
【注】在当前窗口跳转到这个url
location.replace(url)
【注】在当前窗口替换成新的url，不会产生历史记录
location.reload()
【注】刷新当前窗口
location.reload(true)
【注】不经过浏览器缓存强制从浏览器重载
document.getElementById(id);
node.getElementsByTagName(标签名);
功能：从node节点开始，通过标签名获取符合条件的元素节点。
返回值：伪数组/类数组
node.getElementsByClassName(class名字);
功能：通过class名字获取符合条件的元素节点。
返回值：伪数组/类数组
document.getElementsByName(name属性的值);
功能：通过name属性的值获取符合条件的元素节点。
返回值：伪数组/类数组
document.querySelector()
返回值：一个元素节点，找到符合条件的第一个元素节点。
document.querySelectorAll()
返回值：一个伪数组。
参数：字符串，CSS选择器格式字符串。
node.currentStyle["height] //IE兼容
getComputedStyle(node)["height"] //火狐、谷歌

innerHTML 获取标签间内容 会解析标签
innerText 获取标签间纯文本 不会解析标签，设置纯文本
outerHTML 从外标签开始到外标签结束

childNodes 访问当前节点下所有的子节点
firstChild 访问子节点中的首位
lastChild 访问子节点中的最后一位
nextSibling 访问当前节点兄弟节点中的下一个节点
previousSibling 访问当前节点兄弟节点中的上一个节点
【注】上述这些属性都包含文本节点
【注】下述这些方法只能获取子节点中的元素节点。
children
firstElementChild
lastElementChild
nextElementSibling
previousElementSibing
nodeType nodeName nodeValue
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
attributes 获取当前元素节点上的所有的属性节点

document.write()
【注】会覆盖页面上原有的内容。
createElement()
格式：document.createElement()
参数名：标签名
返回值：创建好的这个节点
appendChild()
格式：node1.appendChild(node2);
功能：将node2节点插入到node1节点子节点的末尾
createTextNode()
格式：document.createTextNode(文本);
功能：创建文本节点（纯文本）
insetBefore()
格式：box1.parentNode.insertBefore(box2,box1);
功能：将box2添加到box1的前面
replaceChild()
格式：box1.parentNode.replaceChild(box2,box1);
功能：用box2节点将box1节点替换掉。
cloneNode()
格式：node.cloneNode()
格式2：node.cloneNode(true); 克隆节点本身和子节点
功能：克隆出来的新节点
removeChild()
格式：box.parentNode.removeChild(box);
功能：将box节点从页面上删除

offset系列
offsetWidth width+border+padding（眼睛能看到的实际的宽）
offsetHeight width+border+padding（眼睛能看到的实际的高）
offsetLeft margin（眼睛能看到实际距离第一个有定位的父节点的距离）。
offsetTop margin（眼睛能看到实际距离第一个有定位的父节点的距离）。

事件类型的种类：
绑定事件格式：
元素节点.on + 事件类型 = 匿名函数。
一、鼠标事件（可以绑定在任意的元素节点上）
click 单击
dbclick 双击
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动（会不停的触发）
mousedown 鼠标按下
mouseup 鼠标抬起
mouseenter 鼠标移入
mouseleave 鼠标移出
【注】经过子节点会重复触发。
mouseover
mouseout
【注】经过子节点不会重复触发。IE8以后才有
mouseenter
mouseleave
二、键盘事件（表单元素，全局window）
keydown 键盘按下（如果按下不放手，会一直触发）
keyup 键盘抬起
keypress 键盘按下（只支持字符串）
三、HTML事件
1、window事件
load 当页面加载完成以后会触发
unload 当页面解构的时候触发（刷新页面，关闭当前页面） IE浏览器兼容
scroll 页面滚动
resize 窗口大小发生变化的时候触发
2、表单事件
blur 失去焦点
focus 获取焦点
select 当我们输入框内选中文本的时候触发
change 当我们输入框的文本进行修改并且失去焦点的时候
【注】必须添加在form元素上
submit 当我们点击submit上的按钮才能触发
reset 当我们点击reset上的按钮才能触发
事件对象获取 window.event
事件对象：
button的属性
0 左键
1 滚轮
2 右键
获取当前鼠标位置：（原点位置不一样）
clientX clientY 原点位置：可视窗口的左上角为原点
pageX pageY 原点位置：整个页面的左上角（包含滚出去的滚动距离）
screenX screenY 原点位置：电脑屏幕的左上角
事件对象的属性：
shiftKey 按下shift键，为true，默认为false
altKey
ctrlKey
metaKey window系统 按下windows（开始）键，为true
macos系统 按下command键，为true
keyCode 键码
which
返回值：键码返回的是大写字母的ASCII码值。不区分大小写。
格式：var which = e.which || e.keyCode
【注】只在keydown下支持
charCode 字符码
which
返回值：字符串码区分大小写，返回当前按下键对应字符的ASCII码值。
格式：var which = e.which || e.charCode
【注】只在keypress下支持，只支持字符键
target 目标对象/触发对象 事件对象的属性
【注】这个事件是由谁而起的。
IE8以下不兼容 window.event.scrElement;
浏览器上事件天生的一个特点：事件流
事件冒泡：由里向外逐级触发。
事件捕获：由外向里逐级触发。
阻止事件冒泡：浏览器兼容问题
事件对象的属性和方法：
cancelBubble=true stopPropagation()
阻止默认行为
document.oncontextmenu = function(){
return false;
}
阻止超链接的默认行为：
1.简陋的阻止a链接默认行为的方式
缺点：运行到了return，后续的内容我们就执行不到了。
2.规范的方法
function preDef(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
事件委托实现步骤：
1.找到当前节点的父节点或者祖先节点
2.将事件添加到你找到的这个父节点或者祖先节点上
3.找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作
事件监听器（低版本IE浏览器不兼容）
addEvwntListener()
格式：node.addEventListener()
参数：第一个参数 事件类型
第二个参数 绑定函数
第三个参数 布尔值 true 事件捕获
false 事件冒泡 默认
removeEventListener
格式：node.removeEventListener
参数：第一个参数 事件类型
第二个参数 删除函数名字
事件监听器的兼容
function addEvent(node, evenType, funcName){
if(node.addEventListener){
node.addEventListener(evenType, funcName, false);
}else{
node.attachEvent("on" + evenType);
}
}
function removeEvent(node, evenTpye, funcName){
if(node.removeEventListener){
node.removeEventListener(evenTpye, funcName);
}else{
node.datachEvent("on" + evenTpye, funcName);
}
}
通过new去声明正则表达式
第一个参数：正则表达式的主体 字符串
第二个参数：修饰符
var str1 = new RegExp("hello", "ig");
省略new运算符声明正则表达式
第一个参数：正则表达式的主体 字符串
第二个参数：修饰符
var str2 = RegExp("hello", "ig");
通过常量赋值
var str3 = /hello/ig;
正则表达式对象只有两个方法
test
格式：正则.test（字符串）
功能：在字符串中匹配这个正则是否存在
返回值：如果匹配成功返回true，匹配失败返回false。
exec
格式：正则.exec（字符串）
功能：在字符串中匹配这个正则是否存在
返回值：返回匹配到的串，匹配成功，返回一个装有字符串的数组
匹配失败，返回null
字符串的函数
match()
格式：字符串.match(正则)
功能：在字符串匹配是否有符合正则表达式
返回值：匹配成功，返回装有匹配到子串的数组
匹配失败，返回null
replace()
格式：字符串.replace(oldstr/正则,newstr);
功能：用newstr将oldstr替换
返回值：替换成功的新字符串
split()
格式：字符串.split(分隔符/正则);
功能：用分割符将原字符串进行分割
返回值：分割剩下的子串组成的数组。
search()
格式：字符串.search(子串/正则)
功能：找到符合条件的子串第一次出现的位置
返回值：
如果找到，返回>=0的下标
否则，返回-1
本地存储技术
localStorage（IE8以下不兼容）
1.永久存储
2.最大可以存储5M 客户端的一个微型数据库
3.只能存储string
cookie
1.可以设置过期时间
2.最大可以存4KB
3.每一个域名下面最多可以存储50条数据
sessionStorage（结合后台使用）
localStorage
setItem(name,value)
getItem(name)
removeItem(name)
call
格式：函数名.call()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：将原函数的参数往后顺延一位。
apply
格式：函数名.apply()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组 数组，放入我们原有所有的参数
bind 预设this指向
let 关键字是用来声明变量 更过分，只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在作用域叫做块级作用域。
var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理。
const 声明变量 变量值只能在声明的时候确定，后续是没有办法修改的。
【注】const声明常量（变量没有办法改）
箭头函数需要注意的部分
1、箭头函数，不能用new
2、箭头，如果返回值是一个对象，一定要加();
3、箭头函数中的this，指向的是上一层函数的主人。
使用解构的好处：
1、交换两个数
2、函数可以返回多个值
3、函数定义参数，和传入参数的顺序改变
【注】参数检验带默认值
4、快速取出数组中的某一个元素。
传统字符串：所有单引号，双引号括起来的都叫字符串。
ECMA6字符串：反引号 ``
1、ECMA6字符串，想怎么写怎么写，换行，代码缩进，都能在字符串中体现出来
2、${变量/表达式/函数调用}
Array.from() 将伪数组转成真数组
find()
功能：在数组查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历；
返回值：找到的元素。
findIndex()
返回值：找到元素的下标。
arr.copyWithin
第一个参数：从哪个下标开始
第二个参数和第三个参数：范围[start,end)
Object.assign 合并对象
【注】将所有传入的对象，都合并到第一个对象中。
浅拷贝：只拷贝地址
深拷贝：将复合数据类型重新生成一份，进行拷贝