WEB前端

Web前端是指网站或Web应用程序的用户界面部分，通常由HTML、CSS和JavaScript等技术构建。前端开发人员负责设计、开发和优化网站的外观和交互体验，以确保用户能够轻松地浏览和使用网站。

  • HTML：页面结构，负责从语义的角度搭建页面结构。
  • CSS：页面样式表现，负责从审美的角度美化页面。
  • JavaScript：交互行为，负责从交互的角度提升用户体验。

前端开发技术详解

HTML

Html（Hyper Texture Markup Language）是超文本标记语言，在计算机中以 .html或者.htm作为扩展名,可以被浏览器识别,就是经常见到的网页.
Html的语法非常简洁,比较松散,以相应的英语单词关键字进行组合,html标签不区分大小写,标签大多数成对出现,有开始,有结束,例如 ,但是并没有要求必须成对出现.同时也有固定的短标签

基本框架：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
    
</body>
</html>

HTML的组成可以分为如下部分:

  1. <!doctype html>声明文档类型,可以不写

  2. <html> 开始 和</html> 结束,属于html的根标签

  3. <head></head> 头部标签,头部标签内一般有 <title></title>打开网址是浏览器标签页显示的标题

  4. <body></body> 主体标签,一般用于显示内容

也可以指定页面类型和字符编码,下面设置页面类型为html,并且字符编码为utf8<meta http-equiv="content-Type" content="text/html; charset=utf8">

Html标签属性,可以双引号,单引号,或者不写

HTML文档的后缀名

  • html
  • htm

常用标签盘点

head内常用标签

标签 功能
title 指定整个网页的标题，在浏览器最上方显示
meta 提供有关页面的基本信息
link 定义文档与外部资源的关系
style 定义内部样式表与网页的关系

body内常用标签

标签 功能
h1~h6 一到六级标题
p 段落
div 容器
br/ 换行
hr/ 水平线 size color
ul 无序列表type=disc(实心圆圈);circle(空心圆圈);square(小方块)
ol 有序列表type=1(数字)|a(字母)|i(罗马数字)
li 上面两种列表的列表项目
img 图片 src=图片来源;alt=图片不显示时显示的内容;titile=鼠标在上面的文字;width = 宽度;height = 高度;(宽高不设置时候百分百显示,只设置其中一个等比例缩放显示)
a 超链接 href=前往地址;titile=鼠标在上面的文字;target=_self(自身页面打开)|_blank(新页面打开)
font 文本 color=#ff0000|RGB(255,0,0)|red;size=文字大小(1-7)
form 表单 method = 请求类型
input 输入 type =text(文本)|password(密码);type = input元素类型

特殊字符

字符(去掉\) 含义
&nbsp; 空格(non-breaking spacing)
&lt; 小于号(less than)
&gt; 大于号(greater than)
&amp; 符号&
&quot; 双引号
&apos; 单引号
&copy; 版权©
&trade; 商标™

hexo超链接跳转到指定锚点注意

尤其注意:href中的http://www.example.com/page#anchor后不能跟/

CSS

  • 全名：Cascading Style Sheets -> 层叠样式表
  • 定义：CSS成为层叠样式表，它主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS的规则：

  • 层叠
  • 覆盖

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。

层叠是CSS的核心机制，理解了它才能以最经济的方式写出最容易改动的CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们根据需要更改文档的显示效果，例如调整字号。

覆盖的默认规则是后者覆盖前者，但是有一个特殊情况——!important。

样式的来源

浏览器默认样式

所有的标签在不同的浏览器中都有各自默认的样式，如h1,h2,p,div,span,ul等，可以通过设置修改浏览器的样式。
浏览器自带一个默认的样式，如果html中没有为标签设置样式，则浏览器会按照自己的样式来显示。
但是浏览器默认样式的级别是最低的，一旦有其他地方设置了标签样式，浏览器默认样式就会被冲掉。

样式的写法

  1. 内联样式

    行间式，在标签的style属性中设定CSS样式。
    通常用于特殊场合的特殊元素。

    1
    <p style="color:red">This is tag of paragraph</p>

  2. 内部样式

    嵌入式，把CSS样式代码集中写在标签的内部。
    通常用于单个page特有的样式。

    1
    2
    3
    4
    5
    6
    <head>
            ...
            <style type="text/css">
                ...此处写CSS样式
            </style>
        </head>

  3. 外部样式

    链接式，将一个独立的.css文件引入到HTML文件中，使用标记写在<head></head>标记中。
    样式代码存放在独立的.css文件中。
    通常用于多个page页面共享样式，如：论坛帖子的排版。

    1
    2
    3
    4
    <head>
            ...
            <link href="My.css" rel="stylesheet" type="text/css">
        </head>

  4. 导入样式

    @import -> 不推荐使用的方式，会导致css不能并行下载，并且要求导入样式的书写必须在所有的css规则书写之前。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style type="text/css">
            /*将某一个css文件的样式直接导入到当前位置*/
            @import url(css/main.css);

            p {
                color:green; /*设置字体颜色*/
                background-color:silver;
            }
        </style>

注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

CSS语法

1734442-20190711193837033-2080817217

image-20220202151558456

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明

1
selector {declaration1; declaration2; ... declarationN }

声明

  • 每条声明由一个属性和一个值组成，属性和值被冒号分开。
  • 如果要定义不止一个声明，则需要用分号将每个声明分开。
  • 当值为若干单词，则要给值加引号
1
2
3
4
5
6
7
8
9
10
p {
        text-align: center;
        color: black;
        font-family: arial;
}
p { color: #ff0000; }
p { color: #f00; }
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); 
p {font-family: "sans serif";}

CSS选择器

  • 通配符选择器

  • 标签选择器

    1
    2
    3
    h1{
      ...
    }

  • 类选择器

    1
    2
    3
    .valueOfClass{
    	...
    }

  • ID选择器

    1
    2
    3
    #valueOfId{
    	...
    }

  • 多元素选择器

    1
    2
    3
    h1,p{
    	...
    }

复合选择器

  • 后代选择器
  • 子元素选择器
  • 交集选择器
  • 并集选择器
  • 链接伪类选择器
链接器 功能 特征 使用情况 隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格.nav a
子代选择器 选择最近一级元素 只选亲儿子 较少 符号是大于符号.nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号，直接挨到一起p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav,.header
链接伪类选择器 给链接更改状态 - 较多 重点记住a{}和a:hover实际开发的写法

CSS常用属性一览表

动画属性(Animation)

属性 描述 使用示例
animation 指定基于关键帧的动画。 animation: slidein 3s ease infinite;
animation-delay 指定动画何时开始。 animation-delay: 2s;
animation-direction 指定动画是否应在交替的循环中反向播放。 animation-direction: alternate;
animation-duration 指定动画完成一个周期应花费的秒数或毫秒数。 animation-duration: 1s;
animation-fill-mode 指定CSS动画在执行之前和之后应如何将样式应用于其目标。 animation-fill-mode: forwards;
animation-iteration-count 指定在停止之前动画循环应播放的次数。 animation-iteration-count: 3;
animation-name 指定@keyframes应应用于所选元素的已定义动画的名称。 animation-name: myanimation;
animation-play-state 指定动画是运行还是暂停。 animation-play-state: running;
animation-timing-function 指定CSS动画在每个周期内应如何进行。 animation-timing-function: ease-in-out;

背景属性(Background)

属性 描述 使用示例
background 在一个声明中定义各种背景属性。 background: url(bg.jpg) no-repeat center/cover;
background-attachment 指定背景图像是在视口中固定还是滚动。 background-attachment: fixed;
background-clip 指定背景的绘制区域。 background-clip: content-box;
background-color 定义元素的背景色。 background-color: #f0f0f0;
background-image 定义元素的背景图像。 background-image: url(bg.jpg);
background-origin 指定背景图像的定位区域。 background-origin: padding-box;
background-position 定义背景图像的原点。 background-position: top left;
background-repeat 指定是否/如何平铺背景图像。 background-repeat: repeat-x;
background-size 指定背景图像的大小。 background-size: cover;

边框属性(Border)

