前言

html：页面结构

css：页面样式

js：页面交互

本篇文章只列举出常用的html标签，以及常用的css样式

学习网站

HTML 教程https://www.w3school.com.cn/html/index.asp CSS 教程https://www.w3school.com.cn/css/index.asp JavaScript 和 HTML DOM 参考手册https://www.w3school.com.cn/jsref/index.asp JavaScript 教程https://www.w3school.com.cn/js/index.asp

HTML

框架

文本标签

span

语法：

<span>    </span>

含义：

span标签没有特殊的含义，通常是将文本进行标注，方便对其格式化处理

eg：

hr（水平线）

语法：

<hr>

含义：

水平分割线

eg：

h1~h6（标题）

语法：

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

含义：

1~6级标题

eg：

p （段落标签）

语法：

 <p>段落内容</p>

含义：

用于定义一个段落

<b> / <strong> （文本加粗）

语法：

       <b>文本加粗</b>
       <strong>文本加粗</strong>

含义：

文本加粗

br(换行)

语法:

<br>

含义：

实现文本换行

表格标签table

含义：

在网页中以行列的形式展示数据

表格标签：

table ：定义表格整体

表格项标签：

        1. tr : 定义一行

        2. td ：单元格

        3. th ：表头单元格（具有加粗和居中的效果）

表格标签的嵌套：

1.tr标签只能包含td标签和th标签

2.table标签只能包含tr标签

table标签的属性：

1.border：设置边框的宽度

2.width：设置表格的宽度

3.height：设置表格的高度

4.align：设置表格内容的对齐方式

5.cellspacing : 规定单元之间的空间

表单标签form

含义:

在页面中负责数据采集功能，如注册登录等功能

表单标签：

form :

定义一个表单

属性及属性值：

1. action : 表单提交的地址，如果不指定，默认提交到当前页面

属性值：

/xxx.php : 表单提交到xxx.php页面

2. method : 表单提交的方式

属性值：

get : 表单提交方式为get方式，默认值，在url后面拼接表单的值，长度有限制

post : 表单提交方式为post方式，在消息体（请求体）中传递的，参数大小无限制

表单项标签：

1. input ：

定义：

定义表单项，通过type属性控制输入形式

属性及属性值：

1. type ：控制输入形式

属性值：

text : 文本框

password : 密码框

radio : 单选框

checkbox : 多选框

submit : 提交按钮

button : 按钮

reset : 重置按钮

image : 图片按钮

file : 文件上传

hidden : 隐藏域

color : 颜色选择框

2. name：表单的名称

3. placeholder : 提示信息

4. value：表单项的值

2. select ：

定义：

下拉列表, option标签定义选项

属性及属性值：

1. name：下拉列表的名称

2. selected ：默认选中

3. value：选项的值

3. textarea :

定义：

定义文本域

属性及属性值：

1. rows：文本域的行数

2. cols：文本域的列数

3. name：文本域的名称

4. value：文本域的值

label 标签：

包裹表单项标签，让用户可以点击文字选中表单项

图片标签（img）

语法：

<img src="">

含义：

展示图片

属性：

1. src：

图片资源路径 :

1> 相对路径:

./ : 当前目录（可以省略）

../ : 上一级目录

2> 绝对路径：

1> 绝对磁盘路径

2> 绝对网络路径

(网络中存在+访问时需联网)

2 .width：

图片宽度(px : 像素 % : 相对于父元素的百分比)

3. height：

图片高度((px : 像素 % : 相对于父元素的百分比))

超链接标签（a）

语法：

<a href="..." target="..."></a>

含义：

用于创建超链接。它可以链接到其他网页、文件或同一页面内的不同位置

属性：

1.href:

指定资源访问的url

2.target：

指定在何处打开资源链接

1> _self: 默认值，在当前页面打开

2> _blank:在空白页面打开

视频标签（video）

语法：

<video src=""></video>

含义：

在网页中嵌入视频内容。它提供了一系列属性来控制视频的播放、回放、音量等

属性：

src：指定视频文件的 URL。

controls：显示视频控件。

width/height：设置视频的宽度和高度。

autoplay：自动播放视频。

loop：循环播放视频。

muted：默认静音播放视频。

preload：控制视频加载行为。

poster：设置封面图片。

playsinline：在移动端设备上全屏播放时保持在当前页面内。

controlsList：控制视频控件列表。

crossorigin：设置跨域资源共享。

音频标签（audio）

语法：

<audio src=""></audio>

