杂七杂八的学习笔记

<script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>   Vue导包路径
<script src="https://unpkg.com/axios@0.27.2/dist/axios.min.js"></script>   axios导包路径
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
<script src=https://unpkg.com/vue-router@4"></script> 路由导包路径

live server 实时显示插件
https://blog.csdn.net/weixin_45822938/article/details/123383816 数据库安装教程
https://blog.csdn.net/helloloser/article/details/100125065 数据库连接池
https://blog.csdn.net/Vue2018/article/details/125526656?spm=1... Vite使用教程

vscode安装使用：

Visual Studio Code简称vscode，是Visual Studio的免费版本。
下载网址：https://code.visualstudio.com/，首页下载的是最新版本，如果是win7系统，不支持新版本，
1.70.3是支持win7的最后一个版本，点击菜单栏第二栏“更新”点2022年7月，第四行“下载：Windows：用户”右键打开可下载。
vscode常用快捷键
"Ctrl+] [" 缩进缩出
"ctrl+/" 注释
vscode常用插件
Chinese (Simplified)汉化插件
Volar Labs 安装vue3代码提示插件
Vue3没有代码提示问题的解决办法。

nodeJs安装使用

nodeJs到14.0.0就不支持win7系统了，可下载13.14.0版本，地址：https://nodejs.org/dist/
安装后在node目录下新建node_cache与node_global目录
1、npm config set prefix node安装路径\node_global（路径不能用引号）
2、npm config set cache node安装路径\node_cache
3、配置环境变量：将"node安装路径\node_global\node_modules"添加到环境变量path中。
我的电脑右击，打开属性->高级系统设置->环境变量->系统变量->新建（系统变量下）->输入变量名NODE_PATH->变量值：输入上面路径
安装express
npm i express@4.17.2 -g
nodeJs 13.14.0版本支持的express最高版本是@4.17.2，不指定版本安装会出错。
验证express是否成功
关掉命令窗，重新打开命令窗，输入node回车启动node。输入require('express')回车，出现一大串代码表示安装成功。
安装cnpm（nodeJs的13.14.0版本前不能装cnpm）
npm install -g cnpm --registry=https://registry.npmmirror.com
npm的中国网址https://npmmirror.com/
详见https://blog.csdn.net/qq_40323256/article/details/100825982

npm包管理

修改npm的资源镜像链接： npm config set registry http://registry.npm.taobao.org。默认下载为国外网站，使用时易出错或卡顿，更改为国内境像。
检查npm -v安装成功： 安装nodeJs时默认会安装npm，可通过npm -v查看npm是否安装成功：在vs code软件里，点终端，出现命令框，键入npm -v回车，可检查npm是否安装成功。
错误处理： npm ls -g时出现npm warn config global --global, --local are deprecated. use --location=global instead.的解决办法——打开nodejs文件夹，找到npm.cmd 文件，用记事本打开， 找到文件里面的prefix -g替换为prefix --location=global即可。
npm init -y初始化npm：在项目的目录下会生成一个pacdage.json文件，
npm i 包名@^版本号 在当前项目安装包。@latest指最新版本，指定版本记得在版本号前加@^。
npm i XXX -g 在全局安装包
npm ls 查看当前项目的所有包
npm ls -g 查看全局安装的包
npm ls XXX 查看当前项目安装的XXX包的版本
npm ls XXX -g查看全局安装的XXX包的版本
npm uninstall XXX卸载当前项目安装的XXX包
npm常用命令详见NPM使用介绍
"cnpm : 无法加载文件 D:\nodejs\……，因为在此系统上禁止运行脚本" 解决方法：开始右键》管理员》输入set-ExecutionPolicy RemoteSigned选择y
@types/node vs-code提示器插件 需先引入相关模块才能载入提示 const XXX=require（‘模块’）
nodemon 当代码改变时自动重启服务器插件，rs可手动重启
ctrl+c 退出
npm config set prefix "D:\Program Files\node\node_global"设置包的全局安装路径

vite安装使用

