JavaScript简介与实验基础

小灰灰 2022-12-16 09:11 97阅读 0赞

### JavaScript简介与实验基础 ###

本文首先简要介绍JavaScript，然后重点详细介绍如何实验运行JavaScript代码，为深入学习JavaScript奠定实验基础。JavaScript是一种解释性脚本语言，代码不进行预编译就可以运行。在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。

JavaScript（JS）是世界上最流行的脚本语言，早期，通常运行在浏览器中，当应用于 HTML 文档时，可为网站提供动态交互特性。但随着其发展变化，近年来，JavaScript的使用范围，慢慢超越了浏览器，正在向通用的系统语言发展，可以说应用场合出乎常人意料的广泛，比如操作本地文件、操作图片、调用摄像头和麦克风等等，使得JavaScript可以完成许多以前无法想象的事情。JavaScript比较容易上手，只要电脑安装了浏览器，就可以用来实验了，但体系庞杂，想精通 JavaScript 是一项艰巨的任务。本系列文章将帮助初学者学好JavaScript基础知识。

2015年6月，ECMAScript 6.0 正式通过，成为国际标准，此版本对JavaScript语言有了较大的改进，提供了很多特性和新功能。  
目前JavaScript生态圈比较完善，应用领域广泛，JavaScript可以应用于被浏览器解析的Web端、可以作为后端语言使用、还可以用于构建移动端 APP等。此外，JavaScript 还可以用来构建桌面应用，世界上最流行的2D游戏引擎之一 Cocos2d 和最流行的3D游戏引擎之一Unity3D可都支持JavaScript开发 。

JavaScript脚本代码的实验运行环境有浏览器和node.js环境，本文仅介绍使用浏览器运行JavaScript代码。

【☆浏览器实现环境，一直以来其运行环境都是客户端浏览器，因为JavaScript设计的初衷就是做一些浏览器与用户的交互和一些网页的特效来补充HTML和CSS的不足。这是最常用的。

