决定了网页中标签的功能及动态效果 JS _js代码

1、JS （1）特点：（实现网页的交互）
1）基于对象：(区别于面向对象)，可以通过对象调用方法 obj.fn()
2）事件驱动：网页文档中的HTML标签事件触发JS代码执行
3）解释型：边解释边执行(不会先对网页进行编译生成中间文件)
4）脚本语言：JS不会独立运行，依赖于网页文件(HTML文件)
JS初体验.btnStyle{width: 200px;height: 35px;background: lightcoral;border: 0px;color: white;border-radius: 4px;font-weight: bold;}
（2）作用：
1）动态改变网页中HTML标签的属性
2）动态改变网页中HTML标签的样式
3）对用户输入的数据进行合法性校验(格式检查)
4）动态操作网页中的HTML标签（增、删、改）
5）实现页面数据的异步通信(在不阻塞页面加载和用户交互的情况下，与服务器进行数据交换)
不能做什么：
1）虽然JS是在用户的浏览器中执行，但是JS不能访问用户的本地文件
2）JS不能操作来自不同服务的网页文档
JS作用



文章插图

（3）位置：
1）写在body中(常用)、body后、head中
2）在外写个js文件，在head里面调用
2、标签可以引用一个js标签，也可以自定义js代码实现
1）引用js文件的话必须是双标签
2）标签用来引用js文件之后，当前标签就不能再自定义js代码
3）如果引用js文件，还要进行自定义js代码实现，需要重新写一个标签
3、js需要通过事件触发才执行 6、变量用var，可以存任何类型 7、引用数据类型： {} 对象、 []数组(1)对象可以随时添加
{}表示对象类型，js对象的属性名可以直接定义，并且对象的属性支持扩展
var stu = {:"1001",:"王二狗"};
stu. = "男";
(2)定义学生数组
数组 var arr1 = new Array();
var =[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
8、null用于清空一个变量的值 9、=== 表示绝对等于(值和类型都相同) 10、for循环、for(v in stu)循环
JS流程控制
11、throw创建自定义错误/错误信息
错误处理
12、js中如果是局部变量的话他会变量提升，将变量的声明提升至最前面 13、创建对象（1）通过{}创建
JS对象
(2)自定义JS构造函数
JS对象
14、扩展属性
对象扩展属性：s1. = “男” ，
构造器扩展属性：..="男"：//（需要另外输出
.log(s1.);因为没照顾到新的属性）
15、提供的构造器：
16、:
var str1 = "Hello,World";
var str2 = new ("你好");
("str")、split、、、、(起始，个数)、、、正则表达式
正则表达式：
var str3 = "13030303300";var reg = "^1[3,5,7,9]\\d{9}$";var b = str3.match(reg);console.log(b);
注意：利用的match函数进行正则校验，b匹配的话返回本身，不匹配返回null
17、正则表达式：
1）test

function testRegExp(){var str = "13030303300";var reg = new RegExp("^1[3,5,7,8]\\d{9}$");var b = reg.test(str);console.log(b);}

注意：test匹配返回true ，不匹配返回false
/d匹配任意数字、/s 空白字符、/b单词边界、/u???? 匹配字符
a+至少一个a、a* 0-n个a、a？ 0-1个a、a{m}m个a、a{m,n} m-n个a
18、Math:
1）常量var e = Math.E、var p = Math.PI;
2）静态数学函数：Math.、Math.round(四舍五入)、Math.floor(只舍不入，获取比参数小的最大整数)、Math.ceil（只入不舍，获取大于等于参数的最小整数）、Math.abs获取绝对值、Math.sqrt获取平方根
19、Array：长度可变，可以存储多种数据类型
数组的定义：
1）通过构造器创建
var arr2 = new Array("aaa","bbb");
2）静态初始化数组???????
var arr3 = ["aaa","bbb","ccc"];
var arr1 = new Array();arr1[0] = "aaa";arr1[1] = "bbb";
添加元素，数组长度=最大下标+1
3)遍历：for循环、forin循环
for(var i in arr){console.log(arr[i]);}
arr.join("-")
把数组里面的元素用-穿起来
arr.slice(2,4)
截取数组，起末，左闭右开
arr.()
反转数组
20、Date
var date = new Date();.log(date);
不好理解的时间
var year = date.();
距离1900年的时间
var year = date.()+1900;
正确的2023
var year1 = date.();
2023
var month = date.()+1;
月份
var d = date.();
20号
var hour = date.();
21点
var min = date.();
59分
var sec = date.();
2秒
var ms = date.();
获取毫秒
var day = date.();
获取星期几星期五
date.(2029);
date.(11);
date.(28);
set设置时间:2029年12月28号
内置对象Date
21、：
全局对象（预定义的对象）,全局函数直接调用，也可以用调用
将字符串转整数
将字符串转为浮点数
对网址的参数部分进行编码（特殊符号和中文）
对编码后的网址进行解码
对字符串中的特殊符号和中文进行编码
对字符串中的特殊符号和中文进行解码
var= "{:'1001',:'张三'}";
eval("("++")");
将满足json格式的字符串转换成JS对象
对象：var s1 = {:'1001',:'张三'};
function
22、clog快速打出.log 23、BOM浏览器对象模型
24、BOM对象模型（1）BOM对象属性：
.
看浏览器类型（、）
.
设备的屏幕
.
地址栏
.
历史记录
.
文档内容 JS代码