cd到目标目录
初始化: npm init vite@latest si -- --template vue 初始化之后会有个si的文件夹，文件夹下初始了些文件夹及文件。注意以上命令中的vite@latest是指初始化最新vite版本，需要node14以上才行，如果你的node是低版本，则只能使用vite@v2.9.0版本以下，否则出错
我使用的2.9.0版本: 初始化如下：npm init vite@v2.9.0 dage -- --template vue, 会初始化一个dage目录的文件夹，内含src文件夹、public文件夹、index.html文件、package.json文件，此时还没有node_modules文件夹，项目无法运行.
自动安装vue等依赖: 使用cd dage转入到 dage文件夹,使用 npm install 命令自动安装vue依赖,生成node_modules文件夹，如果卡在 sill idealTree buildDeps没反应,是因为npm使用的国外服,卡住了,要么试运气死等,要么修改npm的资源镜像链接： npm config set registry http://registry.npm.taobao.org。nodeJs的13.14.0以上版的可以安装cnpm,用cnpm install 命令自动安装国内依赖。
vue版本匹配 自动安装的vue是最新版本，vite@v2.9.0匹配的vue版本不能高于@^3.2.25。npm uninstall vue卸载再用npm i vue@^3.2.25安装兼容的版本。版本不匹配运行开发环境时会报错。
手动安装其它依赖： cnpm install XXX安装其它依赖时如出现6 package is looking for funding run npm fund for details,(翻译过来的意思是：6个依赖要打赏，运行npm fund命令查看）不影响,可运行npm fund跳过,如在安装时在命令后带--no-fund --no-audit参数，可避免出现打赏提示。
npm run dev: 开发环境启动项目，如之后产生 Local: http://localhost:5173/，则表示项目启动成功。如出现“error when starting dev server: Error: Failed to resolve vue/compiler-sfc.”则是vue版本不匹配。
ctrl点击链接显示网页: 在后台调试窗出现__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. 是@vitejs/plugin-vue版本不匹配警告,可在vite.config.js文件中添加export default defineConfig({
define: {__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true}})来关闭警告。
打包生成 使用npm run build命令，在项目下生成 dist 目录,把index.html里的链接前的/号删除即可正常显示

vite项目文件初解

index.html文件： 在根目录下，是网页的起始文件，用于放置网页的头部文件和引入一个名为main.js的文件。
node_modules文件夹： 用于放置安装的依赖。
src文件夹： 用于放置开发环境的文件，分别放置着含挂载实例命令的main.js文件、App.vue主干实例文件、assets实例素材文件夹、components子组件文件夹。
public文件夹： 用于放置网页用到的公共素材（如图片等），项目打包生成时，此文件夹里的文件会与打包生成的index.html文件在同一级目录下，因此要注意 使用public文件夹的素材时，路径要略去/public，如href="/public/favicon.ico"是错误的，必须略去/public，写成href="/favicon.ico"。
dist文件夹： 打包后会产生此文件夹，用于放置生产环境的文件，注意这个文件夹的index.html要正常显示，要把index.html里的链接前的/号删除才可正常显示。
数组方法:
已知增：
Arr[X]="YYY" 通过赋值的形式，在数组最后添加一项值（在已知数组长度的前提下才可以，X为数组长度）
未知增：
push（"XXX"） 在数组最后添加一项或多项值,返回数组新的长度
unshift("XXX") 在数组最前添加一项或多项值,返回数组新的长度

假删：
delete Arr[X] 删除数组指定索引的值,返回true或false，（此方法只使此项值为空，并不删除此项）数组长度不变
真删：
.pop() 删除数组最后一项,返回删除的值
.shift() 删除数组最前一项,返回删除的值
XX=[] 全删

指定增删：
.splice(index,X,'Y'...) 从索引号“index"开始删除"X"个值，并插入一项"Y"或多项值,返回删除的数组

                              第二个参数"X"决定是否删除，为0为不删除，缺省为从“index"开始全删。
                              第三个参数为插入的值，当有插入时，第二个参数不可省。

已知改：
Arr[X]="YYY" 通过赋值的形式，在已知索引的前提下直接改变值
颠倒改序：
.reverse() 颠倒数组中元素的顺序（只颠倒改序不排序）,返回颠倒顺序后的数组
排序改序：
.sort() 不带参数为对字符升序（数字也会转成字符串）,返回升序后的数组。降序要在后面加上reverse() 方法
.sort(function(a,b){return a-b}) 带参数可对数字升序排列,function(a,b){return b-a}是降序排列
.sort(function(a,b){return a[3]-b[3]}) 二维数组可通过加二维下标的方式排序,function(a,b){return b[3]-a[3]}是降序排列
.sort(function(a,b){return a[3].charCodeAt()-b[3].charCodeAt()}) 字符形二维数组可用.charCodeAt()把字符串转成十进制ASCII码来排序

查:: 不改变数组,可赋值变量保存查询结果
过虑:
.filter(function (x,y,z) { return XXX}) 通过回调函数过滤掉数组的某些元素，返回剩下的元素(元素不变,元素个数变)。
处理:
.map(function (x,y,z) { return XXX}) 通过回调函数处理数组的每一元素，返处理后的的元素(元素变,元素个数不变)。
拼接:
A.concat(B数组,C数组......) 用于连接两个或多个数组
抽取:
.slice(index,X) 从索引号开始到第X个止,取出. 注:index是从0开始的索引号,X是从1开始的数组序号,

alert() 弹窗函数
split('')拆分字符reverse()取反字符join('')合并字符
length属性 数组最大索引号
.split("X") 以X符号为分界线拆分字符串成数组
字符串.indexOf(X,num) 从num索引处开始查找字符X在字符串中的索引号，若没有则返回-1
trim() 函数移除字符串两侧的空白字符或其他预定义字符。
toLowerCase() 方法用于把字符串转换为小写
typeof 返回值有六种可能： "number""string""boolean""object""function""undefined"
A%B %是取余操作.
赋值:用 = 号赋值,对象用 : 号赋值
window.addEventListener('事件', 方法)
try {尝试执行代码块}catch(err) {捕获到错误要执行的代码}finally {无论是不否捕获到错误都会执行的代码}

1: 创建数组常规方式:
XXX=new Array(); A要大写，赋值为字符串时值要加"",为其它变量时不用
XXX[0]="值1"；XXX[1]={wo:"iu"}; XXX[2]=function(){} 赋值为对象时值要加{}，为数组时加[]，还可赋值函数
2: 简洁方式（创建的同时赋值）:
XXX=new Array("值1",function(){},方法或对像名); 调用数组的值用:XXX[0],如果值是对象用：XXX[0].属性名
3: 粗暴方式（用赋值代替创建）: 如果调用的值是函数用：XXX[0]()
XXX=["值1",function(){},方法或对像名];

1：创建对象常规方式:

  XXX=new Object(),简写XXX={}                                      提取值的方式是XXX.名, 如名是数字要加[]号,如XXX[数字]

2: 属性赋值方式:

 XXX={名:"值"} 或 XXX.名="值"                                        前一种是格式化始式,之前赋值会清零,后一种是追加式,之前赋值不清零
 {名:"字符",名:XX,名:123,名:[],名:{},名:function(){}}             对象的值可以是字符,变量,数字,数组,对象,函数 

3：构造器方式：

function XXX（值占位符1，值占位符2，值占位符3）{       构造写法
this.属性1=值占位符1；this.属性2=值占位符2；                用this.属性=占位来绑定属性,
this.方法名=function(){}}                                                   方法不用占位,但需要this.方法名来绑定
实例化:YYY=new XXX（“值1",“值2",“值3",）                值顺序与值占位符顺序要一致,
实例化增加新属性:XXX.prototype.名 = "值"                       实例化的对象不能增加新属性,除非用prototype才能添加

4: for(var d in XXX) {write(d),write(dataObj[d])} 遍历对象内属性的方法

1: 创建方法的匿名方式:
function(X){} 简写(X)=>{} 匿名函数,不可构造,如果{}只有一条语句,可简写成X=>Y
A. var X=function(){} 赋值给变量X., 引用时"XXX()", 可在{}中returnYY给X赋值YY
B. XXX:function (){}简写成XXX(){} 赋值给属性XXX, 引用时"对象.XXX()"
C. (function(){}) 或 !function(){} function(){}直接暴露会出错,常在前加运算符
D. !function(){} (参数) 在后面加上括号会立即执行
E. return function(){} 赋值给 return ,引用时"XXX()()要多个()号
F. (function(){var X='Y'}) () 函数里的变量域外不再保留,js变量一般是公有,如if与for等变量域外同样保留
G. var add=(function(){ 函数变量私有的保护性,又要达到公有使用的目的,崔生了闭包

     var XXX='  ';
     return function(){XXX.....}})()                                        通过return来把变量引出去
通过方法来引用

add(); add()

2: 创建方法的声明方式
function XXX(){} 函数声明是在全局,可当构造函数
XXX(){arguments[ ]} arguments可越过()的形参,直接操作引用传过来的参数

1：UVE3实例创建方式：
const XXX={ 创建组件

data(){                     数据集
   return{                  采用return返回数据集
     XXX：“值”,     变量， 注：名与值间用"："号，值与值间用“,"号
     XXX：["值"],       数组
     XXX：{值}           对象
         };                    后面带“；”不能带“，”号，否则出错
 }
methods:{                普通事件集
    XXX:function (){}  简写成XXX(){}      

}
mounted(){ 立即执行勾子

  XXX()  

}
}
Vue.createApp(XXX).mount('GGG') 通过createApp将组件实例化,V与A要大写,mount创建挂载点,注:引号
2：UVE3另类方式：
const XXX=Vue.createApp({………… }) 挂载点另类写法 注意：要加小括号
XXX.mount('GGG')

data里的变量在实例里可以用this.XXX来引用,实例里的方法可this.XXX()引用,挂载的html则不必加this
如要在实例外使用,需在挂载时将实例赋给变量,以YY.XX引用实例data的变量,YY.XX()引用实例的方法
const yy=Vue.createApp(XXX).mount('YYY') const yy=XXX.mount('GGG')

body中通过指令使用实例:
v-text与v-html 会覆盖本标签内的文本和后代标签的文本，要慎用
v-html =XXX 会编译 html 代码后输出文本
字符{{'字符'+XXX}} 加字符时,如果字符在{{}}内,要用""+的形式连接

v-if与v-show 控制显示，都说尽量用v-show，因它占用少
<标签 v-if=X> 多重判断的选择显示写法
<标签 v-else-if>
<标签 v-else->

v-bind:属性="XXX" 绑定属性指令，简写 :属性=“XXX”如X不是变量要加单引号
:属性="条件&&XXX||YYY" &写法的三元表达式，如X、Y不是变量同上
:属性="条件?XXX:YYY" ？写法的三元表达式
:属性="条件&&XXX" 第三元为空时&可简写 ？不可简写（需空字符占位）如:属性="条件?XXX：' ' "
:style="{属性:XXX}" 非默认属性需借助style以对象形式绑定，如X不是变量要加单引号
:style="Object" 科学写法，=对象名，再在data里把对象实体写下来
:style="[Object1",Object2" ] 数组式多对象，注：data里属性名如有 - 号，要用引号包裹如'font-weight': 'bold'
:style="{属性:条件&&XXX||YYY}" &写法的三元表达式 ，如X、Y不是变量同上
:style="{属性:条件?XXX:YYY}" ？写法的三元表达式，第三元为空时&可简写 ？不可简写
变量=值，数组=[值1，值2]，对象={属性1：值，属性2：值} 三种赋值的写法
对象的另类赋值法：对象={值1：判断式，值2：判断式}

v-for="(返回元素1，返回元素2,返回元素3)in 变量/数组/对象/数组对象/数字" 循环创建标签
如是变量，会拆开单词为数组形式循环，元素1为值，元素2为索引
如是对象，元素1为值，元素2为属性名，会有元素3为索引
对象数组：XXX:[{属性：值}，[{属性：值}]，XXX.[0]的值为{属性：值}包涵大括号，要”XXX.[0].属性“才=值
如是数字，会从1开始循环创建
<标签 v-for="(XXX) in dacen"> 返回元素可通过事件传参在实例中使用

      <标签 @click="tiaos(XXX)" >

</标签>

v-on：事件="XXX " 绑定事件指令，简写 @事件="XXX"
事件传参：@事件=“XXX（值1，值2）”
直接事件: @事件="()=>{}” 直接把事件写在标签里,注:不能有参数,
可放表达式 @事件="条件&&XXX||YYY”
@事件="XXX(),YYY()" 可绑定多个方法,之间用" , "逗号隔开,且（）不能省
事件常用修饰符：

 .stop 阻止事件继续传播
 .prevent 阻止标签默认行为    v-on:submit.prevent="XXX"     防submit向外提交
 .capture 使用事件捕获模式,即元素自身触发的事件先，然后才交由内部元素进行处理
 .self 只当在 event.target 是当前元素自身时触发处理函数
 .once 事件将只会触发一次
 .passive 告诉浏览器你不想阻止事件的默认行为

键盘修饰符：@keyup.XXX XXX可以中任意键或键的别名
@click.XXX.exact .exact修饰符,且只有XXX被按下的时候才触发,
@click.exact 没有任何系统修饰符被按下的时候才触发
@click.stop.prevent="doThat" 修饰符可以串联
@submit.prevent 可以只有修饰符，不赋=号

v-model="XXX" 指令在 input、select、textarea、checkbox、radio 等表状态与值间的双向数据绑定
v-model data内的初始值会忽略元素的 value、checked、selected 属性初始值，除非 data 初始值为空。
输入框:input 和 textarea v-model值是其框内容
复选框:checkbox v-model值是所选value(data为数组)，非数组v-model值是布尔

      true-value="XXX" false-value="YYY"            状态赋双value的写法

单选框:radio v-model值是所选的value,v-model变量相同的radio为一组
列表:select v-model值是所选<option>的value,有multiple时为value数组
:value\ :true-value\:false-value =XXX 可以用 v-bind 绑定一个变量为value, 或=XXX.YYY 绑定一个对象
v-model.lazy延迟生效 触发change事件后才生效,change(文本失焦点,其他看选中)
v-model.number 转换成数字 输入框虽输入的数字,value实际还是字符,首位是字母时转换无效
v-model.trim 过滤首尾空格 输入框虽不显示输入的空格,value实际是有空格,需.trim 自动过滤

vue组件: 组件最大的价值是"独立可复用"
标签部写法:<XXX 需放在实例的父标签内
:XXX="值" 定义要传的值 注,如没有用 : 绑定,只传本身,不能传父变量
@XXX="" 定义要传的事件

</XXX>
script部写法
app.component('XXX', { 需放在app.mount('#app')之前
data() { return { .....} }, 定义组件内的变量
methods:{XXX(){....} } , 定义组件内的方法
template: <button @click=""></button> , 组件实体,要用`反引号包裹,
props: ['XXX'], 接收传值,如标签加了:,则接收的是父变量
emits: ['XXX']}) 接收传值,全局事件
自定义组件: 在实例外定义的组件,可在实体内引用
var YYY={ 这有利于把许多组件放在其他文件内封装
data() { return { .....} }, 按需在实体内通过components引入
methods:{XXX(){....} } ,
template: <button @click=""></button> ,
props: ['XXX']}
components: {'XXX':YYY } 通过components引入自定义组件
props较验:
props: { 如用{},可用值来检查类型

  propA: Number,                                                基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
  propB: [String, Number],                                   多个可能的类型
  propC: { type: String, required: true },               type定义类型required定义必传值 
  propD: { type: Number, default: 100},               type定义类型default定义默认值
  propE: {type: Object,default: function () {return { message: 'hello' } } },    如是对像,要用方法来包装
  propF: {validator: function (value) {                   validator自定义一个验证器
  return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }       如符合则返回

:属性="$attrs.父属性名" 子承父写法,如独子可省,如多子不指定皆无效, 父子组件都有样式时父在子前，
组件复用！！
多组件

自定义指令:
标签部写法:<标签 v-XXX >
app.directive('XXX', { 勾子函数(el,binding,vnode,prevNode) { .... }}) 需放在app.mount('#app')之前
Vue3勾子函数:
created() {}, 在绑定元素的 attribute 或事件监听器被应用之前调用
beforeMount() {}, 在绑定元素的父组件挂载之前调用
mounted() {}, 绑定元素的父组件被挂载时调用
beforeUpdate() {}, 在包含组件的 VNode 更新之前调用
updated() {}, 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
beforeUnmount() {}, 在绑定元素的父组件卸载之前调用
unmounted() {} 卸载绑定元素的父组件时调用
() => {} mounted 和 updated 勾子函数简写形式
参数:el 指绑定的dom,通过el.XXX可以对标签的html属性操作

    binding                                                           自定义函数的一组属性
         instance                                                     使用指令的组件实例。
         value                                                          传递给指令的值。例如v-XXX="YYY" 中，该值为YYY
         oldValue                                                    先前的Value值，仅在 beforeUpdate 和 updated 中可用
         arg                                                             传递给指令的参数, 例如 v-XXX:YYY中，该值为YYY
         modifiers                                                   包含修饰符,例如在 v-XXX.YYY 中，该值为YYY:true
         dir                                                              一个对象，勾子函数本身

计算属性:computed
vs methods 与实例中的methods 一样是个事件集,methods 需要事件触发,computed是引用即执行
vs mounted() 与vs mounted()一样不需要事件触发,vs mounted()是必执行,computed是依赖于引用才执行
XXX function (){return YYY} 他的get属性相当于data，用于存放变量得到数据，此为get省略的简写
完整写法
XXX:{ 需写在computed:{}内

    get: unction (){return Y因子+Z因子}         因子的改变会触发get            
    set: function (newValue){Y因子=ZZZ}}        XXX改变才会触发set，里面的因子语句触发get,get返值完成
    可见get依赖因子，set依赖自身，set是为get服务，set若没有因子处理引发get则set没有意义

监听属性：watch
watch:{XX:function(new,old){this.XX=new;..}} 相当于计算属性computed的作用，此处还可放置其它命令
watch:{XX{handler:function(new,old){this.XX=new;..}immediate:true}}
watch:{XX:{handler(new,old){this.XX=new;..}immediate:true}} immediate:true加载即生效
vm.$watch('XXX',function(new,old){} 挂载点之外的写法：watch要加$号，变量要加‘’号

vue-router路由
标签部：<router-link to="/XXX"></router-link> 触发部（没有也行，URL栏也可触发）

         <router-link :to="{name:'XXX'}"></router-link>    :to=可以是对象"{}"或是变量"XXX"
         <router-view ></router-view>                              要显示的内容(放在哪就在哪显示)
         <router-view name="aa"></router-view>            用name属性可实现对组件的分别显示

script部:

 const XXX = {                                                           自定义组件 
     data() { return { .....} },                                            
     methods:{XXX(){....} } ,                                            
     template: `<button @click=""></button>` ,        有时可简写成这一行
     props: ['XXX'],                                                        
     emits: ['XXX']}             
 const routes = [                                        定义映射数组
      { path: '/...',                                    path属性值是路径,/:w+路由通配符,router@4'/:*'已取消
      path: '/:w+',                                  路由通配符,原'/:*'路径通配符在router@4版不再使用
      path: '/ab/:XX',                              URL栏显示为'/ab/yy’this.$route.params.XX=yy  
      props: true                                    允许向组件传参,指 :X部分
      redirect:'/...'                                   重定向路径,后面的映射无效,重新映射为新路径的组件
      name:'XXX'                                    name属性值是router-link中的命名路由名 
      component: XXX                            component属性值是要映射的组件
      component:()=> import('/XXX.X') 路由懒加载，将映射放在方法里，全const  XXX = ()=>{return import('/XXX.X')}          
      components                                  可映射多个组件,属性名是router-view 的name值
      children: [{path:'',.......}]                 嵌套路由,path的值接在父path后,注意不要带/号.
          }]                    
      const router = VueRouter.createRouter({              创建路由传递routes
      history: VueRouter.createWebHashHistory(),
      routes: routes})                                                    名和值相同,可简写成routes     

实例部:

         app.use(router)                                                    此句要在创建实例后,放在app.mount('#app')之前

this.location.hash keep-alive '/:pathMatch(.*)'
前端路由模式:
hash:url使用#号,值的变化不会发出请求,不会重载页面, 前进后退与改值会触发onhashchange事件,传参会有体积限制

    三种方式改变hash值:
    1.URL栏修改hash值
    2.浏览器前后按钮
    3.js中直接赋值location.href = '#/XX'   
    window.onhashchange = function(){}事件,可在{}放置网页操作代码

history:无#号,不发请求不重载(除URL栏改值外), 前后与back等会触发onpopstate(pushState\replaceState不会),传参无限.

    六种改值方式:
    1.URL栏改值                                                会向服务器重发请求与重载,如后端此路径没文件会出现404错误
    2.js中直接赋值location.pathname = '/XX'   会向服务器重发请求与重载,如后端没有相关代码会出现404错误
    3.浏览器前后按钮
    4.history.back(XX)前进,forward(XX)后退,go(XX)前进或后退.  go可通过参数的正负值来代替back与forward,
    5.pushState() 和 replaceState()
    6.通过router路由插件的映射
    history功能比hash强,但他如果没有服务器配合,刷新会出错404

history: VueRouter.createWebHashHistory() 模式定义语句,.createWebHistory为history模式
传递参数方法：
get方法：:to="{path:'/XX',query: { one:'YYY',two:'ZZZ',... }} 关键字query: ，可用name代替path，放在router-link标签中

          页面显示/XX？one=YYY&two=ZZZ                         URL采用“？”后用“名=值”成对的形式显示参数   
          this.$route.query.one=YYY                                      采用query属性获取参数，因URL显示参数故刷新后this依然有效

post方法: :to="{name:'XX',params: { one:'YYY',two:'ZZZ',... }} 关键字params: ，不可用path代替name，放在router-link标签中

         页面显示/XX                                                             post是隐参的安全模式，所以URL不会显示参数                      
         this.$route.params.one=YYY                                   采用params属性来获取参数，因URL不显示参数故刷新后this无效

路由方法：to=path:'/XX/YYY/ZZZ '或:to="{name:'XX,params: { one:'YYY',two:'ZZZ'}} "

         path: '/XXX/:one/:two'                                            关键字“：”帽号               放在路由语句中
         页面显示/XXX/YYY/ZZZ                                           URL采用“/”后“值”无名形式显示参数
        this.$route.params.one=YYY                                    采用params属性获取参数，因URL显示参数值故刷新后this依然有效

动态路由实现步骤：
获取参数1:$route.params或$route.query 只在自定义组件中才能获取,template:中可不加this，JS中需加this，

         2:props:['id']                                                           需在映射中加入props: true ,   

分流路由:在computed,watch,created里获取参数,用if (参数=YY){XXX=动态内容}对路由进行分流
动态组件1：template:'<div>{{XXX}}</div>' 动态内容为字符时 如果太长可用\号分行

         2：template:'<divv-html ="XXX"></div>'            动态内容为html时

混入:mixins
const XXX = {data() {},methods:{},....} 普通组件
const app = Vue.createApp({
mixins: [XXX] 通过mixins:[]混入XXX组件,新组件是XXX组件与 实例化本身组件之和
实例化本身组件....}) mixins组件执行在先,如果属性同名则取实例化组件属性值
mixins: mixins是实例化组件内的一个属性,用来引入别的组件,
mixin({}) mixin是实例化方法,通过this.$options对实例化组件内的属性进行操作

axios写法：
axios.get('url') 字符串路径形式,也可以变量形式如.get(XXX)

    .get('/usr',{params:{i:2}})                                              还可以是对象形式,注意关键字params,不能用query代替
    .get(XXX,YYY)                                                             还可以是变量的形式
    .post('url', {XXX: 'YYY'})                                                不需要关键字
    .then(（XXX）=>{this.YYY=XXX；this.YYY})                如语句是表达式,可用()代替 {} ，' , '号代替' ;'号,在此处理异步this.YYY的值  
    .catch(function(error){console.log(error);}) 

axios多请求写法: 效果与多个axios效果一样,axios.get().then, axios.get().then....
axios.all([axios.get('url1') , axios.post('url2')]) 关键字all

    .then(axios.spread((XX,YY) { this.X=XX;this.Y=YY}))    关键字spread 

vite:构建工具
cd到目标目录
初始化: npm init vite@latest dage -- --template vue 初始化之后会有个dage的文件夹，文件夹下初始了些文件夹及文件
vite@latest是最新vite版本，需要node14以上才行，如果你的node是低版本，则只能vite@v2.5.0，否则出错
npm init vite@v2.9.0 dage -- --template vue
cd dage 用cd转入到 dage文件夹
安装依赖:npm install 自动安装vue等依赖
手动安装别的依赖：出现6 package is looking for funding run npm fund for details,(6个依赖要打赏，运行npm fund命令查看）

                                                                                    不影响,运行npm fund跳过,安装时在后--no-fund --no-audit可免出打赏

运行vite:npm run dev 运行后产生 Local: http://localhost:5173/网址，打开成功则安装vite成功
打包生成:npm run build 在项目下生成 dist 目录,把index.html里的链接前的/号删除即可正常显示

index.html 文件写法：
<div id="app"></div> id="app"设置挂载点
<script type="module" type="module"开启import功能

src="/src/main.js">                                                      引用的主js

main.js 文件写法：
import { createApp } from 'vue' 引入实例
import 'bootstrap/dist/css/bootstrap.min.css' 引入 bootstrap的依赖（需先npm安装bootstrap）
import 'bootstrap/dist/js/bootstrap.min.js' 引入 bootstrap的依赖
import App from './App.vue' 引入组件
createApp(App).mount('#app') 挂载、实例化组件
App.vue 文件写法：
<script setup> setup标签使数据在页面模板上使用无需 return
import Hello from './components/Hello.vue' </script > 引入组件的路径，
<template> 本体的组件 （class样式不能在此挂载）
<Hello msg="Vite + Vue" /></template> 本体组件内包函的引入的组件的标签部（class样式不能在此挂载）
<style scoped>.logo {height: 6em}</style> 定义只在本组件内使用的样式
组件写法：
<script setup>
import { ref } from 'vue' 引入ref
defineProps({ msg: String}) 定义组件中从标签部传过来的变量类型，不可缺少
const count = ref(0) </script> 在vue实例中的data中增加count变量并赋值
<template></template><style scoped></style> 本体组件与本体样式
如果uve不能注释，下载uve自动补齐插件
变量：
ref 的变量在</script> 内引不用是this.XX而是xx.value

npm init vite@v2.5.0 dage -- --template vue

当一个请求url的协议、域名、端口三个之间任意一个与当前页面url不同即为跨域。

this.XXX与this.XXX() 在实例内对变量操作记得加this., 事件记得带()号,html内不要带this,html内可使用XXX()
ref=“XXX” 给标签用ref定义标签，可在script中用“this.$refs.XXX.属性”来操作

node终端网络服务：
const http=require('http'); 引入服务器模块
const util=require('util') 引入常用工具模块
const url=require('url') 引入路由模块
const YYY=require('路径') 引入YYY主app模块
const XXX=http.createServer(YYY) 开启交互函数YcreateServer()
XXX.listen(8888,()=>{console.log('成功8888');}) 监听端口函数listen()

const XXX=http.createServer((req,res)=>{ 将主app模块写到createServer()括号里的方法

res.writeHead(XXX,{'content-type':'text/html'});                同时定义响应头及数据类型,中间H要大写，是{}对像方式
res.setHeader('content-type'，'application/json');            只定义数据类型,不是{}对像方式，只用'，'号不用'：'号
res.write（）；                                                                ()里的内容如是对象会出错，需转换。写请求页
res.end('<br>'); });                                                           没有响应结束会出错，注：如果是html代码要加单引号,

fs返回页面的方法：
fs.readFile('./index.html',(err,data)=>{

    // res.setHeader('Content-Type', 'text/html; charset=UTF-8')     格式一定要定义为text/html才能正确显示
    res.write(data)
    res.end()

模块写法：function XXX(){} 或const YYY=()=>{}

             module.exports={XXX ,YYY}                              可生成多个接口，用{}简写           

模块引入：const XXX=require('url') 单接口引入，可与接号名不同

            const {XXX，YYY}=require('url')                         多接口引入，多接口引入的名称必须与模块接号一样

模块调用：const ZZZ=XXX（） 也可通过XXX（） 直接调用

类写法：class XXX{constructor（）{ }} constructor是构造函数
类继承：class YYY exterds XXX{constructor（）{super()}} super()用来继承父构造
类引入：const XXX=require('url')
类调用：const YYY=new XXX （） 要用关键字new

关于传值：
get传值：
默认值，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符
提取传参一：
const XXX = new URL(${req.url},'http://localhost:888/') new一个URL实例
XXX.searchParams.get('YYY') 通过searchParams的get可以获取到想要获取的数据
提取传参二：
url.parse(req.url,ture).XXX 获取host/port/pathname/path/query属性,需先引入url模块，ture不能省。

post传值:
var XXX='' 用var不能用const,
req.on('data',(chunk)=>{XXX+=chunk}) on data接收 form的enctype=text/plain编码可传中文
req.on('end',()=>{}) on end结束 post是异步，会先执行on end后面的代码
提取传参一：
客户端用默认的格式application/x-www-form-urlencoded,中文会格式成乱码,服务器需用qs.parse() 转换回来

           注:需npm i querystringify -D 安装包,用qs = require('querystringify')引入querystring模块才能使用

提取传参二：
客户端enctype=text/plain,中文会保持原格式传递,但服务器接收的参数间会另起一行,需用url.parse()归成一行

          用replace()方法把所有的%0D%0A换成&,qs.parse()转换成对象.（不建议）

防报错:
if(url.parse(req.url,true).pathname == '/favicon.ico'){return; } get方法 防favicon.ico报错
if(XXX==''){return;} post方法 防favicon.ico报错

如何正确读写JSON文件：
fs.writeFileSync(路径) 存文件时先把对象JSON.stringify (XXX) 再存
fs.readFileSync(路径) 取出后要JSON.parse(XXX)转化为对象 解决出现[Object: null prototype] 的问题
JSON.stringify(data,"","\t") \t可使数据分行
json格式标准写法:
{"XXX":"值","YYY":"值"} 值间用,号,值对用:号,名和值都要用""号,名不能是中文
XXX=qs.stringify (XXX) 另一种对象字符互换方法，
XXX=qs.parse(XXX) qs方法需要安装和引入，但更加强大
XXX.toString(要转成的编码) 如缺省，将二进制转换成字符

const fs=require('fs');
fs.readFileSynce(文件路径) 阻塞性函数 函数执行完了才执行后面的代码
fs.readFile(文件路径,(err,data)=>{}) 非阻塞性函数 函数没有执行完就执行后面的代码
回调函数:
A调用函数:XXX(a,(X)=>{}) 函数(参数中的函数)就是回调函数,此例为"(X)=>{}"
B:定义函数function XXX(a,b){a;b(X)} 在定义中b就是回调函数"(r)=>{}"形参名,(X)是回调函数b的传参
工作方式:调用函数把参数a传给定义函数,定义函数通过b(X)把X返回给"(X)=>{}",(X)=>{}有了参数就可以愉快的工作
回调函数怎么返回值:
XXX(a,(X)=>{return返回值});function XXX(a,b){a;return b(X)} 经过双return,返回值 =函数XXX(a,(X)=>{})的值了
用Promise处理回调：
function XXX(){

var promise=new Promise((resolve,rejects)=>{                  P要大写   用var不能用const
    rejects（）
    resolve(要传的值)}
return promise}

XXX.then((resolve传来的值)=>{

    return X

}).then((X)=>{
}).catch(()=>{错误要做的事})

require('fs/promises') async await
回调函数的作用:防止非阻塞性函数没执行完就执行C

异步写法: readFile(path,{options1,2},function(err,data){}); 如果是写入,则是writeFile(path,XXX,op,()=>{})
options参数flag：文件的操作情况，r只读，w写入，a追加...encoding:编码
当writeFile的flag:参数是'a',则与appendFile一样.
先读后写:fs.readFile('path',(err,data)=>{ if(err){ }else{ 先读后写与copyFile(path,path,(err)=>{}一样

    fs.writeFile('path',data,(err){)})                                  相当于复制

先打开后读:fs.open('.path','r',(err,fd)=>{if(err){ }else{ 用于指定位置读

   var buf=Buffer.alloc(X);                                            Buffer.alloc建立X字节长度的缓冲区,并用0初始化
   var buf=Buffer .from(X)                                           Buffer .from将X进行二进制转化,并用此初始化
   fs.read(fd,buf,star,length,pasitong,(err,bytesRead,buf)=>{if(err){}else{}})   先打开后读,把读放在打开的异步里

参数:fd:open打开文件的地址 buf：开辟的缓存区
star：从缓存区的此节开始,之前的用初始化的值
length:要改变初始化的缓存区的长度,star+length不能大于初始长
pasitong：打开文件的起始位置
(err,bytesRead,buf) 返回的错误,返回的文件多长,返回的文件内容
fs.write(fd,buf,star,length,pasitong,(err,bytesRead,buf)=>{if(err){}else{}}) 写入内容
fs.fsync(fd)该方法吧缓存区的数据同步到文件中
fs.close(fd)关闭文件

原文链接：https://blog.csdn.net/songmaolin_csdn/article/details/52910771

fs.readFile('file',(err,data)=>{

if(err){
}else{ }})

对象转字符的方法: JSON大写,util要引入,util万能,+' '最差,${X}反斜不是单引号
util.inspect(), JSON.stringify(), qs.stringify()和XXX+' ’,${X}

几种content-type类型 text/html，text/plain，application/json，text/javascript
return 回调参数，代码遇此即回，不再执行之后的代码
不经return的函数没有值,只有操作结果.return的值才是函数的值
相对路径：./为同级，../上一级，../../上两级
const path = require("path");
const file = fs.readFileSync(path.resolve(__dirname, "../file.xml"));
if(url.parse(req.url,true).pathname == '/favicon.ico'){return; } get方法 防favicon.ico报错

    return;
    }

package.json中main： 可设置主程序入口
scripts:{"XXX": nodemon "路径"} 可设置nodemon插件启用方式 启动命令 modemon XXX

数据库操作:
use 数据库X; 缺省库名命令,可使之后的命令省去库名,不使用的话要在表前带库名
drop table 表X 删除 表
drop database 库X 删除数据库
create table 表X (字段X 类型 空否unll,字段Y 类型 unll,primary key(字段X)); 创建表格
alter table 表X 操作表的字段
add 字段X 类型 空否unll after 字段Y Y后插入,如有key属性,则要drop primary key重新addprimarykey()
default 值 /auto_increment 设默认值/设自增属性
alter table 表X drop 字段X 删除字段
alter table 表X modify 字段X 类型 改变字段类型
alter table 表X change 字段X 字段X 类型 空否unll 改变字段名
show XXX 强大命令 ;如:show databases/tables可显示当前数据库或显示表格列表
增:
insert into 表X (字段X,字段Y)values('X值','Y值') 增加数据 字段与值一一对应,自增型字段不用赋值
查:
select X,Y from 表X where X ='' and/or X ='' X,Y用*代替则全显示,where可用and等判判式多字段检索
like '%值%' =号换成like,模糊查询,%位置为模糊位置,可(前/后/全)模糊
order by 字段 desc,order by 字段 排序 缺省是升序,降序加 desc
改:
set sql_safe_updates=0; 关闭保护,不建议,=1时,可防止没有where时改删全表
update 表X set 字段1=值 字段2 where 字段 like '值'
limit i,n 除了where设置条件,此命令也可设条件,前i指索引,后指数量
删:
delete from 表X where 字段 like '值' 尽量不真删除用软删除(一字段设真假,查用where达到隐的假删)

node使用数据库的方法:
const mysql=require('mysql'); 先安装模块,再引放模块
const mysqlline=mysql.createConnection({ createConnection方法连接数据库
host:'localhost',
user:'root',
password:'qqqq2222',
port:'3306',
database:'siyong'})
mysqlline.connect() connect方法启用数据库
var sql='insert into 库.表 (字段1,2) values (?,?,?,?)' 增
var sql='update 库.表 set 字段1=? where 字段=?' 改 where后的=可用like与%通配法
var sql='select 字段1,2 from 库.表 where 字段=?' 查
var sql='delete from 库.表 where 字段=?' 删
var sqlbefore=["值"] 命令与值的分开写法
mysqlline.query(sql,sqlbefore,(err,res)=>{ query方法操作数据库,用了两个参数,命令与值的分开写法
if(err){console.log('数据库连接err');return} 注意return的使用
console.log(res)})
mysqlline.end() end方法关闭数据库

div宽度自适应内容:" display: inline-block"
边框总体设置：“border: 1px solid black;”
边框单独设置：“border-top: 1px solid black;”
背景设置：background-color: rgba（255，255，255，0.8）;
背景投影设置：box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.795); 注：第三项是边虚化度
标签都有默认的margin，padding，有的还有border，最好的办法是这三个初始归零
不能给同一个盒子设置margin-top与margin-bottom，可通过给父元素设置padding-bottom代替本标签的margin-bottom设置
文本居中text-align: center，标签居中margin：auto
移除列表默认设置list-style-type: none;
移除链接默认设置text-decoration: none;
fount-size不等于标签的高
小图标用background-image: url('XXX')比用img标签导入好，这样不会在图片缺失时显示图片裂开
为了防止background-image图片缺失，可在后放上background-color
background-image不会抻开盒子，需另外定义盒子宽高，否则不显示
background-size:24px 24px;background-repeat: no-repeat;与background-image配合使用
div不设宽度默认是占一行，float: right会无效
满足条件显示用V-SHOW。鼠标经过显示用伪类来实现：经过标签：hover 显示标签{display：}
float易引起父级边框塌陷问题，解决方法：父级加上overflow:hidden,但下拉菜单使用会出错
父级：after{content:"";clear:both;display:block;}这是完美的解决方法
防止链接跳转的方法：“href=‘#’”
li是占一行，如设置display: inline-block自适应，所有li会横排，若要保持竖排，只能指定宽度
action="url" method="post" 表单的两个重要属性
form里标签的action,method属性名前要加form,标签的属性会履盖form的属性,
form的novalidate属性:不需验证 要生效需输入框中有 required属性才行
属性兼容性的解决方案：利用覆盖法，不兼容不生效，后面覆盖前面，可以把先进属性放在最后面，如兼容则生效覆盖
style

Bootstrap学习手册 [ˈbuːtˌstræp]
Bootstrap5安装：
安装：npm install bootstrap
引入：import 'bootstrap/dist/css/bootstrap.min.css' 与 bootstrap.css代码一样，只是bootstrap.css格式化一行行

      import 'bootstrap/dist/js/bootstrap.min.js'

IntelliSense for CSS class names in HTML 类名补全插件
Bootstrap 5 Quick Snippets 快速代码段插件，起始用bs5-

container容器：
设备与固定尺寸、起始设备对照表：
设备 <576、<768、<992、<1200、<1400、∞ 6个设备尺寸档，分别是：手机、平板、显示器、显示器+....
固定值 540、 720、 960、 1140、1320 container缺省响应阶段性的赋值一个固定宽度
container -sm -md -lg -xl -xxl 起始生效100%的宽度，-fluid为始终保持100%的宽度
col -sm -md -lg -xl -xxl 列模式响应的设备码，缺省为所有设备都采用列模式

row col网格：
col-设备码-权重值 col完整写法
权重占位规则: 一行权重总值为12, 子权重值不能为小数,
先到先得原则 先按排序在前的权重排列
超权另起原则 如超12会另起一行
有权不补原则 如不够12会留下空白,因此应保证一行之和为12,否则会有空白出现
有值先排,无值平均原则 当有值和无值混合时,先以有值占位,剩余空间无值列平均占位
有难同当原则 列的高度以其中最高的列齐平
没row必死原则 col类必须在row类的标签包裹下才能生效
设备不同列宽:"col-sm-X col-md-Y" 根据设备不同设置不同的宽度
col嵌套 可以嵌套在别的col类标签里
col并列 col-12 col-lg-4 当达到后者时执行后者，未达到时执行前者
offset-设备码-偏移值 向后偏移权重宽度,尊崇超权另起原则

自适应 以16px=1rem为基点，文本大小、行高、行距等自适应
标签类：h、small、mar、blockquote 许多标签也可作为类使用，
display-1..6 放大类 display-6为正常大小，display-1最大
缩小标签 比父标签小一号,为类时,以父标签为基准不以本标签为基准(在h标签内会出错）
<mark> 标记标签 淡黄高亮背景
<abbr>简写标签 下划虚线，title=""属性（鼠标停留可显示全写）
<blockquote>引用标签 放大加粗，作为标签无效为类才有效果。blockquote-footer 放大加粗淡灰
编码标签 缩小红字
键输标签 黑底白字
<pre>预格式化标签 小字且能输出空格和换行
lead 段落突出类 放大，以p标签为基准，无视本标签，不会自适应大小
text-start/-center/-end 对齐类 左、中、右对齐
text-justify/-nowrap 超屏类 超屏换行、不换行
text-lowercase/-uppercase/-capitalize 大小写类 小写、大写、首字母大写
initialism缩略词类 小字大写
list-unstyled/-inline移除列表效果类（两类效果一样） 移除默认效果(前面的小点)及顶格,<li>加入list-inline-item可归一行

八种色彩11个类
text-muted 柔和的文本 柔灰色（背景色无效用secondary代替）
text-primary 重要的文本 深蓝色 bg-primary
text-success 执行成功的文本 浅绿色 bg-success
text-info 提示信息的文本 浅蓝色 bg-info
text-warning 警告文本 黄色 bg-warning
text-danger 危险文本 红色 bg-danger
text-secondary 副标题 柔灰色 bg-secondary
text-dark 深灰色 黑色 bg-dark
text-body 默认颜色 黑色（背景色无效用dark代替）
text-light 浅灰色 白色 bg-light
text-white 白色文本 白色（背景色无效用light代替）
bg-primary-50 背景色 50是设置透明度
border-primary 边框色
table-primary 表格背景色 需table类在前才生效，较bg色浅
alert-primary 提示框背景色 需alert类在前才生效，较bg色浅
btn-primary 按钮背景色 不需btn类在前，较bg色浅
btn-outline-primary 轮廓色
list-group-item-primary 背景色 本级标签背景色
dropdown-menu-dark 黑色背景类 改变全部或部分子菜单的背景色，只有黑色一种色，其它色不可以
navbar-dark 改变全部或部分导航栏的背景色，只有黑色一种色，其它色不可以

表格

定义表头 定义标题栏 定义一行 定义格内容 定义数据 栏

格内容
格内容

table 格式化表格类 行间用直线分隔，标题栏与数据栏的线加粗，分散对齐
table-primary 背景颜色类 八色外多了active色,与secondary 色近似,需table类在前才生效

                                                                                可放在<thead><tbody><tr><th>标签内单独控制这些标签的效果

table-striped 条纹表格类 隔一栏颜色加深，需table类在前才能生效，背景色缺省加深效果是浅灰
table-hover 鼠标停留类 鼠标停留颜色加深，需table类在前才能生效，背景色缺省加深效果是浅灰
table-sm 缩小表格类 缺省是-md（正常大小），无放大类（ -lg-xl-xxl ）
table-bordered 边框化表格类 加边框，不需table类在前生效但没有分散对齐效果
table-borderless 无边框化表格类 去边框，不需table类在前生效但没有分散对齐效果
table-responsive 表下滚动条类 当页面小于表宽，会在表下加滚动条，注：需放在table上一级的标签内
table-responsive-sm 响应设备码类

图片
rounded-top-bottom 圆角样式类 图片上小圆角\下小圆角，缺省为四小圆角
rounded-circle-pill 椭圆形类 pill以短边为直径画弧连两长边，circle画弧连长短边中线，图形正方形时为圆
rounded-top rounded-circle 组合成半圆方式 两个命令组合可形成上或下半圆
img-thumbnail 缩略图类 外加一圈扩大的边框，具有img-fluid 效果（自适应大小）
img-fluid 自适应类 自适应大小
float-start\end 对齐类 左对齐、右对齐
mx-auto d-block 对齐类 两个命令组合可居中效果

提示框
alert 提示类 会产生一个四圆角的框（无色）
alert-primary 背景色 需alert类在前才生效，较bg色浅
alert-link 链接色代替 在链接中加入此命令可替换链接的颜色样式，用背景的相似色代替
alert-dismissible 关闭按钮右对齐 使其子标签中有btn-close类的标签右对齐，需alert类在前才生效
btn-close 关闭样式类 形成一个X的关闭图标
data-bs-dismiss="alert" 关闭父属性 可关闭父class=“XXX”的标签 与btn-close组合形成关闭功能
fade show 淡出淡入类 两个类通常一起出现，show淡入缺少会出错

按钮
btn 按钮样式类 扩大且四圆角（无立体边框,无色）默认样式浅灰有边框
btn-primary 按钮色 填充按钮色，btn类决定采用btn样式还是默认样式
btn-link 链接样式类 显示一个链接的样式
btn与btn-primary类可用在<input> 标签上， 还可用在别的标签上，但只有<input>上按了有放大的动画效果
role="button" 重定义标签属性 能改变原标签，重新定义标签属性
btn-outline-primary 未选边框选中色块类 未选状态会出现边框，选中会填充颜色
btn-sm、-lg 缩小放大类 小一号、大一号。无（ -xl-xxl ），
d-grid、row 块级类 在父级中加入此类可使按钮自适应一行，（？自身需添加btn-block？ ）
gap-0~5 块级(行列)间隔 在父级加入此类可使行间隔，值为0 无间隔，5为最大间隔
按钮分组： 分组的按钮是inline模式，多个组会一行显示，用br标签换行
btn-group 按钮并行类 在父级中加入此类可使子按钮并成一行
btn-group-vertical按钮并列类 在父级中加入此类可使子按钮并成一列
btn-group-sm-lg父极缩小放大类 在父级中加入此类可使子按钮小一号、大一号。无（ -xl-xxl ）不会并拢
active 已选中类 显示已点击样式
disabled 禁止点击类 显示禁用样式
spinner-border-grow 加载效果类 绕半环旋转\圆闪烁效果。常放在空的子标签，会撑大父签，用-sm正常大小
dropdown-toggle下三角图标类 在标签后显示一个下三角的下拉样式

徽章
badge 徽章类 会产生一个四圆角的框（无色
需bg-primary类添加背景色
可rounded-circle-pill 类添加形状
徽章与父元素的文字同大，可以很好的嵌入到按钮内

进度条
progress 进度条类 加入此类使子标签产生灰色长条，style="height:10px" 控制长条宽度
progress-bar 当前进度类 在灰色长条中用彩色显示当前进度，style="width:70%"控制当前进度
bg-primary 当前进度颜色 用bg-primary 来设置当前进度色，默认缺省为primary色，
progress-bar-striped 当前进度条纹
progress-bar-animated 条纹滚动
子标签的文字嵌入到进度条内显示
通过多个子标签可将进度条分段

加载效果
spinner-border-grow 绕半环旋转\圆闪烁效果。常放在空的子标签，会撑大父签，用-sm正常大小
text-primary 图形颜色 半环或圆的颜色

分页
<ul class="pagination"> <li class="page-item"></li></ul>
pagination 行元素且横排 使子标签成行元素且横排,附带可去li格式
page-item 去合并双线类 双线时去除框左框线,保留单线
page-link 去格式加框类 可去掉本级标签格式并加边框
pagination-sm-lg 缩小与放大
justify-content-center 居中 不浮动
justify-content-end 右对齐 不浮动右对齐,float-end 会产生浮动
可用active标记选中,disabled 类设为不可选
面包屑导航
breadcrumb 行元素且横排 使子标签成行元素且横排,附带可去li格式,与pagination可互用
breadcrumb-item 合并间加斜线类

列表
list-group 块元素且竖排 使子标签成行元素且竖排,忽略li格式对齐文字(不能去前面的点)
list-group-horizontal 行元素且横排 使子标签成行元素且横排,忽略li格式对齐文字(不能去前面的点)
list-group-item 去格式加框类 放在子标签，可去掉本级标签格式并加边框,与page-link相似(会保留链接色)
list-unstyled 去原始格式 放在父标签，去掉子标签格式，不加边框
list-group-item-check 消散充满类 使单\复选框消失为整个label
list-group-item-action 去除链接色 去掉本级标签链接色
list-group-item-primary 背景色 本级标签背景色
list-group-flush 去除外边框 去除子标签组外边框,保留内边框
可用active标记选中,disabled 类设为不可选

卡片
<div class="card"> card类会创建一个圆角框样式

<div class="card-header">头部</div>                  card-header类创建一有宽边距且灰背景色的框
<div class="card-body">内容</div>                     card-body类创建一有更宽边距且白背景色的框
<div class="card-footer">底部</div>                    card-footer类创建一有宽边距且灰背景色的框

bg-primary 背景颜色 可用于设置总的颜色,也可分别设置头部\内容\底部
card-img-top/-bottom ???无视在代码中的排序,强制排在前或后
card-img-overlay 无视在网页中的排序,强制在表层显示

下拉菜单
<div class="dropdown\dropend\dropstart\dropup "> 控制下拉菜单和三角图标方向（下\右\左\上）如无空间，向有空间处显示
<button class="dropdown-toggle" dropdown-toggle类会在按钮后加个三角图标
data-bs-toggle="dropdown"></button> data-bs-toggle="dropdown"属性付与标签下拉功能
<div class="dropdown-menu"> dropdown-menu类定义菜单实体,且隐藏子菜单

<a class="dropdown-item">链接 1</a>...           dropdown-item类格式化标签（去默认格式，左边距、获得焦点变色）

<div class="dropdown-divider"></div> dropdown-divider分割线，可用border-bottom边框底部类代替或

---

标签
<div class="dropdown-header"></div> dropdown-header类格式化标签（灰色、去默认格式，左边距）
active或disabled 选中或不可选类
bg-danger 背景色类 在父菜单中改变全部子菜单背景色，放在子菜单可单独改变背景色
dropdown-menu-dark 黑色背景类 改变全部或部分子菜单的背景色，只有黑色一种色，其它色不可以
dropdown-menu-end 放在dropdown类后，当向下菜单时，菜单右对齐
btn-group 如果下拉菜单是在按钮组中，则这个下拉菜单要加一个btn-group 类才能融入按钮组
下拉菜单转导航
加入display属性使dropdown-menu隐藏的子菜单显现出来
加入position属性来定位，默认是absolute绝对定位，会覆盖叠加其它标签，可通过relative相对定位或static无定位来融入文档流
自定义下拉菜单：(通过折叠来实现)
<button class="XXX" data-bs-toggle="collapse" 属性付与标签折叠功能
data-bs-target="#home" 折叠之锚，可用href="#demo"代替
aria-expanded="true"> 初使菜单为打开
<div class="collapse show" id="home"> collapse类使内容隐藏，show初始显现（抵消collapse效果）

      <ul class="nav flex-column ">                    nav格式化对齐，flex-column 使菜单竖排
        <li ><a  class="nav-link"></a></li>        nav-link消除链接的默认格式

<style>.XXX{display:flex} display:flex使button内的图标可动画
.XXX:before{content:url("https://..")} before加伪元素（这里是一个图片）
.XXX[aria-expanded="true"]:before{transform:rotate(90deg)} transform:rotate旋转动画，aria-expanded菜单展开时应用动画

折叠
<button data-bs-toggle="collapse" data-bs-toggle="collapse" 属性付与标签折叠功能
data-bs-target="#demo"></button> data-bs-target="#demo" 折叠之锚，可用href="#demo"代替
<div id="demo" 锚
class="collapse">隐藏的内容</div> collapse类使内容初始隐藏，可折叠其它标签
show 显示类 show可以使collapse类初始隐藏失效
折叠组(手风琴式)
<div id="accordion"> 共父之锚

    <div class="card">                                         成员边框
        <div class="card-header">                          定义成员头部样式（左内边距、下边线,淡灰色）class="accordion-header"（无色，无内边）
            <a class="accordion-button"                  动态头部样式（100%宽，动态上下箭头，选中淡蓝色 ）成员头部样式要accordion-header
              data-bs-toggle="collapse"                    定义开启折叠功能
              href="#coll"></a> </div>                    折叠锚链
        <div id="coll"                                              折叠之锚
           class="collapse"                                        初始隐藏、可折叠其它标签 
           data-bs-parent="#accordion">                共父锚链 
            <div class="card-body"> </div></div>   定义成员隐藏部样式（上下内边距扩大）card-body与"collapse"最好不在同一标签（会卡顿） 
     <div class="card"> ........ </div>                      第二成员

导航
<ul class="nav"> nav类去原始格式、横排
<li class="nav-item"> nav-item类好像没啥鸟用

<a class="nav-link">Link</a>                            nav-link类去下划线，垂直居中对齐

justify-content-center/-end 标签对齐类 导航栏水平居中对齐/右对齐
flex-column 竖排类 在nav类后加上flex-column类为竖排，可用navbar-nav代替，不需前置nav
nav-tabs 选中效果类 此类会在底部加条横线，active选中项横线会包裹，横排有效，竖排会出错
nav-pills 选中效果类 此类会使active选中项背景变色圆角框
nav-justified 等宽类 横排时，各项等宽居中
导航选项卡 （叠加监听）
<a data-bs-toggle="tab" 开启选项卡功能 在导航选项上使用data-bs-toggle="tab"开启选项卡功能
href="#menu1"> 锚定内容 通过 href="#menu2"锚定内容
<div class="tab-content"> 选项卡组合类 tab-content将多个内容组合
<div id="menu1" class="tab-pane fade"> tab-pane 隐藏内容，触发显示 。fade渐显类
选项卡要用active设置好导航选项，内容的初始显示
响应式的导航栏（横竖式）
<div class="navbar navbar-expand-sm "> navbar类使竖导航栏每项不会独占一行，navbar-expand-sm定义响应尺寸
<ul class="navbar-nav"> navbar-nav定义竖排，与flex-column也是定义竖排，但flex-column不可响应
navbar-brand 放大显示，常用于LOGO显示
响应式的导航栏（折叠式）
<button class="navbar-toggler" 按钮样式类，还可控制本标签响应显示隐藏
data-bs-toggle="collapse" 付与标签折叠功能
data-bs-target="#menu1"> 折叠之锚
<span class="navbar-toggler-icon"> 按钮内显示一个三横的图标
<div id="#menu1" class="collapse id锚与collapse初始隐藏类
navbar-collapse" > 使导航另起一行
响应式的导航栏（分行式）
<header class="d-flex flex-wrap justify-content-center">响应换行+居中
<ul class="nav"> 只能使用nav横排类不能使用navbar-nav横竖响应类
混合式的导航栏
<ul class="navbar-nav me-auto"> </ul> me-auto使<ul>外图标远离右对齐
<form class="d-flex"> <input > <button> d-flex使form内标签横排
<span class="input-group-text" ></span> 在<input type="text">前加文字的方法
navbar-text 导航文本类 设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样
fixed-top/-bottom 导航栏顶部/底部固定（bg-dark navbar-dark）导航条要加背景色，否则滚动时会显示在菜单上

                                       style="margin-top:80px"设置上边距，否则导航条会盖住下面

导航选项卡 （滚动监听）
<body data-bs-spy="scroll" 监听滚动条开启（滚动条不同位置来点亮不同导航项）
data-bs-target=".navbar" class锚定引发（不知道为什么，不要也有用呀？）
data-bs-offset="50"> （不知道为什么，不要也有用呀？）
横向导航栏
<nav fixed-top/-bottom"> 导航栏要设置固定，否则导航栏随滚动监听就失去意义
导航选项与内容的id锚
<div id="menu1"> 内容之锚
竖向导航栏

position: relative;                                              竖向要在内容栏里设置此三项让内容在固定区域里滚动，否则无效
height: 350px;
overflow: auto;

弹出侧边框
<a data-bs-toggle="offcanvas" 弹出侧边框功能开启，点击触发会产生一个灰画布底和锚所在标签内容
href="#menu1"/data-bs-target="#menu1"> 弹出之锚，href与data-bs-target效果相同
<div class="offcanvas 打开隐藏（），侧边滑出
offcanvas-start/-end/-top/-bottom" 初始隐藏，左/右/上/下出
data-bs-scroll="true" 弹出框下的图层可以滚动，缺省为false，不可赋空值
data-bs-backdrop="true" 点击触发会产生一个灰画布，缺省为true ，不可赋空值
id="menu1"> id锚接
<div class="offcanvas-header"> 标题栏横排，两端对齐
<button data-bs-dismiss="offcanvas"> 关闭侧边栏
<div class="offcanvas-body"> 使内容与标题栏齐平，有外边距

轮播图
头部设置
<div id="demo" id锚
class="carousel slide" carousel左右切换与指示符功能开启和显现， slide滑动效果开启
data-bs-ride="carousel"> data-bs-ride="carousel"自动播放开启
指示符设置
<div class="carousel-indicators"> 将指示符归组、使图标叠加在图片表面，位于底部，居中对齐
<button data-bs-target="#demo" 忽视本身效果生成一条横线（需在carousel-indicators标签内），锚定id作用
data-bs-slide-to="1" 标签与图片配对
class="active"> 指示符组一定要有个指示符active，否则出错
图片设置
<div class="carousel-inner"> 使图片居于底层
<div class="carousel-item active"> carousel-item使图片归组，叠加，图片组一定要有个active，否则出错
<img style="width:100%"> 统一图片尺寸
<div class="carousel-caption"> 使文字叠加在图片表面，居中
左右切换设置
<button class="carousel-control-prev/next" 使图标叠加在图片表面，去边框、居中左/右对齐
data-bs-target="#demo" 锚定id作用
data-bs-slide="prev/next"> 图片左滑动/右滑动
<span class="carousel-control-prev/next-icon"> 左右箭头图标

模态框（弹出窗）
触发按钮
<button data-bs-toggle="modal" 开启弹窗功能，点击触发灰色层，之上再一个弹窗
data-bs-target="#demo"> 锚定id作用
弹出实体
<div class="modal" modal 隐藏弹窗，开启弹窗关闭按钮功能
id="myModal"> ID之锚
<div class="modal-dialog"> 显现弹窗（被触发时响应显示）

<div class="modal-content">                            一个白色背景的圆角框
  <div class="modal-header">                           头部样式（横排，两端对齐，底部分隔线）
    <h4 class="modal-title"><button class="btn-close" data-bs-dismiss="modal">  头部可放标题和关闭按钮等
  <div class="modal-body">                              中部样式，效果不明显
  <div class="modal-footer">                            底部样式（横排，右对齐，顶部分隔线）

fade 弹出或关闭的动画效果 放在实体modal类之后
modal-sm/-lg/-fullscreen 小/大/满窗体尺寸 放在 modal-dialog 类后
modal-fullscreen-sm/-lg/...-down 响应满窗体的起始尺寸
modal-dialog-centered 窗体水平和垂直居中（默认是水平居中）
modal-dialog-scrollable 当超出时出现窗体滚动条（默认是父窗体出现）

提示工具
在CSS中实现方式：提示框用visibility: hidden隐藏，父标签用“ .父:hover .子 {visibility: visible}来触发显现
提示框三角形的实现：.子:after{ content: "";border-style: solid;border-color: black transparent transparent transparent;}
HTML使用title 属性实现简单的提示文字功能
Bootstrap5实现方式：
<button data-bs-toggle="tooltip" 开启提示框功能
data-bs-placement="top/bottom/left/right" 提示框放置位置（默认是top）
title="内容!"> 提示框内容
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 在<script>里初使两变量
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {return new bootstrap.Tooltip(tooltipTriggerEl)})

弹窗工具
<button data-bs-toggle="popover" 开启提示框功能
data-bs-placement="top" 提示框放置位置（默认是top）
data-bs-trigger="focus" 失焦引发关闭
data-bs-trigger="hover" 经过引发打开（默认是点击打开）
title="弹出框标题" data-bs-content="弹出框内容"> 两项可以缺一，但data-bs-content不能赋空值
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 在<script>里初使两变量
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl)})

高与宽：
w-25/-50/-75/-100 单位是%，取值是25的倍数，mw-auto/100自动宽，全宽
h-25/-50/-75/-100 单位是%，取值是25的倍数，mh-auto/100自动高，全高
边距
p-0~5 内边距 值0~5，缺省0无边距
ps/pe/pt/pb/px/py-0 左/右/上/下/左右/上下内边距，通常px/py-auto来设置居中
m-0~5 外边距 值0~5，缺省0无边距
ms/me/mt/mb/mx/my-0 左/右/上/下/左右/上下外边距，相邻两距取其大
ms/me/mt/mb/mx/my-auto 在d-flex布局中有效，mx/my-auto来设置居中(非flex布局需设w值才生效),
边框
border-start/end/top/bottom 左/右/上/下边框类，多边框组合（如左右边框border-start border-end），border四边框
border-0~5 边框粗细，缺省为1，须放在边框类后才生效
border-start/end/top/bottom-0 排除左/右/上/下中的一条边框
边角
rounded-start/end/top/bottom 单边两圆角类，双边组合三圆角(如rounded-top rounded-end)，rounded四圆角，无法组成一角圆
rounded-circle/-pill 可变度四圆角/90度四圆角，加rounded-start/end/top/bottom可削圆角（无法削成对角圆）
浮动
float-start/end/ 左右浮动 跑出乱入(父无内容会跑出，无视块元素乱入下标签）媚上欺下(先入上行内元素,无则下乱入)
float-sm/-md/lg/-xl/-xxl -end 响应式浮动
clearfix 清除浮动 防跑出乱入，迎上拒下（上浮动标签可入，下浮动标签不可入）

弹性布局
d-flex 子成为弹性行内元素且无间隙，类似子display:inline-block的效果
d-inline-flex 子成为弹性行内元素且无间隙，自身也成为弹性行内元素
flex-row/column 子横排占满高度/竖排占满宽度，缺省为横排（需d-flex在前 才生效）
flex-row-reverse 子横排、右对齐、倒序排列 （需d-flex在前 才生效）
flex-column-reverse 子竖排、左对齐、倒序排列 （需d-flex在前 才生效）
justify-content-start/-end/-center/-between/-around 水平向 左/右/居中/两端/分散对齐（需d-flex在前 才生效）
flex-fill 均分剩下空间
flex-grow/shrink-1 扩展，收缩的空间分配
order-X 排序值
子自适应
flex-wrap 横排超出会换行，削去子的高度（子高度自适应，不适应父高度）
flex-nowrap 横排超出不换行，不削子的高度（子适应父高度）
flex-wrap-reverse 横排超出会换行，倒序
align-items-start/end/center 横排削高，竖排削宽，垂直向居顶/居底/居中( 竖排时水平向居左/居右/居中)
align-content-start/end/center/between/around/stretch 顶/底/垂直居中/垂直两端/垂直分散/分散无间隙对齐(竖排则水平向)
align-items与align-content区别：items自带削高content要加flex-wrap 削高自适应，items换行列间隙宽content换行列无间隙
align-items与flex-wrap区别： items能削宽与高,wrap只削高(削宽要align-content组合),wrap自动换行与列,items要借wrap换行与列
竖排垂直向对齐的实现：
1、利用wrap换行特性，设父宽只容一列，强行将横排挤压成竖。align-content换行wrap无间隙 比items好 2、将列包裹，在其外应用垂直向对齐
align-items- baseline 基线顶对齐，不以子容器为对齐，以字容器的内容基线来对齐
align-items-stretch 横排不削高，竖排不削宽（无对齐，缺省效果）
align-self-start/end/center/baseline/stretch 单个子垂直向居顶/居底/居中/基线/无对齐（缺省效果）

表单
form-control 100%宽度带边框且把内联变块元素
<label><input> </label> label嵌套input能代替for属性关联<input>（ for不能出现）
form-label 定义一个下外边距
form-check 定义一个左内边距且把内联变块元素
form-check-input 消除form-check定义的左内边距，生成一个复先框（会消除type="checkbox"的框）
col网格与colform-control冲突解决方法：colform-control为子标签，在父标签上放col
<textarea rows="5" > rows属性设置文本标签行数
form-control-lg/sm 设置input文本框高度，不变成100%宽度，100%宽度需加另form-control
disabled/readonly 输入框禁用/只读
checked 单选或多选的选中状态
required 输入框非空验证开启
novalidate 不对子的输入框非空验证（放在父标签中）
form-control-plaintext 输入框去边框
form-control-color 不太宽的无边框（不改变原标签的内联与块属性），通常用在type="color"的input上
下拉菜单标签（单选/多选）
<select multiple multiple属性使单选变多选，下拉框为全展框，只有放在<select>标签才能选择
class="form-select" form-select类100%宽度且把内联变块元素，只有放在<select>标签才能下拉和选择
<option>1</option> 只会显示 <option>标签里的内容
form-select-sm/lg 设置选择框高度，不带100%宽度，100%宽度需加另form-select
disabled 选择框禁用
下拉数据列表标签：
<input list="sites" > list="sites"绑定锚
<datalist id="sites"> <datalist>标签自带隐身属性，ID之锚
<option>1</option> 只会显示 <option>标签里的内容
复选框竖排：默认是内联元素横排，用块元素包裹使其竖排
单选框归组：依靠相同的name="optradio"值来归组
form-switch（开关样式类） 放在父中使子单选或子复选框变成开关类，注：子要加class="form-check-input"类才生效
<input type="range" type="range" 定义标签为滑块
class="form-range" form-range类，将内联元素变成100%宽度的块元素
step="10" min="0" max="4"> step每次滑动的步长默认步长为1，min与 max最小最大值可以是任意整数，默认min0max100
输入框组
<div class="input-group " input-group使子标签转成内联元素，破colform-control的100%宽成内联
input-group-sm/lg> 子标签的高度
<span class="input-group-text"> input-group-text使标签背景变灰、带边框

  <input  class="form-control" >   input-group使colform-control的100%宽转成内联

input-group 万能包裹 能包则包，不听话加input-group-text类，终级大招套个<div>
输入提示（浮动标签）：
<div class="form-floating"> 使label标签替代<input><textarea>标签的placeholder属性内容或增加下拉标签的标头
<input class="form-control" 使form-control或form-select定义的框变大且包函<label >内容

 placeholder="E">                         不可赋空及缺省，否则<label >初始占位失效 

<label >Email</label> 初始占位及标头的内容（点击<input>之前<label >内容黑体占位，点击后内容变淡让位上标）

                                                     注：<label >一定要放在尾部才有点击切换效果！！

验证
<form class="was-validated"> 使<input>验证前红框/尾部红圈感叹号，验证后绿框/尾部绿勾，控制valid-等<div>的切换显示
<input class="form-control" required> form-control类使<input>验证符号正常显示，required开启非空验证功能

<div class="valid-feedback">          验证通过的显示
<div class="invalid-feedback">       验证不通过的显示         注：一定要放在尾部才有<div>的切换显示效果！！

自定义验证：初始不显示<form class="was-validated"> 提交时验证失败才显示was-validated效果。用到<script>详见网页教程

fs-1..5
opacity-100 字体透明度(?只能是25的倍数?)
w-100 宽度比
justify-content-between/-center flex布局下分散/居中对齐
flex-shrink 当子项总宽大于父时,子收缩的权重
gap设置网格行与列之间的间隙
类的通用性：表格类可以给按钮，按钮类可以给提示框，类是通用的
:class="{'active':ok==3,'btn': true,'btn-primary': true}"
把<input>放在<label>标签内,点击<label>另何区域,都能对<input>进行选取操作?
shadow 阴影效果
d-block 转成块元素
checked 在单\复选框中,此属性可使本标签为选中状态
disabled
position 定位属性
absolute 绝对定位 以第一个父元素进行定位。通过 "left", "top", "right" , "bottom" 定位，位置与文档流无关不占据空间
fixed 固定定位 与absolute相似，也是绝对定位，只是他以浏览器窗口为父，无视滚动条，不占据空间
relative 相对定位 以自身原始位置进行定位。原始位置保留会占据空间
sticky 粘性定位 如未达设定位置则随文档流无定位，当达到时从原始位置脱离固定，原始位置保留占据空间
static 无定位 随文档流，"left", "top", "right" , "bottom" 设置无效，不会覆盖叠加其它标签（以上四种定位会）
z-index 当定位产生会覆盖叠加时，可通过此属性来定层级
display block块级元素（与内容宽度无关，独占一行）inline行内元素（宽度只是内容宽度）inline-block（不独占一行的块级元素）
text-decoration-none 消除链接下划线
overflow-hidden 溢出隐藏 包括其下的子子孙孙
form-control 类 换行，宽度100% 、浅灰色圆角边框、阴影效果，得到焦点之时阴影和边框效果会有所变化
align-items-center 垂直对齐方式
align-items-stretch 拉申对齐方式
justify-content-md-between
<span class=" bg-danger rounded-circle" style="width: .5em; height: .5em;"></span> 设置一个彩色圆点
data-bs-dismiss="alert" 关闭父提示
data-bs-dismiss="offcanvas" 关闭父侧边
data-bs-dismiss="modal" 关闭父弹窗
data-bs-toggle="dropdown" 下拉菜单功能
data-bs-toggle="collapse" 折叠功能
data-bs-toggle="tab" 选项卡功能
data-bs-toggle="modal" 弹出窗功能
data-bs-toggle="tooltip" 提示框功能
data-bs-toggle="popover" 弹出框功能
data-bs-toggle="offcanvas" 弹出侧边功能
data-bs-spy="scroll" 监听滚动条
data-bs-offset="50"
data-bs-placement="top" 放置位置
data-bs-ride="carousel" 自动播放功能
data-bs-target="#dem" id锚定引发
data-bs-target=".navbar" class锚定引发
data-bs-trigger="focus" 焦点引发
data-bs-trigger="hover" 经过引发

data-bs-parent="#dem" 归子标签，只显其一
data-bs-content 绑定的内容
text-start/-center/-end 文字对齐类 左、中、右对齐
justify-content-center/-end 标签对齐（需d-flex在前 才生效）
float-start/-center/-end ,float会产生浮动
tabindex="1" 用tab键时，他的排序（第一行的tab总是排第一，底于第一行tab植将被越过）
role="button" 辅助标签描述
aria-controls="offcanvasExample" 辅助功能描述
visually-hidden类 隐藏显示类
fw-semibold 字体

内联元素与块级元素：
内联元素：
1、自适应宽度不独占一行
2、没有内外边距（只能通过css设置内边距，左右外边距）
3、没有宽度和高度（即使css设置也不行），img也是内联块级元素，可设高宽
块级元素：
1、独占一行
2、有内外边距、有宽度和高度
内联块级元素：
1、自适应宽度不独占一行
2、有内外边距、有宽度和高度
内联元素集：
a – 链接、span – 常用内联容器定义文本内区块、img – 图片、input – 输入框、label – 表格标签、select – 项目选择
textarea – 多行文本输入框、bdo –反向、br – 换行、 bdi – 隔离、abbr – 缩写、acronym – 首字、cite – 引用、q – 短引用
em – 强调、dfn – 定义字段、tt – 电传文本、code – 计算机代码、samp – 计算机代码、kbd – 定义键盘文本、var – 定义变量
strong – 粗体强调、i – 斜体、big – 大字体、small – 小字体文本、strike – 中划线、u – 下划线、sub – 下标、sup – 上标
标签嵌套：
内联元素不能嵌套块元素，a标签不能嵌套a，h不能直接套h标签，p标签是不可以套块标签