含义：

标签用于在 HTML 页面中嵌入音频内容。它可以播放各种格式的音频文件，并提供了丰富的属性来控制音频播放。

属性：

src：指定音频文件的 URL。

controls：显示音频控件。

autoplay：自动播放音频。

loop：循环播放音频。

muted：默认静音播放音频。

preload：控制音频文件的预加载行为。

controlsList：控制音频控件列表。

crossorigin：设置跨域资源共享。

hidden：隐藏音频控件，但仍可播放。

id：为音频元素分配一个唯一的 ID。

class：为音频元素分配一个或多个类名。

title：添加工具提示。

布局标签（盒子模型）

span标签

特点：

块级元素 vs. 内联元素：<span> 是一个内联元素（inline element），主要用于对文档中的部分文本或内容进行样式化或添加行为。

不换行：<span> 标签的内容在同一行显示，除非内容本身需要换行。

样式化：通常用于对文本进行局部样式化，如改变字体颜色、大小等。

一行可以显示多个

宽度和高度默认有内容撑开

不可以设置宽高

div标签

特点：

块级元素 vs. 内联元素：<div> 是一个块级元素（block element），主要用于创建独立的区块或容器。

自动换行：<div> 标签的内容会自动换行，形成一个新的行级元素。

布局：通常用于创建布局容器，可以包含其他元素，并且可以设置宽度、高度、边距等属性。

一行只显示一个

宽度默认是父元素的宽度，高度默认由内容撑开

可以设置宽高

CSS

css引入方式：

行内样式：

写在标签的style属性中，如：<div style="color:red;"> 【不推荐】

内嵌样式：

写在style标签中(可以写在页面任何位置，但同常约定写在head标签中)

外联样式：

写在一个单独的.css文件中(需要通过link标签网页中引入)

CSS选择器

概念：

用来选取需要设置样式的元素

优先级

优先级：

id选择器 > 类选择器 > 元素选择器(标签选择器)

分类：

1、标签选择器：

默认情况下，标签选择器，选择所有标签，如：p、div、span

eg：
    p{

            color:red;

        }

2、类选择器：class = "xxx"

类选择器，选择所有类名为xxx的元素，如：.xxx

eg：
     .red{

            color:red;

        }

3、id选择器：id = "xxx"

id选择器，选择所有id为xxx的元素，id在页面中是不能重复的, 如：#xxx

eg：
   #xxx{

            color:red;

        }

4、属性选择器：

属性选择器，选择所有属性为xxx的元素，如：[xxx]

eg：
   [href]{

            color:red;

        }

5、伪类选择器：

1. :hover

当鼠标悬停在按钮上时，改变背景色：

eg:
  button:hover {

        background-color: lightblue;

  }

2. :active

当按钮被激活（点击）时，改变颜色：

eg:
       button:active {

                        color: red;

                    }

3. :focus

当输入框获得焦点时，添加边框：

eg:

         input:focus {

                        border: 2px solid blue;

                    }

4. :visited

对已访问的链接应用不同的颜色：

eg:
     a:visited {

                        color: purple;

                    }

5. :link

对未访问的链接设置默认颜色：

eg:
   a:link {

                        color: green;

                    }

6. :first-child

选择列表中的第一个列表项并改变颜色：

eg:
    ul li:first-child {

                        color: orange;

                    }

7. :last-child

选择列表中的最后一个列表项并改变背景色：

eg:
   ul li:last-child {

                        background-color: yellow;

                    }

8. :nth-child(n)

选择列表中的第n个列表项并改变字体大小：

eg:
      ul li:nth-child(3) {

                        font-size: 20px;

                    }

9. :nth-last-child(n)

选择列表中的倒数第n个列表项并改变文本颜色：

eg:
    ul li:nth-last-child(2) {

                        color: brown;

                    }

6、组合选择器：

1、子元素选择器：

eg：

    div p{

                color:red;

            }

2、后代选择器：

eg：

   div span{

                color:red;

            }

7、子元素选择器：

选择某个元素的直接子元素：

eg：
     div > p{

            color:red;

        }

8、兄弟元素选择器：

1> 相邻兄弟选择器 (+)

选择紧接在另一个元素后的元素：

eg
    h1 + p {

                    font-weight: bold;

                }

2> 通用兄弟选择器 (~)

选择前面有某个元素的所有兄弟元素：

eg:
   h1 ~ p {

                    color: gray;

                }

9. 多选择器的组合：

同时使用多个选择器：