//看浏览器类型（safari、chrome）var v = window.navigator;//设备的屏幕var s = window.screen;//地址栏varl = window.location;//历史记录var h = window.history;//文档内容 JS代码var a = window.document;

25、BOM-对象（1）属性： 1）浏览器窗口属性：
.name = "w1";
设置当前浏览器窗口的名字
.="";
设置当前浏览器窗口的状态栏
.
获取当前窗口是否关闭
var h = .;
var w = .;
获取浏览器的内部高/宽度
var oh = .;
var ow = .;
获取浏览器的外部高/宽度

//设置/获取当前浏览器窗口的名字window.name = "w1";//设置/获取当前浏览器窗口的状态栏window.status="";//获取当前窗口是否关闭window.closed//获取浏览器的内部高/宽度var h = window.innerHeight;var w = window.innerWidth;//获取浏览器的外部高/宽度var oh = window.outerHeight;var ow = window.outerWidth;

2）窗口对象属性：
.self
指的是自己
.
父容器
祖先容器
26、弹窗函数
alert("请注意，倒车！");
弹窗，无返回值
("确定删除吗？");
有返回值，点击确定才返回true，其他false
("请输入生日：");
var s =.("请输入生日：","2023");
有返回值，点击确定返回内容,否则返回null，2023这个是设置默认值

//无返回值window.alert("请注意，倒车！");//有返回值，点击确定才返回true，其他falsevar s = window.confirm("确定删除吗？");//有返回值 ， 点击确定返回内容,否则返回null// var s =window.prompt("请输入生日：");//2023这个是设置默认值var s =window.prompt("请输入生日：","2023");console.log(s);

27、窗口函数2）关闭打开窗口函数：
var w = .open(URL,"度",,true);
参数1：新打开的窗口显示的网址
参数2：新打开的窗口的名字
参数3：新打开的窗口的属性
参数4：是否替换当前窗口 Tru为替换
返回值：打开的窗口对象

	var URL = "https://www.baidu.com";//参数1：新打开的窗口显示的网址//参数2：新打开的窗口的名字//参数3：新打开的窗口的属性//参数4：是否替换当前窗口 Tru为替换// 返回值：打开的窗口对象// var w = window.open(URL);// var w =window.open(URL,"百度")var features = "width = 200，height = 100";// var w =window.open(URL,"百度",features);var w = window.open(URL,"百度",features,true);console.log(w.name);

3）窗口操作函数：
var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);
w.(800,600);

文章插图
把宽高修改为800，600
w.(800,600);
把宽高额外增加800，600
w.(200,100);
将窗口移动到指定位置距左200 距上100
w.(200,100);
将窗口在原基础上再移动左200 上100
.(200,300);
滚动滚动条(针对当前窗口的滚动条操作)
.(-100,-200);
滚动滚动条在原基础上再移动右100 下300

var w = window.open("https://www.baidu.com","百度官网","width=300,height=300",true);//把宽高修改为800，600w.resizeTo(800,600);// 把宽高增加800，600w.resizeBy(800,600);// 将窗口移动到指定位置 距左200 距上100w.moveTo(200,100);// 将窗口在原基础上再移动 左200 上100w.moveBy(200,100);//滚动滚动条(针对当前窗口的滚动条操作)window.scrollTo(200,300);// 滚动滚动条在原基础上再移动 右100 下300window.scrollBy(-100,-200);

