JavaWeb第三章：JavaScript的全面知识

╰+攻爆jí腚メ 2024-04-20 14:28 2阅读 0赞

**目录**

前言

一.JavaScript的简介

💖概念

💖学习内容

二.JavaScript的引入方式

💖内部脚本

💖外部脚本

三.JavaScript的基础语法

💖语法的书写

💖变量

✨ 全局变量

✨局部变量

✨常量

💖JavaScript的数据类型

💖JavaScript运算符

✨运算符的讲解

✨类型转换

💖流程控制语句

四.JS函数

五.JS对象

💖Array讲解

✨Array基本知识

✨Array之属性与方法

💖String讲解

✨String之属性与方法

💖JSON对象

✨自定义对象

✨JSON

六.JS之BOM

💖window

💖Location

七.JS之DOM

💖如何获取该元素对象

💖修改文本内容

八.事件监听

💖常见事件

💖事件绑定

总结

--------------------

> 🎁个人主页：[tq02的博客\_CSDN博客-C语言,Java,Java数据结构领域博主][tq02_CSDN_-C_Java_Java]  
> 🎥 本文由 tq02 原创，首发于 CSDN🙉  
> 🎄 本章讲解内容：**JavaScript的全面简洁讲解**
> 
> 🎁欢迎各位→**点赞**👍 + **收藏**⭐ + **评论**📝+**关注**✨
> 
> ![ae2584cf8f514cffb7eb41d62bfa2aeb.png][]
> 
> 编译器：VS Code

##  ##

## 前言 ##

> 本博文主要**简单讲解**JavaScript的概要知识，为了后端而作准备，虽然是概要知识，但是依然是十分主要的知识点，更好的了解前端知识，以便后期后端知识的学习。
> 
> 官方帮助手册：[https://www.w3school.com.cn/][https_www.w3school.com.cn]

## 一.JavaScript的简介 ##

### 💖概念 ###

> 1.  JavaScript (简称:**JS**) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
> 2.  JavaScript和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
> 3.  JavaScript在1995年由 Brendan Eich 发明，并于1997年成为ECMA标准
> 4.  ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)。

### 💖学习内容 ###

JS主要学习以下内容：

*  JavaScript是控制网页行为的，因此需要引入到HTML文档，而引入的方式本文会有讲解
 *  Java和JavaScript毫无联系，只是名字有点相似，但是在基础语法方面类似，并且JavaScript是一门**弱类型语言**，且有单独的数据类型。
 *  JS函数不同于Java函数，主要用于是被设计为执行特定任务的代码块。
 *  JS对象，常用的对象，例如Array、String等，以及Json、BOM
 *  JS事件绑定等

--------------------

## 二.JavaScript的引入方式 ##

将JS代码与HTML文档代码结合，如此一来便可以控制网页的行为，而引入方式有2种，分别为：内部脚本和外部脚本

### 💖内部脚本 ###

> 内部脚本：将JS代码引入到HTML页面当中
> 
> JS代码 **内部引入** 要求：
> 
> 1.  JavaScript代码必须位于**<script> </script>**标签之间
> 2.  在HTML文档中，可以在任意地方，放置任意数量的<script>
> 3.  一般会把脚本置于<body>元素的底部，可改善显示速度

例如：

//script可在任意位置
    <html lang="en">
    <head>
        <title>JS代码</title>
        <script>/* JS代码 */</script>
    </head>
    
    <body>  
      <script>/* JS代码 */</script>
    </body>
    
    <script>/* JS代码 */</script>
    </html>

### 💖外部脚本 ###

> 外部脚本:将JS代码定义在外部JS文件(xx.js 文件)中，然后引入到 HTML页面中
> 
> JS代码 **外部引入** 要求：
> 
> 1.  外部JS文件中，只包含\]S代码，不包含<script>标签
> 2.  <script>标签不能自闭合
> 
> 引入语法：**<script src="js文件"></script>**

例如：

//js文件--new.js
       代码文件
    
    //HTML文件---old.html
    <html lang="en">
    <head>
        <title>JS代码</title>
    </head>
    
    <body>
        <script src="new.js"></script>
        //自闭合：<script src="new.js"/>  错误，不可以这样
    </body>
    
    </html>