eg：

  div p, div ul li {

                color: green;

            }

文本样式

color（字体颜色）

属性值：

颜色名称：如：red、blue、green

十六进制颜色：如：#ff0000、#00ff00

RGB颜色：如：rgb(255,0,0)

eg：

    color : red;
    color : #ff0000;
    color : rgb(255,0,0);

font-size(字体大小)

像素 (px)

最常用的基本单位，适用于大多数情况。
```
.time_span { 
    font-size: 14px; 
}
```

百分比 (%)

相对于父元素的字体大小。

.time_span { 
    font-size: 80%; /* 如果父元素字体大小为 18px，则此处为 14.4px */ 
}

点 (pt)

印刷行业中常用的单位，1pt 等于 1/72 英寸。
```
.time_span { 
    font-size: 10pt; /* 10 点 */
 }
```

相对于当前元素的字体大小。

.time_span { 
    font-size: 0.8em; /* 如果当前元素字体大小为 18px，则此处为 14.4px */ 
}

rem

相对于根元素（即 html 元素）的字体大小。

html {
    font-size: 16px; /* 默认值 */
}

.time_span {
    font-size: 0.875rem; /* 0.875 * 16px = 14px */
}

vw 和 vh

相对于视口宽度和高度的单位。

.time_span { 
    font-size: 1vw; /* 1% 的视口宽度 */ 
}

text-decoration (文本装饰)

none：不应用任何文本装饰。

underline：应用下划线。

overline：应用上划线。

line-through：应用删除线。

组合值：可以同时应用多种装饰效果。

text-indent（文本首行缩进）

含义：

注意：text-indent属性只对块级元素（如 <p>、<div> 等）有效。

单位：px、em、rem、%

eg：

line-height (行高)

含义;

用于设置行内元素的行间距，即行与行之间的垂直距离。这个属性可以影响文本的可读性和整体布局。

属性值：

数值：无单位的数字，表示行高的倍数。

长度单位：如 px、em、rem 等。

百分比：相对于元素字体大小的百分比。

eg:

text-align（对齐方式）

含义：

用于设置文本在容器中的水平对齐方式。它可以帮助你控制文本在页面上的布局，使其更加整齐和美观。

属性值：

left：文本左对齐。

right：文本右对齐。

center：文本居中对齐。

justify：文本两端对齐（每行文本的左右两端都对齐）。

eg：

盒模型

理解：

页面中所有的标签（元素）都可以看作为一个盒子，由盒子将元素包含在一个矩形区域内

盒模型组成：

盒模型结构：

1. Content (内容)

内容区域是元素的实际内容所在的位置。

可以通过 width 和 height 属性来设置内容区域的尺寸。

2. Padding (内边距)

内边距是在内容区域和边框之间的空白区域。

可以通过 padding 属性来设置内边距。

padding 可以接受单个值、两个值、三个值或四个值。

3. Border (边框)

边框位于内边距之外。

可以通过 border 属性来设置边框的样式、宽度和颜色。

border 属性可以细分为 border-style、border-width 和 border-color。

4. Margin (外边距)

外边距是在边框之外的空白区域。

可以通过 margin 属性来设置外边距。

margin 同样可以接受单个值、两个值、三个值或四个值。

属性及属性值

1. Content (内容)

属性：
- width：内容区域的宽度。
- height：内容区域的高度。
- box-sizing：决定了元素的总宽度和总高度是如何计算的

属性值：

width接受px、em、rem、%等单位

height：接受px、em、rem、%等单位

box-sizing接受content-box 和 border-box，



        1. content-box

                默认值：这是 box-sizing 的默认值。

                计算方式：元素的总宽度和总高度只包括 content 区域的宽度和高度。

                边框和内边距：边框 (border) 和内边距 (padding) 会

                                                增加元素的实际宽度和高度。

        2. border-box

                计算方式：元素的总宽度和总高度包括 content、padding 和 border

                                         区域的宽度和高度。

                边框和内边距：边框 (border) 和内边距 (padding) 不会增加元素的

                                        实际宽度和高度，而是从总宽度和总高度中扣除。

2. Padding (内边距)

属性：

padding：设置内边距。

padding-top：顶部内边距。

padding-right：右侧内边距。

padding-bottom：底部内边距。

padding-left：左侧内边距。

属性值：
- padding 可以接受单个值、两个值、三个值或四个值。
- 单个值：所有方向的内边距相同。
- 两个值：第一个值表示 top 和 bottom，第二个值表示 left 和 right。
- 三个值：第一个值表示 top，第二个值表示 left 和 right，第三个值表示 bottom。
- 四个值：依次表示 top、right、bottom 和 left。