28、延时函数：（重）
var task1 = (, 3000);
设置延迟3秒显示
(task1);
关闭未执行的延时任务
29、循环任务：
var task2 = (, 3000);
设置每3秒显示一次
(task2);
关闭循环任务
注意：可删直接： task2 = ("()", 3000);
（1）两种表示：
var task = setInterval("show()", 1000);var task = setInterval(show, 1000);
30、 BOM-：只读对象
.;.width;
获取屏幕宽度和高度（分辨率）
.;.
获取屏幕宽度和高度（除掉状态栏）
.;.
获取屏幕硬件一英寸的物理像素点

//获取屏幕宽度和高度（分辨率）var h= screen.height;var w= screen.width;// alert(w+"*"+h);// 获取屏幕宽度和高度（除掉状态栏）var ah= screen.availHeight;var aw= screen.availWidth;// alert(aw+"*"+ah);// 获取屏幕硬件一英寸的物理像素点var xdpi = screen.deviceXDPI;var ydpi = screen.deviceYDPI;alert(xdpi+"*"+ydpi);

31、BOM-对象：只读对象
.;
返回浏览器的名称
.;
返回浏览器的代码名
.;
返回浏览器的平台及版本信息
.;
返回浏览器的语言环境（看浏览器支持）
.;
检查当前浏览器是否启用（重）

//返回浏览器的名称var name = navigator.appName;// 返回浏览器的代码名var code = navigator.appCodeName;// 返回浏览器的平台及版本信息var version = navigator.appVersion;// 返回浏览器的语言环境（看浏览器支持）var lang = navigator.browserLanguage;// 检查当前浏览器是否启用Cookie（重）var b = navigator.cookieEnabled;console.log(b);

32、BOM-对象（多）
.href;
获取地址栏完整的网址:8848/demo3/-BOM-.html
.hrefhttp://www.kingceram.com/post/= "";
修改地址栏完整的网址（可以实现页面跳转）（多）
.;
获取地址栏网址的协议 http
.port;
获取地址栏网址的端口 8848
.host;
获取主机和端口号：127.0.0.1:8848
.;
/获取主机号：127.0.0.1
.;
获取路径参数demo3/-BOM-.html
.();
重新载入当前网页（刷新网页）
.("http:");
使用网址替换当前地址栏的网址（实现页面跳转）

//获取地址栏完整的网址http://addr:port/aa?key=nalue//协议主机端口端口// http://127.0.0.1:8848/demo3/page19-BOM-Location.htmlvar s1 = location.href;// 获取地址栏网址的协议 httpvar s2 = location.protocol;// 获取地址栏网址的端口 8848var s3 = location.port;//获取主机和端口号：127.0.0.1:8848var s4 = location.host;//获取主机号：127.0.0.1var s5 = location.hostname;// 获取路径参数demo3/page19-BOM-Location.htmlvar s6 = location.pathname;// 修改地址栏完整的网址（可以实现页面跳转）（多）location.hrefhttp://www.kingceram.com/post/= "http://www.baidu.com";// location函数// 重新载入当前网页（刷新网页）location.reload();//使用网址替换当前地址栏的网址（实现页面跳转）location.replace("http:www.baidu.com");console.log(s6);

33、BOM-对象：（多）
.back();
返回上一个页面
.();
切换到下一个页面
.go(num);
正前进负后退
var len = .;
获取历史记录中网址的个数
注意：go数字代表跳几个页面，前提是有过历史记录
34、DOM对象模型：
35、概念（1）元素：标签以及标签所包含的内容元素的属性：标签的属性（2）节点：元素，属性，文本都叫做节点
（元素——标签节点，属性——属性节点，文本——文本节点）
（3）节点名称：标签节点的节点名就是标签名，属性节点的节点名就是属性名，文本节点的节点名是test 36、DOM 对象：
指代的就是一个网页文档，他提供的属性、函数大多是为了获取网页文档中的元素
（1）集合属性：
.all;
获取当前文档所有元素
.;
获取当前网页文档中所有图片
.forms;
获取当前网页文档中的form元素
var arr4 = .links;
获取当前网页文档中所有的链接（a,area）
1）其他属性：
.body;
获取当前网页文档中的body元素
.title;
.title = "千锋Java";
获取当前网页文档中的标题内容
设置当前文档的标题
.URL;
获取当前网页文档的URL
. = "key=value";
. = "key2=";
向中添加新的数据（累加）
.;
获取中缓存的内容
37、获取节点对象：.
("img2");
根据标签的id属性获取一个标签
("m1");
根据标签的name属性获取多个标签（数组）
me("cc");
根据标签的class属性获取一组标签（数组）
("p");
根据标签名获取一组标签（数组）