属性 描述 使用示例
border 设置元素边框所有四个侧面的宽度，样式和颜色。 border: 1px solid #ccc;
border-bottom 设置元素底部边框的宽度，样式和颜色。 border-bottom: 2px dashed #000;
border-bottom-color 设置元素底部边框的颜色。 border-bottom-color: #f00;
border-bottom-left-radius 定义元素的左下边界角的形状。 border-bottom-left-radius: 10px;
border-bottom-right-radius 定义元素右下边界的形状。 border-bottom-right-radius: 5px;
border-bottom-style 设置元素底部边框的样式。 border-bottom-style: dotted;
border-bottom-width 设置元素底部边框的宽度。 border-bottom-width: 3px;
border-color 设置元素所有四个侧面的边框颜色。 border-color: #333;
border-image 指定如何使用图像代替边框样式。 border-image: url(border.png) 30 repeat;
border-image-outset 指定边框图像区域超出边框超出范围的数量。 border-image-outset: 10px;
border-image-repeat 指定图像边框应重复，四舍五入还是拉伸。 border-image-repeat: round;
border-image-slice 指定图像边框的向内偏移。 border-image-slice: 20%;
border-image-source 指定要用作边框的图像的位置。 border-image-source: url(border.png);
border-image-width 指定图像边框的宽度。 border-image-width: 5px;
border-left 设置元素左边框的宽度，样式和颜色。 border-left: 1px solid #999;
border-left-color 设置元素的左边框的颜色。 border-left-color: #00f;
border-left-style 设置元素左边框的样式。 border-left-style: double;
border-left-width 设置元素左边框的宽度。 border-left-width: 2px;
border-radius 定义元素边界角的形状。 border-radius: 10px;
border-right 设置元素右边框的宽度，样式和颜色。 border-right: 3px solid #666;
border-right-color 设置元素右边框的颜色。 border-right-color: #0f0;
border-right-style 设置元素右边框的样式。 border-right-style: groove;
border-right-width 设置元素右边框的宽度。 border-right-width: 4px;
border-style 在元素的所有四个面上设置边框的样式。 border-style: outset;
border-top 设置元素顶部边框的宽度，样式和颜色。 border-top: 2px dotted #888;
border-top-color 设置元素顶部边框的颜色。 border-top-color: #ff0;
border-top-left-radius 定义元素左上角的形状。 border-top-left-radius: 5px;
border-top-right-radius 定义元素的右上边界角的形状。 border-top-right-radius: 15px;
border-top-style 设置元素顶部边框的样式。 border-top-style: inset;
border-top-width 设置元素顶部边框的宽度。 border-top-width: 1px;
border-width 设置元素所有四个侧面的边框宽度。 border-width: 1px;

颜色属性 (Color)

属性 描述 使用示例
color 指定元素文本的颜色。 color: #ff0000;
opacity 指定元素的透明度。 opacity: 0.5;

尺寸属性 (Size)

属性 描述 使用示例
height 指定元素的高度。 height: 100px;
max-height 指定元素的最大高度。 max-height: 80%;
max-width 指定元素的最大宽度。 max-width: 1200px;
min-height 指定元素的最小高度。 min-height: 50vh;
min-width 指定元素的最小宽度。 min-width: 320px;
width 指定元素的宽度。 width: 50%;

内容属性 (Content)

属性 描述 使用示例
content 插入生成的内容。 content: "Hello";
quotes 指定嵌入引号的引号。 quotes: "«" "»" "<" ">"
counter-reset 创建或重置一个或多个计数器。 counter-reset: section;
counter-increment 递增一个或多个计数器值。 counter-increment: section;

弹性Flex盒子布局 (Flex)

属性 描述 使用示例
align-content 指定伸缩容器中伸缩容器的项目的对齐方式。 align-content: center;
align-items 为flex容器中的项目指定默认对齐方式。 align-items: flex-start;
align-self 指定弹性容器中选定项目的对齐方式。 align-self: stretch;
flex 指定弹性长度的分量。 flex: 1 0 auto;
flex-basis 指定弹性项目的初始主要尺寸。 flex-basis: 200px;
flex-direction 指定弹性项目的方向。 flex-direction: row;
flex-flow flex-direction和flex-wrap属性的简写属性。 flex-flow: row wrap;
flex-grow 指定弹性项目相对于弹性容器内其他项目的增长方式。 flex-grow: 1;
flex-shrink 指定flex项目相对于flex容器内其他项目的收缩方式。 flex-shrink: 0;
flex-wrap 指定是否应包装柔性物品。 flex-wrap: nowrap;
justify-content 指定在解决了任何弹性长度和自动页边距之后，弹性项目如何沿弹性容器的主轴对齐。 justify-content: space-between;
order 指定弹性项目在弹性容器中的显示和布局顺序。 order: 2;

字体属性 (Fonts)

属性 描述 使用示例
font 在一个声明中定义各种字体属性。 font: italic small-caps bold 16px/1.5 Arial, sans-serif;
font-family 定义元素的字体列表。 font-family: Arial, sans-serif;
font-size 定义文本的字体大小。 font-size: 1.2rem;
font-size-adjust 发生字体回退时，保留文本的可读性。 font-size-adjust: 0.5;
font-stretch 从字体中选择一个普通的，压缩的或扩展的字体。 font-stretch: condensed;
font-style 定义文本的字体样式。 font-style: italic;
font-variant 指定字体变体。 font-variant: small-caps;
font-weight 指定文本的字体粗细。 font-weight: bold;

列表项属性 (Lists)

属性 描述 使用示例
list-style 定义列表和列表元素的显示样式。 list-style: square inside;
list-style-image 指定用作列表项标记的图像。 list-style-image: url('marker.png');
list-style-position 指定列表项标记的位置。 list-style-position: outside;
list-style-type 指定列表项的标记样式。 list-style-type: circle;

边距属性 (Margin)

属性 描述 使用示例
margin 在元素的所有四个面上设置边距。 margin: 10px;
margin-bottom 设置元素的底边距。 margin-bottom: 20px;
margin-left 设置元素的左边距。 margin-left: 15px;
margin-right 设置元素的右边距。 margin-right: 15px;
margin-top 设置元素的上边距。 margin-top: 30px;

多列布局属性 (Column)

属性 描述 使用示例
column-count 指定多列元素中的列数。 column-count: 3;
column-fill 指定如何填充列。 column-fill: auto;
column-gap 指定多列元素中各列之间的间隔。 column-gap: 20px;
column-rule 指定在多列元素的每一列之间绘制的直线或“规则”。 column-rule: 1px solid #ccc;
column-rule-color 指定在多列布局中的列之间绘制的规则的颜色。 column-rule-color: blue;
column-rule-style 指定在多列布局中的列之间绘制的规则的样式。 column-rule-style: dashed;
column-rule-width 指定在多列布局中的列之间绘制的规则的宽度。 column-rule-width: 2px;
column-span 指定元素在多列布局中跨越多少列。 column-span: all;
column-width 指定多列元素中列的最佳宽度。 column-width: 200px;
columns 用于设置 column-width 和 column-count 属性的简写属性。 columns: 2 auto;

轮廓属性 (Outline)

属性 描述 使用示例
outline 设置元素轮廓的所有四个边的宽度，样式和颜色。 outline: 1px dotted red;
outline-color 设置轮廓的颜色。 outline-color: #00ff00;
outline-offset 设置轮廓和元素边框之间的空间。 outline-offset: 5px;
outline-style 设置轮廓样式。 outline-style: solid;
outline-width 设置轮廓的宽度。 outline-width: 2px;

填充属性 (Padding)

属性 描述 使用示例
padding 在元素的所有四个面上设置填充。 padding: 15px;
padding-bottom 将填充设置为元素的底侧。 padding-bottom: 10px;
padding-left 将填充设置为元素的左侧。 padding-left: 20px;
padding-right 将填充设置为元素的右侧。 padding-right: 20px;
padding-top 将填充设置为元素的顶部。 padding-top: 5px;

打印属性 (Print)

属性 描述 使用示例
page-break-after 在元素之后插入分页符。 page-break-after: always;
page-break-before 在元素之前插入分页符。 page-break-before: always;
page-break-inside 在元素内插入分页符。 page-break-inside: avoid;

表属性 (Table)

属性 描述 使用示例
border-collapse 指定是连接还是分隔表格单元格边界。 border-collapse: collapse;
border-spacing 设置相邻表格单元格的边界之间的间距。 border-spacing: 5px;
caption-side 指定表格标题的位置。 caption-side: bottom;
empty-cells 显示或隐藏空表单元格的边框和背景。 empty-cells: hide;
table-layout 指定表布局算法。 table-layout: fixed;

文字属性 (Text)