3. Border (边框)

属性：
- border：设置边框。
- border-style：设置边框样式。
- border-width：设置边框宽度。
- border-color：设置边框颜色。
- border-top、border-right、border-bottom、border-left：分别设置四个方向的边框。
属性值：
- border 可以接受三个值：style、width 和 color。
- border-style：可以接受 none、dotted、dashed、solid、double 等值。
- border-width：可以接受像素值（如 1px）。
- border-color：可以接受颜色值（如 red）。

4. Margin (外边距)

属性：
- margin：设置外边距。
- margin-top：顶部外边距。
- margin-right：右侧外边距。
- margin-bottom：底部外边距。
- margin-left：左侧外边距。
属性值：
- margin 可以接受单个值、两个值、三个值或四个值。
- 单个值：所有方向的外边距相同。
- 两个值：第一个值表示 top 和 bottom，第二个值表示 left 和 right。
- 三个值：第一个值表示 top，第二个值表示 left 和 right，第三个值表示 bottom。
- 四个值：依次表示 top、right、bottom 和 left。

JS

语法

   <script>

           JS代码

    </script>

引入方式

1. 内部脚本：可以出现在html页面的任何一个位置，建议写在body下面

2. 外本脚本： src属性引入, script标签不能自闭合

书写语法

1. 区分大小写

2. 每行结尾的分号可有可无，建议写分号

3. 注释：

单行注释： //

多行注释： /* */

4. 大括号代表代码块

输出语句

window.alert() : 写入警告框

document.write() : 写入HTML输出

console.log() : 写入浏览器控制台

定义变量

变量名：

1. 变量可以存储不同类型的值

2.变量名需遵循以下规则：

1> 组成字符可以是字母、数字、下划线、$符号

2> 不能以数字开头

3> 不能使用保留字（关键字）

4> 严格区分大小写

5> 建议使用驼峰命名法

var:

语法：

var 变量名;

特点

1. var定义的变量，作用域比较大，属于全局变量

2. var定义的变量，可以重复定义

let:

语法：

let 变量名;

特点：

1. let定义的变量，作用域比较小，只在定义它的代码块中生效，局部变量

2. let定义的变量，不能重复定义

const:

语法：

const 变量名 = 初值;

特点：

常量，不能改变的

数据类型：

获取数据类型：

typeof 变量名;

运算符

分类：

1. 算术运算符： + - * / %

2. 比较运算符： > < >= <= == != ===

3. 逻辑运算符： && || !

4. 赋值运算符： = += -= *= /= %=

5. 三元运算符：条件表达式 ? true_value : false_value;

全等运算符：

== 和 === 区别：

== ：比较值是否相等，会进行类型转换

=== ：比较值和类型是否相等，不会进行类型转换

类型转换

1. 字符串转数字：

parseInt(): 将字符串转为数字

parseFloat(): 将字符串转为浮点型

Number(): 将字符串转为数字，如果无法转为数字，返回NaN

2. 数字转其它类型：

toString(): 将数字转为字符串

toFixed(): 保留小数点后两位

3. 布尔类型转其它类型：

toString(): 将布尔类型转为字符串

valueOf():将布尔类型转为数值，true为1，false为0

4. 其它类型转布尔类型：

Number：0 和 NaN 转为false，其它转为true

String：空字串转为false，非空串转为true

Null: null转为false

Undefined: undefined转为false

流程控制语句

1. if：

语法：

if(条件表达式){

执行语句1

执行语句2

...

}

2. switch：

语法：

switch(表达式){

case 常量值1: 执行语句1

break;

case 常量值2: 执行语句2

break;

...

default: 执行语句n

}

3. while：

语法：

while(条件表达式){

执行语句1

执行语句2

...

}

4. do...while：

语法：

do{

执行语句1

执行语句2

...

}while(条件表达式)

5. for：

语法：

for(初始化表达式;条件表达式;更新表达式){

执行语句1

执行语句2

...

}

定义函数

语法：

定义方式一：

function 函数名(参数列表){

函数体

}

         // 定义函数方式一：
        function sum(a, b) {
            return a + b;
        }
        alert(sum(3, 4));

定义方式二：

var 函数名 = function(参数列表){

函数体

}

         // 定义函数方式二：
        var add = function(a, b) {
            return a + b;
        }
        alert(add(4, 5));