文章插图






文章插图






文章插图


p1

p3

p3

38、改变HTML
.write("从前有座山
");
.write("山里有座庙");
.("山里有座庙");
如果执行多次write函数用的是同一个流，则输出的数据会追加
如果执行多次write函数用的是不同的流，后面write的内容会覆盖之前的内容
换行输出（依靠浏览器支持）
.open();
打开并使用一个新的流
.close();
关闭当前网页的输出流，关闭之后如果执行write，则会打开新的流
.().
获取与设置标签中间的内容(可以识别标签)
.().
获取与设置标签中间的内容(不可以识别标签)
.().value
获取与设置input标签输入框中值
38、获取节点对象：.39、对HTML标签的操作（1）操作标签属性

// 操作标签属性// 获取属性值var s = img.src;// 设置属性值img.src = "http://www.kingceram.com/post/imgs/img3.jpg";

（2）操作标签样式

// 操作标签样式// 设置标签的样式属性img.style.border = "2px rgba(255,0,0,0.5) solid";// 样式属性在css中以“-”分割，在js中操作要使用驼峰命名img.style.borderRadius = "50%";var m = img.style.border;console.log(m);

（3）操作标签对象的class属性
.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}

var img3 = document.getElementById("img3");// 标签对象的class属性使用className进行操作img3.className = "imgStyle";console.log(img3.class);

.imgStyle{width: 200px;height: 200px;border-radius: 50%;transform: rotate(45deg);}



文章插图

 




文章插图

 




文章插图

40、表单校验
.js