属性 描述 使用示例
direction 定义文本方向/书写方向。 direction: rtl;
tab-size 指定制表符的长度。 tab-size: 4;
text-align 设置内联内容的水平对齐方式。 text-align: center;
text-align-last 指定当最后一行对齐时如何对齐块或强制换行符之前的行。 text-align-last: justify;
text-decoration 指定添加到文本的装饰(下划线/中划线等) text-decoration: underline;
text-decoration-color 指定的颜色text-decoration-line。 text-decoration-color: red;
text-decoration-line 指定将哪种线条装饰添加到元素。 text-decoration-line: underline;
text-decoration-style 指定text-decoration-line属性指定的线条样式。 text-decoration-style: dotted;
text-indent 缩进文本的第一行。 text-indent: 20px;
text-justify 指定当text-align属性设置为justify时要使用的对齐方法。 text-justify: inter-word;
text-overflow 指定当文本内容溢出块容器时将如何显示。 text-overflow: ellipsis;
text-shadow 将一个或多个阴影应用于元素的文本内容。 text-shadow: 2px 2px 2px #000;
text-transform 转换文本的大小写。 text-transform: uppercase;
line-height 设置文本行之间的高度。 line-height: 1.5;
vertical-align 设置元素相对于当前文本基线的垂直位置。 vertical-align: middle;
letter-spacing 设置字母之间的额外间距。 letter-spacing: 1px;
word-spacing 设置单词之间的间距。 word-spacing: 2px;
white-space 指定如何处理元素内的空白。 white-space: nowrap;
word-break 指定如何在单词内换行。 word-break: break-all;
word-wrap 指定在内容超出其容器边界时是否中断单词。 word-wrap: break-word;

转换属性 (Transform)

属性 描述 使用示例
backface-visibility 指定当面对用户时，转换后的元素的“背面”是否可见。 backface-visibility: hidden;
perspective 定义从中查看对象的所有子元素的透视图。 perspective: 1000px;
perspective-origin 定义透视图属性的原点（3D空间的消失点）。 perspective-origin: 50% 50%;
transform 将2D或3D变换应用于元素。 transform: rotate(45deg);
transform-origin 定义元素的变换原点。 transform-origin: top left;
transform-style 指定如何在3D空间中渲染嵌套元素。 transform-style: preserve-3d;

过渡属性 (Transition)

属性 描述 使用示例
transition 定义元素的两种状态之间的过渡。 transition: width 1s ease-in-out;
transition-delay 指定过渡效果何时开始。 transition-delay: 0.5s;
transition-duration 指定过渡效果要花费的秒数或毫秒数。 transition-duration: 0.3s;
transition-property 指定应将过渡效果应用到的CSS属性的名称。 transition-property: background-color;
transition-timing-function 指定过渡效果的速度曲线。 transition-timing-function: ease-out;

视觉格式属性

属性 描述 使用示例
display 指定元素在屏幕上的显示方式。 display: block;
position 指定如何定位元素。 position: absolute;
top 指定所定位元素的上边缘的位置。 top: 10px;
right 指定所定位元素的右边缘的位置。 right: 20px;
bottom 指定所定位元素底边的位置。 bottom: 15px;
left 指定定位元素左边缘的位置。 left: 25px;
float 指定一个框是否应该浮动。 float: left;
clear 指定相对于浮动元素的元素位置。 clear: both;
z-index 指定定位元素的分层或堆叠顺序。 z-index: 100;
overflow 指定对溢出元素框的内容的处理。 overflow: hidden;
overflow-x 指定当内容超出元素内容区域的宽度时如何管理内容。 overflow-x: scroll;
overflow-y 指定当内容超出元素内容区域的高度时如何管理内容。 overflow-y: auto;
resize 指定元素是否可由用户调整大小。 resize: both;
clip 定义裁剪区域。 clip: rect(10px, 50px, 20px, 0);
visibility 指定一个元素是否可见。 visibility: hidden;
cursor 指定游标的类型。 cursor: pointer;
box-shadow 将一个或多个阴影应用于元素的框。 box-shadow: 3px 3px 5px #888888;
box-sizing 更改默认的CSS框模型。 box-sizing: border-box;

盒子模型

1
2
3
4
5
6
7
8
9
.box-model{
  /*针对边距,即margin或padding*/
  margin: 6px 12px;/*第一个表示水平左/右外边距为6px,第二个表示垂直上/下外边距为12px,padding同理设置*/
  /*针对边框*/
  border: 2px solid rgba(235,70,224,0.5);
  /*针对本体,即body/content区域的调整:直接修改width和height*/
  width: 80px;
  height: 120px;
}

CSS布局

下面通过display来设置:

  • 块级元素 block

    独占一行,在父元素中从上至下排列

    默认元素有:div,p,h1

  • 内联元素元素 inline

    会和同一个父级中相邻元素重叠,不可以设置宽高与盒子模型中的值

    默认元素有:span,a

  • 内联块级元素 inline-block

    与内联元素性质一样,但可以设置宽高与盒子模型中的值

  • 隐藏元素 none

    html代码中存在,但元素完全隐藏,并且不占用空间

弹性布局 flex

强大的布局模型

父元素设置为flex,其子元素全部都会成为弹性布局

默认水平排列,可以通过flex-direction: column来调整排列方向

  • 水平排列的时候,使用justify-content: flex-end;控制对齐方向,当前为末尾对齐,即会靠右边.center对齐在中心

    特有的space-between会将元素压到两侧,中间元素均匀分布

    image-20240715174627565

    space-around会将元素压到离两侧半个间距的距离,元素均匀分布

    image-20240715174655309

  • 垂直排列的时候,使用align-items: flex-start;控制对齐方向,当前为开始出对齐,即会靠住上方

每个项目占据的大小是可调的,比如通过flex: 1使每个元素占用一个比例

如果不希望每个项目紧挨着,可以设置每个项之间的间距,如:gap: 12px;

网格布局 grid

允许按照行和列设置的强大的布局模型

父元素设置为grid,其子元素全部都会成为网格布局

1
2
3
4
5
6
7
8
.grid{
  /*设定为网格布局*/
  display: grid;
  /*设定3行,第一行100像素,第二行200像素,类推*/
  grid-template-rows: 100px 200px 300px;
  /*设定2列,第一列占据的宽是第二列占据的宽的一半,fr是剩余空间单位*/
  grid-template-columns: 1fr 2fr;
}

可以使网格布局自动适应内容

1
2
3
4
5
6
7
8
9
.grid{
  display: grid;
  /*自适应行100px*/
  grid-auto-rows: 100px;
  /*自适应每列等宽*/
  grid-auto-columns: 1fr;
  /*不希望项目紧挨着,设置间隔12px*/
  grid-gap: 12px;
}

定位布局

是元素脱离文档流布局的方式

通过position设置下面项

定位方式 描述 参考系
relative 对元素进行相对定位，相对于其正常位置进行偏移 相对于元素自身
absolute 对元素进行绝对定位，相对于最近的已定位父元素进行偏移，如果没有已定位的父元素，则相对于元素 相对于最近的非static定位的父元素
fixed 对元素进行固定定位，相对于浏览器窗口进行偏移 相对于浏览器窗口
static 默认定位方式，元素在正常文档流中，不进行定位 无参考系，遵循文档流布局

CSS3

keyframes

使得在网页中创建复杂的动画变得更加容易和灵活。通过@keyframes规则，开发人员可以定义动画的关键帧，从而实现更丰富和吸引人的用户界面效果。

路径动画参考

纯CSS实现帅气的SVG路径描边动画效果

路径描边动画

使用stroke-dashoffset 快速实现SVG描边动画

b站视频讲解

SVG最全讲解MDN

主要是依赖下面结果关键属性:

  • stroke-dasharray 控制用来描边的点划线的图案范式,数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。既是外观属性，也可以直接用作一个 CSS 样式表内部的属性

  • stroke-dashoffset 属性指定了 dash 模式到路径开始的距离

    如果使用了一个 <百分比> 值，那么这个值就代表了当前 viewport 的一个百分比,值可以取为负值。

  • stroke-linecap: round可以将线设置为圆角

循环动画原理

间断的线条一直朝一个方向前进原理:

image-20240717153801177

stroke-dashoffset刚好是stroke-dasharray的之和,总之就是移动后会和自身重合,就可以做成循环动画

线条生长原理

image-20240717154657806

如果要要设置从无到有,或者从有到无的动画就是stroke-dasharray只设置一个值,stroke-dashoffset从一个路径总长降为0,或从0升到路径总长

新拟态风格

  • 彩色背景
  • 渐变底色和模糊
  • 左上角高光阴影,右下角灰色阴影
  • 渐变细边框

新拟态风格生成器

3D理论知识

需要了解如下:

  • UV
  • 几何体
  • 法线
  • 顶点
  • 坐标系
  • 材质
  • 摄影机
  • 灯光

WebGL

Canvas

技巧盘点

边框阴影和图像阴影

1
2
3
4
5
6
7
8
.img-1{
  /*边框阴影*/
  box-shadow: 1px 1px 20px yellow;
}
.img-2{
  /*图像阴影*/
  filter: drop-shadow(1px 1px 20px yellow);
}

