常用meta
常用meta整理<meta> 元素概要meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
必要属性
属性
值
描述
content
some text
定义与http-equiv或name属性相关的元信息
可选属性
属性
值
描述
http-equiv
content-type / expire / refresh / set-cookie
把content属性关联到HTTP头部。
name
author / description / keywords / generator / revised / others
把 content 属性关联到一个name。
content
some text
定义用于翻译 content 属性值的格式。
网页相关
申明编码
1<meta charset='utf-8' />
优先使用 IE 最新版本和 Chrome
123456& ...
如何根据系统主题自动响应CSS深色模式
如何根据系统主题自动响应CSS深色模式
很多人喜欢选择APP或网站中的深色模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式，根据访客的系统主题来自动响应。
CSS 深色模式 (Dark Mode)在:root根元素中定义变量来设置主题的颜色。我建议你也这样做，因为这样会使这个过程容易得多。我定义的变量如下:
12345:root { --bg: #fff; --textColor: #004050; --borderColor: rgba(0,0,0,.15);}
:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，**:root** 表示 <html>元素，除了优先级更高之外，与 html 选择器相同。
如果希望在样式表中使用这些变量，可以这样做
123body { color: var(--bg);}
这样，如果你想改变你的主题颜色，所需要做的就是修改你定义的变量，所有使用这个变量的样式都会被更新。
现在我们需 ...
npm常用命令
npm常用命令
简介npm是跟随node一起安装的包（模块）管理器。常见的使用场景有以下几种：
允许用户从npm服务器下载别人编写的第三方包到本地使用。
允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到npm服务器供别人使用。
常用命令检测是否安装及版本1npm -v # 显示版本号说明已经安装相应的版本
生成package.json文件1npm init
package.json用来描述项目中用到的模块和其他信息
安装模块123456789101112131415161718192021npm install # 安装package.json定义好的模块，简写 npm i# 安装包指定模块npm i <ModuleName># 全局安装npm i <ModuleName> -g # 安装包的同时，将信息写入到package.json中的 dependencies 配置中npm i <ModuleName> --save# 安装包的同时，将信息写入到package.json中的 ...
Git使用手册
Git使用手册
安装官网下载：https://git-scm.com/downloads 下载完成后使用默认进行安装。
安装完成后，在开始菜单里找到 Git -> Git Bash，蹦出一个类似命令行窗口的东西，就说明Git安装成功！还需要最后一步设置，在命令行输入：
12git config --global user.name "Your Name"git config --global user.email "email@example.com"
因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。
创建版本库（仓库）1234567891011# 创建仓库mkdir <仓库name> # 进入仓库cd <仓库name># 此命令用于显示当前目录pwd# 把当前目录初始化成Git仓库git init
也不一定必须在空目录下创建Git仓库，选择一个已经有东西的目录直接git init也是可以的。
添加文件到仓库在仓库目录下放入文件，如新建一个test.txt文件，然后 ...
HTTPS
说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源https://juejin.cn/post/7149438206419664927#heading-63，教程版权归原作者所有。
HTTPS
什么是HTTPS协议？超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。 HTTPS的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。安全层的主要职责就是对发起的HTTP请求的数据进行加密操作 和 对接收到的HTTP的内容进行解密操作。
数字证书是什么？
使用一种 Hash 算法来对公钥和其他信息进行加密，生成一个信息摘要，然后让有公信力的认证中心（简称 CA ）用它的私钥对消息摘要加密，形成签名。最后将原始的信息和签名合在一起，称为数字证书。当接收 ...
flex布局案例-基础
flex布局案例-基础
可用F12开发者工具查看元素及样式，可打开codepen在线编辑代码。
::: demo [vanilla]
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<html> <div class="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> </div></html><s ...
HTTP
说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源https://juejin.cn/post/7149438206419664927#heading-63，教程版权归原作者所有。
HTTPGET和POST的请求的区别
Post 和 Get 是 HTTP 请求的两种方法，其区别如下：
应用场景： (GET 请求是一个幂等的请求)一般 Get 请求用于对服务器资源不会产生影响的场景，比如说请求一个网页的资源。(而 Post 不是一个幂等的请求)一般用于对服务器资源会产生影响的情景，比如注册用户这一类的操作。（幂等是指一个请求方法执行多次和仅执行一次的效果完全相同）
是否缓存： 因为两者应用场景不同，浏览器一般会对 Get 请求缓存，但很少对 Post 请求缓存。
传参方式不同： Get 通过查询字符串传参，Post 通过请求体传参。安全性： Get 请求可以将请求的参数放入 url 中向服务器发送，这样的做法相对于 Post 请求来说是不太安全的，因为请求的 url 会被保留在历史记录中。
请求长度： 浏览器由于对 url 长度的限制，所以会影响 get 请求发送数据时的长度 ...
let 和 const 命令
let 和 const 命令let 命令基本用法ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，**只在let命令所在的代码块内有效(块级作用域)**。
1234567{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1
上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。
for循环的计数器，就很合适使用let命令。
123456for (let i = 0; i < 10; i++) { // ...}console.log(i);// ReferenceError: i is not defined
上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。
如果for循环内用var声明i，则会打印10
下面的代码如果使用var，最后输出的是10。
12 ...
变量的解构赋值
变量的解构赋值数组的解构赋值基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
以前，为变量赋值，只能直接指定值。
123let a = 1;let b = 2;let c = 3;
ES6 允许写成下面这样。
1let [a, b, c] = [1, 2, 3];
上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。
本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。
1234567891011121314151617181920let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y] = [1, 2, 3];x // 1y // 3let [head ...
flex布局语法
flex布局语法
一、flex 布局是什么？Flex是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器 都可以指定为 Flex 布局。
123.box{ display: flex;}
行内元素 也可以使用 Flex 布局。
123.box{ display: inline-flex;}
Webkit 内核的浏览器，必须加上-webkit前缀。
1234.box{ display: -webkit-flex; /* Safari */ display: flex;}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。
容器默认存在两根轴：水平的主轴（或x轴）（main axis）和垂直的交叉轴（或y轴 ...
