html
1.实体
  --空格
> -- 大于号
< -- 小于号
© --版权
<boby>
<p>我 </p>
<p>>b<</p>
</boby>
2. 语义化标签
<blockquote>: 表示一个长引用，会显示缩进的效果
<hgroup>:用来给标题分组，可以将相关的标题同时放入到这个标签中
<em>：表示语音语调加重，会显示斜体的效果
<strong> :表示强调的重要内容，会显示加粗的效果
<q>: 表示一个短引用，他是一个行内元素
<header></header> 表示网页的头部
<main></main> : 表示网页的主体部分
<footer>: 表示网页的底部
<nav>: 表示网页的导航
<aside>: 和主体相关的其他内容，侧边栏
<article>: 表示一个独立的文章
<section>: 表示一个独立的区块,以上标签都不能表示时使用section
<div>: 没有任何意义，就用来表示一个区块，主要用div来布局元素
<span>： 行内元素没有任何意义，一般用来在网页中选中文字
3. 列表
-
无序列表 ：使用ul来创建无序列表，使用li来创建列表项
-
有序列表: 使用ol来创建有序列表，使用li来创建列表项
-
定义列表：使用dl来创建定义列表，使用dt来表示定义内容，使用dd来对内容进行说明
列表之间可以相互嵌套
4. 超链接
__self默认值：在当前页面打开超链接
__blank:在一个新的页面打开超链接
#:在href中填入#号可以作为超链接的占位符使用,填入javascript:;也可以作为占位符使用
id:标签中添加id属性表示唯一值
5. 图片及内联框架
引入图片 alt图片加载失败显示文字
file:///Applications/Typora.app/Contents/Resources/TypeMark/index.html
6. 音视频播放
<audio>
对不起您的浏览器不支持播放视频，请升级浏览器
<source src= './audio.mp3' ></source>
<source src= './audio.ogg'></source>
<embed src = './audo.mp3'><embed>
</audio>
file:///Applications/Typora.app/Contents/Resources/TypeMark/index.html
table 表示创建整个一个表格
tr 表示表格中的一行 给tr增加colspan横向的合并单元格
td 表示表格中的一列，也可以说表示表格中的一个单元格 td增加rowpan纵向的合并单元格
可以将一个表格分成三个部分
头部 thead
主体 tbody
底部 tfoot
th 表示头部的单元格
border-spacing: 指定边框之间的距离
border-collapse: 设置边框的合并，用来处理表格中的边框双边框现象
默认情况下元素在td中是垂直居中的可以通过 vertical-align:middle；
如果表格中没有使用tbody而是直接使用tr
那么浏览器会自动创建一个tbody，并把所有的tr放在里面
tr不是tablede 子元素
第二种方法 创建俩个盒子其中子元素盒子垂直居中父元素
.box1{
width:200px;
hight:200px;
background-color:red
/*将元素设置为表格*/
display:table-cell;
vertical-align:middle；
}
.box2{
width:70px;
hight:70px;
margin:0 auto
}
8. 表单
form 创建一个表单
属性 action 表单要提交的服务器地址
必须指定一个name属性
1.文本框
文本框属性
autocomplete="off" 关闭自动补全
readonly 将表单设置为只读
disabled 将表单设置为禁用，数据不会提交
autofocus 设置表单项自动获取焦点
密码框
必须指定一个value属性，value属性最总会作为用户的填写值 checked可以将单选按钮设置为默认选择点
-
单选按钮
-
多选按钮
-
下拉列表
选项一 选项二
-
提交按钮
-
重置按钮
css
1.css编写位置
外部样式表
2. 复合选择器
1.交集选择器: 选中同时符合多个条件的元素
div .red{
font-size:30px;
}
- 选择器分组(并集选择器):同时选中多个选择器对应的元素
#b1,.p1,h1
p,span{
font-size:30px
}
3. 关系选择器
-
子类选择器(后代元素选择器)
作用：选中指定的父元素的子元素
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素，其中B元素是A元素的第一代。
-
兄弟选择器
选择下一个兄弟
+（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。
选择下面所有兄弟
~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。
4.属性选择器
1.[属性名]： 选择含有指定属性的元素
2.[属性名=属性值]： 选择含有指定的属性名及属性值的元素
3.[属性名^=属性值]： 选择属性值以指定值开头的元素
4.[属性值$=属性值]: 选择属性值以指定值结尾的元素
5.[属性值*=属性值]: 选择属性值包含某值得元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器练习</title>
<style>
p[title]{
color: #FF0000;
}
p[title="abcdef"]{
color: #000;
}
p[title^="abc"]{
font-size: 12px;
}
</style>
</head>
<body>
<p title="abcdef">你好</p>
<p title="abcdef">你好</p>
<p title="abddef">你好</p>
<p title="absdef">你好</p>
<p title="abcdef">你好</p>
<p title="abcdef">你好</p>
</body>
</html>
5. 伪类选择器
伪类(不存在的类，特殊的类)
伪类用来描述一个元素的特殊状态
比如:第一个元素,被点击的元素、鼠标移入的元素
伪类元素一般使用：开头
:first-child :第一个子元素
:last-child ：最后一个子元素
:nth-child（）:选中第n个子元素
特殊值:
n第n个子元素
2n 或even 表示选中偶数位的元素
2n+1 或 odd 表示选中基数位的元素
--根据所有的子元素进行排序
：first-of-type：
：last-of-type
: nth-of-type()
--根据同类子元素进行排序
：not() 否定伪类
-- 将符合条件的伪类从选择器去除
ul>li:not(nth-child(3)){
color：#fffff 除了第三个剩下的都是这个颜色
}
6. 超链接的伪类
- link 用来表示没访问过的链接
- Visited 用来表示访问过的链接 ，visited这个伪类只能修改链接的颜色
- hover 用来表示鼠标移入的状态
- active 用来表示鼠标点击
7.伪元素
伪元素:表示页面中一些特殊的并不真实存在的元素(特殊位置)
伪元素使用::开头
:: first-letter 表示第一个字母
:: first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始
::after 元素的结尾
before 和after 必须结合content属性来使用
div ::before{
content:"加入";
color:#ffffff
}
8.通配选择器
*{
color：#fffff 所有元素添加这个颜色
}
9.继承样式及选择器的优先级
继承: 如果在嵌套样式中子元素会继承父元素中的样式
样式的冲突: 当选择不同的选择器，选中相同的元素，并且为相同的样式设置不同的值,此时就发生冲突
-
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 ：没有优先级
比较优先级是需要将所有的选择器相加计算，最后优先级越高，则越优先显示
如果优先级相同则优先使用下面的样式
可以在某个样式中添加!important ：则此时该样式会获取到最高优先级
10.em和rem及
em 相对于元素的字体大小来计算的 1em = 1font-size
rem 相对于根元素的字体大小来计算的
11. rgba和hsl值
rgba 需要传入四个值最后的值表示透明度 1.表示完全不透明 0 表示完全透明 .5表示半透明
Hsl 值
H 色相（0- 360）
S 饱和度，颜色的浓度 0% - 100%
L 亮度，颜色的亮度 0%-100%
12 盒子模型
12.1 盒子的边框
1. solid 实线
1. dotted 点状实线
1. dashed 虚线
1. double 双线
border-spacing: 指定边框之间的距离
border-collapse: 设置边框的合并，用来处理表格中的边框双边框现象
12.2 水平方向布局
元素在水平方向布局：
元素在其父元素中水平方向的位置是由以下几个元素共同决定的
margin-left
margin-right
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中,水平布局需要满足以下的等式
margin-left+border-left+padding-left+width+padding-right+bordet-left+margin-left = 其父元素指定的宽度
以上等式必须满足，如果相加结果等式不成立，则称为过渡约束，则等式会自动调整
调整情况：
如果这七个值中没有auto的情况则浏览器会自动调整margin-right值使等式满足,这七个值，有三个值中设置为auto
width
margin-left
margin-right
如果某个值为auto，则会自动调整为auto的那个值使其成立
0+0+0+0+0+0+0+0+auto = 800 auto = 800
width:400 margin:0 auto 0是上下设置为0，左右设置auto
12.3 垂直方向的布局
如果子元素的宽度或者高度超出了父元素宽高度则会照成元素溢出现象
处理溢出的元素overflow：visible 默认值 子元素会从父元素中溢出
hidden 溢出内容会被截取而不会不显示
scrool 溢出内容会形成一个滚动条
auto 根据需要设置滚动条
12.4 行内元素盒子模型
display 用来设置元素显示的类型
inline 将元素设置行内元素 span
block 将元素设置为块元素 div
line-block 将元素设置为行内块元素，既可以设置宽高度，又不会独占一行
table 将元素设置为一个表格
table-cell 将元素设置为单元格td
none 将设置的元素直接隐藏起来
visibility 用来设置元素的显示状态
visible 默认值 元素在页面中正常显示
hidden 元素在页面中隐藏起来，但是宽高及要占据
12.4 盒子的大小
box-sizing: 用来设置盒子尺寸的计算方式(设置width和height的作用),一般用于盒子撑大使用
可选值：content-box 默认值，宽度和高度用来设置内容区的大小
bordet-box 设置设置可见框的大小，如果加上边框和paddding盒子不会被撑大，而盒子原来的宽高会减小，保持盒子始终那么大
12.5 轮廓及阴影
outline: 设置盒子的轮廓跟border用法一样，跟border的区别是不会撑开其他元素，一般用于设置鼠标移入或者点击时使用
box-shadow ：10px 10px 10px #fffff
第一个值水平偏移量 正值是向右偏移反之向左偏移
第二个值垂直偏移量 正值是向下偏移反之向上偏移
第三个值 阴影模糊半径
第四个值 颜色
12.6 浮动
float 三个属性 none left right
注意：元素浮动时会完全脱离文档流，不占用文档流的位置
特点：1. 浮动元素不会盖住文字，文字会自动环绕的浮动元素周围，利用浮动可以设置文字环绕效果
-
脱离文档流的特点
块元素不会独占一行
脱离文档流以后，块元素可以被宽高撑开
-
开启BFC 解决浮动产生的塌陷问题
BFC 块级格式化环境
BFC 是一个CSS的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的区域
开启BFC后的特点
- 开启BFC的元素不会被浮动元素所覆盖
- 开启BFC的元素子元素的外边距和内边距不会被重叠
- 开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式开启BFC
为元素设置overflow:hidden 解决塌陷问题
12.7 clear清除浮动
如果不希望某个元素因为其他元素浮动二改变位置可以通过clear属性来清除浮动元素对当前元素的影响
Clear: 属性
left 清除左浮动
right 清除右浮动
both 清除俩侧中最大影响的那一侧
重点的重点
同时解决高度塌陷和外边距重叠的问题，当遇到直接问题直接使用这个
.clearfix::after{
content:"";
display: table;
clear: both;
}
12.8 定位
position: absolute; 绝对定位
relative; 相对定位
sticky; 粘滞定位
设置盒子水平和竖直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中</title>
<style>
.box1{
background-color: #f53939;
width: 200px;
height: 200px;
position: relative;
}
.box2{
background-color: #000;
width:100px;
height: 100px;
margin:auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
vscode快速创建三个带类的盒子 .box3$*
对于开启定位的元素可以通过z-index属性来指定元素的层级
z-index需要一个整数作为参数，值越大元素的层级越高
元素的层级越高就会优先显示
13. 字体
13.1 字体族
字体相关的样式
color:字体的颜色
font-size:字体的大小
font-family: 字体的格式
font-weight: bolod 字体加粗
font-sytle:italic 设置字体的斜体
font-face可以将服务器中的字体直接提供给用户去使用
@font-face{
/*指定字体的名字*/
font-family:"myfont"
/ 服务器中字体的路径/
src:url("")
}
13.2 图标字体
在网页中需要经常使用到一些图标，可以通过图片来引入
但是图片太大，非常不灵活
所以在使用图标时使用图标字体
fontawesome 使用步骤
-
将css文件和webfonts文件移动到项目中
2. 将all.css使用link标签来引入到网页中 3. 直接通过类名来使用图标字体 class="fas fa-bell" 或者class="fab fa-bell"
第二种用法通过伪元素来设置字体
1. 找到要设置图标的元素通过after或者before选中
1. 在content中设置字体编码
1. 设置字体样式
第三种通过实体来使用图标字体
&#x图标的编码
13.3 文字的水平对齐及垂直对齐
-
水平对齐
text-align： left 左对齐
right右对齐
center 居中对齐
justify 俩端对齐
-
垂直对齐
vertical-align: baseline 默认值 基线对齐
top 顶端对齐
bottom 底端对齐
middle 居中对齐
注意：使用vertical-align:top或者bottom可以解决一个盒子套图片底部出现缝隙的情况
13.4 其他的文本样式
1.text-decortion 设置文本的修饰
可选值:
none 什么都没有
underline 下划线
line-through 删除线 一般用于电商价格比对
overline 上划线
-
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白
- text-overflow:ellipsis 超出的文字用省略号代替
设计多行文字隐藏...
div{
white-space：nowrap;
width:200px;
overflow:hidden;
text-overflow:ellipsis
}
14. 背景
14.1 背景图片
- background-image:url 设置背景图片
2.设置背景图片的重复方式
background-repeat:
可选值：
repeat 默认值，图片向x轴y轴重复排列
repeat-x 图片向x轴重复排列
repeat-y 图片向y轴重复排列
no-repeat 图片不重复
-
用来设置背景图片的位置
background-position:
可选值：
通过top right bottom left 四个方位值指定背景图片的方向，且必须指定俩个值
可以把他看成一个九宫格
通过偏移量来指定位置：x,y
background-position:100px 200px;
-
设置背景图片的范围
background-clip
可选值：
border-box 默认值 背景图片会出现在边框的下边
padding-box 背景图片不会出现在边框，只会出现在内边距的下边
centent-box 背景图片只会出现在内容区
background-origin
可选值：
padding-box 默认值 背景图片偏移量来计算的原点
content-box 背景图片的偏移量是通过内容区来计算原点
border-box 背景图片的偏移量是通过从边框处来计算原点
-
设置图片的大小
background-size
可选值：
第一个值表示宽度第二个值表示高度
如果只写一个默认第二个值是auto
cover 图片的比例不变，将元素铺满
contain 图片的比例不变，将元素在元素中完整显示
-
背景图片是否跟随元素移动
backround-attachment
可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
-
注意
background 背景相关的简写属性，background-size必须写在background-posititon的后边，并且使用/隔开
origin要在clip的前边
14.2 雪碧图
解决图片闪烁问题：
可以将多个小图片合成一张大图片，这样图片会同时加载到网页中通过background-postion修改坐标值，就可以有效避免图片闪烁问题
雪碧图的使用步骤：
1. 先确定使用的图标
2. 测量图标的大小
3. 根据测量结果创建一个元素
4. 将雪碧图设置为背景图片
5. 设置一个偏移量以显示正常的图片
14.3 线性渐变
颜色沿着一条直线垂直变化
Background-image:linear-gradient()
linear-gradient(red 10px,yellow 20px)红色在前面黄色在后面中间是过渡区域
可以给渐变制定一个方向
to left
to right
to top
deg deg表示度数
turn 表示圈
渐变可以同时指定多种颜色，可以手动指定渐变的分布情况
repeating-linear-gradient() 可以平铺渐变
14.4 径向渐变
放射性效果
默认情况下径向渐变的形状是根据元素的形状来计算的
正方形 ==== 圆形
长方形 ==== 椭圆形
radial-gradient(大小 at 位置，颜色 位置)
大小
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
15 过渡
通过过渡可以指定一个属性发生变化的方式
- transitiion-property: 指定要执行过渡的属性
多个属性要使用，隔开 hight,width
若果所有属性都需要过渡，则使用all关键字
transitiion-property:all
-
transitiion-duration: 指定过渡效果的持续事件或者毫秒
-
transittion-timing-function:过渡时时序函数
可选值
ease 默认值，慢速开始，先加速，在减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速在减速
cubic-bezier() 用来指定时序函数
steps() 分布执行过渡效果
可以设置二个值 第一个值分布轴进行1，2，3，第二个值end或者start
end:在时间结束时执行过渡
start:在时间开始时执行过渡
- transittion-delay 过渡的延时
16 动画
动画和过渡类似，不同的是过渡必须某个属性发生变化时才会触发
设置动画时必须指定关键帧
@keyframes test {
/* from表示动画开始的位置 也可以使用 0%*/
form{
margin-left：0；
}
/* to 动画结束的位置 也可以使用100%*/
to{
margin-left:700px;
}
}
-
对当前元素生效关键帧的名字
animation-name:test
-
动画执行的时间
animation-duration:4s
-
动画的延时
Animation-delay：2s
-
动画执行的次数
animation-iteration-count: infinite 无限执行
-
指定动画运行的方向
animation-direction
可选值：
normal:从from向to走
rebverse 从to向 from运行
alternate :从from向to走 重复执行时反向执行
alternate-reverse; 从to向from走 重复执行时反向执行
-
设置动画执行的状态
animation-play-state
可选值：
running 默认值 动画执行
paused 动画暂停
-
动画的填充方式
animation-fill-mode
可选值：
none 默认值 动画执行完毕元素惠东原来的位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画执行完毕元素会停止在动画结束的位置
both 结合forwards和 backwards
-
变形
- 变形就是指通过css来改变元素的形状和位置
变形不会影响到其他布局
transfrom 用来设置元素的变形效果
平移：
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着y轴方向平移
设置盒子鼠标移入效果
设置z轴平移
就像是人的眼睛与元素的距离
距离越大元素就离人越近
/*设置当前网页的视距人与网页的距离*/
html{
perspecitive:800px
}
-
旋转
transform:
可选值
通过旋转可以使元素沿着xyz转指定的角度
rotateX()
rotateY()
rotateZ()
是否显示元素的背面
Backface-visibility:hidden;
-
缩放
scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scale 垂直水平方向缩放
17 弹性盒子 --flexbox布局
-
将元素设置为弹性容器
display:flex 就立刻付；da8u7uuuu/÷÷÷÷÷÷÷÷7666666666666666666
-
指定容器中弹性元素的排列方式
flex-direction:
可选值：
row 默认值，弹性元素在容器中水平排列（左向右）
row-reverse 弹性元素在容器中反方向水平排列（左到右）
column 弹性元素纵向排列（自上向下）
column 弹性元素纵向排列（自下向上）
-
指定元素的伸展的系数
flex-grow ：2
当父元素有多余的空间时，会按照比例进行分配
-
指定弹性元素的收缩系数
flex-shrink：1
当元素的空间中不足以容纳所有的元素时，如和对子元素进行收缩
-
决定元素的排列顺序
order：1
17.1 弹性容器上的样式
-
设置弹性元素是否在弹性容器中自动换行
flex-wrap:
可选值：
nowrap 默认值，元素不会自动换行
wrap 元素沿着辅轴方向自动换行
wrap-reverse 元素沿着辅轴反方向换行
-
如何分配主轴上的空白空间(主轴元素如何排列)
justify-content:center
可选值：
flex-start 元素沿着主轴起边排列
flex-end 元素沿着主轴终边排列
center 元素居中排列
space-around 空白分布到元素俩测
space-between 空白均匀分布到元素间 移动端经常会用到
space-evenly 空白飞分布到元素的单侧
-
元素在辅轴上如何对齐
align-items：
可选值：
stretch 默认值，将元素的长度设置为相同的值
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
baseline 基线对齐
-
辅轴空白的分布
align-content:
flex-start 元素沿着辅轴起边排列
flex-end 元素沿着辅轴终边排列
center 元素居中排列
space-around 空白分布到元素俩测
设置视口大小
device-width设置设备的宽度(完美视口)
css小技巧
filter:blur(4rpx) 元素背景颜色变虚
Less
less是一个css预处理语言，解决css的一些缺陷
开启less可以嵌套类使用，很明确看出来父类中的子类
1. less中的变量
使用变量用@变量名
作为类名,或者一部分时使用时必须以@{变量名}
Sass
sass 是一个css预处理语言功能比less更强
1. 把sass编译成css
$ sass sass/style.scss:css/style.css
2. 设置sass为自动编译
$ sass --watch sass:css
3. 编译输出sass有四种格式
nested,嵌套
Compact,紧凑
expanded，扩展
compressed,压缩
$sass --watch sass:css --style 输入输出的格式
4. 定义变量
// sass编写
$primary-color:#fff;
$primary-border-color:1px solid $primary-color;
div .box{
background-color:$primary-color;
}
.box1{
border: $primary-border-color;
}
//css 生成
$primary-color:#fff;
$primary-border-color:1px solid $primary-color;
div .box{
background-color:$primary-color;
}
5.被嵌套时调用父选择器
使用&符号引用父选择器
// sass编写
.box1{
border: $primary-border-color;
ul{
clear: both;
}
li{
margin-left:20px;
&:hover{
background-color:aqua;
}
}
& &-text{
clear: both;
}
}
//css生成
div .box {
background-color: #fff;
}
.box1 {
border: 1px solid #fff;
}
.box1 ul {
clear: both;
}
.box1 li {
margin-left: 20px;
}
.box1 li:hover {
background-color: aqua;
}
.box1 .box1-text {
clear: both;
}
6. 嵌套属性
在css中经常会出现很多重复的属性，可以使用scss处理
属性类{
属性名：属性值
}
// sass编写
.box2{
font: {
weight: bold;
size:30px;
family: "Helvetica Neue",
};
}
.box4{
border: 1px solid #fff{
left:20px;
right: 30px;
radius: 10px;
};
//css生成
.box2 {
font-weight: bold;
font-size: 30px;
font-family: "Helvetica Neue";
}
.box4 {
border: 1px solid #fff;
border-left: 20px;
border-right: 30px;
border-radius: 10px;
}
-
mixin函数 （类似于javascript函数）
语法 @mixin 函数名(属性值，属性值){属性：属性值}
调用使用@include
//sass编写
@mixin after($text-color,$text-backcolor){
color: $text-color;
background-color:$text-backcolor;
a{
颜色加深函数darken
color: darken($text-color,10%);
}
}
box5{
@include after(#000,#ffffff);
}
//css生成
box5 {
color: #000;
background-color: #000;
}
box5 a {
color:#000l
}
7. 继承扩展
@extend 继承元素的样式
// sacss 编写
.box7{
font-weight: 20px;
}
.alert{
@extend .box7;
background-color: #fff;
}
// 生成css
.box7, .alert {
font-weight: 20px;
}
.alert {
background-color: #fff;
}
8. Partials及@import
如果写多个.scass文件会占用大量的内存，照成性能上的消耗，Partials是把scass文件拆分成一个个小的部分文件是文件名.scass, 最后使用@import导入进来
- 强制注释内容 /*! */
9. 判断数据的类型
type-of(hello) string
type-of(1px) number
数字函数
percentage(600px /10px) 转换成百分比
字符串函数
$primeycolor:hello
to-upper-case($primeycolor) 将变量转换为大写
to-lower-case($primeycolor) 将变量设置为小写
str-length($primeycolor) 计算变量的长度
str-index($primeycolor,"h") 索引的位置
str-insert($primeycolor,"MY",6) 添加新的字符串
颜色函数
$base-color:hsl(0,100%,50%) 色相，饱和度，亮度
adjust-hue($变量 调节的变量 137) 调节颜色的色相
saturate 设置加深颜色的饱和度
desaturate 设置减小颜色额饱和度
lighten 可以让颜色更亮
darken 可以让颜色更暗
opacify 增加颜色不透明度
transparentize 减小颜色不透明度
列表函数
Map函数
10. interpolation 回值表达式
#{属性名}
$attor:a;
$borer:border;
.alert-#{$attor}{
@extend .box7;
background-color: #fff;
#{$borer}-left:0px;
}
.alert-a {
background-color: #fff;
border-left: 0px;
}
11.流程控制及用户自定义函数及警告和错误
@if 条件{}
@for $var from <开始值> through <结束值>{
}
数组遍历@each $var in $list{}
while 循环
$number:6;
@while $nuber>0{
.item-#{$number}{
width:$number * $4rpx
}
number:number -2
}
用户自定义函数
@function 名称(参数1，参数2){
@return 返回值}
@error 打印错误信息
$number:4;
@for $i from 1 through $number{
col-#{$i}{
width:100%/$i * $number
}
}
col-1 {
width: 400%;
}
col-2 {
width: 200%;
}
col-3 {
width: 133.3333333333%;
}
col-4 {
width: 100%;
}
JS基础
了解最基础的字面量及变量
1.字面量和变量
1.1 字面量是一些不可改变的量
比如1234
1.2 变量 变量可以用来保存字面量
在js中使用var关键字来声明一个变量
var age = 13
2. 标识符
在js中所有自主命名都可以叫做标识符
例如：函数名、变量名、属性名都属于表示符
命名一个标识符时需要遵守如下规则：
2.1 标识符可以含有字母、数字、
2.2 标识符不能以数字开头
2.3 标识符不能是ES中的关键字或保留字
2.4 表示符一般使用驼峰命名法
var helloWorld = 123;
console.log(helloWorld）
数据类型的学习
1.数据类型
数据类型指的就是字面量的类型
在js中有六种数据类型
String ---- 字符串
Number --- 数值
Boloean --- 布尔值
Null ---- 空值
Undefind ---- 未定义的
Object ---- 对象
其中String Number Boolean Null Undefind属于基本数据类型
而Object属于引用数据类型
1.1 String字符串
在js中字符串需要使用单引号或者双引号括起来
var str = "今天要做一个快乐的男孩子"
console.log(str)
var str = "你好：'我是你爸爸'"
var str = "你说："我喜欢你""
1.2 转义字符
在js中可以用\做转义字符
当表示一些特殊字符时可以使用
\ "表示"
\ '表示'123456yttyjhmmmghn, v
\n 换行符
\t 制表符
\ 表示一个斜杠
对象及函数的学习
1 对象
对象的概念：对象属于一种复合的数据类型，在对象中可以保存对个不同的数据类型属性
1.1 对象的分类
1.1.1 内建对象
-- 由ES标准中定义的对象，在任何的ES的实现中都可以使用
-- 比如：Math String Number Boolean function Object
1.1.2 宿主对象
-- 由JS的运行环境提供的对象，目前来讲是由浏览器提供的对象
-- 比如Dom Bom
1.1.3 自定义对象
-- 由开发人员自己创建的对象
1.2 创建对象
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来穿件对象的函数
使用typeof检查对象时，会返回object
var obj = new Object();
console.log(obj)
console.log(tyeof obj)
1.3 在对象中添加属性及读取属性
在对象中保存的称为属性
向对象中添加属性
如果读取对象中没有的属性，不会报错而是会返回undefined
属性名：
对象的属性名不强制要求遵守标识符的规范
如果要使用特殊的属性名，不能采用.的方式来操作
需要使用另一种的方式：
语法： 对象['属性名'] = 属性值
语法： 对象.属性 = 属性值
Js 中判断属性是否在对象中 in
语法 "属性值" in 对象
js对象的属性值。可以是任意的数据类型，甚至也可以是一个对象
var obj2 = new object();
obj2.gender = '女'
obj.text = obj2
console.log('gender' in obj2)
obj.name = '张腾飞'
console.log(obj.name)
obj["1231243241"] = "张腾飞"
console.log(obj["1231243241"])
1.4 在对象中删除属性
语法：
delete 对象.属性
delete obj.name
1.5 在对象中修改属性
语法：对象.属性 = 属性值
obj.name = '王飞'
1.6 基本数据类型及引用数据类型
基本数据类型比较的是俩个变量的值，只要他们的值相等返回的结果一定为true,他们在栈内存的变量值是一样的，及值相等
var a = 1;
var b = 1;
console.log(a == b) 返回结果一定为true
应用数据类型比较的是俩个值及对象所指向的内存单元的地址，值一样但是内容单元的地址不同，相当于在堆内存中开辟了俩个不一样的内存地址，及他们比较的结果为false
var obj1 = new Object()
var obj2 = new Object()
obj1.name = "胡荣妹妹"
obj2.name = "胡荣妹妹"
console.log(obj1 == obj2) 返回结果一定为false
1.7 对象字面量
创建对象还有一种简便写法
语法: var 对象 = {属性名:属性值}
多个属性之间使用,号隔开,最后一个属性不用使用,奇怪的属性名用双引号
var abc = {name:"胡荣妹妹",
age: 22,
gender: "女"，
nav:{
name:"张腾飞"
}
}
2 函数的学习
2.1 函数的简介
函数也是一个对象，函数就是将一些代码功能块封装起来随时调用功能代码块
函数的3种写法
语法1：var 属性名 = new Function() ----一般不建议使用
var obj = new Function("console.log(“好好学习js”)")
语法2: function num([参数1，参数2，参数3]){ 代码语句} -----[ ]代表可不必要传入参数
function num(){
console.log(“你是傻狗吗”)
};
num();
语法3: var 属性名 = function(){[参数1，参数2，参数3]} {代码语句}
var kail = function(){
console.log(“你是傻狗吗”);
console.log(“你是傻狗吗”);
console.log(“你是傻狗吗”)
};
kail()
2.2 函数的参数
- 函数可以携带多个参数
- 函数不论定义多少个参数，只要返回参数定义几个函数就计算几个参数的值
- 函数的参数可以是多种类型的
- 实参可以是对象，也可以是函数
2.3 函数的返回值
-
函数用return设置返回值
-
返回值可以是多种类型的
function sum(a,b,c){ var d = a+b+c; return d } var result = sum(22,23,44,"and") alert(result) --result就是函数的执行结果，函数返回什么执行结果就是什么
使用break可以退出当前循环
使用continue用于跳过当前循环
使用return可以结束整个函数
2.4 立即执行函数
-
立即执行函数往往只会执行一次
语法：（function(){函数语句})( )
(function(){ console.log("我是一个立即执行函数") })() (function(a,b){ return a+b })(123,456) --括号里面可以加返回参数
2.5 函数的方法及枚举
函数也可以称为对象的属性
如果一个函数作为对象的属性保存，那么我们当我们调用这个对象中的属性时，实际上调用了属性中的函数，称为方法
调用函数就说调用对象的方法（methed）
枚举：当我们不知道这个对象的的属性是什么，可以使用枚举来查看对象中的属性
语法：for (var 变量 in 对象){
}
for... in语句中有几个对象，循环体就会执行几次
var obj = {
name: '张腾飞',
age: 25,
gender: '男'
}
for(var n in obj) {
console.log(obj[n])
}
2.6 函数的作用域
作用域是指一个变量的作用范围
-
全局作用域：
1.1 直接写在script中的代码都称为全局作用域
1.2 全局作用域在页面打开时创建，在页面关闭时销毁
1.3 在全局作用域中有一个全局对象window，我们可以直接使用
1.4 创建变量是都会作为windows对象保存
1.5 创建的函数都会作为windows方法保存
-
变量及函数的声明
变量的声明
使用var关键字声明一个变量会在代码执行之前被声明(但是不会赋值)，但是如果声明变量时不使用var关键字,则变量不会被提前
函数的声明
使用函数声明形式创建的函数 function 函数（）{}
它会在所有的代码执行之前就被创建，所以我们可以在函数声明之前调用函数
sun() function sun(){ console.log("函数声明形式") }
使用函数表达式创建的函数，不会被声明提前
ret()
var ret = function(){
console.log("函数表达式")
}
-
函数作用域
调用函数作用域时，函数调用完毕后，函数作用域销毁
每调用一个函数就会创建一个新的函数作用域，他们之间是独立的
在函数作用可以访问到全局作用域的变量
在全局作用域无法访问到函数作用域的变量
- 在函数中，不使用var 声明的变量会成为全局变量
2.7 this
函数在调用时每次都会传一个隐藏参数this,this指向的是一个对象
这个对象称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象
-
以函数的形式调用时，this永远都是window
var name = "张腾飞" function sun(){ console.log("name = "+this.name) } sun() -
以方法的形式调用时，this就是调用方法的那个对象
function sun(){ console.log("age = " +this.name) } var obj = { name:"猪八戒", age:sun } obj.age()
2.8 使用工厂方法创建对象
-
使用公共函数方法创建一个对象，每次创建新对象时调用这个方法并传递参数，返回这个共有的方法
<script> // 封装一个函数 function createPerson(name,age,gender){ //创建一个对象 var obj = new Object(); obj.name = name; obj.age = age; obj.gender = gender; obj.setBear = function(){ alert(this.name) } //返回创建对的对象 return obj; } var obj1 = createPerson("张腾飞",13,"女"); console.log(obj1) var obj2 = createPerson("王飞",13,"女"); console.log(obj2) var obj3 = createPerson("闫婧",13,"女"); console.log(obj3) obj3.setBear(); </script>2.9 创建构造函数
构造函数的执行流程:
-
立刻创建一个新对象
-
将新的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
-
运行执行函数的代码
-
将新的对象
使用同一个构造函数创建的对象，我们称为一类对象,也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象，称为该类的实例
this的情况
-
当以函数调用时，this是window
-
当以方法调用时，谁调用该方法this就是谁
-
当以构造方法调用时，this就是新创建的对象
<script> //构造方法创建 function Person(name, age,gender){ this.name= name; this.age= age; this.gender= gender; } var per = new Person('张腾飞',"女",12); // insrammceof 比较这个实例是否是该类中的 console.log(per instanceof Person) console.log(per); </script>
-
*注意：*当构造函数中定义一个方法，这个方法每次执行就会创建一个新的对象，在堆内存中会开辟一块新的空间，非常消耗内存
//构造方法的改造
function Person(name, age,gender){
this.name= name;
this.age= age;
this.gender= gender;
this.section= fun;
}
// 将函数定义的全局作用域，污染了全局作用域的命名空间，而且定义在全局作用域中很不安全
function fun(){
alert("定义一个全局的函数"+this.section)
}
var per = new Person('张腾飞',"女",12);
per.section();
2.9 原型对象
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
这个属性对应这一个对象，这个对象就是我们的原型对象
如果函数作为普通函数调用prototype没有任何作用
当函数作为构造函数调用时。他所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，我们可以用——proto__来访问该属性
原型对象就相当于一个公共区域，所有同一个类所创建的实例都可以访问这个原型对象
我们可以将对象中共有的内容统一设置到原型对象中
以后创建构造函数时，可以将这些对象的共有属性和方法，统一添加到构造函数的原型对象中，这样不用分别对每一个对象添加，也不会出现命名空间的污染
原型对象也是对象，所以他也有原型。
当我们使用一个对象属性或者方法时，会在自身寻找
自身中如果有就直接使用，如果没有就在原型对象中找，如果还没有就在原型的原型对象，
Object对象的原型没有原型，如果在Object原型中没有找到。则返回underfined
<script>
//创建一个构造函数
function MyShool(){}
MyShool.prototype.s = 123;
MyShool.prototype.setName = function(){
alert("给原型对象中添加方法")
}
//创建一个实例
var my = new MyShool();
console.log(MyShool.prototype == my.__proto__); //返回为true
console.log(my.setName)
//可以使用hasOwnProperty检查自身是否有这个属性
console.log(my.hasOwnProperty("s"))
//修改构造函数
function Person(name, age,gender){
this.name= name;
this.age= age;
this.gender= gender;
}
Person.prototype.setName = function(){
alert("定义一个全局的函数"+this.section)
}
var per = new Person('张腾飞',"女",12);
</script>
2.10 tostring方法
当我们在页面上直接打印一个对象时，实际上是输出对象的toString方法
如果希望输出的对象不是[Object object ]，可以添加一个toString 方法
<script>
//修改构造函数
function Person(name, age,gender){
this.name= name;
this.age= age;
this.gender= gender;
}
// Person.prototype.setName = function(){
// alert("定义一个全局的函数"+this.section)
// }
Person.prototype.toString = function(){
return "Person[name="+this.name+",age="+this.age+",gender"+this.gender+"]";
}
var per = new Person('张腾飞',"女",12);
var result = per.toString();
console.log("result=" +result);
console.log(per.toString())
console.log(per)
</script>
2.11 垃圾回收机制
当创建一个对象会消耗一定的内存空间，如果这个对象等于空，或者无对应的参数及属性方法对它进行引用，这种情况下会触发垃圾回收机制，将其回收
3.数组
3.1数组的基本使用
-
创建数组的俩个方法
var arr = new Array() arr1 = [] -
遍历数组俩种方法，第二种不推荐使用，因为在IE8中不支持此方法
- for循环遍历
var per = new Person('张腾飞',"女",19); var per2 = new Person('王飞',"女",11); var per3 = new Person('闫婧',"女",14); var arr = [per, per2, per3]; //获取年龄大于11岁的人，返回到新的数组中 function PersonLon(Array){ //创建一个新的对象 var arrs = []; //将新的对象遍历出来 for(var i=0; i <arr.length; i++){ if(arr[i].age >12){ arrs.push(arr[i]); } } return arrs; } var result1 = PersonLon(arr) console.log(result1)- foreach遍历 （不推荐）
//创建一个数组 var arr = [1,2,3,4,5,6,7,8,9] //传入的第一个参数是返回数组的值，第二个参数是索引，第三个参数是数组的对象 arr.forEach(function(a,b,c) { console.log(a) })
3.2 数组中基本的十个方法
-
push向数组最后一个元素添加元素，并返回新的长度
arr1 = [1,2,3] //push向数组最后一个元素添加元素，并返回新的长度 var result = arr1.push('丈人',false); console.log(result) -
pop把数组最后一个元素删除了，并返回最后一个元素
arr1 = [1,2,3]
var result2 = arr1.pop();
console.log(result2)
- unshift向数组最前面一个元素添加元素，并返回新的长度
arr1 = [1,2,3]
var result3 = arr1.unshift("添加")
console.log(result3)
-
shifts 删除最前面的元素，将被删除的元素返回
arr1 = [1,2,3] var result4 = arr1.shifts console.log(result4) -
slice
截取指定的元素,该方法不会改变元素组，而是将截取到的元素封装到一个新的对象 第一个参数,截取开始位置的索引,第二个参数，截取结束位置的索引不包括该索引，第二个参数也可以不写
var arr = [1, 2, 3, 4, 5, 6] var result= arr.slice(0,2) console.log(result) -
splice 删除指定的元素 第一个参数是开始删除的索引第二个是删除几个,原数组会发生改变
var arr = [1, 2, 3, 4, 5, 6] var result= arr.splice(0,2) console.log(result)
-
concat 可以俩个及多个数组，并将最新的数组返回，不会改变原数组
//1. 拼接数组，组成一个新的数组 var arr1 = ['王飞','张腾飞','闫婧']; var arr2 = ['尚永胜','李晓飞']; var arr3 = ['徐璐','胡蓉妹妹']; var result = arr1.concat(arr2,arr2,"李伟") console.log(result) -
join 该方法可以将数组转化为一个字符串，该方法不会对原数组产生影响，而是转换后的字符串作为结果返回,在join中可以指定一个字符串作为参数，这个字符串将会成为数组的连接符，如果不指定参数,默认为,
//2. 将数组转换成字符串 var reset = arr1.join("@-@") console.log(reset) -
reverse 将数组前后颠倒
//3. 将数组前后颠倒 var arr1 = ['王飞','张腾飞','闫婧']; arr1.reverse() console.log(arr1) -
sort 将数组按顺序排列，使用unicode编码方式排列，排列数字可能不准确，需要调用一个回调函数
var arr4 = [1,3,56,8,9];
var result2 = arr4.sort(function (a,b){
return a - b
})
console.log(result2)
3.3数组的的练习
在一个数组中，去除重复的值，并输出
<script type="text/javascript">
//定义一个数组
var arr = [1,2,3,24,12,21,1,4,24];
//使用for循环遍历俩个数组
for(var i = 0; i<arr.length; i++){
console.log(arr[i]);
for(var j =i+1;j<arr.length;j++){
console.log("++++j的值"+arr[j])
for(var u= j+1;u<arr.length;u++){
console.log("+++++u的值"+arr[u])
}
if(arr[i] == arr[j]){
arr.splice(j,1);
j--
}
}
}
console.log(arr)
</script>
3.4 函数的俩个方法call和apply
这俩个方法都是函数的方法，通过函数对象来调用
当对函数调用call和apply都会调用函数执行
在调用call()和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行的this
call() 方法可以将实参在对象之后依次传递
apply() 方法需要将实参封装到一个数组中传递
this的情况
1. 以函数形式调用时，this永远都是window
2. 以方法的形式调用时，this是调用的方法
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call和apply调用时，this是传递进来的对象
//创建一个函数对象
var fun = function(a,b){
// alert(this)
console.log("a= " + a);
console.log("b= " + b);
}
var obj1 = {
name:"张腾飞",
sayName:function(){
alert(this.name)
}
};
var obj2 = {
name:"王飞"
};
obj1.sayName.call(obj2)
fun.call(obj1,2,4)
3.5 封装实参对象的arguments
- arguments类数组对象，可以向数组一样获取他的长日期对象
4 日期对象
<script>
//创建一个时间对象
var Date = new Date();
//获取年份
console.log(Date.getFullYear())
//获取月份
console.log(Date.getMonth())
//获取日
console.log(Date.getDate())
//获取小时
Date.getHours()
//获取分钟
Date.getMinutes()
//获取毫秒数
Date.getSeconds()
//返回格林威治1970年1月一日至今的毫秒数
Date.getTime()
</script>
5. math
Math和其他的对象不同,他不是一个构造函数
它属于一个工具类不用创建对象，它里面封装了数学运算的相关属性及方法
- Math.PI 表示的圆周率
- Math.abs(x) 计算这个数字的绝对值
- Math.ceil(x) 可以对一个数进行向上取整，小数点只有值就自动进一
- Math.floor(x)可以对一个数进行向下取整，小数点只要有值就自动舍去
- Math.round(x) 可以对一个数四舍五入
- Math.random(x) 可以生成0~1的随机数字
随机生成1-x之间的随机数字
Math.round(Math.random()*x)
随机生成x-y之间的随机数字
Math.round(Math.random()*(y-x) +x)
<script>
//随机生成1-10数字
for (var i = 0; i <10;i++){
console.log(Math.round(Math.random() *10));
}
console.log("********************************")
//随机生成1-10数字
for (var i = 0; i <10;i++){
console.log(Math.round(Math.random() *9)+1)
}
console.log("********************************")
//随机生成2-10数字
for (var i = 0; i <10;i++){
console.log(Math.round(Math.random()*8) +2)
}
</script>
Math.sqrt 数字的平方
6. 包装类
在js中我们提供三种包装类,通过这三个包装类将基本数据类型转换为对象
String（）转换为String对象
Nummber() 转换为Nummber对象
Boolean() 转换为Boolean对象
方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时
浏览器会临时将其转换为对象，然后在调用对象的属性和方法
调用完之后在将其转换为基本数据类型
7. 字符串的方法
-
返回指定索引位置的字符charAt()
var str = "zhangz" var result = str.charAt(1) console.log(result) -
返回指定索引位置的unicode值 charCodeAt()
var result1 = str.charCodeAt(2)
console.log(result1)
-
将unicode值转换为字符串 String.fromCharCode()
var result3 = String.fromCharCode("104") console.log(result3) -
连接俩个或多个字符串，返回连接后的字符串 concat()
var result2 = str.concat("yan","wang") console.log(result2) -
indexOf() 该方法可以检索一个字符串是否含有指定内容，如果有指定内容则返回第一次出现的索引
如果没有找到指定内容则返回-1，可以指定开始查找的位置
lastIndexof() 该方法和indenOf用法一样，从后往后找相同的字符
var result5 = str.indexOf("g")
console.log(result5)
-
把字符串分割为子字符串数组 ,如果传值为空则一个字母一个字母拆分spilt("")
var result4 = str.split("") console.log(result4) -
slice() 可以截取字符串指定的内容 第一个开始的索引（包括） 第二个结束的索引(不包括) 可以指定负值，可以从后边计算
var result5 = str.slice(0,4)
console.log(result5)
-
substring() 可以用来截取一个字符串 ，和slice()类似 ，如果传一个负值，则默认小于0，如果第二个值小于第一个，则自动交换
result = str.substring(2,1) -
substr() 用来截取字符串 1. 截取字符串的开始的索引 2.截取的长度
result = str.substr(1,3);
replace() 替换空格
8. 正则表达式
-
正则表达式的方法
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
使用typeof检查正则对象，会返回object
var a = new RegExp("a") 这个正则表达式可以来检查一个字符串中是否含有a,第二个值可以传递一个匹配模式
i:表示忽略大小写
g：表示全局模式
var =/[a]/
[ ]里的内容也是或的关系
[ab] == a| b
[a-z] 任意小写字母
[A-z] 任意字母
/a[bc]f/ abf,acf
az 不包括az
0-9 不包含数字
// 创建一个正则表达式的对象 i
var regular = new RegExp("a","i")
console.log(regular.test("A"))
// 最简单创建一个正则
var regular = /b|a|b|c|d|e|f|g|h/
console.log(regular.test("bacf"))
var regular = /[a-z]/
console.log(regular.test("fasfasd"))
var regular = /^ab/
console.log(regular.test("aaa"))
-
使用正则把字母拆分出来
var str = "1a2b2f4f5gdfgd543" //使用正则把字母拆分出来 console.log(str.split(/[A-z]/)); -
查询字符串中是否有abc mea,esa
var str = "abc mea afc eee" console.log(str.match(/a[bf]c/)) -
replace 可以将指定内容替换为其他内容
// --参数
// 1. 被替换的内容
// 2. 替换的内容
var str = "12av34532c" console.log(str.replace(/[a-z]/ig, ""))
- 量词
通过量词可以设置一个内容出现的次数
量词只对它前面的一个内容起作用
{n} 正好出现n次
{m,n} 出现m-n次
{m,} m次以上
+至少一个相当于{1,}
*0个或多个，相当于{0,}
？0个或1个，相当于{0,1}
^ 表示开头，除了
$ 表示结尾
如果在正则表达式中用了^$则要求字符串必须完全符合正则表达式
检测正则中是否含有. 需要用转义字符\进行转义
//检测一个正则中是否含有.
var str = /./;
console.log(str.test("."));
检测一个正则中是否含有/,需要使用//来代替
// 检测一个正则表达式中是否含有\
var str= /\/;v
console.log(str.test("\"))
防抖和节流
1. 防抖
用户操作频繁,在规定的时间内执行一次
2. 节流
用户操作频繁,但是把平凡的操作变为少量的操作（可以给浏览器有反应时间）
