小白学习笔记（javaweb前端三大件）
概念：
html文件是浏览器负责解析和展示
html文件是纯文本文件，普通的编辑工具都可以编辑。
html注释的写法：
专业词汇：
语法细节：
HTML的常见标签：
标题，段落，换行
<!-- 标题 h1-h6(其中，h1的字体最大，越往后越小) 段落 p 换行 br hr（其中br就是普通换行，hr是带分割线的换行） -->
效果：
列表：
有序列表（ol），无序列表（ul）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 有序列表 ol 无序列表 ul 列表项 li --> <ol> <li>数据类型</li> <li>变量</li> <li>流程控制</li> <li>函数</li> <li>面向对象</li> </ol> <ul> <li>java <ol> <li>数据类型</li> <li>变量</li> <li>流程控制</li> <li>函数</li> <li>面向对象</li> </ol> <!-- 列表标签可以嵌套 --> </li> <li>C</li> <li>c#</li> <li>php</li> </ul> </body> </html>超链接标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 超链接标签（也叫做a标签）： href 用于定义要跳转的目标资源的网址 1.完整的url http://www.atguigu.com/ 2.相对路径 以当前资源所在的路径为出发点去找目标资源(有两种开头方式) ./ 表示的当前资源所在路径，可以省略不写 ../ 表示当前资源的上一层路径，如果有需要，这个必须要写出（举例见a.test.html） 3.绝对路径 无论当前资源在哪里，使用固定的位置作为出发点去找目标资源 以 / 开头 target 用于定义目标资源的打开方式 _self 在当前窗口打开目标资源 _blank 开启新窗口打开目标资源 --> <a href="http://www.atguigu.com/">尚硅谷</a> <a href="http://www.atguigu.com/" target="_blank">尚硅谷</a> <a href="http://www.atguigu.com/" target="_self">尚硅谷</a> <!-- 相对路径写法 --> <a href="02标题段落换行.html" target="_blank">02标题标签</a> <!-- 相对路径写换一个文件的方式 --> <a href="a/test.html" target="_blank">测试</a> <!-- 绝对路径写法 --> <a href="/demo1-html/04超链接标签.html" target="_blank">返回</a> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=h, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>this is a test</h1> <!-- 相对路径写法，要找到04超链接的文件 --> <a href="../04超链接标签.html" target="_blank">返回</a> </body> </html>图片标签：
举例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- img src 定义图片的路径 1.url 2.绝对路径 3.相对路径 title 定义鼠标悬停时提示的文字 alt 定义图片加载失败的文字 --> <!-- 相对路径 --> <img src="img/绫波丽.png" title="绫波丽" alt="加载失败"> <!-- 绝对路径 --> <img src="/demo1-html/img/绫波丽.png" title="绫波丽" alt="加载失败"> </body> </html>表格标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table 整张表格 thead 表头 tbody 表体 tfoot 表尾（表头和表尾都不是必须要写的） tr 表格中的一行 td 行中的一个单元格 th 自带加粗居中效果的td --> <h3>员工技能分数表 </h3> <tableu255861da">表格的跨行和跨列：跨行使用的是rowspan跨列使用的是colspan<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table 整张表格 thead 表头 tbody 表体 tfoot 表尾（表头和表尾都不是必须要写的） tr 表格中的一行 td 行中的一个单元格 th 自带加粗居中效果的td 表格的跨行和跨列: 跨行使用的是rowspan 跨列使用的是colspan --> <h3>员工技能分数表 </h3> <tablestyle="margin:0px auto; width: 300px;"> <thead> <tr> <th>排名</th> <th>姓名</th> <th>分数</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>99</td> <td rowspan="6">前三名升职加薪</td> <!-- rowspan的那个双引号里写的是这个单元格一共占用了几个单元格 --> </tr> <tr> <td>2</td> <td>李四</td> <td>98</td> </tr> <tr> <td>3</td> <td>王五</td> <td>90</td> </tr> <tr> <td>总人数</td> <td colspan="2">200</td> <!-- colspan的那个双引号里写的是这个单元格跨列总共占了几个单元格 --> </tr> <tr> <td>平均分</td> <td colspan="2">96</td> </tr> <tr> <td>及格率</td> <td colspan="2">80%</td> </tr> </tbody> </table> </body> </html>效果：表单标签（重点）：举例：<form action="08welcome.html" method="get"> <!-- 添加表单项标签，用户输入信息的标签 --> 用户名：<input type="text" name="username"><input type="reset" value="清空"><br> 密码：<input type="password" name="password"><input type="reset" value="清空"><br> <input type="submit" value="登录"><br> <!-- 这里value的作用是改变提交和重置按钮里的文字 -->效果图：表单项标签：<form action="08welcome.html" method="get"> <!-- 添加表单项标签，用户输入信息的标签 --> 用户名：<input type="text" name="username"><input type="reset" value="清空"><br> 密码：<input type="password" name="password"><input type="reset" value="清空"><br> 性别： <input type="radio" name="gender" value="1" checked>男 <!-- 这里checked的意思就是默认选择 --> <input type="radio" name="gender" value="0">女 <br> 爱好： <input type="checkbox" name="hobby" value="1"> 篮球 <input type="checkbox" name="hobby" value="2"> 足球 <input type="checkbox" name="hobby" value="3"> 乒乓球 <input type="checkbox" name="hobby" value="4"> 羽毛球 <input type="checkbox" name="hobby" value="5"> 球 <br> 个人简介： <textarea name="intro"></textarea> <br> 籍贯： <select name="pro" > <option value="1">京</option> <option value="2">南昌</option> <option value="3">江苏</option> <option value="0" selected>-请选择-</option><!-- 这里面的selected的意思是默认选择，就是最先显示在选项框里的 --> </select> <br> 选择头像： <input type="file"> <br> <input type="submit" value="登录"><br> <!-- 这里value的作用是改变提交和重置按钮里的文字 --> </form>效果：布局相关标签：div就是把整个页面分成几块几块举例：<body> <div>123</div> <div>345</div> <div>月23日， <span>体育总局</span>冬运中心公示米兰冬奥会参赛运动员名单。根据各项目米兰冬奥会参赛选拔办法和资格获取情况，体育总局冬运中心选拔出124名运动员参加米兰冬奥会。如后续还 有再分配资格或已入选运动员因伤无法参赛等情况</div> </body>效果：特殊字符：举例： <h1> 一级标题 <h1>效果：css引入方式：方式一：<input type="button" value="按钮" >效果：方式二：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{button" value="按钮"> </body>效果：方式三：css文件：input{u8508d980">在html文件中调用：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="btn.css"> </head> <body> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮">效果：这种方式就是把css的style样式专门放在一个文件夹里，然后如果在html中要用的时候就直接在head标签中通过link标签直接调用就好css选择器：元素选择器：这种方式括号里的样式就会作用到标签名的地方比如：<style>input{button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> </body>效果：id选择器：这种·方式就会根据id值来确定style样式应该作用到哪些地方上举例:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #btn4{ width: 60px; height: 40px; background-color: rgb(166, 232, 66); color: white; font-size: 20px; font-family: 行书; border: 2px solid green; border-radius: 5px; } </style> </head> <body> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> </body>效果：class选择器：<style> .shapeClass{ width: 80px; height: 40px; border-radius: 5px; } .colorClass{ background-color: rgb(28, 177, 53); color: white; border: 3px solid green; } .fontClass{ font-size: 20px; font-family: '正楷'; line-height: 30px; } </style> </head> <body> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> <input type="button" value="按钮"> </body>效果：这种选择器很方便，选了哪些可以起作用css浮动：举例：<style> .outerDiv{ width: 500px; height: 300px; border: 1px solid rgb(34, 201, 109); background-color: beige; } .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; } .d1{ background-color: aqua; float: right; } .d2{ background-color: coral; float: right; } .d3{ background-color: crimson; } </style> </head> <body> <div> <div>diva</div> <div>divb</div> <div>divc</div> </div> </body>效果：css定位：其中：absolut 是根据浏览器窗口来定位的relative 且移动后原来的位置不会被别的块占用fixed 移动后的位置会被别的块占用（相对浏览器窗口的意思就是滑滚轮这个块的位置相对浏览器窗口的位置不变）<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outerDiv{ width: 500px; height: 300px; border: 1px solid rgb(34, 201, 109); background-color: beige; } .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; } .d1{ background-color: aqua; float: right; position: fixed; top: 300px; left: 100px; } .d2{ background-color: coral; float: right; } .d3{ background-color: crimson; } </style> </head> <body> <div> <div>diva</div> <div>divb</div> <div>divc</div> </div> </body>效果：css盒子模型：margin是外边界padding是内边界内容区（Content）盒子的核心区域，用于放置文本、图片、子元素等实际内容，是唯一能显示内容的区域。核心属性：width、height（默认情况下，这两个属性仅针对内容区生效）；特性：尺寸由内容本身或手动设置的 width/height 决定，超出时可通过overflow控制滚动 / 隐藏。<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .outerDiv{ width: 500px; height: 300px; border: 1px solid rgb(34, 201, 109); background-color: beige; margin: auto; } .innerDiv{ width: 100px; height: 100px; border: 1px solid blue; } .d1{ background-color: aqua; float: right; margin-right: 85px; margin-top: 80px; } .d2{ background-color: coral; float: right; margin-top: 80px; } .d3{ background-color: crimson; float: right; margin-top: 80px; } </style> </head> <body> <div> <div>diva</div> <div>divb</div> <div>divc</div> </div>效果：盒子模型的主要作用就是调整块与块之间的空隙，美化页面来的js引入方式：1.内嵌式：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn1{ width: 150px; height: 40px; font-size: 24px; font-family: '正楷'; background-color: yellow; color: red; border: 3px solid rebeccapurple; border-radius: 5px; } </style> <script> function surprise(){ //弹窗提示 alert("hello 我是董诗豪他爹") } </script> </head> <body> <input onclick="surprise()" type="button" value="点我有惊喜"> </body>2.引入式：从外部引入方法存放的方法：function surprise(){ //弹窗提示 alert("hello 我是董诗豪他爹") }在·head标签中使用script标签，然后在src写方法的地址<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .btn1{ width: 150px; height: 40px; font-size: 24px; font-family: '正楷'; background-color: yellow; color: red; border: 3px solid rebeccapurple; border-radius: 5px; } </style> <script src="js/01测试方法.js" type="text/javascript"></script> </head> <body> <input onclick="surprise()" type="button" value="点我有惊喜"> </body>JS的数据类型：js常见运算符：和Java不同的地方已经写出来了，没写出来的就是和Java一样的JS流程控制：分支结构：if结构测试：prompt就相当于scanner和Java不同的地方：switch结构和Java一模一样不写了循环结构：for循环和while循环的大部分都和Java类似，增强for循环有点不一样document.write("<ul>"); for(var index in arr){ document.write("<li>" + arr[index] + "</li>"); } document.write("</ul>");这个是js里的增强for循环，和python里的for in循环有点像函数：5.函数可以作为参数传递给另一个方法对象的创建：第一种方式：第二种方式：举例：JSON在客户端的使用：<script> var personStr = '{"name":"张三","age" :10,"dog":{"dname" : "小花"},"loveSinger":["张晓明","王晓东","里小黑"]}' //可以通过JSON.parse()可以将一个JSON串转化为已给对象 var person = JSON.parse(personStr) console.log(person.name); console.log(person.dog.dname); //通过JSON.stringify()将一个对象转化为JSON串 var personStr2 = JSON.stringify(person); </script>JSON在服务端的使用：这个要导包所以没写JSON和map之间的转换：和List，array之间的转换·：1.数组：<script> var arr = new Array(); var arr1 = new Array(5); var arr2 = new Array("zhangsan",0,false) var arr3 = ["lisi",11,false] //创建数组的几种方法，如果括号里只有一个数字，那就是数组的长度，如果有多个数字，那就是数组的元素 arr[0] = "张三"; arr[1] = 10; arr[6] = true; //向数组中添加元素，js中的数组可以添加不同类型的元素，并且数组的长度说变就变，和Java的集合类似 //部分api测试 //concat var fruit = ["桃子","番茄","玉米"]; var fruit2 = ["香蕉","观澜","苹果"]; var fruitAll = fruit.concat(fruit2); console.log(fruitAll);// ['桃子', '番茄', '玉米', '香蕉', '观澜', '苹果'] 可以看到没有改变原来的数组，而是用了一个新数组接收连接的数组 //pop，删除数组的最后一个元素并返回删除的元素 var fruit4 = fruitAll.pop(); console.log(fruit4);//葡萄 //push,从尾端增加元素并返回长度 var fruit5 = fruitAll.push("葡萄"); console.log(fruit5);//6 //indexof，返回在数组中查找的元素第一次出现的索引位置 //lastIndexOf，返回数组中查找的元素最后一次出现的索引位置 //reverse ，反转数组 //slice（a,b），截取数组，和Java一样包含前面的不包含后面的 </script>Boolean类型：Date类型：还有别的类型的api，比如math类型，string类型的可以去菜鸟教程里看，就不记录了鼠标事件：键盘事件：表单事件：<script> function fun1(){ alert("单击了"); } function fun2(){ alert("单击了2"); } function fun3(){ alert("双击了"); } </script> </head> <body> <input type="button" value="按钮" onclick="fun1(),fun2();" ondblclick="fun3();" > </body>举例：鼠标和键盘事件：<script> function fun1(){ alert("单击了"); } function fun2(){ alert("单击了2"); } function fun3(){ alert("双击了"); } function fun4(){ console.log("鼠标悬停了"); } function fun5(){ console.log("鼠标移动了"); } function fun6(){ console.log("鼠标离开了"); } function fun7(){ console.log("键盘按下了"); } function fun8(){ console.log("键盘松开了"); } </script> </head> <body> <input type="button" value="按钮" onclick="fun1(),fun2();" ondblclick="fun3();" > <br> <img src="demo3-js/img/绫波丽.png" onmouseover="fun4();" onmousemove="fun5();"> <br> <input type="text" onkeydown="fun7();" onkeyup="fun8();" > </body>表单事件：测试：<script> function fun1(){ alert("单击了"); } function fun2(){ alert("单击了2"); } function fun3(){ alert("双击了"); } function fun4(){ console.log("鼠标悬停了"); } function fun5(){ console.log("鼠标移动了"); } function fun6(){ console.log("鼠标离开了"); } function fun7(){ console.log("键盘按下了"); } function fun8(){ console.log("键盘松开了"); } function testFocus(){ console.log("获得焦点了"); } function testBlur(){ console.log("获得焦点了"); } function testchange(){ console.log("内容改变了"); } //键盘事务的onchange，只有在文本内容改变了才会生效 function testchange(){ console.log("选项改变了"); } function testSubmit(){ var flat = confirm("确定要提交表单吗？") if(!flat){ //在这里我们有机会阻止表单的提交 event.preventDefault();//阻止组件的默认行为 } console.log("表单提交了"); } </script> </head> <body> <input type="button" value="按钮" onclick="fun1(),fun2();" ondblclick="fun3();" > <br> <img src="demo3-js/img/绫波丽.png" onmouseover="fun4();" onmousemove="fun5();"> <br> <input type="text" onkeydown="fun7();" onkeyup="fun8();" > <hr> <form action="demo3-js/01js引入方式.html" method="get" onsubmit="testSubmit()"> <!-- onsubmit这个事件其实是由form标签来提交的，所以要在这里写 --> 用户昵称：<input type="text" name="realName" onfocus="testFocus()" onblur="testBlur()" onchange="testchange()" onsubmit="testSubmit()"><br> 登陆账号：<input type="text" name="logoinName"><br> 选择籍贯：<select onchange="testchange()"> <option >北京</option> <option >上海</option> <option >广州</option> </select><br> <input type="submit" value="注册"> <input type="reset" value="清空"> </form>事件通过dom编程触发：举例：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function ready(){ //通过dom获得要操作的元素 var btn = document.getElementById("btn1"); //绑定一个单击事件 btn.onclick = function(){ alert("按钮单击了"); } //为div绑定单击事件 var div1 = document.getElementById("d1"); div1.onclick= function(){ div1.style.backgroundColor = "red"; } } </script> <style> .div1{ width: 100px; height: 100px; background-color: yellow; } </style> </head> <body onload="ready()"> <!-- onload标签执行的顺序整个heml页面读完之后，所以ready此时可以顺利执行 --> <button>按钮</button> <div></div> </body>BOM编程学的就是浏览器各个小组件的apiwindows对象的常见api：还有其他的可以在菜鸟教程上面看举例：<!-- 三种弹窗方式： alert 弹窗 prompt 输入 confirm 确认 --> <script> function fun1(){ window.alert("hello"); } function fun2(){ var res = window.prompt("hello,请输入姓名"); console.log(res); } function fun3(){ var res1= window.confirm("确认要删除吗？") console.log(res1); } function fun4(){ window.setTimeout(function(){ console.log("我是董诗豪爹"); },2000 ) } </script> </head> <body> <button onclick="fun1()">信息提示框</button> <button onclick="fun2()">信息输入框</button> <button onclick="fun3()">信息确认框</button> <button onclick="fun4()">两秒钟后成为董诗豪他爹</button> </body> </html>window对象的常见属性：history：forwar和back方法window.history（历史记录操作）操作浏览器的历史记录栈，无法查看具体历史 URL（浏览器安全限制），仅能做前进、后退、跳转操作：history.back()：后退到上一个历史记录（等价于浏览器「返回」按钮）history.forward()：前进到下一个历史记录（等价于浏览器「前进」按钮）history.go(n)：跳转到指定历史记录，n 为数字（go(1)= 前进 1 步，go(-1)= 后退 1 步，go(0)= 刷新页面）function funA(){ //向前翻页 history.back(); } function funB(){ //向后翻页 history.forward(); } </script> </head> <body> <a href="demo1-html/img/绫波丽.png">起始页</a> <br> <button onclick="funA()">上一页</button> <button onclick="funB()">下一也</button> <a href="http://www.atguigu.com">尚硅谷</a> <hr>window.location（高频，地址栏核心对象）location 是 window 的核心属性，指向当前页面的 URL 信息，支持获取 / 修改 URL、页面刷新、跳转等操作，常用属性 / 方法：location.href：获取完整 URL（最常用），也可直接赋值实现页面跳转（会留下历史记录）location.reload(forceGet)：刷新当前页面，forceGet=true 强制从服务器刷新（不使用缓存），默认使用缓存location.assign(url)：跳转到指定 URL（会留下历史记录，可点击「返回」回到原页面）location.replace(url)：跳转到指定 URL（不会留下历史记录，原页面从历史栈中删除，无法返回）其他常用属性：location.host（域名 + 端口）、location.pathname（URL 路径）、location.search（查询参数，如 ?id=1&name=test）、location.hash（哈希值，如 #top）定时器（异步延时操作）window 提供了两个核心定时器 API，用于实现延时执行和重复执行异步操作，同时配套清除方法（定时器会返回唯一 ID，用于清除），是 JavaScript 异步编程的基础。延时定时器：setTimeout + clearTimeoutwindow.setTimeout(callback, delay, ...args)：延迟 delay 毫秒后，执行一次 callback 回调函数参数：callback（回调函数 / 执行代码）、delay（延迟时间，单位：毫秒，默认 0）、...args（传递给回调的参数）返回值：定时器 ID（数字），用于后续清除window.clearTimeout(timerId)：清除未执行的 setTimeout 定时器（避免回调无故执行）重复定时器：setInterval + clearIntervalwindow.setInterval(callback, interval, ...args)：每隔 interval 毫秒，重复执行 callback 回调函数参数 / 返回值：与 setTimeout 一致window.clearInterval(timerId)：清除正在执行的 setInterval 定时器（必须手动清除，否则会一直执行）核心注意：定时器的延迟 / 间隔时间并非绝对精确，因为 JavaScript 是单线程，若主线程被阻塞（如执行耗时代码），定时器会等待主线程空闲后再执行。浏览器对话框（简单交互）window 提供了 3 个原生对话框 API，用于实现简单的用户交互，均为阻塞式（执行时会暂停 JavaScript 代码，直到用户操作完成），开发中仅用于简单调试 / 提示，正式项目建议使用自定义弹窗（更美观、可定制）。window.alert(message)：提示对话框，仅显示文本和「确定」按钮，无返回值window.confirm(message)：确认对话框，显示文本、「确定」和「取消」按钮，返回布尔值（点击确定返回 true，取消返回 false）window.prompt(message, defaultText)：输入对话框，显示文本、输入框、「确定」/「取消」按钮，返回字符串 /null（点击确定返回输入值，取消返回 null；defaultText 为输入框默认值）这是上面自己写了的一、核心共性（两者完全一致）挂载位置：都是window的属性，可直接通过window.sessionStorage/window.localStorage访问，全局作用域下可省略window前缀；存储形式：仅支持键值对（Key-Value） 存储，键和值均为字符串类型（存储对象 / 数组等复杂数据需手动序列化，获取时反序列化）；存储容量：远大于 Cookie（Cookie 约 4KB），两者均约5MB（不同浏览器略有差异，无统一标准）；同源策略：仅在同一协议、同一域名、同一端口的页面间共享数据，跨域页面无法访问彼此的存储内容，保障数据安全；操作特性：同步操作（执行时会阻塞主线程，适合存储少量数据，大量数据建议用 IndexedDB）；与服务器交互：存储在浏览器本地，不会自动随 HTTP 请求发送到服务器（区别于 Cookie，Cookie 会默认携带到同域名请求中）。二、核心差异（开发选型的关键，3 个核心维度）两者的唯一本质区别在于生命周期和作用域，直接决定了适用场景，以下是精准对比：特性sessionStorage（会话存储）localStorage（本地持久化存储）生命周期临时存储，会话结束即销毁（浏览器标签页 / 窗口关闭时清空，即使刷新页面、重新进入同页面，数据仍保留；标签页关闭则永久丢失）永久存储，除非手动清除（关闭标签页、浏览器，甚至重启电脑，数据仍会保留在浏览器中）作用域仅当前浏览器标签页有效，不跨标签、不跨窗口（同域名下的其他标签页 / 窗口无法访问，即使是同一页面）；同一标签页的 iframe（同源）可共享同域名下所有标签页、所有窗口共享（只要协议、域名、端口一致，任意页面均可读写）数据保留策略无手动清除方法，只能通过关闭标签页 / 窗口由浏览器自动清除需手动通过代码 / 浏览器设置清除（如清除缓存、开发者工具删除）三、通用常用 API（两者完全一致，直接复用）因为核心设计一致，sessionStorage和localStorage拥有完全相同的操作 API，均为 4 个基础方法 + 键值对直接访问，操作简单直观，以下是高频用法（示例同时适用于两者，替换前缀即可）。1. 存储数据：setItem(key, value)作用：向存储中添加 / 修改数据（键已存在则覆盖，不存在则新增）；注意：value必须是字符串，非字符串类型（对象、数组、数字）会被自动转为字符串（对象会转为"[object Object]"，失去原有结构，需手动序列化）。2. 获取数据：getItem(key)作用：根据键名获取对应值，键不存在则返回 null；注意：获取到的是字符串，若存储的是序列化后的复杂数据，需手动反序列化。3. 删除指定数据：removeItem(key)作用：根据键名删除某一条存储数据，键不存在时执行无报错（静默失败）。4. 清空所有数据：clear()作用：清空当前存储对象中的所有键值对（仅清空当前sessionStorage/localStorage，互不影响）。补充：通过「键名直接访问」与操作普通对象一致，可通过storage.key获取值，storage.key = value设置值，效果与getItem/setItem一致（推荐使用官方 API，避免键名与内置方法重名）。服务器里的内容无法再浏览器更改，但是document里的代码可以再浏览器的控制台上更改（f12），以此来改变浏览器里的内容，这就是dom编程的原理<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> <div>框1</div>; <div>框2</div>; <div>框3</div>; </div> </body>这段代码的dom树浏览器会实时更新dom上的内容dom操作的核心流程获取要操作元素的方法：直接获取和间接获取<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function fun1 (){ //1.获取document对象 //2.通过document获得元素 var el1 = document.getElementById("username");//根据元素的id值获取页面上唯一的一个元素 console.log(el1); } function fun2(){ var el2 = document.getElementsByTagName("input"); console.log(el2); } function fun3(){ var el3= document.getElementsByName("aaa"); console.log(el3); } function fun4(){ var el4 = document.getElementsByClassName("a"); } function fun5(){ //先获取父元素 var el5= document.getElementById("div01"); var el6 = el5.children; console.log(el6); console.log(el5.firstElementChild);//通过父元素获取第一个子元素 console.log(el5.lastElementChild);//通过父元素获取最后一个子元素 } function fun6(){ var el7 = document.getElementById("password"); console.log(el7.parentElement); //通过子元素获取父元素 } function fun7(){ var el8 = document.getElementById("password"); console.log(el8.previousElementSibling);//获取前面的第一个元素 console.log(el8.nextElementSibling);//获取后面的第一个元素 } </script> </head> <body> <div> <input type="text" name="aaa"/> <input type="text" name="aaa"/> <input type="text"/> <input type="text"/> </div> <input type="text"><br> <!-- 这些都是直接获取的方式 --> <input type="button" value="根据id获取指定元素" onclick="fun1()"> <input type="button" value="根据标签名获取多个元素" onclick="fun2()"> <input type="button" value="根据name属性值获取多个元素" onclick="fun3()"> <input type="button" value="根据class属性值获取多个元素" onclick="fun4()"> <hr> <!-- 下面是间接获取的方式 --> <input type="button" value="通过父元素获取子元素" onclick="fun5()"> <input type="button" value="通过子元素获取父元素" onclick="fun6()"> <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()"> </body>对元素进行操作：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function changeAttribute(){ var in1 = document.getElementById("in1"); //更改属性语法：元素.属性名 = "" in1.type="button"; in1.value = "嗨"; console.log(in1.type); console.log(in1.value); } function changeStyle(){ var in1 = document.getElementById("in1"); //语法：元素.style.xx = "" in1.style.color = "green"; in1.style.borderRadius = "5px"; } function changeText(){ var div01 = document.getElementById("div1"); //语法：元素名.innerText // 元素名.innerHTML console.log(div01.innerText); div01.innerText = "嗨"; } </script> </head> <body> <input type="text" value="hello"> <hr> <button onclick="changeAttribute()">操作属性</button> <button onclick="changeStyle()">操作样式</button> <button onclick="changeText()">操作文本</button> <br> <br> <div> hello; </div> </body>创建增加删除替换元素：方法都写在代码里面了：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> function addCs(){ //创建一个新的元素 //创建元素 var csli = document.createElement("li"); //设置子元素的属性和文本 csli.id = "cs"; csli.innerText = "长沙"; //将子元素放入父元素 var cityyul = document.getElementById("city"); //在父元素中追加子元素 cityyul.appendChild(csli); } function addJxbeforeSz(){ //创建元素 var Jxli = document.createElement("li"); //设置子元素的属性和文本 Jxli.id = "Jx" Jxli.innerText = "江西" //将子元素放入父元素中 //cityul2.insertBefore(新元素，参照元素) var cityul2 = document.getElementById("city"); var szli = document.getElementById("sz"); cityul2.insertBefore(Jxli,szli); } function replaceSz(){ //创建元素 var xli = document.createElement("li"); //设置子元素的属性和文本 xli.id = "xjp"; xli.innerText = "新加坡"; //将子元素放入父元素中 var cityul3 = document.getElementById("city"); //在父元素中追加子元素 //cityul3.replaceChild(新元素，被替换掉元素) cityul3.replaceChild(xli,sz); } function removeSz(){ var szli = document.getElementById("sz"); szli.remove();//哪个元素调用，就删除哪个元素 } function clearCity(){ var cityul4 = document.getElementById("city"); var fc = cityul4.firstChild; while(fc != null){ fc.remove(); fc = cityul4.firstChild; } } </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>深圳</li> <li>广州</li> </ul> <hr> <!--目标一，再城市列表的最后一列增加一个子标签 --> <button onclick="addCs()">增加长沙</button> <!--目标二，再城市列表的深圳之气增加一个子标签 --> <button onclick="addJxbeforeSz()">增加江西</button> <!-- 目标三，将城市列表的深圳替换为新加坡 --> <button onclick="replaceSz()">替换深圳为新加坡</button> <!-- 目标四，在城市列表中删除深圳 --> <button onclick="removeSz()">删除深圳</button> <!-- 目标五，清空城市列表 --> <button onclick="clearCity()">清空城市列表 </button> </body>了解正则表达式：正则的主要作用：<script> //验证的功能 //定义一个正则表达式 var reg = /o/ //自定义一个字符串 var str = 'hello world!' //校验是否符合正则的规则(就是验证包没包含正则表达式里的字符串) console.log(reg.test(str)); //匹配 var reg = /o/g//加上g就是全局搜索的意思 var str = 'hello world!'; console.log(str.match(reg)) //返回的是第一个匹配上的角标 //替换 var reg = /o/gi//同样的加上g就替换所有的符合标准的，如果加上i就是忽略大小写 var str = "hello world!" var newStr = str.replace(reg,'@'); console.log(newStr); </script>举例：var str1 = 'Java love me' var str2 = 'I love java' var reg1 = /^java/i //^符号是检测是否以java为开头的 var reg2 = /java$/ //$符号是检测是否以java为结尾的 var reg3 = /^java$/ //如果组合一下就是验证是否以java开头，又以java结尾 console.log(reg1.test(str1));//true console.log(reg2.test(str2));//true console.log(reg3.test(str1));//false console.log(reg3.test(str2));//false //校验用户名是否合法 /* 1 必须是字母开头 2 长度必须是6-10位 3 后面其他字符可以是大小写字母，数字和下划线 */ var str = 'aassdddd2' var reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/ //[]表示这一位数字的要求 {}表示前一位的要求重复多少位 console.log(reg.test(str));登录页面：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .ht{ text-align: center; color: aquamarine; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .tab{ width: 500px; border: 8px solid rgb(24, 170, 175); margin: 0px auto; border-radius: 10px; font-family: Arial, Helvetica, sans-serif; } .ltr td{ border: 1px solid rgb(201, 43, 95); } .ipt{ border: 0px; width: 50%; } .btn1{ border: 2px solid palegreen; border-radius: 5px; } #usernameMsg,#userPwdMsg{ color: rgb(228, 20, 20); } .buttonContainer{ text-align: center; } </style> <script> //检验用户名输入格式 function checkUsername(){ //定义正则 var usernameReg = /^[a-zA-Z0-9]{5,10}$/ //获取用户在页面上输入的信息 var usernameInput = document.getElementById("usernameInput"); var username = usernameInput.value; //获取格式提示框 var usernameMsg = document.getElementById("usernameMsg"); if(!usernameReg.test(username)){ usernameMsg.innerText = "用户名输入格式有误"; return false; } //格式ok，返回true，在页面上提示ok usernameMsg.innerText = "ok"; return true; } //检验密码输入格式 function checkUserPwd(){ var userPwdReg = /^[0-9]{6}$/ var userPwdInput = document.getElementById("userPwdInput"); var userpwd = userPwdInput.value; var userPwdMsg = document.getElementById("userPwdMsg"); if(!userPwdReg.test(userpwd)){ userPwdMsg.innerText = "密码输入格式有误" return false; } userPwdMsg.innerText = "ok"; return true; } //表单在提交时校验，只有用户名和密码都返回true才会提交 function checkForm(){ var flag1 = checkUsername(); var flag2 = checkUserPwd(); return flag1&&flag2; } </script> </head> <body > <h1 >欢迎使用日志管理系统</h1> <h3 >请登录</h3> <form method="post" action="/user/login" onsubmit="return checkForm()"> <table> <tr> <td>请输入账号</td> <td> <input type="text" name="username" onblur="checkUsername()"> <span></span> </td> </tr> <tr> <td>请输入密码</td> <td> <input type="password" name="userPwd" onblur="checkUserPwd()"> <span></span> </td> </tr> <tr> <td colspan = "2"> <input type="submit" value="登录" > <input type="reset" value="重置"> <button><a href="/regist.html">去注册</a></button> </td> </tr> </table> </form> </body> </html>效果：注册页面：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .ht{ text-align: center; color: aquamarine; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .tab{ width: 500px; border: 8px solid rgb(24, 170, 175); margin: 0px auto; border-radius: 10px; font-family: Arial, Helvetica, sans-serif; } .ltr td{ border: 1px solid rgb(201, 43, 95); } .ipt{ border: 0px; width: 50%; } .btn1{ border: 2px solid palegreen; border-radius: 5px; } #usernameMsg,#userPwdMsg{ color: rgb(228, 20, 20); } .buttonContainer{ text-align: center; } </style> <script> //检验用户名输入格式 function checkUsername(){ //定义正则 var usernameReg = /^[a-zA-Z0-9]{5,10}$/ //获取用户在页面上输入的信息 var usernameInput = document.getElementById("usernameInput"); var username = usernameInput.value; //获取格式提示框 var usernameMsg = document.getElementById("usernameMsg"); if(!usernameReg.test(username)){ usernameMsg.innerText = "用户名输入格式有误"; return false; } //格式ok，返回true，在页面上提示ok usernameMsg.innerText = "ok"; return true; } //检验密码输入格式 function checkUserPwd(){ var userPwdReg = /^[0-9]{6}$/ var userPwdInput = document.getElementById("userPwdInput"); var userpwd = userPwdInput.value; var userPwdMsg = document.getElementById("userPwdMsg"); if(!userPwdReg.test(userpwd)){ userPwdMsg.innerText = "密码输入格式有误" return false; } userPwdMsg.innerText = "ok"; return true; } function checkReUserPwd(){ // 1. 复用密码正则，无需重复定义 var userPwdReg = /^[0-9]{6}$/ // 2. 获取确认密码输入框和提示框 var reUserPwdInput = document.getElementById("reUserPwdInput"); var reuserpwd = reUserPwdInput.value; var reUserPwdMsg = document.getElementById("reUserPwdMsg"); // 3. 先校验确认密码格式 if(!userPwdReg.test(reuserpwd)){ reUserPwdMsg.innerText = "两次密码输入不一致"; return false; } // 4. 声明并获取原密码输入框/值 var userPwdInput = document.getElementById("userPwdInput"); var userpwd = userPwdInput.value; // 5. 校验两次密码是否一致 if(userpwd !== reuserpwd){ reUserPwdMsg.innerText = "两次密码不一致"; return false; } reUserPwdMsg.innerText = "ok"; return true; } function checkForm(){ // 依次执行所有校验，全部通过才返回true（允许提交） var isUserOk = checkUsername(); var isPwdOk = checkUserPwd(); var isRePwdOk = checkReUserPwd(); return isUserOk && isPwdOk && isRePwdOk; } </script> </head> <body> <form action="/user/regist" method="post" onsubmit="return checkForm()"> <table> <h1 >欢迎使用注册系统</h1> <tr> <td>请输入账号</td> <td> <input type="text" name="username" onblur="checkUsername()"> <span></span> </td> </tr> <tr> <td>请输入密码</td> <td> <input type="password" name="userpwd" onblur="checkUserPwd()"> <span></span> </td> </tr> <tr> <td>确认密码</td> <td> <input type="password" onblur="checkReUserPwd()"> <span></span> </td> <tr> <td colspan = "2"> <input type="submit" value="登录" > <input type="reset" value="重置"> <button><a href="login.html">去登录</a></button> </td> </tr> </table> </form> </body> </html>效果： 