☆node.js实现环境。在2009年，诞生了node.js技术，node.js是一个Javascript运行环境。实际上它是对Google V8引擎进行了封装， node.js是一个基于Chrome JavaScript运行时(runtime)建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。node.js使得JavaScript可以运行在服务器端作为一种服务器脚本语言运行，类似于php等动态语言。简单地说，Node.js 是运行在服务端的 JavaScript，主要用来在后端（服务端）开发部署一些高性能的服务。要使用node.js需要安装它，在此不介绍这种实验环境，就不多说了，可参见：[https://blog.csdn.net/cnds123/article/details/80864191][https_blog.csdn.net_cnds123_article_details_80864191] 】

JavaScript脚本代码的浏览器运行环境详解，可以直接将JavaScript代码嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离，还可以使用浏览器的“开发者工具”（Developer Tools）里面的“控制台”（console）。

**HTML使用JavaScript脚本代码的方式**

★**通过script标签将JavaScript脚本代码嵌入HTML网页文件**

格式如下：

JavaScript 语句

</Script>

写入位置：通常把上述语句放在HTML的<head>与</head>之间，也可放在<body>与</body>之间。

例子、用“记事本”（或其它文本编辑器）建立包含如下内容的HTML文件，文件名为Test01.html，注意文件名中点后面的后缀不要错了，文件内容如下：

<!DOCTYPE html>
    <html>
    <head>
    <script>
       document.write("您好，JavaScript欢迎您的到来");
    </script>
    </head>
    <body>
    <br />
    这是网页运行JavaScript的例子。
    </body>
    </html>

说明：<br /> 标签插入换行符。

单击记事本“文件→另存为”，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

双击Test01.html文件名运行，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

**特别提示：**

1）如果打开的网页文件，显示的汉字乱码，可以在其中加如下一句（一般放在<head>的后面）：

2）其中的<script>

可以改为

或

**注：**

**①**<script language="javascript">是早期写法，可以追溯到HTML1.1，已弃用，非常不建议这么使用。

②<script type="text/javascript">是HTML4的标准写法。

③<script>  在HTML5时代，你可以直接这么写，**推荐用这个**。

**网页文件**（也称为HTML文件或HTML文档）**的结构**

简述如下：

<!DOCTYPE HTML>若有必须位于第一行，表明该文档是HTML5文档。

接着由html、head、body部分组成，分别用<html>…</html>、<head>… </head>、<body>…</body>三组标签组成。<html></html> 称为HTML根标签，所有的网页标签都在<html></html>中，<head>… </head>、<body>…</body> 标签要嵌套在<html>…</html>标签内部， 其中<head>… </head>和<body>…</body>处于同一层级。

**网页文件的打开方式**：

☆双击网页文件（.html文件）名的打开，用默认浏览器打开。

【默认浏览器：默认浏览器不是一个浏览器名，而是指打开网页或网站地址是优先使用浏览器，目前浏览器众多如Eged浏览器、谷歌浏览器、火狐浏览器 、360浏览器，你的系统中可能安装了多个浏览器，用户可以根据自己喜好将其中一个设置为默认浏览器，双击网页文件就会用它打开。如果你的系统中只安装了一个浏览器，不用设置它就是默认浏览器，如果你的系统中安装了多个浏览器，你可以指定一个为默认浏览器，关于如何设置请上网搜索。】

☆右击网页文件（.html文件）名，使用快捷菜单打开，具体操作参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

☆在已打开的浏览器地址栏输入地址，再回车，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

★**使用调用JavaScript文件方法**

也叫外联式（在HTML网页文件中通过script标签的 src 属性链接外部的JavaScript脚本代码文件）格式如下：

写入位置：通常写在head标签之间或者写在结束body标签之前。

将纯JavaScript的语句另外保存在一个文件名后缀为js的文件中，再调用之。这种方法需要注意被调用文件的路径。

例子：调用test.js文件，显示提示。

先用“记事本”建立一个HTML文件，文件名为Test02.html：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    </head>
    <body>
    调用jsFile.js s文件
    <br />
    <script src="jsFile.js">
    </script>
    </body>
    </html>

说明：请重点留意其中的这一句<script src="jsFile.js">

src=" jsFile.js " 指定了页面要调用的JavaScript文件，一般将网页文件Test02.html和它调用的JavaScript文件jsFile.js放在同一文件夹（目录）中，否者需要指明JavaScript文件的路径。

再用“记事本”建立一个js文件，文件名为 jsFile.js，注意文件名中点后面的后缀不要错了，文件内容如下：

document.write("您好，JavaScript欢迎您的到来");

说明：该示例文件比较简单的一行。现实情况当然不会如此简单，重点演示使用方法，。

将Test02.html和jsFile.js放在同一个文件夹中，参见下图：

![20201019175230484.png][]

双击Test02.html文件名运行，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

**★在HTML标签中事件属性中引入JavaScript代码**

HTML事件属性一般以on开头，如按下鼠标事件onclick()等。

格式如下：

<标签名 事件名 = "JavaScript代码或函数"></标签名>

例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>判断文本框是否为空</title> 
    <script> 
    function validate()  
    {  
      var _txtNameObj = document.all.txtName;   
      var _txtNameValue = _txtNameObj.value;   
      if((_txtNameValue == null) || (_txtNameValue.length < 1))  
      {   
        window.alert("文本框内容为空，请输入内容");  
        _txtNameObj.focus();   
        return;  
      } 
      else
      {
        window.alert("文本框有内容，符合要求");  
      }
    }  
    </script> 
    </head> 
    <body> 
    <p>在HTML网页的元素事件中嵌入JavaScript代码的例子</p>
    <input type="text" name="txtName"> 
    <input type="button" value="确定" onclick="validate()"> 
    </body> 
    </html>

保存文件名为：在HTML网页的元素事件中嵌入JavaScript代码的例子.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

**★通过javascript伪链接引入JavaScript代码**

这种情况，常会用在两种属性身上：href和onclick等事件上，可用于触发要执行的操作——JavaScript函数（包括内置函数、自定义函数）或对象固有的方法（即对象的函数）。

格式如下：

javascript: 要执行的操作

其中javascript单词不要写错，小写，而且后面要紧跟冒号。

例子

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>使用伪链接使用JavaScript脚本代码</title> 
    </head> 
    <body> 
    <p>使用伪链接使用JavaScript脚本代码</p> 
      <input type=text name="Text1" value="单击此处"   
      onclick="JavaScript:alert('已经用鼠标单击文本框!')"> 
    </body> 
    </html>

文件名为：使用伪链接使用JavaScript脚本代码.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6][]

