HTML&CSS
图标：
<link rel="shortcut Icon" href="....ico" type="image/x-icon" >
meta标签
属性：
charset:指定网页的字符集
name :指定的数据名称
keywords 标识网页的关键字
<meta name="keywords" content="html,前端，css">description :用于对网站的描述
<meta name="description" content="这是一个不错的学习前端的视频"> http-equiv="refresh" content="时间(秒)";url="网址" ：网页重定向<meta http-equiv="refresh" content="3;url=https://www.baidu.com"> 标签：hgroup
可以将相同的标签放在hgroup中自定义标签属性：通常用来传值或用于图片的懒加载
格式：data-,自己更改
内联框架iframe
属性：src(链接）,width,height, frameborder（边框）
scrolling:滚动条 值：yes,no，auto
name:框架名
跳转到指定的框架使用target的属性值为iframe的name值
table表格
<table>
<tr>
<td>
</td>
</tr>
</table>属性：cellspacing：单元格之间的距离, cellpadding：内容到边框的距离,rowspan：合并行,colspan,align:表格对齐方式,valign ：top /middle/bottom,th:头部单元格，效果居中加粗
完整表格：caption(标题) thead(表头)，tbody(表体)，tfoot(表尾)
css样式：border-spacing:指定边框之间的距离,0为边框相加
border-collapse:collapse //设置边框合并
如果没有将tr写入tbody中，浏览器默认将tr放入tbody中
form表单
input的一些属性：readonly(只读)，disabled(失效，不会提交数据），required(必填）,minlenth,maxlenth,placeholder,value,pattern(正则匹配)autocomplete: on/off 自动补全（一些提示信息）autofocus自动获取焦点
radio:单选钮，属性：name(必须) value, checked(默认)，
checkbox 复选框
reset :重置
file:文件上传
textarea 属性：cols列数 rows:行数
label for="" 值对应 文本的id值
select>option 属性selected 默认选中
属性：multiple 多选，size多选下出现的行数
html5
语义化标签：
<header>头部标签
<nav>导航标签
<article>内容标签
<section>定义文档某个区域
<aside>侧边栏标签
<footer>尾部标签
注意：在IE9中需要将这些恶标签转换为块级元素video
属性：
src
controls 显示控件
muted 静音播放，解决谷歌禁止问题
autoplay 自动播放，谷歌禁止
loop 循环播放
poster 值为url 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。audio
属性：
autoplay
controls
loop
muted
srcinput新增type属性值
type:
color file date......
CSS
外部引入css:
<link rel="stylesheet" type="text/css" href="css/index.css" />
样式权重：
important 10000
内联样式 1000
id选择器 100
class ,伪类， 10
标签选择器 1字体
font-size:字体大小
font-family :字体 Courier,"Courier New" //按先后顺序获得字体
font-style:字体样式 normal/italic/oblique
font-weight: normal/bold/bolder/lighter
line-height:设置字体的行高
复合写法：
font:font-style font-weight font-size/line-height font-family
text-align:center/right/left/justify(两端对齐) 文本水平对齐
text-decoration: normal/underline/line-through/overline
text-indent: 缩进
em是一个相对单位，相对于当前元素文字的大小
text-transform: 设置文本字体的大小写 none/capitalize:将每一个单词第一个字母转化为大写 /uppercase/lowercase
背景图片：background-image:url("")
background-repeat:repeat/repeat-x/repeat-y/no-repeat
background-position:10px 10px;
背景范围：
background-clip:border-box(默认值)/padding-box:背景不会出现在边框里，只出现在内容区和内边距
/content-box:背景只出现在内容区
background-origin: 计算图片背景设置偏移量的原点
值：padding-box:默认值，以内边距为原点
content-box:以内容区为原点
border-box:以边框为原点
background-size: 100px(宽) 100px（高）
也可以填写contain或cover
contain(图片比例不变图片完整展示，)
cover(图片比例不变，铺面整个元素，图片会展示不全)
background-attachment:(设置背景图片是否随滚动条移动)
srcoll:默认值移动 （参考为整个可视窗口定位）
fixed:固定
vertical-align: 垂直对齐方式 baseline(基线对齐)
/top(顶部对齐)/bottom(底部对齐)/middle(居中对齐)
也可以使用数字方式来调试 例如：vertical-align:10px
white-space:normal/nowrap(不
换行) /pre(保留空白)
text-overflow:ellipsis（溢出设置为省略号）
word-wrap:break-word 允许长单词换到下一行
选择器
复合选择器：
交集选择器：多个选择器连着在一起
并集选择器：可以同时选中多个元素改变样式，以逗号分隔
关系选择器：
子元素选择器：用>连接
后代选择器：祖先 空格 后代
兄弟选择器 用+连接 紧挨着的第一个兄弟
用 ~连接 下面所有的兄弟节点属性选择器(css3)：
用中括号包围： [title]
还可选择具体属性名的属性 [title=abc]
[属性名^=abc] :属性名以abc开头
[属性名$=abc] ：属性名以abc结尾
[属性名*=abc] :属性名中包含abc
input[value]{
}
伪类
伪类选择器：
不存在的类，特殊的类
用于描述一个元素的特殊状态
写法： ：开头
l:first-child 第一个子元素 :first-of-type 相同元素类型的第一个
:last-child最后一个子元素 :last-of-type 指定类型的最后一个
:nth-child(n) 选中第n个子元素 n从1开始
奇数：odd,2n+1,(此时n从0开始) :nth-of-type(n)
偶数：even ,2n
:nth-last-child(-n+number) 倒数后几位（包含后面的全部）
:not(选择器) 否定伪类 排除符合添加的元素
header div:nth-of-type(1){ //div类型中的第一个
}
header div:nth-child(1){ //header所有子元素的第一个}
链接的伪类：
:link 表示正常的链接
:visited: 表示访问过的链接 由于隐私，只能改颜色
:hover 用来表示鼠标移入的状态
：active 选择活动的链接（即鼠标按下但是还未弹起的链接
正确的顺序为：link,visited,hover,active
:focus 获取焦点的表单元素
伪元素
表示页面中一些特殊的并不真实存在的元素（特殊位置）
::first-letter :选中首字母
::first-line 表示第一行
::selection 拖拽鼠标选中后
::before 元素之前的位置
::after 与content搭配,内容不能被选中(样式为行内元素)em:相对于元素的字体大小
rem:相对于根节点的字体大小（HTML）
颜色
rgb(255,255,255);
rgba(255,255,255,不透明度)
十六进制rgb:#ffffff
hsl值：
h:色相 s:饱和度 （0%~100%）l:亮度（0%~100%）
文档流
行列元素的高度和宽度是被内容撑开的
盒子模型（box model)
内容：content
边框：border
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左
top right bottom left
border-style: (默认值为：none)dotted 圆点虚线 dashed 点虚线 double双实线
border-radius:
border-collapse:collapse 合并相邻边框内边距：padding
外边距：margin
两个值：上下 左右
三个值：上 左右 下
四个值：上 右 下 左水平布局
一个元素在其父元素中，水平布局必须满足
margin-left+border-left+paddign-left+width+padding-right+border-right+margin-right=父元素的宽度
width,margin-left,margin-right的值可设置为auto
auto为自动配置使其各值满足条件
如果两个外边距设置为auto，固定width那么效果是居中
eg: width:100;margin:0 auto; 水平居中 注意：要给宽度
垂直布局
当元素在父元素中溢出：使用样式
overflow:hidden/ 默认值：visible（溢出）/scroll(溢出的部分显示滚动条)/auto（根据需要生成滚动条）
overflow-x: (处理横轴)
overflow-y: (处理纵轴)省略号三件套：
overflow:hidden
white-space:normal/nowrap(不换行) /pre(保留空白)
text-overflow:ellipsis（溢出设置为省略号）多行显示省略号
overflow:hidden
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2 // 限制显示文本的行数
-webkit-box-orient:vertical相邻垂直外边距会发生重叠现象：
对于兄弟元素：取两者之间较大值
一正一负：取两者之和
都为负：取绝对值较大的
对于父子元素：子元素使用外边距会影响到父元素（开启bfc)行级元素不能设置宽高，但是能设置：padding和border，margin但是不会影响到垂直方向的布局，直接覆盖
display设置元素的性质：
inline-block:能设置宽高，但是不会独自一行，如果换行，元素之间会有间隙，值：none 使元素不会显示
visibility:用来设置元素的显示状态
值：hidden隐藏，隐藏后依然会占据原来的位置，默认值：visible：正常显示，
与display:none的区别在与，visibility保留原来的位置。
默认样式（浏览器）
body: margin
p: margin
ul: list-style:none
盒子大小
box-sizing: 默认值（content-box)width和height来决定内容区
border-box: width和height决定盒子可见框的大小即：内容+边框+内边距轮廓和圆角,阴影
outline: 用法和border一样，但是它不会影响可见框的大小,它也可以取消表单聚焦时的轮廓颜色
outline:none
box-shadow:用来设置元素的阴影效果，不会影响页面布局
阴影是和元素重合的
第一个值：水平偏移量 正值向右移动
第二个值：垂直偏移量 正值向下移动
第三个值：阴影的模糊半径（虚实效果）
第四个值：阴影的尺寸
第五个值：颜色 （rgba)
第六个值：inset 内部阴影文字阴影：text-shadow
第一个值：水平偏移量 正值向右移动
第二个值：垂直偏移量 正值向下移动
第三个值：阴影的模糊半径（虚实效果）
第四个值：颜色 （rgba)圆角：
border-top-left-radius:x轴取半径，y轴取半径（以相交点为圆心）
border-top-right-radius:
border-bottom-left-radis:
border-bottom-right-radius:
浮动
float:left/right
水平布局的等式不需要强制成立，脱离文档流，不再占立文档流的位置
边界为父元素的边框
浮动元素不会覆盖文字
行类元素脱离文档流后，特点和块级元素一样
子元素无法支撑父元素的高度，引起塌陷问题
BFC(Block Formatting Context) 块级格式化环境
开启bfc后的特点：
利用BFC避免margin重叠。
BFC内部的元素和外部的元素绝对不会互相影响
不会被浮动元素所覆盖
开启后父元素可以包裹住浮动元素，不会产生塌陷触发bfc: 设置父元素浮动
设置元素的性质为行内块 display：inline-block
设置overflow他的值为非visible， 可取值：hidden，auto
开启绝对定位： position:absolute
清除浮动
clear：left/right/both 清除浮动对本元素的影响
原理：浏览器自动给元素加了一个上外边距，使其位置不能到浮动元素的影响
使用both，实际是清除比较大的那个的影响
解决浮动引起的塌陷：添加在父元素上，解决当父元素没有设置高度是，浮动的元素不能支撑起父元素的高度问题。
box::after{
content:'';
clear:both;
display:block
}解决浮动塌陷和父子外边距重叠
.clearfix::after,
.clearfix::before{
content:'';
display:table;
clear:both
}定位
position:absolute/relative/fixed
相对定位：relative
相对于元素之前的位置进行定位，提升了元素的层级，没有脱离文档流，原来的位置不会被占用。不会改变元素本身的性质，使用偏移量来设置元素的位置。
top/bottom/left/right绝对定位：absolute
会脱离文档流，原来的位置被占用，会改变元素的性质，行内变成块级，块的高度被内容撑开使元素提升一个层级，相对于他的最近开启了定位的祖先元素进行定位，不能撑起父元素的高度
固定定位：fixed
参照于网页视口进行定位
不会随网页滚动条而动
粘滞定位 sticky(了解)
设置元素当达到条件时不随滚动条滚动，性质与相对定位差不多
以可视化窗口为参照物
关于绝对元素的定位
left/right/top/bottom的默认值为auto
元素的层级
z-index: 值越大，层级越大
祖先元素层级不会覆盖住子代元素
图片字体：
字体库：icomoon
将下载的压缩中的font文件保存在对应引入的css中出现的文件路径中。
注意：需要给图标所在的标签添加font-family
样式写入:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?o6gjq1');
src: url('fonts/icomoon.eot?o6gjq1#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?o6gjq1') format('truetype'),
url('fonts/icomoon.woff?o6gjq1') format('woff'),
url('fonts/icomoon.svg?o6gjq1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
@font-face{ //将服务器中的字体引用来使用
font-family:"自定义名称"；
src:url('字体路径')
}用户界面
鼠标样式
cursor:
pointer 小手
move 移动
not-allowed 禁止防止拖拽文本框（text area）
设置一个属性：
textarea{
resize：none
}
CSS3
图片模糊处理：filter:blur(5px) 数值越大模糊越严重
contenteditable 属性 可编辑段落
calc函数：进行一些属性值的计算
例如：width：calc(100%-80px)
线性渐变
background-image:linear-gradient(to bottom,red,green) 红色向绿色过渡
默认从上往下 ：to bottom
to top /to left / to right
还可以表示：0 deg :表示旋转的度数后开始的渐变 1turn:表示旋转的圈数后的渐变 可以有多个颜色值：background-image:linear-gradient(red,green,blue,yellow)
当颜色后面有值时，表示从什么地方开始渐变
background-image:linear-gradient(red 50px,yellow)background-image:repeating-linear-gradient(red 50px,yellow 50px) //平铺的线性渐变
径向渐变
background-image:radialgradient(red,yellow) 红色在中间向外辐射
设置参数：background-image:radial-gradient(100px 100px red,yellow) 指定中心辐射半径大小，也可以写参数：circle和ellipse
设置中心辐射圆位置：
background-image:radial-gradient(at 100px 100px ,red,yellow)
过渡
与:hover搭配使用
transition :属性：
transition-property: width,height执行过渡的属性
transition-duration:2s 执行过渡的时间
transition-timing-function 过渡时序函数
属性值：ease默认值，效果：慢速开始，先加速，后减速
linear 效果： 匀速过渡运动
ease-in 效果：慢速开始，持续加速
ease-out 效果 快速开始，持续减速
ease-in-out 效果：先加速，后减速
指定时序函数： transition-timing-function:cubic-bezier(.17,.67,.83,.67)
https://cubic-bezier.com/ （网址）
steps(数字，start/end) ：分多少步完成,分配的时间开始执行或完成后执行transition-delay: 延迟执行，等待一段时间后
使用transition可以表示所有属性，但是若写入延迟时间，则第一个时间为持续时间（transition-duration）
动画
自动触发动态属性
设置关键帧
@keyframes test{
from{ //开始状态
}
50%{
}
to{ //结束状态
}
}
在关键帧中通过写百分号的形式，确定在不同时间段里执行的效果
animation-delay： y
animation-duration
animation-timing-function
animation-property
animation-iteration-count: 动画执行的次数
值：infinite :无限执行
animation-direction: 执行动画的方向
normal/reverse/alternate :从from 到to，重复执行时从to 到from返回
alternate-reverse:从to到from，重复执行时，反向返回
alternate和alternate-reverse增加了一种反复时的过程
animation-play-state: running/paused动画运行状态
animation-fill-mode:
none:默认值
forwards:动画执行完毕后停止在动画结束的位置
backwards:动画延时等待是，元素就处于from时的状态
both：结合forwards和backwards的状态元素变形
transform:函数属性-> 变形不会影响元素的布局,不会改变其他元素的位置变化。
translateX()沿着x轴平移
translateY()沿着y轴
translateZ()沿着z轴
平移时使用百分数，是相对于自己的长/宽而言
translate3d(x,y,z)
rotateZ（90deg)或（0.25turn) : 绕z轴旋转
缩放：
scale(倍数)，scaleX(),scaleY()
backface-visibility:hidden/visible 元素背面是否显示
transform-origin: 10px 10px;默认值为center 设置变形的原点
补充：给HTML添加属性
perspective:500px, 增加屏幕的可视距离(添加到被观察的父级身上)
transform-style:preserve-3d 保持3D空间，增加 3D效果 加在父级上，效果在子级less
less是一门css的预处理语言
vs中工具easy less
在.less中可以声明一个变量，用来存储任意值
语法：
@a:red a为任意变量名
用时：
background-color：@a
若变两为一个类时/作为部分引用：如：@b:box1 @c:images;
用时：
.@{b}{
url("@{c}/picture.jpg")
}
.box1{
width:100px;
height:$width //引用width的值
}
&符号：会锁定外层的父级元素
p2:extend（p1） 对p1元素样式的扩展，给p2生成相同的样式
{
可以定义p2独有的样式
}混合函数：
.box1(参数){ //用来被引用，单独用不显示，可以写参数
width:参数
}color:average(red,blue) 取这两个颜色的中间值
line-height: inherit; orphans: 4; margin-top: 1rem; margin-bottom: 1.5em; white-space: pre-wrap; position: relative; color: rgb(31, 9, 9); font-family: "PT Serif", "Times New Roman", Times, serif; font-size: 16px;">补充：在less中数值可进行计算
通过import导入less文件，进行多个less文件的合并
flex 弹性盒布局
一种布局手段，使元素具有弹性让元素可以跟随页面大小而改变
弹性容器：
display:flex //块级
display:inline-flex //行内元素 不会独占一行flex-direction:column （竖直排列）
row （默认值， 自左向右）
row-reverse （自右向左）
colnun-reverse（自下向上）
弹性元素的直接子元素是弹性元素
flex-grow: 1 默认值为0 弹性容器有空白时，元素的填充系数
指定元素的伸展的系数（当父元素有空间时）
弹性元素将按比例进行分配填充，
flex-shrink: 当父元素的容量不够时进行收缩系数
当值为0时：子元素就不会进行伸缩
flex-basis: 指定元素在主轴上的初始长度 （会覆盖掉原始值）
默认值 auto 表示参考元素自身的高度或宽度
总结：
简写flex: grow shrink basis
或者：值： initial 对应得时：‘0 1 auto'
auto '1 1 auto'
none '0 0 auto'(弹性元素没有弹性)
order：number 数字越小，元素越靠近起始位置 主轴：弹性元素伸缩的方向
辅轴：与主轴垂直的方向
flex-wrap: 设置弹性元素是否在弹性容器中是否自动换行
值：nowrap 默认值， 元素不会自动换行
wrap 元素延辅轴方向自动换行
wrap-reverse 元素延辅轴反方向换行
flex-flow: wrap和direction的简写方式
flex-flow:row wrapjustify-content: 元素的位置分配
值： flex-start 对于元素
flex-end 对于元素
center 对于元素，整体居中对其
space-around 将空白平均分配到元素两侧（空白不会重叠） space-between :空白平均分配到元素之间
space-evenly 将空白分配到元素的一侧align-item 弹性容器中元素在辅轴上的位置调节
值： stretch 默认值 将元素的长度设置为相同的值
flex-start 元素在辅轴的位置，不会被拉伸，沿辅轴的起始边对齐
flex-end 元素在辅轴的位置，沿辅轴的终边对齐
center 元素居中对齐
baseline 沿基线对齐align-content: 辅轴空白空间的分布
center :
flex-start
flex-end
space-around
space-between对于子项：
align-self: 辅轴，单独进行布局
值： stretch 默认值 将元素的长度设置为相同的值
flex-start 元素在辅轴的位置，不会被拉伸，沿辅轴的起始边对齐
flex-end 元素在辅轴的位置，沿辅轴的终边对齐
center 元素居中对齐
baseline 沿基线对齐order:定义排列的顺序，与z-index不一样
order:0 默认值
值越小，越靠前
媒体查询
响应式布局：
网页可以根据不同的设备或者窗口大小呈现出不同的效果
可以使一个网页适应于不同的设备
通过媒体查询，可以为不同的设备，或者不同的状态分别设置样
媒体类型：
all 所有设备
print 打印设备
screen 有显示器的设备
speech 屏幕阅读器
在媒体类型前面可以写个only用来兼容一些老版本浏览器
用法：
@media only all{
body{
}}
媒体特性：
width: 可视口的宽度
height： 可视口高度
min-width: 可视口的最小宽度
max-width: 可视口的最大宽度
min-width 与max-width 用and连接，表示同时满足
写法：
@media(width:px){
body{
}
}知识积累
select 消失箭头
appearance: none;document.querySelector('video').playbackRate=3
//视频播放的倍速改变input 中placeholder的样式
input::placeholder{
co
}
浙公网安备 33010602011771号