值得一提的是:鲜艳颜色的阴影就是辉光

js

箭头函数

1
2
3
4
//普通函数
function(){}
//箭头函数(匿名的)
()=>{}

箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直到找到为止

JSON解析

1
var jsonObj=JSON.parse(jsonStr);

JSON

typescript

npm install -g typescript 安装typescript

ts文件编译成js文件:tsc yourfile.ts

typescript 是 javascript 的超集，可编译成 javascript

接口请求

不需要传参数,使用get请求

1
2
3
4
5
6
7
8
import axios from 'axios'
async function getData(){
  const res = await axios({
    url: "https://接口地址",
    method: "get"
  })
  console.log(res,"后端拿到的数据");
}

需要传参数,使用post请求

1
2
3
4
5
6
7
8
9
10
11
import axios from 'axios'
async function getData(){
  const res = await axios({
    url: "https://接口地址",
    method: "post",
    data: {
      //这里传入的数据
    }
  })
  console.log(res,"后端拿到的数据");
}

UI设计技巧

利用好灰阶的两端的三组颜色,中间少用

image-20240920210640943

建立灰色色阶的时候,可以加入一点其他颜色比如蓝色

对比度

网站的对比度指标检查:

网站无障碍检查工具

颜色对比度检查工具

间距

使用1,2,4,8以及往后8的倍数构成

优势:可以适配最大多数情况

前端动画

image-20240826151929936

Lottie-web cpu占用应该比较高

还有svg动画

requestAnimationFrame函数

详细参考

requestAnimationFrame是HTML5中的一个API，它用于在动画渲染过程中请求浏览器在下一次绘制之前执行一个函数。这对于创建平滑的动画和避免浏览器过载非常重要。

在这个例子中，requestAnimationFrame(update)是在update函数执行完毕后，请求浏览器在下一次绘制之前再次执行update函数。这样就可以实现动画的连续渲染，从而使动画看起来平滑自然。

requestAnimationFrame的原理是，它会将传入的函数放入浏览器的渲染队列中，然后在浏览器空闲时自动执行该函数。这样可以确保在动画渲染过程中，浏览器不会被其他任务打断，从而提高动画的性能和稳定性。

requestAnimationFrame是浏览器用于定时循环操作的一个API,通常用于动画和游戏开发。它会把每一帧中的所有DOM操作集中起来,在重绘之前一次性更新,并且关联到浏览器的重绘操作。

与setTimeout或setInterval相比,requestAnimationFrame具有以下优势:

  • 通过系统时间间隔来调用回调函数，无需担心系统负载和阻塞问题，系统会自动调整回调频率。
  • 由浏览器内部进行调度和优化，性能更高，消耗的CPU和GPU资源更少。
  • 避免帧丢失现象，确保回调连续执行，实现更流畅的动画效果。
  • 自动合并多个回调，避免不必要的开销。
  • 与浏览器的刷新同步，不会在浏览器页面不可见时执行回调。

动效生成方案盘点

jitterAI动画模板页面 产出为视频

LottieFiles动画 AE导出矢量动画方案,可产出CSS/SVG动画代码等,可接入vue Lottie 动画由 数据驱动，通过代码解析 JSON 中的图层属性（文本、图片、形状），可在运行时动态修改

Phase动画设计 Phase 导出 Lottie JSON + 动画参数文档（时长、缓动函数），开发者嵌入 WPF

腾讯PAG格式 是一种格式,相比Lottie支持AE所有特效 PAG更强大

Spline中的Hana 从原本的3D设计工具向轻量化2D领域拓展的产物，允许用户直接在Spline中创建平面动画和交互原型

特性 Jitter LottieFiles (Lottie) Phase (Framer Motion类) PAG (腾讯)
核心定位 简易视频/GIF动画模板生成器 轻量矢量动画交付平台 React/Vue声明式动画库 高性能动态模板渲染引擎
输出格式 MP4, GIF, WebM（静态视频） JSON（Lottie格式） React/Vue组件代码 PAG文件（二进制）、视频、序列帧
是否原生支持Vue ❌ 需通过<video>/``嵌入 ✅ 通过lottie-web库集成 ✅ 原生Vue支持（类似API） ✅ 通过libpag库集成
交互性 ❌ 无（纯静态视频） ✅ 可控制播放/暂停/跳转/动态数据绑定 ✅ 完全可编程（响应式驱动） ✅ 支持动画状态控制/文本替换
动画类型 基础MG动画（转场/文字/LOGO） 复杂矢量动画（AE导出） 组件级微交互/布局动画 AE动效模板（含视频/矢量/文本）
技术栈依赖 无 需AE+Bodymovin插件导出JSON Vue/React+动画库 需AE+PAG导出插件
动态修改内容 ❌ 导出后无法修改 ✅ 运行时替换文本/颜色/图层 ✅ 直接修改组件Props/State ✅ 运行时替换文本/占位图
透明度支持 ✅（需导出带Alpha视频） ✅（原生矢量透明） ✅（CSS/SVG原生透明） ✅（支持Alpha通道）
性能 中（视频解码压力） 高（矢量渲染） 极高（纯CSS/GPU优化） 极高（硬件加速+预合成）
商业使用 ✅ 免费 ✅ 免费（企业级需授权） ✅ MIT开源 ✅ Apache 2.0开源
典型场景 社交媒体视频/快速宣传素材 应用内动画/加载动效/图标动画 UI交互动画/组件过渡 短视频模板/直播礼物/复杂动效

关键结论：

  1. Jitter
    → ​仅适合嵌入静态视频，无法在Vue中实现交互，输出为MP4/GIF后直接通过<video>或``加载。
  2. LottieFiles (Lottie)
    → ​Vue最佳实践​：通过lottie-web库加载JSON动画，支持完整播放控制与动态数据绑定，适合复杂矢量动画。
  3. Phase (Framer Motion类声明式库)
    → ​直接写Vue动画代码​：适用于创建高度交互的组件级动画（如拖拽、路由过渡），无需设计工具。
  4. PAG (腾讯)
    → ​高性能动效方案​：通过@libpag/vue集成，支持运行时替换文本/图像，适合需要极高性能的复杂AE动效（如直播礼物）。

PAG格式简介:

当设计师在 Phase 或其他工具（如 Adobe After Effects）中导出 PAG 文件时，实际生成的是一个 .pag 格式的二进制文件，包含动画的所有信息：

  1. 矢量图形（形状、路径）
  2. 位图资源（嵌入的图片）
  3. 动画关键帧（位移、旋转、透明度等）
  4. 时间轴控制（播放速度、循环模式）
对比项 PAG Lottie MP4 视频
渲染性能 ⭐⭐⭐⭐⭐ (GPU 加速) ⭐⭐⭐ (CPU 依赖强) ⭐⭐ (解码开销大)
文件大小 10-100KB 50-500KB 1-10MB
透明度支持 ✅ ✅ ❌（需特殊编码）
运行时编辑 ✅（文本/颜色替换） ❌ ❌
WPF 兼容性 ✅ (官方 SDK) ✅ (需 Lottie-Windows) ✅ (MediaElement)

在 Phase 中导出时选择 PAG 格式

简单动画可用 Lottie，静态循环动画用 GIF，视频仅作为保底方案

能力类型 Lottie 支持情况 PAG 支持情况 优势对比
基础播放控制 ✅ (播放/暂停/进度跳转) ✅ 平手
动态内容替换 ⚠️ (需手动解析 JSON 图层) ✅ 原生 API 支持 PAG 更直接高效
事件触发 ❌ (无内置事件系统) ✅ 时间轴标记事件 PAG 独有
动画片段精准控制 ⚠️ (需代码计算帧范围) ✅ 标记片段播放 PAG 开发效率提升 50%+
性能表现 ⚠️ (复杂动画易卡顿) ✅ 60 FPS 硬解 PAG 碾压级优势