javascript伪链接这种情况，经常会用在两种属性身上，href和onclick等事件处理器，可参见：[https://www.cnblogs.com/kunmomo/p/11152372.html][https_www.cnblogs.com_kunmomo_p_11152372.html]

**使用浏览器（ 如 Chrome 浏览器、Edge浏览器）的控制台（console）来实验**

浏览器的“开发者工具”（Developer Tools）里面的“控制台”（console），是运行 JavaScript 代码的理想环境。打开浏览器，按下 F12键，然后选择 “控制台”（console） 面板，就进入了控制台。进入控制台以后，就可以在提示符后输入代码，然后按回车（Enter键），代码就会执行。如果按Shift + Enter键，就是代码换行，不会触发执行。

你可以将下面的代码输入到Edge浏览器的“控制台”，按下回车后，就可以看到运行结果。

function greetMe(yourName) \{

console.log('Hello ' + yourName);

greetMe('World')

参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7][]

若使用控制台（console）来实验，建议设计一个空白页面，目的是打开时，是一个纯净的环境。

空白网页的内容如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>空白网页</title>
    </head>
    <body>
    </body>
    </html>

保存文件名：空白网页.html

用Edge浏览器运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8][]

然后，按下 F12键，可以看到 “控制台”（console） 面板，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9][]

本系列讲座，仅涉及有限的HTML知识，重点在于学习掌握JavaScript知识。

如果你有设计网页文件（.html文件）的知识经验最好，若没有也不用担心，在此仅涉及以后可能用到的通过网页为JavaScript代码输入输出数据部分HTML知识，对下面的例子请你留意网页向JavaScript传送数据部分。

**如何使用页面动态地输入输出数据**

**例1**、动态输入一个数

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动态输入一个数</title>
    <script>
    var inValue = prompt('请输入一个数值：')
    alert("你输入的是："+inValue);   //输出运算结果
    </script>
    </head>
    <body>  
    </body>
    </html>

保存文件名：动态输入一个数的例子1.html

说明：

弹出个输入框prompt()的用法

语法格式：

window.prompt(第一个参数,第二个参数)

有两个, 文本类型的参数：

第一个参数，显示提示输入框的信息。

第二个参数，用于显示输入框的默认值。

返回用户输入的值。

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 10][]

**例2**、动态输入一个数计算其平方

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>动态输入一个数计算其平方</title>
    <script>
    function calcF(x){
    	var result;  //声明变量，存储计算结果
    	result=x*x;  //计算值
    	alert("计算结果："+result);   //输出运算结果
    }
    var inValue = prompt('请输入一个数值：')
    calcF(inValue);
    </script>
    </head>
    <body>  
    </body>
    </html>

保存文件名：动态输入一个数计算其平方.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 11][]

**例3**、和例1功能相同（动态输入一个数）只是改用文本框和按钮

<html>
    <HEAD>
    <meta charset="utf-8">
    <TITLE>动态输入一个数法2</TITLE>
    <SCRIPT>
     function compute()
      {
        document.myForm.field2.value=document.myForm.field1.value
      }
    
    </SCRIPT>
    </HEAD>
    
    <body>
    <form name="myForm" >
    点击下面的“执行”按钮，把文本框1的内容写入到文本框2中：
    <br/>
    请输入: <input type="text" name="field1">
    <br/>
    <input type="button" name="..." value="执行" onClick="compute()">
    <br/>
    你输入的是: <input type="text" name="field2">
    
    </form>
    </body>
    </html>

保存文件名：动态输入一个数法2.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 12][]

**例4**、和例2功能相同（动态输入一个数计算其平方）只是改用文本框和按钮

<html>
    <HEAD>
    <meta charset="utf-8">
    <TITLE>动态输入一个数计算其平方法2</TITLE>
    <SCRIPT>
     function compute()
      { 
        var num1=parseFloat(document.myForm.field1.value);
        document.myForm.field2.value=num1 *num1
        
      }
    
    </SCRIPT>
    </HEAD>
    
    <body>
    <form name="myForm" >
    点击下面的“执行”按钮，计算：
    <br/>
    请输入: <input type="text" name="field1">
    <br/>
    <input type="button" name="..." value="执行" onClick="compute()">
    <br/>
    平方值是: <input type="text" name="field2">
    
    </form>
    </body>
    </html>