--------------------

## 三.JavaScript的基础语法 ##

> 基础语法包括三种：语法书写、变量、数据类型和运算符及流程控制语句
> 
> 注：JavaScript是弱类型语言、JavaScript的运算符和流程控制语句和Java是十分相似的。

### 💖语法的书写 ###

> JavaScript语法的基本要求：
> 
> 1.  区分大小写:与Java 一样，变量名、函数名以及其他一切东西都是 区分大小写 的
> 2.  每行结尾的分号可有可无，但是建议大家使用。
> 3.  注释: 单行注释: //注释内容 多行注释: /\*注释内容\*/
> 4.  大括号代表代码块

JavaScript的输出形式有三种方式:

>  *  window.alert()
> 
> 将括号的内容写在警告框之中，浏览器负责弹出，注：可以将window.省略，直接使用alert()

>  *  document.write()
> 
> 将括号中的信息填入到网页之中

>  *  console.log()
> 
> 将括号内的内容写入控制台，控制台：网页->右击 "检查" ->点击 "console"

代码示例：

<html lang="en">
    <head>
        <title>JS输出</title>
    </head>
    <body>
        <script>
            window.alert("我喜欢学习");
            document.write("我喜欢Java");
            console.log("我喜欢中国");
        </script>
    </body>
    </html>

输出结果：

![bbd2c636c82649cab6600983efbc5d10.png][]

--------------------

### 💖变量 ###

> JavaScript的变量声明不像Java，会使用各种数据类型声明，目前JavaScript有两**种**关键字可以定义变量，分别为：**var（全局变量）、let（局部变量）**
> 
>     示例：var a=10; let b=20
> 
> 变量名需要遵循如下规则:
> 
> 1.  组成字符可以是任何字母、数字、下划线()或美元符号 (S)
> 2.  数字不能开头
> 3.  建议使用驼峰命名

JavaScript是一门弱类型语言，变量可以存放各种类型的值。因此存在着原本的值被其他类型替换

ECMAScript 6新增了let（局部变量）、const（常量）

#### ✨ **全局变量**  ####

> 关键字：var 特点：1、作用域很大 2、可重复定义

其中a被定义了两次，分别为10和"tq02"，而最后定义是tq02，因此a为tq02。

#### ✨**局部变量** ####

> 关键字：let 特点：1、作用域为所在的代码块 2、不可以重复声明

<html lang="en">
    <head>
        <title>JS输出</title>
    </head>
    <body>
        <script>
            var a=10;
            var a="tq02";
            //不可以重复声明
            //let a="20";
            {
                let a=20;
                alert(a);  //警告框输出为20；出了代码块就失效了
            }
            window.alert(a);
            document.write("我喜欢Java");
            console.log("我喜欢中国");
        </script>
    </body>
    </html>

#### ✨常量 ####

> 关键字：const 特点：一旦声明，**常量的值就不可以改变**，编译时，不会报错，但无法编译成功

<html lang="en">
    <head>
        <title>JS输出</title>
    </head>
    <body>
        <script>
            const a=10;
            //  a="tq02"
            window.alert(a);
        </script>
    </body>
    </html>

--------------------

### 💖JavaScript的数据类型 ###

> 因为JavaScript是弱类型语言，在定义变量时，不用指定数据类型，但是JavaScript是存在数据类型的，**JavaScript数据类型分为原始类型、引用类型** ，引用类型就是JS函数，在下一章有详细讲解，我们主要讲解原始类型

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th style="width:205px;">原始类型</th> 
   <th style="width:293px;">取值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:205px;">number</td> 
   <td style="width:293px;">数字（小数、整数、NAN（not a numer））</td> 
  </tr> 
  <tr> 
   <td style="width:205px;">string</td> 
   <td style="width:293px;">字符串，单双引号皆可</td> 
  </tr> 
  <tr> 
   <td style="width:205px;">boolean</td> 
   <td style="width:293px;">true、false</td> 
  </tr> 
  <tr> 
   <td style="width:205px;">null</td> 
   <td style="width:293px;">对象为空</td> 
  </tr> 
  <tr> 
   <td style="width:205px;">undefined</td> 
   <td style="width:293px;">当声明的变量未初始化时，默认为underfined</td> 
  </tr> 
 </tbody> 
