Vscode前端笔迹

最新推荐文章于 2024-03-12 23:06:44 发布

白嫖勇者

最新推荐文章于 2024-03-12 23:06:44 发布

阅读量712

点赞数 1

文章标签：前端 javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61571886/article/details/129047803

版权

文章详细介绍了VSCode的常用快捷键，如格式化、移动代码等，以及HTML基础标签，如`

`至`

`，还有CSS样式、表格、表单、DOM操作、JavaScript事件和语法，包括定时器、防抖技术以及字符串和数组操作方法。内容涵盖前端开发的基础知识和实用技巧。

摘要由CSDN通过智能技术生成

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

超文本链接

文本标签

着重文字:<em>

粗体文本:<b>

斜体字:<i>

加重语气:<strong>

删除字:<del>

无特定含义:<span>

有序列表标签

按顺序带数字的列表

<ol>type属性:"1","a","A","i","I"

<ol><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

同上保留上边删除下边

表单

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属性拆分(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():将一组值转为数组

白嫖勇者

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Vscode前端笔迹

外部样式:当样式需要应用于多个页面的时，通过改变一个文件来改变整个站点的外观，每个页面使用标签链接到样式表，在头部。setTimeout(,):指定某个函数或某段代码，在多少毫秒之后执行，返回一个整数，代表定时器的编号，可以用来取消定时器。get一般提交少量数据，post提交大量数据。行内元素:不占一行，只占自身大小，能设置width,height无效，一般内联包含内联，不包含块。:代表一个完整的，独立的相关内容块，例如一篇完整的论坛帖子，一个用户评论等。
复制链接

扫一扫