保存文件名：动态输入一个数计算其平方法2.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 13][]

现在，给出一个带检测——验证用户输入内容的合法性的例子。

**例5**、带检测的输入的例子

<!DOCTYPE html>
    <head>
        <meta http-equiv="content-Type" charset="UTF-8">
        <title>带检测的输入的例子</title>
    
    <script>
        function myFunc() {
            let message;
            let x;
            message = document.getElementById("message");
            message.innerHTML = "合格";
            x = document.getElementById("number").value;
            try {
                if (x === "")
                    throw "值为空";
                if (isNaN(x))
                    throw "不是数字";
                x = Number(x);
                if (x < 1)
                    throw "太小";
                if (x > 100)
                    throw "太大";
            } catch (error) {
                message.innerHTML = "错误" + error;
            }
        }
    </script>
    </head>
    
    <body>
     
    <p>请输入一个1-100之间的数字</p>
    
    <input id="number" type="text">
    <button type="button" onclick="myFunc()">检查</button>
    <p id="message">提示</p>
     
    </body>
    </html>

保存文件名：带检测的输入的例子.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 14][]

**JavaScript的输出方式**

avaScript 可以通过不同的方式来输出数据：

☆使用 window.alert(参数) 弹出框。参数可以是变量、字符串或表达式；无返回值。可简写为alert(参数)。如：

alert(“你好”);

var age = 18;

alert(“年龄是” + age);

alert(21+ 5 - 3);

☆使用 document.write(字符串参数) 方法将内容写到 HTML 文档中。字符串类型的参数可以是变量或值为字符串的表达式，可以包括HTML标签。如：

var str = "Hello";

document.write(str);

document.write("21 + 5 - 3 =" + (21 + 5 -3));

document.write("<h3>20级01班人数：<br/> 人数：50</h3>");

☆使用 console.log(参数) 向控制台输出字符串消息，多个字符串消息用用逗号分隔。如：

console.log("Hello ", "world");

与alert()函数类似，console.log()也可以接受变量并将其与别的字符串进行拼接：

var name = "Bob";

console.log("The name is: " + name);

还能支持格式,如：

console.log('%d + %d =', 1, 1, 2);

console.log支持的格式标志有:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 15][]

console.log语法参见[https://developer.mozilla.org/zh-CN/docs/Web/API/Console/log][https_developer.mozilla.org_zh-CN_docs_Web_API_Console_log]

【alert()方式和console.log()方式显示的区别：

多个alert()输出时，每个都会弹出一个弹窗提示，只有当单击提示框的“确认” 按钮后，才会执行下一个的弹窗提示。

console.log()方法不会阻止后续代码的运行，因此， console.log()方式适合连续的输出——可以看到同时会执行多个console.log()输出语句，显示的结果出现在控制台（Console）选项卡页面中。】

下面给出一个综合例子，代码如下：

<title>JavaScript的三种输出形式例子</title>

var inValue =prompt('请输入')

document.write('你输入的是：');

document.write(inValue)// 使用 document.write() 方法将内容写到 HTML 文档中

window.alert('你输入的是：'+inValue); //弹出框，window.alert() 可简写为alert()

console.log('你输入的是：'+inValue); //使用 console.log() 写入到浏览器的控制台。

</script>

保存文件名：JavaScript的三种输出形式例子.html

【顺便说明，上面文件，我故意进行了简化，但在大多数浏览器中运行正常，从中可以看出网页文件（.html文件）的许多标签（tab）不是必须的。】

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 16][]

☆使用confirm()确认提示消息对话框，语法：

window. confirm("提示消息");

可简写为：

confirm("提示消息");

对话框有”确定”和”取消”按钮，单击”确定”返回true，单击”取消”返回false。例如：

var answer =  confirm("你确定吗？");