</table>

问：在平时中我们应该如何查看变量的元素类型呢？

答：使用关键字：typeof

而细心的人一定可以发现，为什么null的数据类型是object啊？

官方作出的解释：这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

### 💖JavaScript运算符 ###

#### ✨运算符的讲解 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>JavaScript运算符</strong></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>算数运算符&nbsp;</td> 
   <td>&nbsp; &nbsp; &nbsp; + &nbsp; &nbsp; &nbsp;— &nbsp; &nbsp;* &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp; %&nbsp; &nbsp;++&nbsp; &nbsp;--</td> 
  </tr> 
  <tr> 
   <td>关系运算符&nbsp;</td> 
   <td>&nbsp; &nbsp;&gt;&nbsp; &lt;&nbsp; &nbsp;&gt;=&nbsp; &nbsp; &lt;= &nbsp; &nbsp;!= &nbsp; &nbsp;==&nbsp; &nbsp; <strong><span style="color:#fe2c24;">===</span></strong></td> 
  </tr> 
  <tr> 
   <td>逻辑运算符&nbsp;</td> 
   <td>&nbsp; &nbsp;&amp;&amp; &nbsp; &nbsp; &nbsp; || &nbsp; ！</td> 
  </tr> 
  <tr> 
   <td>条件（三目）运算符&nbsp;</td> 
   <td>条件表达式？true_value：false_value</td> 
  </tr> 
  <tr> 
   <td>赋值运算符&nbsp;</td> 
   <td>&nbsp;= &nbsp; &nbsp; +=&nbsp; &nbsp; &nbsp;*=&nbsp; &nbsp;!=&nbsp; &nbsp; - =&nbsp; &nbsp; /=&nbsp; &nbsp; &nbsp;%=&nbsp; &nbsp;</td> 
  </tr> 
 </tbody> 
</table>

JavaScript的运算符和Java大致一样，但是不同的就在于 **===** 不同于==， ===表示的是值与类型相同，而==为值相同

例如：

如上图，a=="10"时，a会自动进行类型装换，因此相等，而a==="10",错误，因为类型不同。

#### ✨**类型转换** ####

类型装换分2种，字符串转换成数字，其他类型转换为boolean类型。

> **字符串转换为数字**
> 
> 将字符串字面值转换为数字，如果字面值不是数字，则转换为NaN。
> 
> 而在转换的过程中有几个特别注意的。
> 
>     <script>
>         parseInt("12")  //12
>         parseInt("ABC12") //NaN
>         parseInt("12AB")   //12
>     </script>
> 
> 注：如果字符串是数字+字母，则装换为前面的数字

> **其他类型转换为boolean类型**
> 
>  *  Number：0 和 NaN为false 其他均为true
>  *  String：空字符串为false 其他转换为true
>  *  null和unde：均为false
> 
> 代码示例：
> 
>     <script>
>         if(0){            //0为false，不成立
>             alert("”0转换为false");
>         }
>         if(NaN){        //NaN为false，不成立
>             alert("NaN转换为false");
>         }
>         if(1){
>             alert("1转换为true");
>         }
>     
>         if(""){            //空字符串为false，不成立
>             alert("false");
>         }
>         if("tq02"){        //字符串为true，
>             alert("true")
>         }
>     
>     if(null||undefined){   //为false，不成立，不执行
>         alert(false);
>     }
> 
> 注：" "不是空字符串，中间含有空格，因此为true

### 💖流程控制语句 ###

> JavaScript流程控制语句有以下几种，用法和Java是一致的。
> 
> 1.  if....else if.....else
> 2.  switch
> 3.  for
> 4.  while
> 5.  do...while

--------------------

## 四.JS函数 ##

