Vscode前端笔迹
vscode常用快捷键
1.格式化(使代码格式变标准)：shift+alt+f
2.移动代码:Alt+up/alt+down
3.快速复制一行:shift+alt+up/shift+alt+down
4.快速替换:ctrl+h
html5基础骨架标签
1.<html>
2.<body>
3.<head>
4.<title>
5.<meta>
标题标签
<h1>-<h6>(大-小)
快捷生成1-6:h$*6
标签中调解位置:align(left,center,right)
vscode打开浏览器插件
open in browser(鼠标右键使用)
段落标签
<p>
换行标签
<br>
水平线
<hr>
颜色:color
宽度:width(带单位)
高度:size
位置:align(默认中间)
图片标签
<img>
图片网址/路径/名字:src
当图片不能正常显示时代替内容:alt
宽度:width
高度:height
鼠标悬停后显示内容:title
超文本链接
<a href="url">text</a>
文本标签
着重文字:<em>
粗体文本:<b>
斜体字:<i>
加重语气:<strong>
删除字:<del>
无特定含义:<span>
有序列表标签
<ol>包裹<li>
按顺序带数字的列表
<ol>type属性:"1","a","A","i","I"
<ol><li>可以相互嵌套
无序列表标签
<ul>包裹<li>
不带数字标识，变成原点
<ul>type属性:"disc"--默认实心圆 "circle"--空心圆 "square"--小方块 "none"--不显示
<ul><li>也可以相互嵌套
快捷:ul>li*num
表格标签
表格：<table>
行:<tr>
单元格:<td>
快捷:table>tr*num1>td*num2{文本内容}
table属性:
"border":表格的边框
"width":宽
"height":高
表格单元格合并
水平合并:colspan
colspan="num" 合并num个单元格 保留右边删除左边
垂直合并:rowspan
同上 保留上边删除下边
表单
<form action="url" method="post/get" name="formName"></form>
action:服务器地址
method:get提交的数据url看的到，post看不到。get一般提交少量数据，post提交大量数据
表单元素:
表单标签
表单域
表单按钮
例:
文本框:<input type="text">
密码框:<input type="password">
提交按钮:<input type="submit" value="text">
块元素和行内元素
块元素:在页面中独占一行，可以设置width,height,块里面可以包含其他块和行内元素,自上而下排列
例:div,h1-h6,form,hr,p,table,ul.....
行内元素:不占一行，只占自身大小，能设置width,height无效，一般内联包含内联，不包含块
例:a,b,em,i,span,strong.....
行内块级元素(不换行，但能识别宽高)
例:button,img,input.....
容器元素
<div id="">
div属性拆分(h5新增):
<header>:头部
<nav>:导航
<section>:定义文章中的节，比如章节，页眉，页脚
<aside>:侧边栏
<footer>:脚部
<article>:代表一个完整的，独立的相关内容块，例如一篇完整的论坛帖子，一个用户评论等
CSS引入
外部样式:当样式需要应用于多个页面的时，通过改变一个文件来改变整个站点的外观，每个页面使用<link>标签链接到样式表，<link>在头部
<link rel="stylesheet" type="text/css" href="xxx.css">选择器
全局选择器:与任何元素匹配，优先级最低，一般用作初始化
*{
color:red;
}元素选择器:页面上所有这种类型的标签
p{
color:black;
}类选择器:用原点"."定义，针对你想要的所有标签使用
<h1 class="className1 className2">xxx</h1>
.className{
color:red;
}ID选择器:针对某一个特定的标签使用，只能使用一次，id唯一
<h1 id="name"></h1>
#name{
color:red;
}合并选择器:提取公共的样式，减少重复代码
<h1 class="class1">text1</h1>
<p class="class2">test2</p>
<style>
.class1{
color:red;
}
.class2{
color: green;
}
.class1,.class2{
background-color: black;
}
</style>选择器优先级
元素选择器:1
类(class)选择器:10
id选择器:100
内联样式选择器:1000
行内样式>ID选择器>类选择器>元素选择器
字体属性
颜色:
color:red;
color:#ff0000;
color:rgb(0,0,0)//(红(0-255),绿(0-255),蓝(0-255))
color:rgba(0,0,0)//(红(0-255),绿(0-255),蓝(0-255),透明度)字体大小:chorme浏览器接受最小字体是12px
font-size:39px;字体粗细:
font-weight:400;bold:粗体 bolder:更粗 lighter:更细 100-900:400等同默认,700等同bold
文本样式:
font-style:italic;normal:默认 italic:斜体
字体类型:
font-family:"微软雅黑";背景属性
背景颜色
background-color:背景图片
background-image:url("path")背景图片显示位置:
background-position:
//left top:左上 left center:左中 left bottom:左下
//right top:右上 right center:右中 right bottom:右下
//center top:中上 center center:中中 center bottom:中下
//x% y% 水平 垂直 xpos ypos 像素背景图片如何填充
background-repeat:
//repeat 默认值 repeat-x 只往水平方向平铺 repeat-y 只往垂直方向平铺
//no-repeat 不平铺背景图片大小属性
background-size:
//length:图片宽度和高度，第一个宽度，第二个高度
//percentage:相对区域的百分比，第一个宽，第二个高
//cover:保持图片纵横比，并将图片缩放成完全覆盖背景区域的最小大小
//contain:保持纵横比，图片缩放成适合背景定位区域的最大大小文本属性
对齐方式
text-align:
//left 左 默认 right 右 center 中文本修饰
text-decoration:
//underline 下划线 overline 上划线
//line-through 删除线文本大小写
text-transform:
//captialize 单词首字母大写 uppercase 全部大写 lowercase 全部小写首行缩进
text-indent: 30px表格属性
表格边框
border:1px solid red折叠边框
border-collapse:collapse表格宽度和高度
height,width
表格文字对齐
text-align:
vertical-align://垂直对齐
//bottom top表格填充
padding:15px表格颜色
border:1px solid red
background-color:red
color:red关系选择器
后代选择器:选择所有被E元素包含的F元素
E F{}子代选择器:选择所有作为E元素的直接子元素，对更深一层不起作用
E>F{}相邻兄弟选择器:选择紧跟E元素之后的兄弟F元素，只选第一个，只能向下选
E+F{}通用兄弟选择器:选择E元素之后的所有兄弟元素F,选所有
E~F{}盒子模型
外边距：margin-(left,right,top,bottom)
边框:border 内边距和内容外的边框
内边距:padding left,right,top,bottom
内容:content
弹性盒子模型
父元素上的属性
1.display:flex 开启弹性盒子 弹性盒子里面内容默认横向摆放
2.flex-direction 指定弹性子元素在父容器中的位置
flex-direction:
//row:左对齐，默认的方式
//row-reverse:反转横向排列，右对齐
//column:纵向排列
//column-reverse:反转纵向排列3.justify-content:内容对齐，把弹性项沿着弹性容器的主轴线对齐
justify-content:
//flex-start:弹性项目向行头紧挨着填充，默认。
//flex-end:弹性项目向行尾紧挨着填充
//center:中间4.align-items:设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式
align-items:
//flex-start:弹性盒子的纵轴起始位置的边界紧靠住该行的侧轴起始边界
//flex-end:弹性盒子的纵轴起始位置的边界紧靠住该行的侧轴结束边界
//center:中间子元素上的属性
1.flex:根据弹性盒子设置的扩展因子作为比率来分配剩余空间，默认为0
文档流产生的问题
1，高矮不齐，底边对齐
2，空白折叠问题，多个空格，换行，tab都折叠成一个。img标签之间有空隙
脱离文档流方式
1.浮动：浮动之后使元素脱离了文档流，只有左右浮动，没有上下浮动。脱离文档流之后，元素相当于在页面上增加了一个浮层来放置内容,当容器不足以横向摆放时，会在下一行摆放
float:left/right浮动副作用:浮动元素会造成父元素高度塌陷，后续元素会受到影响
清除浮动：
(1)父元素设置高度
(2)受影响的元素增加clear属性
(3)overflow清除浮动
overflow:hidden;
clear:both;//left right both
//两者搭配(4)伪对象方式
.fatherName::after{
display:block;
clear:both;
}2.绝对定位absolute
3.固定定位fixed
position:absolute/fixed;Z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面
CSS3新特性
圆角
border-radius:5px;
//左上+右下 右上+左下
//左上 右上+左下 右下
//左上 右上 右下 左下阴影
box-shadow:h-shadow v-shadow blur color;
//h-shadow:水平阴影位置，必选
//v-shadow:垂直阴影位置，必选
//blur:模糊距离 可选动画
@keyframes创建动画
@keyframes name{
0%{
样式
}
50%{
样式
}
100%{
样式
}
//from等同0% to等同100%
}执行动画animation
animation:name duration timing-function delay iteration-count direction;
//duration:动画持续时间
//timing-function:动画效果的速率 ease--逐渐变慢(默认) linear--匀速 ease-in --加速 ease-out--减速 ease-in-out 先加后减
//delay:动画的开始时间（延时执行）
//iteration-count:动画循环的次数，infinite为无限次
//direction:动画播放的方向 normal:默认向前 alternate:播放第偶数次向前，奇数次先反方向
//animation-play-state:动画的播放状态，running播放，paused停止播放触发
div:hover{//鼠标放上去
animation-play-state:paused;
}媒体查询
使不同的页面在不同的终端设备下达到不同的效果
设置meta标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">媒体查询语法
@media screen and (min-width:992px){
样式
}
//符合条件的显示对应的样式雪碧图
将一个页面中涉及到的所有零星图片都包含到一张大图中去
优点：减少图片的字节，减少网页的http请求，大大提高页面的性能
原理：通过background-image引入背景图片，通过background-position把背景图片移动到自己需要的位置
字体图标
JavaScript
javaScript引入到文件
1.嵌入HTML
<body>
<script>
</script>
</body>2.引入本地js文件
<body>
<script type="text/javascript" src="xxx.js"></script>
</body>3.引入网络来源文件
<body>
<script src="url"></script>
</body>javaScript运算符
数据类型判断 typeof name;
比较运算符
==：比较数值
===：严格比较，数值本身是否相同，类型本身是否相同
三目运算符
表达式 ? true:false
Math对象
abs():绝对值
min(a,b),max(a,b):最值
floor(a):向下取整
ceil(a):向上取整
random():0到1的伪随机数
Date对象
getTime():返回距离1970年的毫秒数
getDate():返回每个月的几号
getDay():返回星期几，0为日
getYear():返回距离1900的年数
getFullYear():返回四位数年份
getMonth():返回月份
getHours():返回几点
getMilliseconds():返回毫秒(0-999)
getMinutes():返回分钟
getSeconds():返回秒
DOM文档对象模型
javascript操作页面的接口，将网页转为一个javascript对象，从而可以用脚本语言进行各种操作
节点:DOM的最小组成单位
节点类型:
1.Document:文档树的顶层节点
2.DocumentType:doctype标签
3.Element:网页的各种HTML标签
4.Attribute:网页元素的属性
5.Text:标签之间或标签包含的文本
6.Comment:注释
7.DocumentFragment:文档的片段
document对象方法
getElementsByTagName("标签名"):搜索HTML标签名，返回符合条件的元素，返回值是一个数组
getElementsByClassName("class名"):搜索class名
getElementById():匹配id
querySelector():接受一个CSS选择器作为参数，返回匹配该选择器的元素节点，只返回一个
querySelectorAll():返回所有
document创建元素
createElement():生成元素节点并返回该节点
createTextNode():生成文本节点，参数是文本节点内容
createAttribute():生成一个新的的属性节点并返回
鼠标事件
click:按下鼠标触发
dblclick:双击鼠标触发
mousedown:按下鼠标时触发
mouseup:释放鼠标时触发
mousemove:鼠标在节点内部移动时触发，持续移动时，持续触发
mouseenter:进入一个节点时触发，进入子节点不会触发
mouseleave:鼠标离开一个节点时触发，离开父节点不会触发
mouseover:鼠标进入一个节点时触发，进入子节点会再次触发
mouseout:鼠标离开一个节点触发，离开父节点会再一次触发
wheel:滚动鼠标的滚轮时触发
Event事件
事件发生之后，会产生一个事件对象，作为参数传给监听机制，event作为参数传入函数
event对象属性:
event.target:返回事件当前所在的节点
event.type:返回一个字符串，表示事件类型，只读
event对象方法:
event.preventDefault:取消浏览器对当前事件的默认行为
event.stopPropagation():阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数
键盘事件
keydown:按下键盘时触发
keypress:按下有值的键触发，Ctrl,Alt,Shift,Meta等键就是无值的键。先触发keydown,在触发本事件
keyup:松开键盘时触发事件
keyCode:键盘按键的唯一标识
表单事件
input事件：当input,select,textarea的值发生变化时触发，复选框或单选框变化时也触发
select事件:在input,textarea里面选中文本时触发
change事件:当input,select,textarea的值发生变化时触发,不是时时触发，统一触发
reset事件:表单重置时触发，所有表单成员变回默认值
submit事件:当表单数据向服务器提交时触发
定时器
setTimeout(,):指定某个函数或某段代码，在多少毫秒之后执行，返回一个整数，代表定时器的编号，可以用来取消定时器。
clearTimeout(id):取消定时器
setInterval(,):间隔一段时间执行一次，无限次执行
防抖
对于短时间内连续触发的事件，防抖的含义就是让某个时间期限内，事件处理函数只执行一次
Let命令
let是块级作用域
let不存在变量提升
let是不能重复声明的
Const命令
声明一个只读的常量，一旦声明，不可改变，声明时必须初始化，块级作用域，常量不提升
for...of遍历字符串
for(let i of 'sdfsdf'){
}字符串方法
includes():返回布尔值，表示是否找到了参数字符串
startsWith():返回布尔值，表示是否在原字符串头部
endsWith():返回布尔值，表示是否在原字符串尾部
repeat(n):返回一个新字符串，将原字符串重复n次
str.padStart(n,newStr):头部补全，不够n为则用newStr补全
str.padEnd(n,newStr):尾部补全
trimStart():消除字符串头部空格
trimEnd():消除字符串尾部空格
at(n):返回指定位置的字符
数组
...:扩展运算符，将一个数组转为用逗号隔开的参数序列
Array.from():将类数组转为真正的数组
Array.of():将一组值转为数组