function doValidate() {console.log("------doValidate");var userName = document.getElementById("userNameInput").value;var label1 = document.getElementById("userNameTipsLabel");//校验用户名if (userName == null || userName == "") {//进行提示label1.innerHTML = "请输入用户名！";label1.style.color = "red";return false;} else if (userName.length < 8 || userName.length > 20) {label1.innerHTML = "用户名长度必须为8-20个字符！"label1.style.color = "red";return false;} else if (!new RegExp("^[0-9a-zA-Z]*$").test(userName)) {label1.innerHTML = "用户名只允许包含数字和字母";label1.style.color = "red";return false;} else {label1.innerHTML = "用户名输入正确！";label1.style.color = "green";}// 校验密码var userPwd = document.getElementById("userPwdInput").value;var label2 = document.getElementById("userPwdTipsLabel");if (userPwd == null || userPwd == "") {//进行提示label2.innerHTML = "请输入密码！";label2.style.color = "red";return false;} else if (userPwd.length < 8 || userPwd.length > 16) {label2.innerHTML = "密码长度必须为8-16个字符！"label2.style.color = "red";return false;}else {label2.innerHTML = "密码输入正确！";label2.style.color = "green";}//校验重复输入密码var rePwd = document.getElementById("rePwdInput").value;var label3 = document.getElementById("rePwdTipsLabel");if (rePwd == null || rePwd == "") {//进行提示label3.innerHTML = "密码不能为空！";label3.style.color = "red";return false;} else if (userPwd != rePwd) {label3.innerHTML = "两次密码输入不一致！"label3.style.color = "red";return false;}else {label3.innerHTML = "重复密码输入正确！";label3.style.color = "green";}//校验手机号var userPhone = document.getElementById("userPhoneInput").value;var label4 = document.getElementById("userPhoneTipsLabel");if(userPhone == null || userPhone == "") {//进行提示label4.innerHTML = "手机号不能为空！";label4.style.color = "red";return false;}else if(!new RegExp("1[3579]\\d{9}").test(userPhone)){label4.innerHTML = "手机号只允许1开头，且中间为3579的11位数！";label4.style.color = "red";return false;}else {label4.innerHTML = "手机号输入正确！";label4.style.color = "green";}//校验邮箱var userEmail = document.getElementById("userEmailInput").value;var label5 = document.getElementById("userEmailTipsLabel");if(userEmail == null || userEmail == "") {//进行提示label5.innerHTML = "邮箱不能为空！";label5.style.color = "red";return false;}else if(!new RegExp("^[0-9a-zA-Z]{10}@qq\.com$").test(userEmail)){label5.innerHTML = "邮箱只允许10位数字或字母，且以@qq.com结尾的格式！";label5.style.color = "red";return false;}else {label5.innerHTML = "邮箱输入正确！";label5.style.color = "green";}console.log(userName);return false;}

表单校验用户注册-数据校验账号：

密码：

确认密码： 

手机号： 

邮箱：

41、节点操作（1）说明
节点：元素，属性，文本都叫做节点
节点操作：使用js完成节点的增加、插入、替换、删除
1）节点属性：
节点类型
标签节点
标签名
null
属性节点
属性名
属性值
文本节点
#text
文本内容
2）方法
body.;
获取当前标签的属性列表
div.;
获取当前标签的子节点（包括标签节点，文本节点）

节点属性hello枫桥夜泊月落乌啼霜满天，

江枫渔火对愁眠 。

姑苏城外寒山寺，

夜半钟声到客船 。

(2)常用方法
.("img");
创建标签节点（元素）
.("name");
创建属性节点
.("hello world!");
创建文本节点
.();
将属性节点添加到标签节点中
.("src","imgs/img2.jpg");
给标签节点添加/修改属性
.("alt");
从标签节点上移除一个属性
.()
建立上下级关系
.（）
插入子节点
.
替换子节点
.()
删除子节点
(2)创建节点: .
创建新节点
（3）节点的属性操作

// 创建标签节点var imgTag = document.createElement("img");// -----------------begin// 1、// 创建属性节点var srcAttr = document.createAttribute("src");srcAttr.nodeValue="http://www.kingceram.com/post/imgs/img1.jpg";// 将属性节点添加到标签节点中imgTag.setAttributeNode(srcAttr);// -----------------end// 2、给标签节点添加/修改属性imgTag.setAttribute("src","imgs/img2.jpg");imgTag.setAttribute("width","200");imgTag.alt = "图片无法显示";// 从标签节点上移除一个属性imgTag.removeAttribute("alt");

2）建立上下级关系()

//拼接子节点将标签节点拼接到body标签里面（最后面） var body = document.body;body.appendChild(imgTag);

3）插入子节点（）

//插入子节点，将imgTag插入到body里面btnTag之前var btnTag =document.getElementById("btn_test");body.insertBefore(imgTag,btnTag);

（3）替换子节点

替换节点#container{border: #F08080 2px solid;width: 400px;height: 300px;}hello

我是一个图片

world



文章插图

（4）删除子节点()

替换节点#container{border: #F08080 2px solid;width: 400px;height: 300px;}hello

我是一个图片

world



文章插图

42、事件绑定（1）内联绑定：
在HTML标签上添加事件属性，绑定对应的js函数

（2）脚本外联绑定(推荐):
不再HTML标签上写事件属性，通过JS获取HTML元素，调用事件属性绑定JS函数

43、HTML常用事件
鼠标事件、键盘事件（表单标签）、事件、监听事件
44、鼠标事件：
用户的鼠标在HTML标签上产生点击、双击、移动、放上、离开等动作
单击
双击
鼠标移动到HTML标签上
鼠标从HTML标签上移走
鼠标在HTML标签上移动
鼠标在HTML标签上左键按下
鼠标在HTML标签上左键松开
表单提交事件





文章插图

表单提交：注意 false不提交那里直接()的话都会false也会提交

function show07() {return true;}
45、键盘事件（表单标签）：
主要是针对于表单中的输入标签
键盘按下（未松开就一直加）
键盘抬起
键盘按下（未松开也就一次）
46、事件
. = ()
当网页中body标签内容加载完毕触发
. = ()
当前网页关闭或刷新时执行用于回收资源
. = ()
当网页发生滚动时触发执行
.ο= ()
窗口的尺寸发生变化时触发





文章插图

例如：（如果在HTML的head标签中通过js绑定事件，必须写在. = ()中，因为不然的话找不到id=btn的标签）

47、监听事件:
键盘事件通常绑定在表单输入标签，但是表单输入标签支持的事件不止键盘事件
当表单标签获得焦点时触发
当表单标签失去焦点时触发
当表单标签中的值发生变化触发（输入框输入完成失去焦点后判断）
.("num"). = ()
当输入框中输入的内容被选中时触发
标签也支持事件
绑定在form元素上，当此表单被提交时触发
绑定在form元素上，当此表单被重置时触发
全选

44、Event事件对象：
js将标签发生的动作抽象为事件对象、
Event对象用来描述HTML标签与发生的动作的组合
(1)获取Event对象： 1)内联获?。菏褂枚韵蟮饔胑vent属性获取触发当前JS函数的event对象