注意：

1. 函数名：

1> 不能以数字开头

2> 不能使用保留字（关键字）

3> 严格区分大小写

4> 建议使用驼峰命名法

2. 参数列表：

1> 可以不写参数列表，直接用空括号

2> 参数列表中可以写多个参数，用逗号隔开

3> 参数列表中可以写默认值，默认值必须放在形参列表的最后面

4> 形式参数不需要有类型

3. 函数体：

1> 返回值不需要定义类型，可以在函数内部直接使用return返回即可

对象

第一类：基础对象

1. Array：数组

定义：

var 变量名 = new Array(元素列表);

var 变量名 = [元素列表];

访问：

变量名[索引] = 值;

特点：

长度可变，类型可变

属性：

length: 元素个数

方法：

forEach(): 遍历数组元素

push(): 向数组末尾添加元素

pop(): 从数组末尾删除元素

splice(start, count): 从数组中删除元素，返回删除的元素, start：

开始删除的索引，count：删除的个数

2. String:

定义：

var 变量名 = new String(字符串);

var 变量名 = 字符串;

访问：

变量名[索引] = 值;

特点：

长度不可变，类型不可变

属性：

length: 字符串长度

方法：

charAt(): 返回指定索引的字符

indexOf(): 返回指定字符的索引，找不到返回-1

trim(): 去除字符串首尾的空格

substring(start, end): 返回从指定索引开始到指定索引结束的字符串，

不包含结束索引

toUpperCase(): 将字符串转换为大写

toLowerCase(): 将字符串转换为小写

split(separator): 将字符串拆分成数组，separator：拆分的依据

3. JSON: 自定义对象

语法：

var 对象 = {

属性名1: 值1,

属性名2: 值2,

...

属性名n: 值n

函数名称： function(形参) {

}

};

访问：

对象名.属性名;

对象名.函数名();

注意：

JSON属性名：

JSON对象中属性名必须用双引号括起来

JSON属性值：

1. JSON对象中属性值可以是字符串、数字、布尔值、null、数组、对象

2. JSON对象中属性值不能是函数

3. 数据类型：

数字(整型或浮点型)

字符串(双引号)

逻辑语(true 或 false)

数组(在方括号中)

对象(在花括号中)

null

方法：

parse(): 将JSON字符串转换为对象

stringify(): 将对象转换为JSON字符串

第二类：浏览器对象 BOM

定义：

允许JS与浏览器对话， JS将浏览器各个组成部分封装成对象

浏览器对象：

window: 浏览器窗口对象

location: 地址栏对象

screen: 屏幕对象

navigator: 浏览器对象

history: 浏览器历史记录对象

浏览器窗口对象window：

获取：

直接使用window，其中window.可以省略

属性：

history: 对history对象的只读引用

                      navigator: 对Navigator的只读引用

location: 用于窗口或框架的Location对象

          获取：

                window.location.属性;

                  location.属性;

          属性：

                  href : 设置或返回完整的url

方法：

方法	说明
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框，返回true或false，点击确认返回true，取消返回false
setinterval(func, time)	按照指定的周期（以毫秒计）来调用函数或者计算表达式, func：要执行的函数或要执行的JS代码, time：以毫秒为单位的间隔时间
clearInterval()	清除定时器
setTimeout(func, time)	在指定的毫秒数后调用函数或计算表达式，延迟time ms 执行异常func，只执行一次
clearTimeout()	清除定时器

第三类：文档对象模型 DOM

定义：

1. 将标记语言的各个组成部分封装为对应的对象

2. DOM是W3C(万维网联盟)的标准，定义了访问HTML和XML文档的标准，

                            分为三个不同部分：

         1> Core DOM : 所有文档类型的标准模型

         2> XML DOM

         3> HTML DOM ：

对象：

Document: 整个文档对象

Element: 元素对象

Attrbute: 属性对象

Text: 文本对象

Comment: 注释对象

作用：

JS通过DOM就能对HTML进行操作：

1. 改变HTML元素内容

2. 改变HTML元素的样式（CSS）

3. 对HTML DOM事件作出反应

4. 添加和删除HTML元素

Document对象:

获取Element对象：

getElementById() : 根据id获取元素对象

getElementsByName() : 根据name获取元素对象

getElementsByTagName() : 根据标签名获取元素对象

getElementsByClassName() : 根据类名获取元素对象

querySelector() : 根据选择器获取元素对象

querySelectorAll() : 根据选择器获取元素对象集合