> **函数**：被设计为执行特定任务的代码块，通过使用关键字 function进行定义。
> 
> 语法格式：
> 
>     第一种定义方法
>     function 函数名(参数1,参数2..){
>             //执行的代码
>     }
>     
>     第二种定义方法
>     var 变量名=function(参数1，参数2）{
>             //待执行代码
>         }
> 
> 注：1、形式参数不需要类型。因为JavaScript是弱类型语言
> 
> 2、返回值也不需要定义类型，可以在函数内部直接使用return返回即可

第一种定义方法代码 展示：

//注：形式参数不需要类型，所以直接为参数名
    function  add(a,b){
        return a+b;
    }
    
    var result=add(10,20);

--------------------

第二种定义方法代码 展示：

var result=add(a,b){
        return a+b;
    };
        //函数调用的方法一样
    add(20,30);

--------------------

函数调用时，需要注意一点，函数调用时，可以传递任意个数的参数，但是函数只接收前几个。

例如：

var result=add(a,b){  //只接收20和30
        return a+b;
    };
        
    add(20,30，50,60,70);

--------------------

## 五.JS对象 ##

JavaScript中含有很多对象，官方资料查找：[https://www.w3school.com.cn/][https_www.w3school.com.cn]

而我们主要讲解3种对象，JS当中最为重要的Array、String、JSON

### 💖Array讲解 ###

#### ✨Array基本知识 ####

> Array对象，我们很熟悉，用于定义数组的。
> 
> 定义方法：
> 
> 1.  var 变量名 =new Array(元素列表）;
> 2.  var 变量名=\[ 元素列表 \];
> 
> 访问方法：
> 
>  *  变量名\[ 下标值 \] 注：和Java一样，从下标0开始。
> 
> 特点：长度可变、类型可变

**长度可变讲解**

如上述代码，我定义了一个数组，长度为4位，然后我在下标为9的位置上，赋值为50，并没有出错，而有人会问那么下标4到下标8的值为什么呢？由于没有赋值，因此为默认值undefined。

**类型可变讲解**

在下标为5的位置上，赋值了tq02，而并没有报错，正常编译。

--------------------

#### ✨Array之属性与方法 ####

> Array常用属性：length。 作用：获取数组长度
> 
> Array常用方法：
> 
> 1.  forEach() 作用：遍历数组，遍历数组中有值的元素。
> 2.  push() 作用：添加元素，可一次性添加多个元素。
> 3.  splice() 作用：删除元素，从某个下标删到某个下标。

**forEach()方法**

> 额外讲一个**箭头函数**，将函数关键字function删去，如果有形参就使用，没有就空着，然后打上箭头(=>)。其他不变。例如将上述代码修改为箭头函数,使代码更为简洁
> 
>     <script>
>             var a=[1,2,3,4,5,6,7,8];
>             a.forEach((e)=>{
>                  alert(e);
>             })
>         </script>

**push()方法**

**splice()方法**

--------------------

### 💖String讲解 ###

> String字符串对象创建方法有2种：
> 
> 1.  var 变量名 = new String("....");
> 2.  var 变量名="....";

#### ✨String之属性与方法 ####

> String常用属性：length。 作用：获取字符串长度
> 
> String常用方法：
> 
> 1.  charAt() 作用：返回指定下标值的字符
> 2.  indexOf（） 作用：检索字符串
> 3.  trim() 作用：去除字符串两边的空格
> 4.  substring() 作用：提取字符串中两个指定索引号之间的字符

**charAt() 方法**

**indexOf()方法**

**trim()方法**

**substring()方法**

### 💖JSON对象 ###

#### ✨自定义对象 ####

> 自己使用编译器定义一个对象，以便操作。
> 
> 语法格式：**var 对象名\{** 
> 
>  **属性名1：属性值,**
> 
>  **属性名2：属性值,**
> 
>  **........ : .........,**
> 
>  **函数名(形参列表）\{ \}**
> 
>  **\}；**
> 
> 调用方法：1、对象名.属性名 2、对象名.函数名

#### ✨JSON ####

> 概念：JavaScript Object Notation，JavaScript对象标记法
> 
> JSON是通过JavaScript对象标记法书写的文本。
> 
> 注意了，这是文本，也就是**字符串**。而对象就是自定义对象，由于是字符串，所以大括号里的属性名也需要双引号。
> 
> 基础语法：**var 变量名='\{"key1":value1, "key2":value2, ............... \}';**

**value数据类型**：数字（整数、浮点数）、字符串（双引号当中）、逻辑值（true、false）、数字（方括号中）、对象（花括号中）

例如：

var a='{
        "name":"tq02",
        "sex":"男"，
        "age"：22，
        "addr":["背景"，"上海"，"西安"]
        }'

--------------------

> 1.  问：如何调用JSON中key对应的value的值？
> 
> 答：使用关键字parse，将**json字符串 转换 js对象** 
> 
> 问：那么可以讲 js对象 转换为 JSON字符串 嘛？
> 
> 答：可以，使用stringify关键字进行转换。

--------------------

##    六.JS之BOM ##

> 概念：Browser 0bject Model 浏览器对象模型，允许avaScript与浏览器对话，JavaScript 将浏览器的各个组成部分封装为**对象**。也就是说BOM就是由对象组成。
> 
> BOM组成：
> 
> 1.  window：浏览器窗口对象
> 2.  Navigator：浏览器对象主要是浏览器的应用名称、版本和内核
> 3.  Screen：屏幕对象
> 4.  History：历史记录对象
> 5.  Location：浏览器的地址栏对象

### 💖window ###

> 问：如何使用window对象？
> 
> 答：直接使用window就可以了
> 
> 问：如何调用window对象的方法或者属性？
> 
> 答：使用window.对象/方法 对了，使用方法时，可以省略window.

常用属性：

1.  history: 对 History 对象的只读引用。
2.  location: 用于窗口或框架的 Location 对象。
3.  navigator: 对Navigator 对象的只读引用。

常见的方法：

1.  alert(): 显示带有一段消息和一个确认按钮的警告框
2.  confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框，并且有返回值
3.  setlnterval(): 按照指定的周期 (以毫秒计)来调用函数或计算表达式
4.  setTimeout(): 在指定的毫秒数后调用函数或计算表达式。

--------------------

### 💖Location ###

> Location：地址栏对象
> 
> 使用方法：**window.location**，由于window.可以省略，因此直接使用location
> 
> 属性：href：设置或返回完整的URL。

--------------------

##    七.JS之DOM ##

> 概念：Document Obiect Model，W3C(万维网联盟)的标准，**文档对象模型**，定义了访HTML和XML文档的标准，分为3个不同的部分：1.Core DOM、2.XMLDOM、3.HTML DOM

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

*  Document: 整个文档对象 封装的是整个文本
 *  Element:元素对象 封装了文本的所有的标签
 *  Attribute:属性对象 封装了所有标签中的属性
 *  Text:文本对象 封装了所有标签之间的文本
 *  Comment: 注释对象 封装了文本所有的注释

2.XMLDOM-XML 文档的标准模型，核心DOM的子集。

3.HTML DOM-HTML ，JavaScript可以通过DOM，进而对HTML进行操作：

1.  改变HTML元素的内容
2.  改变HTML元素的样式(CSS)
3.  对HTMLDOM 事件作出反应
4.  添加和删除HTML元素

> **注**：我们主要学习HTML DOM-HTML、主要学习：如何获取该元素对象、如何修改该对象内容

### 💖如何获取该元素对象 ###

HTML中的HTML元素可以通过Document对象获取，而Document对象是通过window对象获取的。

而Document对象提供了以下以下获取HTML元素对象的函数:

1.  根据id属性值获取，返回单个Element对象
    
        var h1 = document.getElementById( 'h1');
2.  根据标签名称获取，返回Element对象数组
    
        var divs = document.getElementsByTagName( 'div');
3.  根据name属性值获取，返回Element对象数组
    
        var hobbys = document.getElementsByName( 'hobby');
4.  根据class属性值获取，返回Element对象数组
    
        var clss = document.getElementsByClassName('cls');
    
    完整代码示例：

<html lang="en">
    <head>
    
        <title>Document</title>
        <img id="h1" src="图片链接"><br><br>
    
        <div class="cls">csdn官网</div>  <br>
        <div class="cls">tq02网页</div>  <br>
    
        <input type="checkbox" name="hobby">电影
        <input type="checkbox" name="hobby">旅游
        <input type="checkbox" name="hobby">游戏
    
    </head>
    <body>
        
        <script>
             //1.获取元素，根据id名获取
            var img=document.getElementById('h1');
            alert(img);
    
            //2.根据标签获取
            var divs=document.getElementsByTagName('div');
            for(let i=0;i<divs.length;i++){
                alert(divs[i]);
            }
            //根据name属性值获取
            var hobbys = document.getElementsByName( 'hobby');
            for(let i=0;i<hobbys.length;i++){
                alert(hobbys[i]);
            }
    
            //根据class属性值获取
            var clss = document.getElementsByClassName('cls');
            for(let i=0;i<clss.length;i++){
                alert(clss[i]);
            }
    
        </script>
    
    </body>
    </html>

--------------------

### 💖修改文本内容 ###

通过DOM修改文本内容，我们需要使用到getElementsByClassName()方法;以及**innerHTML**属性

代码示例 ------ 将csdn官网文字变为划拳游戏：

<html lang="en">
    <head>
    
        <title>Document</title>
        <img id="h1" src="图片链接"><br><br>
    
        <div class="cls">csdn官网</div>  <br>
        <div class="cls">tq02网页</div>  <br>
    </head>
    <body>
        
        <script>
            var a=doucument.getElementByClassName('cls');
            var divs=a[0];
            divs.innnerHTML="划拳游戏";
    </script>
    
    </html>

--------------------

## 八.事件监听 ##

事件监听，顾名思义，分为事件和监听，两者相辅相成。缺一不可。

> 事件：HTML事件指发生在HTML元素上的'事情'，比如：按钮被点击，鼠标移动，按下键盘等等。
> 
> 而计算机是如何监听到事件的发生呢？
> 
> 答：通过事件绑定

### 💖常见事件 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>事件名</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>onclick</td> 
   <td>鼠标单击事件</td> 
  </tr> 
  <tr> 
   <td>onblur</td> 
   <td>元素失去焦点</td> 
  </tr> 
  <tr> 
   <td>onfocus</td> 
   <td>元素获得焦点</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>某个页面或图像被完成加载</td> 
  </tr> 
  <tr> 
   <td>onsubmit</td> 
   <td>当表单提交时触发该事件</td> 
  </tr> 
  <tr> 
   <td>onkeydown</td> 
   <td>某个键盘的键被按下</td> 
  </tr> 
  <tr> 
   <td>onmouseover</td> 
   <td>鼠标被移到某元素之上</td> 
  </tr> 
  <tr> 
   <td>onmouseout</td> 
   <td>鼠标从某元素移开</td> 
  </tr> 
 </tbody> 
</table>

而下面的事件绑定，我们使用onclick

### 💖事件绑定 ###

事件绑定，有两种方式

**方式一**：通过HTML标签的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
    <script>
        function on(){alert(!我被点击了!');
        }
    </script>

解析：当点击按钮时，我们就可以通过事件属性onclick,所绑定的on()方法，然后调用script中的on()方法

--------------------

**方式二：**通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
    <script>
        document.getElementById('btn' ).onclick=function(){
            alert('我被点击了!);
        }
    </script>

解析：通过document获取指令DOM元素，然后再通过onclick属性来绑定一个函数。

--------------------

## 总结 ##

看到这里，JavaScript的基本内容已经学会了，理论已经有了，是时候进行实践操作了，JavaScript最重要最难的内容是DOM和事件监听，本文内容显示有限，如果想更加深入学习，还是需要去看视频进行加一步学习。

\------------------懒惰的tq02

[tq02_CSDN_-C_Java_Java]: https://blog.csdn.net/m0_74097410?spm=1010.2135.3001.5343
[ae2584cf8f514cffb7eb41d62bfa2aeb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/44906e539ba9406e8f57eabccd76b3f6.png
[https_www.w3school.com.cn]: https://www.w3school.com.cn/
[bbd2c636c82649cab6600983efbc5d10.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e326e594863e4c92aec5e85906d08681.png