[[WPF#LibPag.WPF|PAG在wpf中的使用参考此处]]

前端3D

web图形API的发展

image-20240803175846355

以WebGL为例,绘制一个三角形竟然需要180多行代码.

因此我们需要使用引擎来简化开发流程

常见引擎可以分为Native端和Web端两大类(左侧为面向Native,右侧为面向Web)

image-20240803180157606

基本概念

glTF（GL Transmission Format）模型

是khronos发布的一种能高效传输和加载3D场景的规范，是web3D 领域中的”JPEG”格式

这种模型可以由3D建模软件,如blender,3DS Max或MAYA制作而成

格式说明

  • glTF：通常以 JSON 格式存储，包含模型的几何形状、材质、纹理、动画等信息，通常会有多个附加文件（如纹理图像）。
  • glb：是 glTF 的二进制格式，所有信息（包括几何、材质和纹理）都被打包在一个文件中，便于传输和使用。

因此，glb 是 glTF 的一种实现方式，适用于需要将所有数据打包在一起的场景。

下面是基于组件的架构系统:是组合优于继承的

  • 场景: 可以理解为舞台,一个引擎可以有多个场景,但是只有一个场景是当前被激活的
  • 实体: 可以理解为舞台上的演员,可以被创建可以被销毁
  • 组件: 给实体赋予功能,比如想让实体变成一个相机,只需要给实体添加相机组件

其他概念

  • 相机: 三维投影的概念抽象

    近裁剪平面、远裁剪平面 和 视角会形成一个视椎体，在视椎体内部的物体是会被投影到摄像机里的，也就是会渲染在画布上

    image-20240921090758458

    透视相机: 和人眼效果一致(大部分场景使用)

    正交相机: 远近一样大

  • 灯光

    方向光,点光源,聚光灯,环境光(均匀光照)

    image-20240921091021932

  • 网格 材质

    设置一个实体的网格与材质即可渲染物体

    image-20240921091128223

    材质是决定物体和光的关系

    纹理是决定模型表面的图案

  • 骨骼动画 形变动画

    复杂动画可以使用状态机组织动画的编排

  • 物理系统

    物理引擎通过为刚性物体赋予真实的物理属性的方式来计算运动,旋转和碰撞反映

  • 交互

    二维点转换到三维的方式:可以使用射线检测

    射线可以理解成 3D 世界中一个点向一个方向发射的一条无终点的线。通过射线投射，可以在点击屏幕时，拾取场景中的物体进行人机互动

如何把模型展示在网页上

  • 初始化引擎
  • 激活场景，场景具有背景
  • 调用引擎的资源管理器加载glTF模型
  • 在场景上增加一个实体
  • 给实体加上相机组件
  • 给实体加上灯光组件
  • 变换：位移旋转缩放
  • ✅静态展示
  • 动画：骨骼动画/形变动画
  • 脚本逻辑控制
  • 物理系统，计算运动，旋转，碰撞
  • 交互：二维点映射到三维，射线检测
  • ✅动起来

材质盘点

  • rough 粗糙的
  • smooth 光滑的
  • metal 金属材质
  • glass 玻璃材质
  • water 类水

spline

在线版网址

汉化下载

官方文档

号称最简单易上手的建模软件,只适用于简单的几何卡通设计,不擅长做太复杂的效果

知乎讲解

Node.js

node.js:一个基于Chrome V8引擎的JavaScript运行时(运行环境) (node.js无法调用DOM,BOM和Ajax等浏览器内置API)

截屏2022-09-12 21.29.01
  • 浏览器是JavaScript的前端运行环境
  • Node.js是JavaScript的后端运行环境

XMLHttpRequest也是V8引擎下提供的一个api

Node.js可以做什么?

比如说:

  1. 基于Express框架(http://www.expressjs.com.cn/),快速构建Web应用
  2. 基于Electron框架(https://electronjs.org/),可以构建跨平台的桌面应用
  3. 基于restify框架(http://restify.com/),可以快速构建API接口项目
  4. 读写和操作数据库,创建实用的命令行工具辅助前端开发,等等

Node.js下载

  • LTS:长期稳定版(long time stable)
  • Current:当前最新版

node -v查看node.js版本号

node 要执行的js文件的路径执行js文件代码(代码修改后不能即时响应,node换成nodemon就可以即时响应)

node.js安装

可以使用nvm工具管理不同版本的node

nvm install 20安装20版本的npm

nvm ls/list查看安装了哪些版本的nvm

nvm use 版本号使用哪个已经安装的版本号的node

fs文件系统模块

fs模块是Node.js官方提供的,用来操作文件的模块,它提供了一系列的方法和属性,用来满足用户对文件的操作需求,如:

  • fs.readFile()方法,用来读取指定文件中的内容

    1
    2
    3
    fs.readFile(path[, options], callback)//[]括起来表示可选参数
      //path:文件路径;option:编码格式;callback:通过回调函数拿到读取的结果(回调参数为1.errno,2.data)
    //如果成功err里存NULL,data存读到的数据;失败的话errno存错误编号,data存undefined

  • fs.writeFile()方法,用来向指定的文件中写入内容

    1

如果要在JavaScript代码中,使用fs模块来操作文件,则需要使用如下的方式先导入它:const fs = require('fs')

Node.js相关工具

nvm

nvm的安装参考

常用命令

  • 查看可安装版本:nvm ls-remote

  • 查看已安装版本:nvm ls

  • 安装指定版本:nvm install <Node.js的版本号>

  • 卸载指定版本:nvm uninstall <Node.js的版本号>

  • 查看当前版本:nvm current

  • 切换至指定版本

    nvm use <Node.js的版本号>

    nvm use <别名>

  • 设置默认版本:nvm alias default <Node.js的版本号>

  • 对指定版本添加别名:nvm alias <别名> <Node.js的版本号>

  • 删除已定义别名: nvm unalias <别名>

XMLHttpRequest

  • get代表从服务器获取资源
  • post代表为服务器添加资源
  • put/patch代表修改服务器资源，put更新资源的全部，patch根据资源的局部
  • delete代表删除服务器资源

HTTP/1.1 定义的请求方法有8种：GET（完整请求一个资源）、POST（提交表单）、PUT（上传文件）、DELETE（删除）、PATCH、HEAD（仅请求响应首部）、OPTIONS（返回请求的资源所支持的方法）、TRACE（追求一个资源请求中间所经过的代理）。最常的两种GET和POST，如果是RESTful接口的话一般会用到GET、POST、DELETE、PUT。

同步和异步的区别：同步和异步关注的是消息通信机制(synchronous communication/ asynchronous communication)。同步，就是调用某个东西是，调用方得等待这个调用返回结果才能继续往后执行。异步，和同步相反 调用方不会理解得到结果，而是在调用发出后调用者可用继续执行后续操作，被调用者通过状态来通知调用者，或者通过回调函数来处理这个调用

使用XMLHttpRequest的方法

1

vue

一个JavaScript框架,目的是将html和JavaScript连起来,让网页能动起来

下面只介绍了基本用法,详情参考官方文档

一个Vue页面分为三个部分

  • script标签: 写js的地方
  • template标签: 写HTML的地方
  • style标签: 写css的地方

vue中支持在html中使用变量通过{{变量名}}方式

最基础的一些使用方法：

  • 直接将数据渲染到dom
  • v-bind:attribute名=”Vue的键”,将属性绑定到Vue的键
  • v-if=”Vue的键”,将Vue的键（bool值）绑定元素是否显示
  • v-for=”xxx in xxxs”,将Vue的键xxxs(数组)，数组全部渲染出来
  • v-on:click=”函数名”,绑定函数到事件，函数直接在Vue实例对象中，可以直接使用那些数据
  • v-model=”Vue的键”，双向绑定输入和变量

开发环境搭建

安装好node.js与npm后,还需要安装webpack和vue-cli

  • webpack： Vue的组件都是通过 .vue 或者像微信小程序的.wxml 和.wcss 等自定义的，组件都无法被用户通过各种浏览器解析，需要被翻译打包成 js文件
  • vue-cli： 用来生成模版的 Vue 工程，相当于按照设计好的图纸来盖房子

安装webpack

1
sudo npm install webpack -g

注意：使用上面语法执行npm run dev 可能报错!

解决方法：MAC电脑出现 .bin/webpack-dev-server permission denied 提示权限问题,为了避免出现这个问题你可以采取下面语法

1
sudo npm install webpack-dev-server -g

安装vue脚手架

Vue CLI 比如 Create Vue 

1
sudo npm install -g @vue/cli

使用vue list/vue --version查看安装结果

初始化项目

  • 已有vue项目，则进入项目根目录 ，安装项目依赖

    npm i安装项目需要的所有依赖

  • 还没有vue项目,则

    1
    2
    #安装 vue 路由模块vue-router和网络请求模块vue-resource
    sudo npm install vue-router vue-resource --save

–save选项是指在安装npm包时，将包的名称和版本号添加到项目的package.json文件中的dependencies部分。这样做可以确保其他开发人员在克隆项目并运行npm install时，会安装相同的包及版本。

更标准的做法

  1. 打开终端或命令行，进入你想创建项目的目录，然后运行以下命令来创建一个新的 Vue 项目

    vue create my-vue-app

  2. 安装依赖并启动开发服务器

    1
    2
    3
    4
    5
    6
    7
    npm install
    #上面命令有可能会报权限错误,重点在于:将所有者修改回自己(以下面项目为例)
    sudo chown -R $(whoami) /Users/zeroko/Documents/project/vue_project/test-vue

    #构建项目
    npm run serve #开发版本
    npm run build #生产版本

  3. 如果一切配置正确，你应该会看到类似以下的输出：

    1
    2
    3
    4
    DONE  Compiled successfully in 1234ms                                      
    App running at:
    - Local:   http://localhost:8080/ 
    - Network: http://192.168.1.2:8080/

src/App.vue默认有vue代码

修改代码后保存文件，浏览器会自动刷新页面

最后:

npm run dev启动项目

cnpm run dev 后面的dev在项目中表示的是dev环境，是在package.json文件里面，scripts字段定义的对象脚本，当然了，还可以有其他的环境，不同的环境对应的配置不同，在各境上运行只需要执行对应的命令即可。（可能有的是cnmp run sever，根据自己项目的配置启动即可）

此处额外提供一个最简单的App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div id="app">
    <h1>Hello Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

vue中创建响应式变量

1
const str = ref('123')

创建的响应式变量,在template的""中可直接使用str,在标签之间的文本中通过{{str}}来使用;而在script中,通过str.value来使用

{{}}中是可以执行运算公式的

在Vue中，响应式变量是指当数据发生变化时，页面会自动更新以反映这些变化的特性。Vue通过使用数据绑定和依赖追踪来实现响应式变量。

当你在Vue实例中声明一个变量时，Vue会将这个变量转换为响应式变量。这意味着当这个变量的值发生变化时，与之相关联的视图会自动更新以反映这个变化。

Vue实现响应式变量的原理是通过使用Object.defineProperty()方法来劫持数据的访问和修改，从而能够在数据发生变化时通知相关的视图进行更新。这种机制使得开发者无需手动操作DOM，而是专注于数据的处理和逻辑，让Vue框架来处理视图的更新。

当使用ref属性引用一个响应式变量时，当这个响应式变量发生变化时，通过ref引用的元素也会相应地更新。这样，ref属性可以帮助我们在需要直接访问DOM元素或组件实例时，保持视图与数据的同步更新。

事件绑定

vue中实现一个事件绑定:

  • @submit：监听表单提交事件
  • @input：监听输入框的输入事件
  • @change：监听输入框的值变化事件
  • @mouseover：监听鼠标移入事件
  • @mouseleave：监听鼠标移出事件
1
2
3
4
5
6
7
8
9
10
<script setup>
  function add(){
    console.log('123');
  }
</script>
<template>
	<div @click="add" class="todo-button">
    Add Todo
  </div>
</template>

需要调用事件的时候传入参数,可以使用

1
<div @click="add(参数)" class="todo-button">

事件绑定中也可直接写代码:

1
<button type="button" @click="number++">{{ number }}</button>

变量绑定

1
2
3
4
5
6
7
8
<script setup>
	//const value = '123'//原本是这样的,改成下面vue的形式
	import {ref} from 'vue';
	const value =ref('123')
</script>
<template>
	<input v-model="value"  class="todo-input"/>
</template>

value变量与input控件双向绑定成功

  • 如果需要在script中使用响应式变量的值需要使用:value.value,前一个value是绑定的响应式变量,后一个 value才真正取到变量
  • 如果需要再template中使用响应式变量的值,只需要直接使用变量名字
  1. v-bind用于动态绑定数据到HTML元素的属性上，实现数据的单向绑定。通过v-bind，你可以将Vue实例中的数据动态地绑定到HTML元素的属性上。
  2. v-model用于实现表单元素和Vue实例数据的双向绑定。当表单元素的值发生变化时，Vue实例中的数据也会相应地更新；反之，当Vue实例中的数据发生变化时，表单元素的值也会随之更新。

侦听器

下面实现的效果为:当str变化的时候,会被调用add方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>
	import{ref,watch} from 'vue'//此处要添加watch才能添加监听器功能
  const str=ref('');
  
  function add(){
	console.log(123);
}
  /*
  //这种方式可以获得修改前后的值
  function add(newValue,oldValue){
  	console.log('新的值:'+newValue , '旧的值:'+oldValue);
  }
  */
  
  watch(str,add)//此处连接str和add方法
</script>

如果侦听器侦听的响应式变量是个对象,而变化的只是对象中的一个成员的值,那么对应的侦听器将不会被触发,此时可以通过下面的方式实现监听

1
2
watch(str,add,{deep: true})
//此处的{deep: true}表示深度监听

列表渲染

v-for是根据list数组中的个数,来创建多少个中间的块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
  <div id="app">
    <h1>Hello Vue!</h1>
    <!-- eslint-disable-next-line vue/require-v-for-key -->
    <div v-for="item in list" :class="[item.isComplete ? 'complete' : '']">
      <!--中间的块-->
      <input type="checkbox" v-model="item.isComplete"/>
      <span class="name">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const list = ref([
      {
        isComplete: false,
        text: '吃饭',
      },
      {
        isComplete: false,
        text: '睡觉',
      },
      {
        isComplete: false,
        text: '打豆豆',
      },
    ]);

    return {
      list,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.complete {
  text-decoration: line-through;
}
</style>

<!-- eslint-disable-next-line vue/require-v-for-key -->用于禁禁用 ESLint 的 vue/require-v-for-key 规则,防止必须在v-for中使用key的规则阻止编译

更标准的做法是为v-for添加key,如下:(此处添加的key是index,也可以添加别的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<template>
  <div id="app">
    <h1>Hello Vue!</h1>
    <div v-for="(item, index) in list" :key="index" :class="[item.isComplete ? 'complete' : '']">
      <!--中间的块-->
      <input type="checkbox" v-model="item.isComplete"/>
      <span class="name">{{item.text}}</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const list = ref([
      {
        isComplete: false,
        text: '吃饭',
      },
      {
        isComplete: false,
        text: '睡觉',
      },
      {
        isComplete: false,
        text: '打豆豆',
      },
    ]);

    return {
      list,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.complete {
  text-decoration: line-through;
}
</style>

往往需要使用具有稳定唯一标识符的属性作为key,如:

<div v-for="item in list" :key="item.text"/>

动态绑定类名

1
:class="[item.isComplete ? 'complete' : '']"

:class 是 Vue 中用于动态绑定 CSS 类的指令。它允许你根据数据的变化动态地添加或移除 CSS 类，从而实现条件样式。

也可以直接通过响应式变量传入类名

动态绑定还有在 <img :src="..." />的过程中动态绑定图片源

条件渲染

1
2
<div v-show="true/false/bool变量"/>
<div v-if="true/false/bool变量"/>

v-show和v-if都可以控制是否展示该控件

  • v-show是虽然可以控制代码是否展示,但是代码本身可以可以在浏览器开发者工具查看,代码本身是存在的

    使用v-show,盒子是会创建的,只是给他添加了style="display:none;"隐藏了起来

  • v-if为false的时候,代码都不将不存在

    盒子不会被创建

对于需要频繁切换展示的使用v-show,对于第一次创建就确定是否展示的,后续不变的使用v-if

组件的注册和使用

可以把封装成一个组件,每次使用只需要写一个名字就可以了,组件可大可小,只要是能公用的东西,我们都可以封装成组件

在vue中,每一个vue页面都可以理解为一个组件,有个文件夹components,就是给我们放组件的

父子组件的相互通信

  • vue支持父组件往子组件传值,可以使用vue的defineProps
  • vue也支持子组件往父组件传值,可以使用vue的defineEmits

案例

下面案例带传入信息给子组件,也带接受子组件传出的信息

创建组件

比方说在components中创建一个button组件:components文件夹下新建文件button.vue,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 <script setup>
   //引入defineProps函数,这个函数就是用来定义我们传进来的变量的,也叫props
   //defineProps用于支持父组件往子组件传值,defineEmits用于支持子组件往父组件传值
   import (defineProps,defineEmits} from `vue`
   
   const props = defineProps(['text'])//数组中的每一项都是一个字符串,字符串就是我们要声明的变量的名字
   //比如这里的text,就可以在外界使用该组件的时候通过text传进来值
   
   const emit = defineEmits(['ok'])//定义传出的值的键
   
   function send(){
     //处理数据
     //处理完后将结果返回出去
     emit('ok','hello')
   }
   
)</script>

<template>
	<div class="button" @click="send">
    <!--此处使用传入的props-->
  	{{props.text}}
  </div>
</template>

<style scoped>
  .button{
    margin: 100px 0 0 200px;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: antiquewhite;
    border-radius: 10px;
  }
</style>

上面创建了一个组件

使用组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script setup>
  //myButton是使用的时候随意起的名字
	import myButton from './components/button.vue
  
  //此方法用于接受子组件传出的值
  function add(str){
    console.log(str)
  }
</script>

<template>
	<!--使用组件(此处传入的text将会传入props中)-->
<!--使用组件(此处ok是子组件中使用defineEmits定义的键,当子组件中调用emit('ok',''hello')时,此代码中的add函数将被回调,add函数的参数即为传出的hello)-->
	<myButton text="你好" @ok="add"></myButton>
</template>

前后端交互

使用axios库来发起网络请求

axios 是一个流行的 JavaScript 库，用于在浏览器和 Node.js 中进行 HTTP 请求。它可以让您发送异步请求到服务器并处理响应数据。axios 支持 Promise API，并且可以拦截请求和响应，提供了许多便捷的方法来处理数据。您可以使用 axios 发送 GET、POST、PUT、DELETE 等类型的请求，并对请求进行配置和处理错误。axios 是一个强大而灵活的工具，适合用于处理网络请求和构建前端应用。

安装:npm install axios

下面的代码案例是继承于列表渲染处的代码

get方法演示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup>
  import axios from 'axios'
	
	const list = ref([])

  async function getList(){
    const res = await axios({
      url: "https://q6zv39.laf.run/get_list",
      method:"GET",
    })
    //获取到的值赋给上面定义的list变量,res.data.list是因为接口传回来的数据就有几层json嵌套,进去data中找到list
    list.value = res.data.list
  }

	//vue3的setup语法呢,create构造函数就是这样直接调用就可以了,即想让网页渲染的时候就执行下面的函数,直接在script标签中直接调用就可以了
  getList()
</script>

post方法演示新增数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script setup>
  import axios from 'axios'

  async function add(){
    const res = await axios({
      url: "https://q6zv39.laf.run/add-todo",
      method:"POST",
      data: {
        value: value.value,
        isCompleted: false,
      },
    })
    //获取到的值赋给上面定义的list变量,res.data.list是因为接口传回来的数据就有几层json嵌套,进去data中找到list
    getList()//调用这个刷新结果
  }
  
</script>

post方法演示修改数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>
  import axios from 'axios'

  async function update(id){
    const res = await axios({
      url: "https://q6zv39.laf.run/update-todo",
      method:"POST",
      data: {
        id,
      },
    })
    //获取到的值赋给上面定义的list变量,res.data.list是因为接口传回来的数据就有几层json嵌套,进去data中找到list
    getList()//调用这个刷新结果
  }
  
</script>

post方法演示删除数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script setup>
  import axios from 'axios'

  async function del(id){
    const res = await axios({
      url: "https://q6zv39.laf.run/del-todo",
      method:"POST",
      data: {
        id,
      },
    })
    //获取到的值赋给上面定义的list变量,res.data.list是因为接口传回来的数据就有几层json嵌套,进去data中找到list
    getList()//调用这个刷新结果
  }
  
</script>

过渡动画

过渡动画二要素

  1. 怎么变化
  2. 变化成啥样

css原生方法实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
 <div class = "cnt-box">
  数值:<button class="btn" :class="{changed:number%2==0}" type="button" @click="number++">{{ number }}</button>
 </div>
</template>

<script setup>
import { ref } from 'vue';
const number = ref(1);

</script>

<style>
.btn{
  transition: all 1s ease;
}

.changed{
  transform: translate(100px,0) rotate(360deg);
}
</style>

transtion说明:

  • all 过渡效果的css属性名称,all为所有的
  • 1s 过渡动画执行的时间,1秒
  • ease 速度曲线函数,ease为快开始,慢结束
    • ease：默认值，缓慢加速，然后缓慢减速。是最自然、最符合人们感知的动画效果之一,最常用
    1. linear：匀速动画，速度保持恒定。
    2. ease-in：缓慢加速。
    3. ease-out：缓慢减速。
    4. ease-in-out：先缓慢加速，然后缓慢减速。
    5. cubic-bezier：自定义贝塞尔曲线，可以通过控制四个点的坐标来定义动画速度变化,使用如:cubic-bezier(1,0.5,0.8,1)

vue内置过渡动画组件

详情参考官方文档

Transition和TransitionGroup

Transition组件

可以由一下条件之一触发: v-if,v-show,由特殊元素<component>切换的动态组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<template>
 <div class = "cnt-box">
  数值:<button class="btn" :class="{changed:number%2==0}" type="button" @click="number++">{{ number }}</button>
 </div>
<Transition name="fade">
  <div v-if="number%2==0">偶数
  </div>
</Transition>


</template>

<script setup>
import { ref } from 'vue';
const number = ref(1);

</script>

<style>
.btn{
  transition: all 1s ease;
}

.changed{
  transform: translate(100px,0) rotate(360deg);
}

  /*这两个的时机参考下方的图片*/
  /*fade对应的是Transition的name*/
.fade-enter-active, .fade-leave-active{
  transition: opacity 0.5s ease;
}

.fade-enter-from, .fade-leave-to{
  opacity: 0;
}
</style>

image-20240715104420639

生命周期钩子

在Vue.js中，组件的生命周期钩子函数和选项是非常重要的一部分。下面是一些常用的生命周期钩子函数和选项：

生命周期钩子函数：

  • beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
  • beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
  • mounted：实例被挂载后调用，这是当 el 被新创建的 vm.$el 替换，并挂载到实例上去之后特指的。
  • beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
  • updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：实例销毁后调用。

选项：

  • data：组件的数据对象，可以在模板中通过 {{ }} 语法访问。
  • methods：定义组件的方法，可以在模板中通过事件监听器调用。
  • computed：定义组件的计算属性，这些属性会根据依赖的数据动态计算并缓存结果。
  • watch：定义组件的观察者，当依赖的数据变化时，观察者函数会被调用。

vue用到的相关工具

vscode插件

  • ESLint 用于代码格式检查
  • Prettier 用于代码格式化
  • Browser Lite 实时内嵌预览插件(与很多插件对比测试过,这款插件最好用)

vite

vite是对webpack的一种替代

Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

使用方式:npm create vite@latest

nuxt.js

基于Vue.js的程序,用于构建服务端渲染(SSR)和静态生成的应用程序

前端常用工具命令

curl

跨平台,不需要浏览器也可以作为http客户端发起请求,同时返回响应

详细用法参考

npkill

需要安装的第三方工具,用于管理所有npm包,特别使用用于整理或清除全系统的某些nuget包

前端vscode插件

  • EchoAPI for VSCODE 免费支持离线使用的请求测试插件,与postman脚本完全兼容

  • CSS Peek 在html标签的class上可以按住ctrl/command鼠标放置会显示实际的css效果,点击跳转

  • Error Lens 使用彩色文本在代码后位置直接报错

  • Code Spell Checker 拼写错误检测

  • import Cost 用于优化Web程序的性能,将显示import压缩前后的导入字节大小,以此得知网络速度慢的原因

  • GitLens 提供git的上下文信息,最近谁编辑了此段代码

  • Auto Rename Tag 自动同步重命名一对html标签的另一个

  • Live Server 可以启动本地服务,只需要点击右下角的Go live,修改代码时自动更新页面,但是不能内嵌于IDE

    不仅仅是实时刷新,更重要的好处是比如通过fetch获取网络数据时,如果通过磁盘访问运行项目将报错,可实时服务器上不会

    Browser Lite 实时内嵌预览插件(与很多插件对比测试过,这款插件最好用)

  • Bracket Pair Color DLW 缩进的颜色拓展

  • Prettier 格式化代码,需要在vscode的设置中搜索Editor:default format设置为使用prettier

跨域问题详解

跨域是浏览器加载了与当前域名、协议、端口不同另一站点下的资源，这与各大支持JavaScript的浏览器的同源策略是违背的。所谓同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

跨域并不会阻止请求的发出，也不会阻止请求的接受，跨域是浏览器为了保护当前页面，你的请求得到了响应，浏览器不会把响应的数据交给页面上的回调，取而代之的是去提示你这是一个跨域数据。

跨域数据

解决方法1

Access-Control-Allow-Origin响应头

通过Access-Control-Allow-Origin响应头，就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的”源”，则不要拦截此响应，允许数据通行。比如说下面示列了一个场景

1
2
3
4
5
6
//从 http://example.com 界面发出了一个请求到：http://example2.com，因为不同源，导致了跨域。
//而 http://example2.com 返回了下面的响应头：
Content-Type: application/json;charset=utf-8
Content-Length: 3210
Server: apache
Access-Control-Allow-Origin: http://example.com

由于浏览器检测到 http://example2.com 的响应头中显示的写着：Access-Control-Allow-Origin: http://example.com/，也就是，如果请求数据的源是 http://example.com 则可以允许访问返回的数据。这样浏览器就不会抛出错误提示，而是正确的将数据交给你的ajax回调。

在这个过程中跨域也存在，但跨域并没有导致问题了。因为后端的响应充分考虑到了某个页面源要使用这个资源，早就帮对方做好了跨域资源共享。这才可以顺利的进行对接。

所以，要最简单解决跨域导致的问题，只需要后端响应时，在响应头里指定允许调用资源的源就可以了。除了设定指定的源以外，你还可以直接写一个*号，这样就表示：此数据允许被任何其他的源进行获取。

其实除了它，还有与之相关的更多字段，它们也起到了更多的个性定值效果。下面进行了详细介绍。

header头字段 含义 取值
Access-Control-Allow-Credentials 是否可以将对请求的响应暴露给页面。返回true则可以，其他值均不可以 true/false
Access-Control-Allow-Headers 用于服务器告知浏览器允许使用哪些自定义请求头,以便进行跨域请求的控制和安全性限制。 自定义请求头(多个使用逗号隔开)
Access-Control-Allow-Methods 此次请求中可以使用哪些请求方法 GET/POST(多个使用逗号隔开)

未完待续,其他方法参阅此处

简单反向代理实现

主要功能是实现一个 Google PaLM API 的代理

下面贴一个使用ts实现的简单方向代理,同时解决跨域问题:

  1. 当收到一个请求时，首先检查请求的方法是否为 OPTIONS。如果是，直接返回一个带有 CORS 头信息的空响应。
  2. 如果请求的路径是 “/“，则返回一个包含特定信息的 HTML 页面。
  3. 否则，将请求的路径与 Google API 的基础 URL 拼接，处理请求的查询参数，并根据指定的键值挑选请求的 Headers。
  4. 使用 fetch 函数向 Google API 发送请求，并将原始响应的 Headers 与 CORS 头信息合并，然后返回经过处理的响应对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import { Context } from "@netlify/edge-functions";

const pickHeaders = (headers: Headers, keys: (string | RegExp)[]): Headers => {
  const picked = new Headers();
  for (const key of headers.keys()) {
    if (keys.some((k) => (typeof k === "string" ? k === key : k.test(key)))) {
      const value = headers.get(key);
      if (typeof value === "string") {
        picked.set(key, value);
      }
    }
  }
  return picked;
};

const CORS_HEADERS: Record<string, string> = {
  "access-control-allow-origin": "*",
  "access-control-allow-methods": "*",
  "access-control-allow-headers": "*",
};

export default async (request: Request, context: Context) => {

  if (request.method === "OPTIONS") {
    return new Response(null, {
      headers: CORS_HEADERS,
    });
  }

  const { pathname, searchParams } = new URL(request.url);
  if(pathname === "/") {
    let blank_html = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Google PaLM API proxy on Netlify Edge</title>
</head>
<body>
  <h1 id="google-palm-api-proxy-on-netlify-edge">Google PaLM API proxy on Netlify Edge</h1>
  <p>Tips: This project uses a reverse proxy to solve problems such as location restrictions in Google APIs. </p>
  <p>If you have any of the following requirements, you may need the support of this project.</p>
  <ol>
  <li>When you see the error message &quot;User location is not supported for the API use&quot; when calling the Google PaLM API</li>
  <li>You want to customize the Google PaLM API</li>
  </ol>
  <p>For technical discussions, please visit <a href="https://simonmy.com/posts/使用netlify反向代理google-palm-api.html">https://simonmy.com/posts/使用netlify反向代理google-palm-api.html</a></p>
</body>
</html>
    `
    return new Response(blank_html, {
      headers: {
        ...CORS_HEADERS,
        "content-type": "text/html"
      },
    });
  }

  const url = new URL(pathname, "https://generativelanguage.googleapis.com");
  searchParams.delete("_path");

  searchParams.forEach((value, key) => {
    url.searchParams.append(key, value);
  });

  const headers = pickHeaders(request.headers, ["content-type", "x-goog-api-client", "x-goog-api-key", "accept-encoding"]);

  const response = await fetch(url, {
    body: request.body,
    method: request.method,
    duplex: 'half',
    headers,
  });

  const responseHeaders = {
    ...CORS_HEADERS,
    ...Object.fromEntries(response.headers),
    "content-encoding": null
  };

  return new Response(response.body, {
    headers: responseHeaders,
    status: response.status
  });
};

前端知名库盘点

前端权限bug

npm 的缓存文件夹中包含一些由 root 用户拥有的文件，这可能是由于以前版本的 npm 中的一个 bug 导致的

解决方案参考如下:

运行以下命令来永久修复此问题：

1
sudo chown -R 501:20 "/Users/zeroko/.npm"

这条命令的作用是将 /Users/zeroko/.npm 目录及其所有子文件和子目录的拥有者更改为当前用户（其中 501:20 是当前用户的 UID 和 GID）。

前端风格盘点

  • 弥散风

    通过色彩的模糊渐变和分散,营造出一种朦胧,虚幻的视觉效果.除了色彩渐变,还涉及到图形的柔化边缘处理

  • 1

好用谷歌浏览器拓展盘点

atomic-css-devtools 直接列出实际的CSS实际设置

调试AI助手浏览器拓展Jam,个人免费

2024.11前端技术盘点:

image-20241123180036215

网站统计平台盘点

平台 是否免费 免费额度/限制 付费方案 适用人群
百度统计 基础功能免费 未备案域名无法使用；分析云免费版功能有限 分析云分档（基础/强化/旗舰/定制），按数据量/功能定价（需联系销售） 已备案国内企业
微软 Clarity 完全免费 无流量或功能限制 无付费版 中小网站，重用户行为分析
Google Analytics 免费版+付费版 免费版：1000万hits/月，数据抽样 GA 360：年费$15万，支持10亿hits/月、无抽样数据 跨境业务/大型企业
Yandex Metrica 完全免费 无公开限制，支持热力图/会话回放等高级功能 无付费版 需热力图分析的开发者
Cloudflare 分析 完全免费 无代码加载，基础流量数据 无付费版 个人博客/静态站点
统计鸟 完全免费 无暗链跳转，支持多维度分析 无付费版 中小站长，预算有限
  • 追求高级功能（热力图/回放）：优先选择 Clarity 或 Yandex Metrica，完全免费且无限制。
  • 国内备案企业：百度统计免费版够用，但需留意未来可能的收费趋势。
  • 跨境业务/大型企业：GA 免费版或GA 360（预算充足时）。
  • 极简需求/个人站点：Cloudflare 分析或统计鸟，零成本且部署简单

最推荐尝试Umami,最新推出的,免注册开源纯免费

百度统计

百度统计

优点：国内主流厂商，功能全面，数据维度丰富，适合大多数网站。

缺点：未备案域名无法接入；界面偏传统。

适用人群：已备案的企业网站、国内运营项目。

微软Clarity

微软Clarity

优点：支持热力图、会话回放等功能，便于用户行为分析；无访问限制。

缺点：统计维度较少，缺乏高级营销指标。

适用人群：重视用户行为分析的中小型网站。

Google Analytics

Google Analytics

优点：功能最全面的统计工具之一，支持深度营销分析和多维度报表。

缺点：国内无法直接访问，需要科学上网，部署及使用门槛高。

适用人群：面向海外用户的站点或有跨境业务的企业。

Yandex Metrica

Yandex Metrica

优点：提供热力图、会话回放，功能与Clarity类似；俄罗斯知名厂商支持，稳定可靠。

缺点：注册流程相对复杂，部分界面无中文支持。

适用人群：有海外访问需求或需热图分析的开发者

Cloudflare Web Analytics

Cloudflare Web Analytics

优点：部署简单、加载快，对隐私友好；无需在页面中加载复杂代码。

缺点：功能基础，仅适合查看简单流量数据，无SEO维度支持。

适用人群：个人博客、静态站点、对数据要求不高的项目。

统计鸟

统计鸟

Umami

无罪恶感网站流量统计工具

谷歌分析的隐私平替。用 20 行 SQL 替代谷歌追踪，统计网站流量时不侵犯用户隐私

它不追踪用户个人数据、无需 Cookie 弹窗，仅用 1 个脚本（<3KB）即可统计访客行为，数据完全由用户自主掌控

1分钟docker部署,实时流量、来源渠道、热门页面等核心指标一目了然

Figma

相关插件盘点

好用

Figma to HTML with Framer 复制Figma到Framer用到的插件,可配合Figma设计图发布,借此可获得代码

Builder.io 网页url转Figma设计图

html.to.design 网页url转Figma设计图

Locofy Lightning Figma设计图转代码(目前免费内测)

Vectary | 3D Studio Lite 使用3d模型进行拍照出二维资源

废

CodeFun Figma设计图转代码(试用额度),并且只能移动端