事件监听

事件绑定：

方式一：

通过HTML标签中的事件属性进行绑定

onclick="函数"

方式二：

通过DOM元素属性绑定

常见事件：

onclick: 鼠标单击事件

onblur: 元素失去焦点

onfocus : 元素获得焦点

onl oad : 某个页面或图像被完成加载

onsubmit : 当表单提交时触发该事件

onkeydown : 某个键盘的键被按下

onm ouseover : 鼠标被移到某元素之上

onm ouseout : 鼠标从某元素移开

Vue

认识

1.Vue是一套前端框架，免除原生JS中DOM操作

2.提供了双向数据绑定的能力，使得数据和视图之间的同步变得非常简单。

导入vue.js

第一步：下载vue.js

Installation — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://v2.vuejs.org/v2/guide/installation.html

第二步：

将vue.js导入项目，我一般是，在项目下新建一个js文件夹，然后把文件粘贴到js文件夹中

第三步: 引入vue.js + 创建vue核心对象

插值表达式

形式：

内容：

变量
三元运算符
函数调用
算数运算

常用指令

指令	作用
v-bind	为html标签绑定属性值，如设置href，css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为html标签绑定事件
v-if
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

生命周期（钩子）

创建前 (beforeCreate)：Vue 实例被创建，但还没有初始化数据和方法。

创建后 (created)：Vue 实例已经创建完毕，数据和方法已经被初始化，但 DOM 还没有渲染。

编译前 (beforeMount)：Vue 实例开始挂载到 DOM，但尚未完成。

编译后 (mounted)：Vue 实例已经挂载到 DOM 并完成渲染。

更新前 (beforeUpdate)：数据发生变化，但 DOM 尚未更新。

更新后 (updated)：DOM 已经更新完毕。

销毁前 (beforeDestroy)：Vue 实例即将被销毁，但仍保留所有数据和方法。

销毁后 (destroyed)：Vue 实例已经被销毁，所有数据和方法不再可用

Ajax

官方文档：

起步 | Axios中文文档 | Axios中文网基于promise可以用于浏览器和node.js的网络请求库https://www.axios-http.cn/docs/intro原生的Ajax：

1.创建XMLHttpRequest对象

2.发送异步请求

3.获取服务器响应数据

axios

概念：

一个js库，封装了原生的Ajax，简化了Ajax的使用，方便开发

 function 方法名(){
        // 1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        // 2.发送异步请求
        xhr.open("GET/POST", "发送请求的地址");
        xhr.send(); // 发送请求

        // 3. 获取服务器响应数据
        xhr.onreadystatechange = function(){
            // 响应条件
            if (xhr.readyState == 4 && xhr.status == 200) {
                // 展示在页面的哪个位置
                document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }

导入步骤：

1.将anxios.js文件导入到项目中

2.在项目中引入anxios.js文件

3.使用axios发送请求，并获取响应结果

Vue-cli

概念

介绍:

Web,Vue,入门,标签,eg,元素,简单,选择器,属性
From： https://blog.csdn.net/m0_73569492/article/details/142763088

Web简单入门

前言

学习网站

HTML

框架

文本标签

span

hr（水平线）

h1~h6（标题）

p （段落标签）

<b> / <strong> （文本加粗）

br(换行)

表格标签table

含义：

表格标签：

表格项标签：

表格标签的嵌套：

table标签的属性：

表单标签form

含义:

表单标签：

form :

属性及属性值：

表单项标签：

1. input ：

2. select ：

3. textarea :

label 标签 ：

图片标签（img）

语法：

含义：

属性：

1. src：

2 .width：

3. height：

超链接标签（a）

语法：

含义：

属性：

1.href:

2.target：

视频标签（video）

语法：

含义：

属性：

音频标签（audio）

语法：

含义：

属性：

布局标签（盒子模型）

span标签

div标签

CSS

css引入方式：

行内样式：

内嵌样式：

外联样式：

CSS选择器

概念：

优先级

分类：

1、标签选择器：

2、类选择器：class = "xxx"

3、id选择器：id = "xxx"

4、属性选择器：

5、伪类选择器：

6、组合选择器：

7、子元素选择器：

8、兄弟元素选择器：

9. 多选择器的组合：

文本样式

color（字体颜色）

font-size(字体大小)

text-decoration (文本装饰)

text-indent（文本首行缩进）

line-height (行高)

text-align（对齐方式）

盒模型

理解：

盒模型组成：

label 标签：

语法：