文章插图

2）js脚本获?。喝绻褂肑S脚本绑定函数，也可以使用函数的参数直接获取





文章插图

（2）event对象属性：
var tag = event.;
event对象调用，获得触发此事件的标签（按钮）
var type = event.type;
event对象调用type属性，获取事件的类型（click）
45、事件冒泡：子标签发生的事件触发了当前标签上层父标签绑定的函数
阻止：
event. = true;
阻止事件冒泡
event.();
阻止事件冒泡





文章插图

46、JSP的内置对象：
对象、对象、out对象、对象、对象、对象、对象、Page对象、对象。
47、NaN+ 任何 =NaN 无重载
48、()==>用于获取变量数据类型
49、增强for里面的每个值是索引
50、ο=" ()" 函数里面默认true
51、css写 style js写
52、两种按钮
（1）验证
（2）必须form里面
53、me("max")语法
.me("max").value 这个语句是错误的，因为 me() 方法返回的是一个数组，而 value 属性是只读的，所以不能直接访问。可以通过 [0].value 来访问第一个元素的 value 属性。
54、样式、属性写法
（1）样式写法：（head里面）
table{border: 1px red solid;}
（2）属性写法

55、table标签举例

tr th {height: 20px;}tr td {height: 50px;text-align: center;}姓名年龄性别小花12女小淑32女兰兰20男倾听23男

56、text-align: ;也可用于表示里面的内容居中
div{background-color: gray;width: 280px;height: 60px;text-align: center;}验证码：
57、存入数组
var nums = [];
nums.push();
58、合并字符串
var= nums.join('');
59、数字转成字母
var= .(num1);
60、table无样式标签
61、.οnlοad=show() 启动时加载
62、js无只有==
63、操作样式：节点对象.style.属性名=属性值
64、两种

区别：
和的主要区别在于标签可以包含更多的HTML元素，并且通常用于更大的、可包含文本的按钮，而则用于更小的按钮，并且通常只包含一个词或者短语。另外，标签在大多数浏览器中支持事件处理程序，而则不支持。
65、表单提交事件，如果返回false则不执行，返回true才执行 66、监听条目改变
67、方法传参
(index){
68、字符串多维数组
var= [["昌平区","海淀区","朝阳区"],["名媛区","酒吧区","小姐姐区"],["越秀区","白云区","天河区"]];
JSON格式的数组，该数组包含两个对象
[{"uid":14,"uname":"张三"},{"uid":15,"uname":"张三"}]
69、float: left;
-top: 50px;
-right: 10px;
设置容器里面的标签的位置，先让他变成float的浮动布局
70、
btn. = true; 设置未到时间前不能点击
71、JS绑定事件（1）直接在标签中绑定

（2）使用函数绑定1）（多）

2)（多）

3)使用提供的方法进行绑定
("事件的名称","执行函数","执行的规则(true由内到外触发事件,false相反)")
增加事件
("事件的名称","执行函数","执行的规则(true由内到外触发事件,false相反)")
删除事件
A.事件没有on前缀
B.触发的函数没有双引号没有括号
C.可以给同一个标签增加相同的事件
D.可以给同一个标签增加多种不同的事件
E.可以给窗口对象来增加事件

72、设置里面的字体颜色的话需要 ePro.style.color = "red";。不能只是color
73、html里面left:'250px'没有效果,要加上: ;才有效果
元素的定位属性（如left、top、等）需要结合起来使用才能实现定位效果。如果你只设置了left属性而没有设置属性，那么浏览器将无法确定元素的定位参照点和定位方式，因此元素的位置不会发生变化
相对定位元素的left、top、right和属性都应该是相对于其原始位置的偏移量，而不是相对于父元素或屏幕的偏移量。如果需要将元素相对于父元素或屏幕进行定位，需要使用其他定位方式（如绝对定位、固定定位等）
74、.οnlοad=(); 一开始就生成想要的结果
75、.log("你好");没反应
HTML代码中出现了的.log 。这个是在浏览器控制台中打印信息的方法，它并不是HTML的一部分，而是的一部分。
【决定了网页中标签的功能及动态效果JS】如果你想在网页上看到"你好"这个信息，你需要将.log("你好");这行代码放入一个