大家好,小编来为大家解答以下问题,javascript基础入门教程,javascript教程完整版,现在让我们一起来看看吧!
1. 概述
JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。
诞生于1995年,当时的主要目的是验证表单的数据是否合法Python中的所有运算符号。
JavaScript本来应该叫Live,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。
javaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。
常用 1 修改html及css代码(2)验证表单
特点:
- 代码可使用任何文本编辑工具编写,语法类似 C 和Java,
- 无锡编译,由javaScript 引擎解释执行
- 弱类型语言
- 基于对象
1. 嵌入方法
1.1 内嵌式
理论上 js 可以写在 任何一个地方,但是 一般写在 head 标签 或者 body 标签下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
< type="application/ecma">
alert("xss");
</>
</head>
<body>
</body>
</html>
或者 写在body
<body>
< type="application/ecma">
alert("xss");
</>
</body>
1.2 外链式
首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过标签对引入到html页面中
首先 新建 js文件,写入 js语句
alert(“xss”); /*弹框 */
index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
< type="application/ecma" src="js/js.js"></> /* 引用 编写的js文件*/
</head>
<body>
</body>
</html>
一般在生产环境中,用的外链式 比较多
1.3 行内式
直接书写在标签身上,是一个简写的事件,所以又称之为事件属性,
onclick 单机事件 点击之后出现一个弹窗
<body>
<input type="button" value="点击" onclick="alert('xss');" />
</body>
2.语句
1.在编程语言中,这些编程指令被称为语句。JavaScript 程序就是一系列的编程语句。
注释:在 HTML 中,JavaScript 程序由 web 浏览器执行。
2.JavaScript 语句由以下构成:
- 值、运算符、表达式、关键词和注释。
3.用分号(;)分隔JavaScript语句。
3.注释
单行注释: // 注释语句 快捷键ctrl+/
多行注释: /* 注释语句 */ 快捷键ctrl+shift+/
注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
4. 变量
变量 是用于存储 信息的“容器”
ps:在java中 ,单双引号没区别
var a=’moonsec’;
4.1 变量的声明
在 js 代码中, 使用变量,需要进行变量声明,就是告诉 js,解释引擎,这个标识符(具有唯一性的变量名)是一个变量。
声明变量:使用关键字var 声明变量
var username;
初始化: 使用 = 为变量 首次赋值,
var username=“wl”
使用:直接使用即可
console.log(username);
window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。
<body>
<>
var a = 'xiaoqi';
console.log(a);
</>
</body>
4.2 变量命名规则
命令规则:
可以包含 字母、数字、下划线(_)、对于js 来讲,不建议使用 $
不能以数字开头
常用于 表示函数、变量等的名称,名称最好有明确的含义
不允许使用语言关键字 和保留字 做变量名
Java 的保留关键字不可以用作变量、标签或者函数名。有些保留关键字是作为 Java 以后扩展使用。
5. 常量的生命和使用
常量
是其值不能改变的量, 使用 const 关键字 来定义,习惯上,常量名 使用纯大写形式
const PI=3.14;
6.JavaScript 作用域
6.1 JavaScript 局部变量
局部作用域变量在函数内声明,变量为局部作用域。
<>
function getname(){
var name='xiaoqi';
console.log(name);
}
getname();
</>
6.2 JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。
<>
var name = 'xiaoqi';
function getname(){
//var name='xiaoqi';
console.log(name);
}
getname();
</>
7. 数据类型
数值型:number(凡是数字都是数值型,不区分整数和小数)
字符串:string(凡是引号包裹起来的内容全部都是字符串)
布尔:boolean(true、false)
对象类型:object(特殊取值null)
未定义型:undefined
对象类型数组字典
7.1.判断类型
var a = “iamstring.”;
var b = 222;
var c= [1,2,3];
var d = new Date();
var e = function(){alert(111);};
var f = function(){this.name=“22”;};
alert(typeof a) ------------> string
alert(typeof b) ------------> number
alert(typeof c) ------------> object
alert(typeof d) ------------> object
alert(typeof e) ------------> function
alert(typeof f) ------------> function
7.2 数字类型(Number)
- 只有一种数字类型,数字可以是小数,也可以的整数
- 以0开头默认使用8进制来表示我的这个数字
- 以0x开头默认使用16进制来表述我的这个数字
- 如果以-开头默认以负数
- 如果带有e:以科学计数法来解析我的这个数字
parseInt(…) 将某值转换成数字,不成功则NaN
parseFloat(…) 将某值转换成浮点数,不成功则NaN
特殊值:
NaN,非数字。可使用 isNaN(num) 来判断。
Infinity,无穷大。可使用 isFinite(num) 来判断。
7.3 字符串型(string)
字符串是存储字符的变量,用来表示文本的数据类型,程序中的字符串是包含单引号/双引号的,由单引号来界定我双引号中包含的字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, …) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列
obj.slice(
, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$ :直接量 :直接量 :直接量符号
7.4 布尔类型(bool lean)
一般是用在流程控制语句中,字符串和数字类型都是无穷多个,然而我们的布尔数据类型只有两个:true 和 false
这两个个值一般用于说明某个事物是真或者假
js一般用布尔类型来比较所得到的结果
布尔类型仅包含真假,
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
7.5 NULL (空)
null
关键字null是一个特殊的值,它表示变量为空值,用来定义空的或者是不存在的引用。
如果试图去引用一个没有定义的值,就会返回一个null。
这里注意一点:null并不等于"" 或者0
7.6undefined (未定义)
这个值表示变量不含有值,没有定义的值,或者被定义了一个不存在的属性值
!null 和 undefined区别:
null它表示一个变量被赋予一个空值,而undefined是表示变量还没有被赋值
7.7 数组
1、数组内可以存放任意数据类型的数据(本质上它也是对象)
2、数组元素不赋值的情况下值为undefined
3、如果数组打印的时候,元素不赋值""
4、访问数组范围之外的元素,不会出现越界的问题,undefined
5、定义数组大小,照样可以添加更多元素
7.7.1 定义数组的方法
1、var arr=[]//定义一个空数组
2、var arr=[10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”]]//定义的同时赋值
3、var arr=new Array();//定义一个空数组
4、var arr = new Array(10,20,{“name”:“tomy”,“age”:19},0.1,“string”,true,[“aaa”,“bbb”])//定义的同时赋值
5、var arr=new Array(10)//定义一个长度为10的数组
var arr=new Array(10)//定义一个长度为10的数组var arr=new Array();//定义一个空数组
<scrtpt>
var arr=[]//定义一个空数组
var arr=[10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"]]//定义的同时赋值
var arr=new Array();//定义一个空数组
var arr = new Array(10,20,{"name":"tomy","age":19},0.1,"string",true,["aaa","bbb"])//定义的同时赋值
var arr=new Array(10)//定义一个长度为10的数组
</scrtpt>
7.7.2 数组的操作
操作 | 描述 |
---|---|
obj.length | 数组的大小 |
obj.push(ele) | 尾部追加元素 |
obj.pop() | 尾部获取一个元素 |
obj.unshift(ele) | 头部插入元素 |
obj.shift() | 头部移除元素 |
obj.splice(start, deleteCount, value, …) | 插入、删除或替换数组的元素 |
obj.splice(n,0,val) | 指定位置插入元素 |
obj.splice(n,1,val) | 指定位置替换元素 |
obj.splice(n,1) | 指定位置删除元素 |
obj.slice( ) | 切片 |
obj.reverse( ) | 反转 |
obj.join(sep) | 将数组元素连接起来以构建一个字符串 |
obj.concat(val,…) | 连接数组 |
obj.sort( ) | 对数组元素进行排序 |
7.7.3 数组遍历
<>
var arraylist=['1','2','3'];
for(var i in arraylist)
{
console.log(arraylist[i]);
}
</>
或者
<>
var arraylist=['1','2','3'];
for(i=0;i<arraylist.length;i++)
{
console.log(arraylist[i])
}
</>
8.函数
** JavaScript 函数语法**
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
<>
function myFunction(a,b)
{
return a*b;
}
var x=myFunction(7,8);
console.log(x);
</>
普通函数
<>
function func(arg)
{
return arg+1;
}
var result = func(1);
console.log(result); var result = func(1);
console.log(result);
</>
匿名函数(没有名字的函数)
setInterval(function(){ <!--//setInterval内置函数,每隔多少秒执行 -->
console.log(123);
},500)
<!-- 自执行函数 -->
/*(创建函数并且自动执行)*/
(function(arg){
console.log(arg);
})(1);
9. 字典
字典是一种以键-值对形式存储数据的数据结构
字典是一种以键-值对形式存储数据的数据结构
var dict = {‘k1’:“moonsec”,‘k2’:‘moon’,‘age’:18};
输出字典元素
for(var item in dict){
console.log(dict[item]);
}
获取指定元素
dict[‘age’] 获取key为age的元素
赋值
dict[‘age’]=10
删除元素
delete dict[‘one’];
delete dict.age;
10.js 的序列化 和反序列化
Json与字符串的转换
把对象转为字符串
JSON.stringify()
把字符串转为数组
newli = JSON.parse()
序列化即js中的Object转化为字符串
使用toJSONString
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
使用stringify
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
反序列化 即js中JSON字符串转化为Object
11.转义
命令 | 说明 |
---|---|
decodeURI( ) | URl中未转义的字符 |
decodeURIComponent( ) | URI组件中的未转义字符 |
encodeURI( ) | URI中的转义字符 |
encodeURIComponent( ) | 转义URI组件中的字符 |
escape( ) | 对字符串转义 |
unescape( ) | 给转义字符串解码 |
URIError | 由URl的编码和解码方法抛出 |
12.eval
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
aa = “alert(‘xss’)”
eval(aa)
13.时间
Date 对象
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-???)
myDate.getMonth(); //获取当前月份(0-11,0代表1月) 所以获取当前月份是 myDate.getMonth()+1;
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime = myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
加一天
var dateTime = new Date();
dateTime=dateTime.setDate(dateTime.getDate()+1);
dateTime=new Date(dateTime);
dateTime=dateTime.setDate(dateTime.getDate()+1);
14.面向对象
JavaScript是一种基于原型的语言,它没类的声明语句,比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反,JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中,我们定义了一个新类Person。
第一种方法
<>
function Person(name)
{
this.name=name;
this.get_name=function()
{
console.log(this.name);
}
this.set_name=function()
{
console.log(this.name);
}
}
var p1 = new Person('xiaoqi');
p1.get_name();
p1.set_name();
</>
对于上述代码需要注意:
Person充当的构造函数
this代指对象
创建对象时需要使用 new
第二种
<>
class Person(name)
{
constructor(name)
{
this.username=name;
}
getName()
{
console.log(this.username);
}
setName(name)
{
this.username=name;
}
}
var p1=new Person('xiaoqi');
//p1.getName();
p1.setName('alex');
p1.getName();
</>
15.原型
我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
这个属性对应着一个对象,这个对象就是我们所谓的原型对象
如果函数作为普通函数调用时 prototype没有任何作用
当函数以构造函数调用时,它所创建的对象中都会有一个隐含的的属性
指向该构造函数的原型我们可以通过__proto__来访问该属性
我们可以将对象中公有的内容,统一设置到原型对象中
<>
function Persion(username,age)
{
}
//console.log(Persion.prototype);
var p = new Persion();
console.log(p.__proto__ == Persion.prototype);
定义原型变量和原型变量
function Persion(username,age){
}
//console.log(Persion.prototype);
Persion.prototype.a = '女';
Persion.prototype.Sayname=function(){
return Persion.name;
}
var p1 = new Persion('moonsec');
var p2 = new Persion();
alert(p1.Sayname());
</>
16. 运算符
用于执行程序代码运算,会针对一个以上操作数来进行
16.1 算数运算符
符号 | 说明 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 求余 |
++ | 自增 |
– | 自减 |
字符串拼接使用“+”
16.2 比较运算符
符号 | 说明 |
---|---|
< | 小于 |
> | 大于 |
== | 等于 |
!= | 不等于 |
<+ | 小于等于 |
>= | 大于等于 |
=== | 全等于(将数值以及数据类型一并比较) |
!=== | 不全等于(将数值以及数据类型一并比较) |
16.3 赋值运算符
符号 | 描述 |
---|---|
= | 等号右边的值赋给左边 |
+= | a=a+2;==>a+=2 |
-= | a=a-2;==>a-=2 |
*= | a=a2;==>a=2 |
/ = | a=a/2;==>a/=2 |
%= | a=a%2;==>a%=2 |
16.4 逻辑运算符
符号 | 描述 |
---|---|
&& | 与 |
|| | 或 |
! | 非 |
&& 全真为真
|| 一个为真就是真
! 取反
16.5 1.1. 三元运算符(三目运算符)
表达式1?表达式2:表达式3
当表达式1成立时 执行表达式2 否则执行表达式3
var max = 2>1?‘>’:‘<’;
console.log(max);
17. 流程控制语句
17.1 if 语句
结构
if(条件)
{
函数体
}
17.2 if else 语句
if(条件)
{
函数体1
}
else
{
函数体2
}
17.3 if,elseif,else 语句
if(条件1)
{
函数体1
}
elseif(条件2)
{
函数体2
}
elseif(条件n)
{
函数体n
}
else
{
}
17.4 switch 语句: 多分枝语句
switch(表达式)
{
case n: 代码块; break;
case n: 代码块; break;
default: 默认代码块
}
<sctipt>
switch (new Date().getDay()) {
case 6:
text = "今天是周六";
break;
case 0:
text = "今天是周日";
break;
default:
text = "期待周末~";
}
</sctipt>
17.5 循环控制结构:
17.5.1 whiel 循环
while循环:先判断条件当条件成立再执行
while(循环成立条件){
…
}
17.5.2 do…while 循环
do…while循环:不论条件成不成立先执行一遍再判断
do{
…
}while(循环成立条件)
17.5.3 for 循环
const arr = [1, 2, 3];
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
18. js 操作DOM
18.1 什么是DOM
DOM(document object model)文档对象模型,是针对HTML和XML的一个API(应用程序接口)。DOM给我们描述了一个具有层次化特点的节点树,允许开发人员增删改查页面的某些部分。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
18.2 DOM查找元素
document获取节点的基本方法
document.getElementById(‘id’); //通过id来获取元素,返回指定的唯一元素。
document.getElementsByName(“name”); //通过name来获取元素,返回name='name’的集合。
document.getElementsByClassName(“classname”) //用classname来获取元素,返回的是一个class="classname"的集合(不兼容IE8及以下)。
document.getElementsByTagName(‘div’); //用元素的标签获取元素,返回所有标签=“div”的集合。
例子
18.2.1 查找
直接查找
var obj = document.getElementById(‘id’);
间接查找
文件内容操作
- innerText 仅文本
document.getElementById(‘div1’).innerText
- innerHTML 全内容
document.getElementById(‘div1’).innerHTML
value // 也可以获得input标签的value值
input value 获取当前的值
select 获取选中的value的值 d.selectedIndex=1
Textarea 获取value的值
selectedIndex 可以更改默认的值
document.getElementById(‘myselect’).selectedIndex=2
如果有多个,可以通过 下标来获取它的值
也可以进行更改
18.2.2 操作
样式操作
className 列出样式字符串
classList 列出样式返回数组
classList.add 增加样式
classList.remove 删除样式
属性操作
获取属性
getAttribute() 获取某个属性或者某些内容
document.getElementById(‘div1’).getAttribute(‘id’)
增加设置一个属性
添加属性
setAttribute(‘xxx’,‘alexe’)
document.getElementById(‘div1’).setAttribute(‘xxx’)
删除属性
removeAttribute(value)
创建标签
有两种方式
- 字符串方式
- 对象的方式
字符串方式
- beforeBegin: 插入到标签开始前
- afterBegin:插入到标签开始标记之后
- beforeEnd:插入到标签结束标记前
- afterEnd:插入到标签结束标记后
新建一个页面,写一个ipupt,一个文本框,点击按钮,添加文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="+" onclick="add()" />
<div id="dv1">
<p><input type="text"/></p>
</div>
<>
function add()
{
var tag="<p><input type='text'></p>"
document.getElementById('div1').insertAdjacentHTML('beforeEndr',tag);
}
</>
</body>
</html>
对象的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="+" onclick="add2();" />
<div id="dv1">
<p><input type="text"/></p>
</div>
<>
// function add()
// {
// var tag="<p><input type='text'></p>"
// document.getElementById('div1').insertAdjacentHTML('beforeEnd',tag);
// }
function add2()
{
var tag=document.createElement('input');
tag.setAttribute('type','text');
tag.style.color-'red';
var p=document.createElement('p');
p.appendChild(tag);
document.getElementById('div1').appendChild(p);
}
</> <!--appendChid 再节点后面增加一个子节点-->
</body>
</html>
提交表单
任何标签都可以通过dom提交
一般提交按钮用 submit,这里 用button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="f1" action="index.html">
<input type="submit" value="提交">
<input type="button" value="提交" onclick="Sub();">
</form>
<>
function Sub()
{
document.getElementById('f1').submit();
}
</>
</body>
</html>
其他函数
其他
console.log 终端输出
alert 弹出框
confirm 确认框标题 true false
<>
var p='xiaoqi'
console.log(p);
//alert('xss') 弹窗
//alert(confirm((p));
//alert(p);
//confirm(p);
</>
url和刷新
location.href 获取url
location.href =‘url’ 重定向
location.reload() 重新加载
定时器
setInterval() //一直执行
clearInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="i1" type="text" />
<input type="button" value="停止" onclick="stop();" />
<>
function setTime()
{
var tag=new Date();
document.getElementById('i1').value=tag;
}
var obj=setInterval('setTime()','1000') //每隔一秒刷新
function stop()
{
clearInterval(obj); //
}
</>
</body>
</html>
setTimeout() 只执行一次
clearTimeout()
例子
点击删除,出现一个文本框,提示已删除,隔几秒之后清楚,恢复
<div id="status"></div>
<input type="button" value="删除" onclick="Delele();">
<>
function Delele()
{
document.getElementById('status').innerText="已删除";
setTimeout(
function()
{
document.getElementById('status').innerText="";
},5000)
}
</>
事件
绑定事件两种方式
- 通过标签直接绑定
- 获取dom对象,然后绑定
a.直接标签绑定直接标签绑定 οnclick=‘’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="submit" value="点我" onclick="add();" />
<>
function add()
{
alert('xss');
}
</>
</body>
</html>
先获取dom对象,然后进行绑定
document.getElementById(‘xxx’).onclick()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="i1" type="submit" value="点我" />
<>
document.getElementById('i1').onclick(alert('xss'));
</>
</body>
</html>
课后例子
跑马灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="c1">
欢迎来到xiaoqi的渗透测试学习
</div>
<>
function p()
{
var tag=document.getElementById('c1'); //将c1的值给tag
var t= tag.innerText; //读取文本
var l= t.charAt(0);
var s= t.substring(1,t.length);
tag.innerText=s+l;
}
setInterval('p()',500)
</>
</body>
</html>
搜索框
当 input 输入框获取焦点时执行一段 Java代码:
onfocus 事件在对象获得焦点时发生。
当用户离开input输入框时执行一段Java代码:
onblur 事件会在对象失去焦点时发生。
有个搜索框,里面有默认值,当点击的时候,让默认值自动清空
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" action="http://www.baidu.com">
<input id="c1" type="text" value="请输入关键搜索" onfocus="f1();"onblur="f2();" />
<input type="submit" value="搜索" />
</form>
<>
function f1()
{
var tag=document.getElementById('c1');
var c=tag.value
if (c == '请输入关键搜索') //判断搜索框是否有内容,没有,点击清空默认值
{
tag.value='';
}
}
function f2()
{
var tag=document.getElementById('c1');
var c= tag.value;
if (c.length==0) // 判断搜索框中是否有值,没有则给个默认
{
tag.value='请输入关键字搜索';
}
}
</>
</body>
</html>
ps