if(answer) \{

alert("你确定了");

else\{

alert("你取消了");

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 17][]

☆prompt()提示信息，语法：

window.prompt("提示信息", "默认输入文本");

可简写为：

prompt("提示信息",  " 默认输入文本");

返回用户输入的字符串。

例如：

var answer = prompt("你的名字：",  "某某");

if(answer) \{

alert("你是" + answer);

else\{

alert("你没有回答");

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 18][]

☆使用 innerHTML 写入到 HTML 元素。

先给出一个比较完整简单的例子1

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> innerHTML使用测试</title>
    </head>
    <body>
    <p>测试结果：</p>
    <p id="demo"></p>
    <script>
    var x =19;
    document.getElementById("demo").innerHTML =
        "他的年龄是：" + "<br>" + x ;
    </script>
    </body>
    </html>

保存文件名：innerHTML使用测试.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 19][]

下面再给出一个例子2，代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title> </title>
    </head>
    <body>
    <script>
    var inValue =prompt('请输入')
    function ShowAnswer(){
        document.getElementById("AnswerBox").innerHTML=inValue;
    }
    </script>
    使用innerHTML显示
    </p>
    <span id="AnswerBox"> </span>
    </p>　
    <input type="button" value="查看你的输入" onclick="ShowAnswer()">
    </body>
    </html>

保存文件名：使用innerHTML显示.html

运行之，参见下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 20][]

<span></span>是一个行内元素标签，一般用来对包裹的内容做特殊处理，如绑定事件或者是设置样式。可以为 span 应用 id 或 class 属性

HTML5 标签参考列表

[https://www.w3school.com.cn/tags/index.asp][https_www.w3school.com.cn_tags_index.asp]

HTML DOM innerHTML 属性

innerHTML是双向功能：获取对象的内容  或  向对象插入内容。如

id="aa"，  我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；  也可以对某对象插入内容，如  document.getElementById('aa').innerHTML='这是被插入的内容'。

注意，上面的"aa”引号是英文引号，单引号、双引号没有区别。

[https_blog.csdn.net_cnds123_article_details_80864191]: https://blog.csdn.net/cnds123/article/details/80864191
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221123/007da97f31e74223b0f206a31ba370f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221123/190d662b67e041ca874bc374dbc55824.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: /images/20221123/a9169ee8cb544a74ac57e468627650f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: /images/20221123/9115f3b02c80495087222aac9f6b3ef6.png
[20201019175230484.png]: /images/20221123/31636d6867624f24a36a69e8e5e4c2e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: /images/20221123/74ff2067a8fe48ba835642d13e4a698d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: /images/20221123/26b2ce43e56c445da78986da987bc518.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 6]: /images/20221123/690fa69f267b44038c9065d78fc3db1a.png
[https_www.cnblogs.com_kunmomo_p_11152372.html]: https://www.cnblogs.com/kunmomo/p/11152372.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 7]: /images/20221123/10fb489e11434855ad396453d4ab3ab5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 8]: /images/20221123/e052d32af9c64ac78d68bc33f0644c9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 9]: /images/20221123/fc6c97b366224a1dbbb6b444cca4cf6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 10]: /images/20221123/e2268662b18c468595ab8a2ba299b1c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 11]: /images/20221123/5aea92e4044a4285b650eb7c236c299f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 12]: /images/20221123/68fb993ffb2841c8bd7dbc0f1209f757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 13]: /images/20221123/34ceb196ad214b46afecc5bf467dc457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 14]: /images/20221123/1d8ba36ecd41495591ddb2f54d31acce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 15]: /images/20221123/35877abd6b1c43f18ff200e2563e32ec.png
[https_developer.mozilla.org_zh-CN_docs_Web_API_Console_log]: https://developer.mozilla.org/zh-CN/docs/Web/API/Console/log
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 16]: /images/20221123/2176a73828984584969a66f0ef960523.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 17]: /images/20221123/4b89455308104e79bb5ba9c29cccf554.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 18]: /images/20221123/a81ba72e85824e47badb264797594d51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 19]: /images/20221123/1ee1552f463b4b808f5cb7db3659677e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 20]: /images/20221123/43b208c8dacc4ccab6adcf3c83f55cc6.png
[https_www.w3school.com.cn_tags_index.asp]: https://www.w3school.com.cn/tags/index.asp