css实现三角形
css实现三角形的方法：1、利用高宽为零的容器和透明的border;
2、利用线性渐变linear-gradient;
3、利用transform:rotate配合overflow:hidden
使用 border 属性给定一个宽度和高度都为 0 的元素，其 border 的任何值都会直接相交，我们可以利用这个交点来创建三角形。也就是说，border属性是三角形组成的，下面给每一边都提供不同的边框颜色：
123456.triangle { width: 0; height: 0; border: 100px solid; border-color: orangered skyblue gold yellowgreen;}
将元素的长宽都设置为0，效果是这样的：
可以看到，我们已经基本上实现了4个三角形形状。所以可以根据border这个特性来绘制三角形。
如果想要一个指向下面的三角形，可以让 border 的上边可见，其他边都设置为透明：
1234567.triangle { width: 0; height: 0 ...
js的Object.keys方法
今天看到项目中有使用到Object.keys方法，又去查阅MDN文档学习了一下。一、语法12345Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组
二、处理对象，返回可枚举的属性数组123let person = {name:"张三",age:25,address:"深圳",getName:function(){}}Object.keys(person) // ["name", "age", "address","getName"]
三、处理数组，返回索引值数组123let arr = [1,2,3,4,5,6]Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]
四、处理字符串，返回索 ...
Ts泛型的使用
泛型泛型是可以在保证类型安全的前提下，让函数等与多种类型一起工作，从而实现复用，常用于：函数、接口、class中。日常我们创建的函数，传入什么数据就返回什么数据本身，即参数与返回值的类型相同，如下：
123function add(value: number): number{return value}
而为了能够让函数接收任何类型，我们以前可以将参数类型修改为any。但这样就失去了TS的类型保护，类型不安全，泛型在保证类型安全的同时（不丢失类型信息），可以让函数与多种不同的类型一起工作，灵活可复用。
泛型函数使用创建泛型函数：我们在创建函数的同时在函数名称后面添加 <> (尖括号)，尖括号中添加类型变量，如下：
当然创建泛型函数的类型变量可以是任意合法变量名称，不仅仅是下面例子中的type。
12345// 类型变量 type 是一种特殊类型的变量，它只处理类型不处理值。// 该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体类型由用户调用函数时指定)function add<type>(value: type): type ...
websoket
什么是WebSocket？WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它的出现是为了解决 Web 应用中实时通信的需求。传统的 HTTP 协议是基于请求-响应模式的，即客户端发送请求，服务器响应请求，然后连接关闭。然而，有些场景需要保持长时间的连接，以实现实时性较高的数据交换，这就是 WebSocket 出现的背景。
WebSocket 具有以下特点：
全双工通信：WebSocket 允许客户端和服务器在连接建立后双向传输数据，不像传统的 HTTP 请求-响应模式那样需要等待服务器的响应。
持久连接：一旦建立 WebSocket 连接，它将保持打开状态，允许在连接的生命周期内随时传输数据，避免了频繁地建立和关闭连接的开销。
低延迟：WebSocket 的连接一旦建立，数据可以实时传输，无需等待额外的握手和请求。
双方通知：服务器可以主动向客户端发送数据，而不需要客户端首先请求。这对于实时更新和通知非常有用。
减少网络流量：WebSocket 通过在连接保持打开的情况下传输数据，可以减少 HTTP 请求的开销，从而减少网络流量。
什么场景可以用WebSock ...
前端实现水印的几种方案
水印可以用于保护内容的版权，提供额外信息，或者美化页面。本文将探讨几种常见的前端水印方案，更好地理解如何实现水印效果。
1. 使用CSS伪元素添加水印使用CSS伪元素是一种简单而灵活的方式来添加水印，以下是一个示例：
12345678910111213/* 示例代码 */<div class="watermark"></div>.watermark::before { content: "我是水印"; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; font-size: 48px; color: #ccc; pointer-events: none;}
效果如下图所示：
CSS伪元素水印效果
在这个示例中，我们使用了CSS伪元素 ::before 来创建水印。以下是各个CSS属性的解释：
content：定义了水印的文本内容。
position: fixed： ...
http协议及其特点,状态码
什么是http协议？有什么特点？有哪些状态码？什么是HTTP协议HTTP（Hypertext Transfer Protocol）是一种用于传输超文本的应用层协议，用于在客户端和服务器之间进行通信。HTTP 协议定义了 Web 客户端和服务器之间互相通信的格式和规则，是互联网信息交换的基础
HTTP是基于请求-响应模型的协议，客户端发送HTTP请求到服务器，服务器处理请求并返回相应的HTTP响应。
HTTP使用URL（Uniform Resource Locator）来标识要获取的资源的位置。客户端通过URL指定要请求的资源，例如网页、图像、视频等。
HTTP协议通常使用TCP/IP作为传输协议，通过端口号80进行通信。
HTTP协议是无状态的，服务器不会保存之前请求的任何状态信息。为了维护会话状态，可以使用Cookie和Session等机制。
HTTP 使用统一资源标识符(Uniform Resource Identifier)来定位要访问的资源。 最常见的 URI 即 URL,比如 https://www.example.com/index.html。
HTTP协议的 ...
TCP与UDP的区别
TCP与UDP的区别TCPTCP（Transmission Control Protocol）是计算机网络中最常用的传输层协议之一，它提供了可靠的、面向连接的数据传输服务。TCP负责将应用层的数据分割成合适的数据包，并确保这些数据包按照正确的顺序到达目标主机。下面详细介绍TCP的特点、工作机制和关键概念：
特点和优势：
可靠性： TCP通过序列号、确认应答和重传机制确保数据的可靠传输，即使在网络拥塞或丢包的情况下也能恢复丢失的数据。
面向连接： TCP建立了一个虚拟的、全双工的连接，确保通信双方能够互相通信，并且在数据传输结束后关闭连接。
流量控制： TCP使用滑动窗口机制来控制发送和接收数据的速率，以避免数据包在网络中的拥塞。
拥塞控制： TCP能够检测网络的拥塞程度，并相应地减少发送速率，从而避免网络拥塞。
顺序保证： TCP确保数据包按照正确的顺序到达目标主机，即使数据包在传输过程中发生乱序也会被重新排序。
TCP工作机制：
三次握手： 在建立TCP连接时，客户端发送一个带有SYN（同步）标志的数据包给服务器，服务器收到后回复一个带有SYN和ACK（确认）标志的包，最后客户 ...
Vue之nextTick原理与作用
Vue之nextTick原理与作用原理在 Vue.js 中，$nextTick 方法的底层原理涉及 Vue 的更新队列以及浏览器的异步任务队列（微任务和宏任务）。它的主要目标是在下次 DOM 更新循环结束后执行回调函数，确保能够访问到更新后的 DOM。
下面是 $nextTick 方法的大致执行过程：
当调用 this.$nextTick(callback) 时，Vue 会将 callback 函数添加到一个称为“更新队列”（Update Queue）的数组中。
Vue 会检查是否已经有一个异步任务正在进行中。如果没有，它会创建一个微任务，该微任务将在当前代码执行完成后执行。
当前代码执行完成并进入微任务队列时，Vue 将开始处理更新队列中的回调函数。
在处理更新队列时，Vue 会执行所有在该更新循环中触发的数据变更操作，并将这些变更应用到虚拟 DOM。
完成虚拟 DOM 的更新后，Vue 会触发一个“flush”阶段，此时更新队列中的回调函数会被依次执行。
回调函数在执行时，DOM 已经更新完成，可以在回调函数中获取到更新后的 DOM。
通过这样的异步处理方式，Vue 在下次 D ...
css八股文1
2023前端面试题整理二(CSS篇)1、让元素水平垂直居中显示方法一、设置父元素position:relative;子元素position:absolute;top和left设置为50%的情况下，使用translate在水平和垂直方向，反方向移动50%；
123456789.parent{ position:relative;}.child{ position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%);}
方法二、在子元素宽高知道的情况下，使用calc设置子元素的top和left；
12345678910.parent{ position:relative;}.child{ width:20px; height:20px; position: absolute; top: calc(50% - 10px); left: calc(50% - 10px);}
方法 ...
浅谈Token,Cookie和Session
介绍Token、Cookie 和 Session 都是在 Web 开发中用于身份认证和状态管理的重要概念。它们在不同的场景下用于不同的目的：
Token（令牌）： Token 是一种用于身份认证的轻量级凭证。在 Web 开发中，常见的身份认证方式是基于 Token 的身份验证。当用户登录时，服务器会生成一个唯一的 Token，并将其发送给客户端（通常是通过 HTTP 头或响应体）。客户端随后在每个后续请求中将 Token 放在请求头或其他适当位置，以证明其身份。服务器可以验证 Token 的有效性，以确定用户是否已经登录或是否有权限访问特定资源。
Token 的优点包括：
无状态性：服务器不需要存储用户的登录状态，所有信息都包含在 Token 中。
跨平台：Token 可以在不同的客户端（例如 Web 应用、移动应用、API）中使用。
Cookie（Cookie 文件）： Cookie 是一种用于在客户端存储信息的小型文本文件。在 Web 开发中，Cookie 主要用于跟踪用户的会话信息和状态管理。当用户首次访问网站时，服务器可以在响应头中发送一个 Cookie 到客户端，客 ...