当前位置： 首页 > ops >正文

javaweb学习开发代码_HTML-CSS-JS

ops 2025/7/18 12:49:10

 HTML学习

标题(h1~h6)-段落p-换行br

<!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><!--标题     h1 ~ h6段落     p换行     br  hr--><h1>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h1><h2>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h2><h3>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h3><h4>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h4><h5>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h5><h6>当代文学之夜：2024年度长篇五佳作品及文学拉力赛颁奖</h6><p>《当代》作为人民文学出版社主办的品牌文学刊物，创刊四十多年来，坚持刊名“当代”二字所指向的广阔道路，“以文学记录中国”，不仅刊发过众多产生巨大影响的名篇佳作，<br/>还通过1999年创办的《当代》文学拉力赛和2004年启动的长篇小说年度论坛，建立了传播文学价值的综合性平台，并不断丰富内容和传播手段，让具有公正性、专业性的年度奖项，成为研判动态、引领创作的风向标，推动更多优秀作家作品进入大众视野的聚光灯。</p><br/><br/><br/><br/><br/><hr /><p>继2023年、2024年两度在郑州举办颁奖盛典后，这一活动今年第三次来到这座文脉深厚的历史文化名城。在河南艺术中心举办的“2025当代文学之夜”现场，<br/>来自全国文学界、出版界及社会各界的代表与文学爱好者齐聚一堂，共同迎接属于文学的荣光时刻。</p></body>
</html>

有序ul和无序列表ol，列表项li

<!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><!--有序列表 ul无序列表  ol列表项  li--><!-- 有序 --><ol><li>数据类型</li><li>变量</li><li>流程控制</li><li>函数</li><li>面向对象</li></ol><!-- 无序 --><ul><li>JAVA</li><li>C</li><li>C#</li><li>php</li><li>go</li><li>python</li></ul><!-- 列表嵌套 --><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><li>go</li><li>python</li></ul>
</body>
</html>

超链接标签a

<!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><!--超链接标签ahref  用于定义要跳转的目标资源的地址1  完整的url  http://www.atguigu.com/2  相对路径   以当前资源的所在路径为出发点去找目标资源./ 表示当前资源的所在路径，可以省略不写../  表示当前资源的上一层路径，需要时必须显示写出3  绝对路径无论当前资源在哪里，使用以固定的位置作为出发点去找目标资源以 / 开头target 用于定义目标资源的打开方式_self    在当前窗口打开目标资源_blank   开启新窗口打开目标资源--><a href="http://www.atguigu.com/" target="_blank">尚硅谷</a><!-- 相对路径写法 --><a href="02标题段落换行.html" target="_blank">02标题标签</a><a href="a/b/test.html" target="_blank">test</a><!-- 绝对路径写法 --><a href="/demo1-html/a/b/test.html" target="_blank">test</a>
</body>
</html>

图片img

<!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><!--imgsrc  定义图片路径1  url2  相对路径3  绝对路径title  定义鼠标悬停时提示的文字alt    定义图片加载失败时提示文字--><img src="img/logo.png" width="300px" title="尚硅谷" alt="尚硅谷logo" /><br><img src="/demo1-html/img/logo.png" title="atguigu" alt="" />
</body>
</html>

表格table

<!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 style="text-align: center">员工技能竞赛评分表</h3><table border="1px" style="margin: 0px auto; width: 400px"><!-- <thead> --><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><!-- </thead> --><!-- <tbody> --><tr><td>1</td><td>张小明</td><td>100</td><!-- rowspan 一个单元格向下多侵占两行，共占三行 --><td rowspan="6">前三名升职加薪</td></tr><tr><td>2</td><td>李小黑</td><td>99</td></tr><tr><td>3</td><td>王小东</td><td>98</td></tr><tr><td>总人数</td><!-- colspan 横向侵占几列 --><td colspan="2">200</td></tr><tr><td>平均分</td><td colspan="2">96</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr><!-- </tbody> --><!-- <tfoot><tr><td>平均分</td><td>99</td><td></td></tr></tfoot> --></table></body>
</html>

表单form

<!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><!--form  表单标签action  定义数据的提交地址1  url2  相对路径3  绝对路径method  定义数据的提交方式GET1 参数会以键值对方式放在url后提交   url?key=value&key=value&key=value2 数据直接暴露在地址栏上相对不安全3 地址栏长度是有限制的，所以提交的数据量不大4 地址栏上，只能是字符，不能提交文件5 相比于post,效率高一些POST1 参数不会放到url后2 数据不能直接暴露在地址栏上，相对安全3 数据是单独打包通过请求体发送，提交的数据量比较大4 请求体中，可以是字符，也可以是字节数据，可以提交文件5 相比于get效率略低一些PUTDELETE...表单项标签表单项标签一定要定义name属性，该属性用于明确提交时的参数名表单项还需要明确value属性，该属性用于明确提交时的实参inputtype  输入信息的表单项类型text   单行普通文本框password   密码框submit   提交按钮reset    重置按钮radio    单选框   多个选项选其一多个单选框使用相同name属性值，则会有互斥效果checkbox  复选框  多个选项选多个hidden    隐藏域  不显示在页面上，提交时会携带file     文件上框textarea  文本域  多行文本框select  下拉框option  选项--><form action="08welcome.html" method="get"><!-- 添加表单项标签  用户输入信息的标签 --><!--希望提交一些特定的信息，但是考虑安全问题，或者是用户操作问题，不希望该数据发生改变readonly  只读  提交时  携带disabled  不可用提交时，不携带--><input type="hidden" name="id" value="123"><input type="text" name="pid" value="456" readonly> <br><input type="text" name="tid" value="789" disabled> <br>用户名：<input type="text" name="username" /> <br/>密码：<input type="password" name="userPwd"/> <br/>性别：<input type="radio" name="gender" value="1" checked/>  男<input type="radio" name="gender" value="0"/>  女  <br/>爱好：<input type="checkbox" name="hobby" value="1" checked>  篮球<input type="checkbox" name="hobby" value="2">  足球<input type="checkbox" name="hobby" value="3">  羽毛球<input type="checkbox" name="hobby" value="4">  乒乓球<br>个人简介：<textarea name="intro" style="width: 300px;height: 100px;">123</textarea><br>籍贯：<select name="pro"><option value="1">京</option><option value="2">津</option><option value="3">冀</option><option value="0" selected>-请选择-</option></select>选择头像：<input type="file"><br><input type="submit" value="登录"/><input type="reset" value="清空"/></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>
</head>
<body style="background-color: cadetblue;"><!--css  设置样式的通过元素的style属性进行设置style="样式名:样式值;样式名:样式值;... ..."块元素：自己独占一行的元素  块元素的css样式的宽  高等等  往往都是生效的div  h1-h6行内元素：不会自己独占一行的元素  行内的css样式的宽  高等等  很多都是不生效span  img  a--><div style="border: 1px solid red; width: 500px;height: 200px;margin: 10px auto;background-color: antiquewhite;">123</div><br><div style="border: 1px solid red; width: 500px;height: 200px;margin: 10px auto;background-color: bisque;">456</div><br><div style="border: 1px solid red; width: 500px;height: 200px;margin: 10px auto;background-color: chocolate;"><span style="font-size: 30px;color: aqua;font-weight: bold;">继2023年</span><span>、2024年两度在郑州举办颁奖盛典后，这一活动今年第三次来到这座文脉深厚的历史文化名城。在河南艺术中心举办的“2025当代文学之夜”现场，来自全国文学界、出版界及社会各界的代表与文学爱好者齐聚一堂，共同迎接属于文学的荣光时刻。</span></div><span style="border: 1px solid greenyellow;width: 500px;height: 100px;">555</span>
</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><!--有特殊含义的符号：字符实体对于html的代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义<>-->&lt;h1&gt;一级标题&lt;/h1&gt;<hr>&amp;gt;
</body>
</html>

css的使用

引入方式

<!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>/* 元素选择器，通过标签名确定样式的作用元素 */input {width: 60px;height: 40px;background-color: greenyellow;color: white;font-size: 22px;font-family: '隶书';border: 2px solid green;border-radius: 5px;}</style>
</head><body><!--引入方式方式1  行内式通过元素的style属性引入样式语法：style="样式名:样式值;样式名:样式值;... ..."缺点：1 代码复用度低 不利于维护2 css样式代码和html结构代码交织在一起，影响阅读，影响文件大小，影响性能方式2  内嵌式通过head标签中的style标签定义本页面的公共样式通过选择器确定样式的作用元素方式3  外部样式表将css代码单独放入一个.css文件中，哪个html需要这些代码就在head中通过link标签引入<link rel="stylesheet" href="css/btn.css" />--><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input><!-- <input type="button" value="按钮"style="width: 60px;height: 40px;background-color: greenyellow;color: white;font-size: 22px;font-family: '隶书';border:2px solid green;border-radius: 5px;"><input type="button" value="按钮"style="width: 60px;height: 40px;background-color: greenyellow;color: white;font-size: 22px;font-family: '隶书';border:2px solid green;border-radius: 5px;"> --></body></html>

引入方式2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/btn.css" /></head><body><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input><input type="button" value="按钮"></input>
</body></html>

css选择器

<!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>/*1  元素选择器  根据标签的名字确定样式的作用元素语法：标签名{}确定：某些同名的元素不希望使用某些样式，某些不同名的元素也是用该样式，都无法协调2  id选择器 根据标签的id值确定样式的作用元素一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性语法：#id值{}缺点：id值有唯一性，样式只能作用到一个元素上3 class选择器  根据元素的class属性值确定样式的作用元素元素的class属性值可以重复，而且一个元素的class属性可以有多个值语法：.class属性值{}*//* input{width: 80px;height: 40px;background-color: chartreuse;color: white;border: 3px solid green;font-size: 22px;font-family: '隶书';line-height: 30px;border-radius: 5px;} *//* #btn4 {width: 80px;height: 40px;background-color: chartreuse;color: white;border: 3px solid green;font-size: 22px;font-family: "隶书";line-height: 30px;border-radius: 5px;} */.shapeClass{width: 80px;height: 40px;border-radius: 5px;}.colorClass{background-color: greenyellow;color: white;border: 3px solid green;}.fontClass{font-size: 24px;font-family: '隶书';line-height: 30px;}</style></head><body><input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮" /><input id="btn2" type="button" value="按钮" /><input id="btn3" type="button" value="按钮" /><input id="btn4" type="button" value="按钮" /><button id="btn5">按钮</button></body>
</html>

css浮动

<!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>/* dispaly:inline; block块 inline行内 */.outerDiv {width: 500px;height: 300px;border: 1px solid green;background-color: rgb(229, 245, 228);}.innerDiv{width: 100px;height: 100px;border: 1px solid blue;/* display: inline;  block块 inline行内 */}.d1 {background-color: greenyellow;float: left;}.d2 {background-color: rgba(255, 128, 9, 0.616);float: left;}.d3 {background-color: rgb(35, 227, 248);float: left;}</style>
</head>
<body><div class="outerDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div>
</body>
</html>

css定位

<!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>body{overflow: auto;}.outerDiv {width: 500px;height: 1300px;border: 1px solid green;background-color: rgb(229, 245, 228);}.innerDiv {width: 100px;height: 100px;border: 1px solid blue;}.d1 {background-color: greenyellow;position: fixed;top: 30px;left: 30px;}.d2 {background-color: rgba(255, 128, 9, 0.616);}.d3 {background-color: rgb(35, 227, 248);}/*position:static 默认absolute  绝对relative  相对  相对元素原本的位置fixed  相对  相对浏览器窗口leftrighttopbottom*/</style></head><body><div class="outerDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div></body>
</html>

css盒子模型

<!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>.outerDiv {width: 500px;height: 1300px;border: 1px solid green;background-color: rgb(229, 245, 228);margin: 0px auto;}.innerDiv {width: 100px;height: 100px;border: 1px solid blue;float: left;}/*paddingmargin*/.d1 {background-color: greenyellow;/* margin-right: 10px;margin-top: 10px;margin-left: 10px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px; *//* margin: 10px 20px 30px 40px; */padding: 30px 20px 10px 5px;}.d2 {background-color: rgba(255, 128, 9, 0.616);margin-left: 10px;}.d3 {background-color: rgb(35, 227, 248);}</style></head><body><div class="outerDiv"><div class="innerDiv d1">div1</div><div class="innerDiv d2">div2</div><div class="innerDiv d3">div3</div></div></body>
</html>

JS 

js引入方式

<!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>.btn1 {width: 150px;height: 40px;font-size: 24px;font-family: '隶书';background-color: yellow;color: rgb(143, 7, 7);border: 3px solid rgb(143, 7, 7);;border-radius: 5px;}</style><!--引入方式1  内嵌式  在head中通过一对script标签定义脚本代码2  引入外部脚本文件   在head中通过一对script标签引入外部js注意：1 一个html中可以有多个script标签2 一对script标签不能在引入外部js文件的同时定义内部脚本3 script标签如果用于引入外部js文件，中间最好不要有任何字符，包括空格和换行--><!-- <script>/*1 js 如何声明函数？ java中的函数  public void suprise(){}  function suprise(){}2 函数如何和单击按钮的行为绑定在一起？3 如何弹窗提示？*/function suprise(){//弹窗提示alert("hello 我是惊喜")}</script>--><script src="js/button.js" type="text/javascript"></script><script>function sayHello(){alert('hello js')}</script>
</head><body><button class="btn1" onclick="suprise()">点我有惊喜</button><button class="btn1" onclick="suprise()">sayHello</button>
</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><script>/*JS是弱类型的，不是没有类型，是变量在声明时不执行类型，赋值时才确定类型，JS中的变量的声明  统统使用varint i = 10         var i = 10String str = 'asdf'  var str = 'asdf'JS中常见的数据类型数值类型 number 整数 小数字符串类型 string布尔类型   boolean引用类型   Objectfunction类型  function命名未赋值     undefined  值  undefined赋予null    Object   值   null判断数据类型的运算符  typeof*/// var i = 10;// var str = "asdf";// console.log(i);// console.log(str);var i = 10;console.log(i);console.log(typeof i);var i = "asdf";console.log(i);console.log(typeof i);i = 1 > 10;console.log(i);console.log(typeof i);i = new Object();console.log(i);console.log(typeof i);var fun1 = function fun1() {};console.log(fun1);console.log(typeof fun1);var y;console.log(y);console.log(typeof y);var x = null;console.log(x);console.log(typeof x);/*js中使用var声明变量的特征1 弱类型变量,可以统一声明成var2 var声明的变量可以再次声明3 变量可以使用不同的数据类型多次赋值4 JS的语句可以以;结尾，也可以不用;结尾5 变量标识符严格区分大小写6 标识符的命名规则参照JAVA7 如果使用了一个没有声明的变量,那么运行时会报uncaught ReferenceError: ***is not defined at in index.html8 如果一个变量只声明,没赋值,那么值是undefined*/var i = 10;var str = "asdf";var i = true; //重复声明 不同类型赋值console.log(i);var Iconsole.log(I); //区分大小写// let const</script></head><body></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><script>/*1  算数      + - * / %除零  Infinity模零  NaN  not a number2  复合算数  ++ -- += -= *= /= %=3  关系      > < >= <= != == =====    如果两端的数据类型不一致，会尝试将两端的数据都转换成number在对比'123'  ->   123true   ->   1false  ->   0===   如果两端的数据类型不一致，直接返回false，相同则会继续对比4  逻辑      ||  &&5  条件      条件表达式?值1:值26  位        | & ^ << >> >>>*///  console.log(10/2);//  console.log(10/4);//  console.log(10/0);//  console.log(10%0);//  var i = 10//  console.log(i /= 0);//  console.log(1==1);//  console.log(1=='1');//  console.log(1==true);//  console.log(1===1);//  console.log(1==='1');//  console.log(1===true);</script>
</head>
<body></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><script>/*ifswitch*///根据月份输出季节// var monthstr = prompt("请输入月份");/*prompt返回的结果就是用户在窗口上输入的值，以string类型返回*/// var month = Number.parseInt(monthstr); //字符串转换成整数// console.log(typeof month);// if (month == 12 || month == 1 || month == 2) {//   console.log("冬天皮肤变好了");// } else if (month >= 3 && month <= 5) {//   console.log("春眠不觉晓");// } else if (month >= 6 && month <= 8) {//   console.log("夏天蚊子咬");// } else if (month >= 9 && month <= 11) {//   console.log("蚊子死翘翘");// } else {//   console.log("客官不可以");// }/*1 非空字符串  会判断为true2 非空对象  会判断为 true3 非0number 会判断为 true*//*if(3.33){console.log(true)}else {console.log(false);}*/var monthstr = prompt("请输入月份");var month = Number.parseInt(monthstr);switch(month){case 3:case 4:case 5:console.log("春季");break;case 6:case 7:case 8:console.log("夏季");break;case 9:case 10:case 11:console.log("秋季");break;case 12:case 1:case 2:console.log("冬季");break;default:console.log("月份有误");}</script></head><body></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><script>// document.write("<h1>张三</h1>")// document.write("张三")// var i = 1// while(i<=9){//   var j = 1//   while(j<=i){//     document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")//     j++//   }//   document.write("<hr>")//   i++// }// for(var i = 1;i<=9;i++){//   for(var j = 1; j<=i;j++){//     document.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;")//   }//   document.write("<hr>")// }var arr = ["北京","上海","广州"]document.write('<ul>')for(var index=0;index<arr.length;index++){document.write('<li>'+arr[index]+"</li>")}document.write("</ul>")document.write('<ul>')for(var index in arr){document.write('<li>'+arr[index]+"</li>")}document.write("</ul>")</script>
</head>
<body></body>
</html>

js函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*函数声明的语法1 function 函数名(){}2 var  函数名=function(){}和java相比有如下特点1 没有访问修饰符2 没有返回值类型也没有void，如果有值要返回，则直接return即可3 没有异常列表4 调用方法时，实参和形参可以在数量上不一致，在方法内部可以通过arguments获取调用时的实参5 函数也可以作为参数传给另一个方法*/function sum(a, b) {console.log(arguments);return a + b;}function add(getSum){return getSum(20,30)}//调用函数  接收结果// var result = sum(10,20,30,40,50)// var result = sum(10)// var result = sum(10,20)var result = add(sum)console.log(result);</script></head><body></body>
</html>

 js对象的创建

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*创建对象的语法方式1  new Object()方式2  {属性名：属性值, ... ..., 函数名：function(){}}*//*var person = new Object();// 对象的属性?  添加属性person.name = "张三";person.age = 10;// 对象的方法?  添加方法person.eat = function(food){console.log(this.age + "岁"+this.name+"正在吃"+food);}//访问属性console.log(person.name);console.log(person.age);//调用方法person.eat("火锅")*//* var person = {name: "张三",age: 10,eat: function (food) {console.log(this.age + "岁" + this.name + "正在吃" + food);},};//访问属性console.log(person.name);console.log(person.age);//调用方法person.eat("火锅"); */</script></head><body></body>
</html>

 js中使用JSON

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*JSON格式的语法var personStr = '{"属性名":"属性值","属性名":"属性值","属性名":{},"属性名":["","",""],"属性名":[{},{},{}]}'属性名必须用 "" 包裹上属性值 字符串必须用""包裹上，数字可以不处理*///  这是一个JSON格式的字符串var personStr ='{"name":"张三","age":10,"dog":{"dname":"小花"},"loveSingers":["张小明","王小东","李小黑"],"friends":[{"fname":"赵四儿"},{"fname": "玉田"},{"fname": "王小蒙"}]}';//  通过JSON.parse()可以将一个JSON串转换为一个对象var person = JSON.parse(personStr)console.log(personStr);console.log(person.name);console.log(person.dog.dname);console.log(person.loveSingers[0]);console.log(person.friends[0].fname);//通过JSON.stringify() 将一个对象转换为JSON串var personStr2 = JSON.stringify(person)console.log(personStr2);</script></head><body></body>
</html>

java中使用JSON，用到了jackson包

两个类直接创建，并生成对应getter，setter，toString，equals，hashCode等代码即可

package com.atguigu.test;import com.atguigu.pojo.Dog;
import com.atguigu.pojo.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;/*** ClassName: TestJson* Package: com.atguigu.test* Description:** @Author: lwfstart* @Create 2025-07-13 17:03* @Version: 1.0*/
public class TestJson {@Testpublic void testWriteJson() throws JsonProcessingException {//实例化 Person对象 将Person对象转换为JSON字符串Dog dog = new Dog("小黄");Person person = new Person("张三", 10, dog);//将Person对象转换成一个字符串  Gson  Jackson  FastjsonObjectMapper objectMapper = new ObjectMapper();String personStr = objectMapper.writeValueAsString(person);System.out.println(personStr);}@Testpublic void testReadJson() throws JsonProcessingException {String personStr = "{\"name\":\"张三\",\"age\":10,\"dog\":{\"name\":\"小黄\"}}";ObjectMapper objectMapper = new ObjectMapper();Person person = objectMapper.readValue(personStr, Person.class);System.out.println(person);}//    map@Testpublic void testMapToJson() throws JsonProcessingException {Map data = new HashMap();data.put("a","value");data.put("b","value");ObjectMapper objectMapper = new ObjectMapper();String s = objectMapper.writeValueAsString(data);System.out.println(s);}/*** list array*/@Testpublic void testListToJson() throws Exception {/*List data = new ArrayList();data.add("a");data.add("b");data.add("c");*/
//        ["a","b","c"]Dog dog = new Dog("小黄");Person person = new Person("张三", 10, dog);List list = new ArrayList();list.add(person);ObjectMapper objectMapper = new ObjectMapper();String s = objectMapper.writeValueAsString(list);System.out.println(s);}
}

js常用对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*js                java数据类型变量     数据类型变量运算符            运算符流程控制          流程控制函数              方法对象              面向对象常见对象         JAVA的常用类（JAVA的类库）1数据1)数组的创建方式2）数组的API*/var fruits = ["apple","orange","banana"]var fruits2 = ["荔枝","桃子","榴莲"]var fruitsAll = fruits.concat(fruits2)console.log(fruits);console.log(fruits2);console.log(fruitsAll);// 移除并返回最后一个元素var res = fruitsAll.pop()console.log(res);console.log(fruitsAll);// 从尾端增加元素并返回结果var len = fruitsAll.push("葡萄")console.log(len);console.log(fruitsAll);// 查找榴莲var index1 = fruitsAll.indexOf('榴莲')var index2 = fruitsAll.lastIndexOf('榴莲')console.log(index1);console.log(index2);// 反转fruitsAll.reverse()console.log(fruitsAll);// 转换为字符串console.log(fruitsAll.join(' '));// 截取数据console.log(fruitsAll.slice(2,6));//删除或者增加数据console.log(fruitsAll);fruitsAll.splice(2,2,'el1','el2')console.log(fruitsAll);// 数组的创建//var arr = new Array()//var arr = new Array(5)// var arr = new Array('lisi',11,false)// var arr = ['lisi',11,false]// console.log(arr);// console.log(arr.length);// // 向数组中添加数据// arr[0] = "zhangsan";// arr[1] = 10;// arr[9]=true// arr.length = 20// console.log(arr);// console.log(arr.length);</script></head><body></body>
</html>

js的常用对象API测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>var date = new Date()console.log(date);date.setFullYear(2022)date.setMonth(1)date.setDate(2)date.setHours(2)date.setMinutes(2)date.setSeconds(2)console.log(date.getFullYear());console.log(date.getMonth()+1);  // 0 - 11console.log(date.getDate());console.log(date.getHours());console.log(date.getMinutes());console.log(date.getSeconds());var str = '10.1'var res = 10 + Number.parseFloat(str)console.log(res);</script>
</head>
<body></body>
</html>

js常见事件演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>function fun1() {//alert('单击了')console.log("单击了");}function fun2() {// alert('单击了2')console.log("单击了2");}function fun3() {// alert('双击了')console.log("双击了");}function fun4() {console.log("鼠标悬停了");}function fun5() {console.log("鼠标移动了");}function fun6() {console.log("鼠标离开了");}function fun7() {console.log("键盘按键按下了");}function fun8() {console.log("按键抬起了");}/*1  事件的绑定方式1  通过元素的属性绑定     on***2  通过DOM编程动态绑定注意事项：1 一个事件同时绑定多个函数2 一个元素可以同时绑定多个事件2 常见的事件1 鼠标事件  onclick  ondbclick  onmouseover  onmousemove  onmouseleave2 键盘事件  onkeydown  onkeyup3 表单事件  onfocus  onblur  onchange3 事件的触发1 行为的触发2 DOM编程触发*/function testFocus() {console.log("获得焦点了");}function testBlur() {console.log("获得焦点了");}function testChange(value) {console.log("内容改变为：" + value);}function testChange2(value) {console.log("选项改变为：" + value);}function testSubmit() {/*弹窗的三种方式alert()信息提示框prompt()信息输入框confirm()信息确认框*/var flag = confirm("确认要提交表单吗？");if (!flag) {// alert("表单发生提交了")// 在这里我们有机会阻止表单的提交// event.preventDefault(); // 阻止组件的默认行为return false}return true}function testReset(){alert("表单要重置了")}</script></head><body><form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">用户昵称：<inputtype="text"name="realName"onfocus="testFocus()"onblur="testBlur()"onchange="testChange(this.value)"/><br />登录账号：<input type="text" name="loginName" /> <br />选择籍贯：<select onchange="testChange2(this.value)"><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option></select><input type="submit" value="注册" /><input type="reset" value="清空" /></form><hr /><inputtype="button"value="按钮"onclick="fun1(),fun2()"ondblclick="fun3()"/><br /><imgsrc="img/logo.png"onmouseover="fun4()"onmousemove="fun5()"onmouseleave="fun6()"/><br /><input type="text" onkeydown="fun7()" onkeyup="fun8()" /></body>
</html>

jsDOM编程处理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*1  事件的绑定方式1  通过元素的属性绑定     on***2  通过DOM编程动态绑定注意事项：1 一个事件同时绑定多个函数2 一个元素可以同时绑定多个事件2 常见的事件1 鼠标事件  onclick  ondbclick  onmouseover  onmousemove  onmouseleave2 键盘事件  onkeydown  onkeyup3 表单事件  onfocus  onblur  onchange4 页面加载事件  onload  页面加载完毕3 事件的触发1 行为的触发2 DOM编程触发*/</script><script>window.onload = function () {// 为div1绑定单击事件var div1 = document.getElementById("d1")div1.onclick=function(){this.style.backgroundColor = 'red'}// 通过dom获得要操作的元素var btn = document.getElementById("btn1");// 绑定一个单击事件btn.onclick = function () {alert("按钮单击了");// 通过dom编程触发事件，相当于某些事件发生了div1.onclick()};};</script><style>.div1{width: 100px;height: 100px;background-color: yellow;}</style></head><body><div id="d1" class="div1"></div><button id="btn1" onclick="">按钮</button></body>
</html>

什么是DOM编程

简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.

  • document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。

  • 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title>
</head>
<body><div class="outerDiv"><div class="innerDiv d1">框1</div><div class="innerDiv d2">框x</div><div class="innerDiv d3">框3</div><div class="innerDiv d1">框4</div></div>
</body>
</html>

  • 上面的代码生成的树如下

DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程

  • dom树中节点的类型

    • node 节点,所有结点的父类型

      • element 元素节点,node的子类型之一,代表一个完整标签

      • attribute 属性节点,node的子类型之一,代表元素的属性

      • text 文本节点,node的子类型之一,代表双标签中间的文本

DOM编程API1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*1  获得document  dom树window.document2  从document中获取要操作的元素1） 直接获取var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素var els = document.getElementsByTagName("input")  //根据元素的标签名获取多个同名元素var els = document.getElementsByName("aaa") //根据元素的name属性值获取多个元素var els = document.getElementsByClassName("a")  //根据元素的class属性值获得多个元素2） 间接获取var cs = div01.children  //通过父元素获取全部的子元素console.log(div01.firstElementChild)  //通过父元素获取第一个子元素console.log(div01.lastElementChild)  //通过父元素获取最后一个子元素console.log(pinput.parentElement);  //通过子元素获取父元素console.log(pinput.previousElementSibling);  //获取前面的第一个元素console.log(pinput.nextElementSibling);  //获取后面的第一个元素3  对元素进行操作1.操作元素的属性2.操作元素的样式3.操作元素的文本4.增删改查*/function fun1(){// 1 获得document// 2 通过document获取元素var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素console.log(el1);}function fun2(){var els = document.getElementsByTagName("input")  //根据元素的标签名获取多个同名元素for(var i = 0; i<els.length;i++){console.log(els[i]);}}function fun3(){var els = document.getElementsByName("aaa") //根据元素的name属性值获取多个元素console.log(els);for(var i = 0; i<els.length; i++){console.log(els[i]);}}function fun4(){var els = document.getElementsByClassName("a")  //根据元素的class属性值获得多个元素for(var i = 0; i<els.length; i++){console.log(els[i]);}}function fun5(){// 先获取父元素var div01 = document.getElementById("div01")// 获取所有子元素var cs = div01.children  //通过父元素获取全部的子元素for(var i = 0; i<cs.length; i++){console.log(cs[i]);}console.log(div01.firstElementChild)  //通过父元素获取第一个子元素console.log(div01.lastElementChild)  //通过父元素获取最后一个子元素}function fun6(){// 获取子元素var pinput = document.getElementById("password")console.log(pinput.parentElement);  //通过子元素获取父元素}function fun7(){var pinput = document.getElementById("password")console.log(pinput.previousElementSibling);  //获取后面的第一个元素}</script></head><body><div id="div01"><input type="text" class="a" id="username" name="aaa" /><input type="text" class="b" id="password" name="aaa" /><input type="text" class="a" id="email" /><input type="text" class="b" id="address" /></div><input type="text" class="a" /><br /><hr /><inputtype="button"value="通过父元素获取子元素"onclick="fun5()"id="btn05"/><inputtype="button"value="通过子元素获取父元素"onclick="fun6()"id="btn06"/><inputtype="button"value="通过当前元素获取兄弟元素"onclick="fun7()"id="btn07"/><hr /><inputtype="button"value="根据id获取指定元素"onclick="fun1()"id="btn01"/><inputtype="button"value="根据标签名获取多个元素"onclick="fun2()"id="btn02"/><inputtype="button"value="根据name属性值获取多个元素"onclick="fun3()"id="btn03"/><inputtype="button"value="根据class属性值获得多个元素"onclick="fun4()"id="btn04"/></body>
</html>

DOM编程API2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*1  获得document  dom树window.document2  从document中获取要操作的元素1） 直接获取var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素var els = document.getElementsByTagName("input")  //根据元素的标签名获取多个同名元素var els = document.getElementsByName("aaa") //根据元素的name属性值获取多个元素var els = document.getElementsByClassName("a")  //根据元素的class属性值获得多个元素2） 间接获取var cs = div01.children  //通过父元素获取全部的子元素console.log(div01.firstElementChild)  //通过父元素获取第一个子元素console.log(div01.lastElementChild)  //通过父元素获取最后一个子元素console.log(pinput.parentElement);  //通过子元素获取父元素console.log(pinput.previousElementSibling);  //获取前面的第一个元素console.log(pinput.nextElementSibling);  //获取后面的第一个元素3  对元素进行操作1.操作元素的属性   元素名.属性名 = ""2.操作元素的样式   元素名.style.样式名=""  样式名"-"要进行驼峰式转换3.操作元素的文本   元素名.innerText  只识别文本元素名.innerHTML   同时可以识别html的代码4.增删改查*/function changeAttribute() {var in1 = document.getElementById("in1");// 语法  元素.属性名="" 赋值console.log(in1.type);console.log(in1.value);// 修改属性值in1.type = "button";in1.value = "嗨";}function changeStyle() {var in1 = document.getElementById("in1");// 语法  元素.style.样式名 = ""  原始样式名中的"-"符号 要转换驼峰式  background-color  >  backgroundColorin1.style.color = "green";in1.style.borderRadius = "5px";}function changeText() {var div01 = document.getElementById("div01");/*语法   元素名.innerText  只识别文本元素名.innerHTML   同时可以识别html的代码*/console.log(div01.innerText);div01.innerHTML = "<h1>嗨</h1>";}</script><style>#in1 {color: red;}</style></head><body><input id="in1" type="text" value="hello" /><div id="div01">hello</div><hr /><button onclick="changeAttribute()">操作属性</button><button onclick="changeStyle()">操作样式</button><button onclick="changeText()">操作文本</button></body>
</html>

DOM编程API3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*1  获得document  dom树window.document2  从document中获取要操作的元素1） 直接获取var el1 = document.getElementById("username")  //根据元素的id值获取页面上唯一的一个元素var els = document.getElementsByTagName("input")  //根据元素的标签名获取多个同名元素var els = document.getElementsByName("aaa") //根据元素的name属性值获取多个元素var els = document.getElementsByClassName("a")  //根据元素的class属性值获得多个元素2） 间接获取var cs = div01.children  //通过父元素获取全部的子元素console.log(div01.firstElementChild)  //通过父元素获取第一个子元素console.log(div01.lastElementChild)  //通过父元素获取最后一个子元素console.log(pinput.parentElement);  //通过子元素获取父元素console.log(pinput.previousElementSibling);  //获取前面的第一个元素console.log(pinput.nextElementSibling);  //获取后面的第一个元素3  对元素进行操作1.操作元素的属性   元素名.属性名 = ""2.操作元素的样式   元素名.style.样式名=""  样式名"-"要进行驼峰式转换3.操作元素的文本   元素名.innerText  只识别文本元素名.innerHTML   同时可以识别html的代码4.增删改查var element = document.createElement("元素名");  //创建元素父元素.appendChild(子元素)  //在父元素中追加子元素父元素.insertBefore(新元素,参照元素);  //在某个元素前增加元素父元素.replaceChild(新元素,被替换的元素);  //用新的元素替换某个子元素元素.remove()        //删除当前元素*/function addCs() {//创建一个新的子元素var csli = document.createElement("li"); // <li></li>// 设置子元素的属性和文本csli.id = "cs";csli.innerText = "长沙";// 将子元素放入父元素中var cityul = document.getElementById("city");// 在父元素中追加子元素cityul.appendChild(csli);}function addCsBeforeCz() {//创建一个新的子元素var csli = document.createElement("li"); // <li></li>// 设置子元素的属性和文本csli.id = "cs";csli.innerText = "长沙";// 将子元素放入父元素中var cityul = document.getElementById("city");// 在父元素中追加子元素// cityul.insertBefore(新元素,参照元素);var szli = document.getElementById("sz");cityul.insertBefore(csli, szli);}function replaceSz() {//创建一个新的子元素var csli = document.createElement("li"); // <li></li>// 设置子元素的属性和文本csli.id = "cs";csli.innerText = "长沙";// 将子元素放入父元素中var cityul = document.getElementById("city");// 在父元素中追加子元素// cityul.replaceChild(新元素,被替换的元素);var szli = document.getElementById("sz");cityul.replaceChild(csli, szli);}function removeSz() {var szli = document.getElementById("sz");// 那个元素调用了remove该元素就会从dom树中移除szli.remove();}function clearCity() {var cityul = document.getElementById("city");/* var fc = cityul.firstChildwhile(fc != null){fc.remove()fc = cityul.firstChild} */cityul.innerHTML = "";//  cityul.remove()}</script></head><body><ul id="city"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">广州</li></ul><hr /><!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li> --><button onclick="addCs()">操作属性</button><!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li> --><button onclick="addCsBeforeCz()">在深圳前插入长沙</button><!-- 目标3 将城市列表的深圳替换为长沙  <li id="cs">长沙</li> --><button onclick="replaceSz()">替换深圳</button><!-- 目标4 将城市列表删除深圳 <li id="cs">长沙</li> --><button onclick="removeSz()">删除深圳</button><!-- 目标5 清空城市列表 --><button onclick="clearCity()">清空</button></body>
</html>

js中使用正则处理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>/*验证*///  定义一个正则表达式//var reg = /a/;//  自定义一个字符串//var str = "hello world!";//  校验是否符合正则的规则//console.log(reg.test(str));/* 匹配 g 全局的意思 *//* var reg = /o/gvar str = 'hello world!'var result = str.match(reg)console.log(result); */// 替换  i  忽略大小写/* var reg = /o/givar str = 'hello wOrld!'var newStr = str.replace(reg, '@')console.log(newStr); *//* var str1 = 'Java love me'var str2 = 'I love java'var str3 = 'java'var reg1 = /^java/ivar reg2 = /^java/ivar reg3 = /^java$/console.log(reg1.test(str1));console.log(reg2.test(str2));console.log(reg3.test(str1));console.log(reg3.test(str2));console.log(reg3.test(str3)); */// 校验用户名是否合法/*1  必须是字母开头2  长度必须是6-10位3  后面其他字符可以是大小写字母，数字和下划线*/var str = 'aasdfff'var reg = /^[a-zA-Z]\w{5,9}\D$/console.log(reg.test(str));</script></head><body></body>
</html>

案例开发-日程管理

login.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.ht {text-align: center;color: cadetblue;font-family: 幼圆;}.tab {width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td {border: 1px solid powderblue;}.ipt {border: 0px;width: 50%;}.btn1 {border: 2px solid powderblue;border-radius: 4px;width: 60px;background-color: antiquewhite;}#usernameMsg,#userPwdMsg {color: rgb(230, 87, 51);}.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");//格式有误时，返回false，在页面上提示if (!usernameReg.test(username)) {usernameMsg.innerText = "用户名格式有误";return false;}//格式OK，返回true，在页面上提示OKusernameMsg.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");//格式有误时，返回false，在页面上提示if (!userPwdReg.test(userPwd)) {userPwdMsg.innerText = "密码必须是6位数字";return false;}//格式OK，返回true，在页面上提示OKuserPwdMsg.innerText = "OK";return true;}// 表单在提交时，校验用户名和密码格式，格式OK才会提交function checkForm() {var flag1 = checkUsername()var flag2 = checkUserPwd()return flag1 && flag2}</script></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请登录</h3><form method="post" action="/user/login" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><inputclass="ipt"type="text"id="usernameInput"name="username"onblur="checkUsername()"/><span id="usernameMsg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><inputclass="ipt"type="password"id="userPwdInput"name="userPwd"onblur="checkUserPwd()"/><span id="userPwdMsg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input class="btn1" type="submit" value="登录" /><input class="btn1" type="reset" value="重置" /><button class="btn1"><a href="regist.html">去注册</a></button></td></tr></table></form></body>
</html>

regist.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>.ht {text-align: center;color: cadetblue;font-family: 幼圆;}.tab {width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td {border: 1px solid powderblue;}.ipt {border: 0px;width: 50%;}.btn1 {border: 2px solid powderblue;border-radius: 4px;width: 60px;background-color: antiquewhite;}.msg {color: gold;}.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;}usernameMsg.innerText = "OK";return true;}function checkUserPwd() {var userPwdReg = /^\d{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(){var userPwdReg = /^\d{6}$/;// 再次输入的密码var reUserPwdInput = document.getElementById("reUserPwdInput");var reUserPwd = reUserPwdInput.value;var reUserPwdMsg = document.getElementById("reUserPwdMsg");if (!userPwdReg.test(reUserPwd)) {reUserPwdMsg.innerText = "格式有误";return false;}// 获得上次密码；，对比两次密码是否一致var userPwdInput = document.getElementById("userPwdInput");var userPwd = userPwdInput.value;if (reUserPwd != userPwd) {reUserPwdMsg.innerText = "两次密码不一致";return false;}reUserPwdMsg.innerText = "OK";return true;}function checkForm(){var flag1 = checkUsername()var flag2 = checkUserPwd()var flag3 = checkReUserPwd()return flag1 && flag2 &&flag3}</script></head><body><h1 class="ht">欢迎使用日程管理系统</h1><h3 class="ht">请注册</h3><form method="post" action="/user/regist" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><inputclass="ipt"id="usernameInput"type="text"name="username"onblur="checkUsername()"/><span id="usernameMsg" class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><inputclass="ipt"id="userPwdInput"type="password"name="userPwd"onblur="checkUserPwd()"/><span id="userPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><inputclass="ipt"id="reUserPwdInput"type="password"onblur="checkReUserPwd()"/><span id="reUserPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input class="btn1" type="submit" value="注册" /><input class="btn1" type="reset" value="重置" /><button class="btn1"><a href="login.html">去登录</a></button></td></tr></table></form></body>
</html>

额外：

四、自定义快捷键（可选）vscode

如果你觉得默认快捷键不方便，也可以​​自定义快捷键​​：

  1. 打开快捷键设置：
    • 菜单栏：文件 > 首选项 > 键盘快捷方式（Windows/Linux）
    • 或 Code > Preferences > Keyboard Shortcuts（macOS）
    • 或使用快捷键：Ctrl + K Ctrl + S（Windows/Linux）、⌘ Command + K ⌘ Command + S（macOS）
  2. 搜索 toggleBlockComment（这是生成 /* */ 的命令）或 addComment 相关命令。
  3. 双击该命令，然后输入你想要的快捷键组合。

shift+alt+A  块注释快捷键   /**/

java中的IDEA

调用快捷键Alt+Insert(Insert在笔记本键盘F12旁边，外接长键盘Back右边)，快速创建get、set、toString

注释快捷键

一、单行注释

快捷方式：选中要注释的内容,按键盘的 Ctrl + /

二、多行注释

快捷方式：选中要注释的内容,按键盘的 Ctrl + Shift + /

三、文档注释

快捷方式：在类名或者方法名上输入/**回车

http://www.xdnf.cn/news/15557.html

相关文章：

  • 如何用 Python + LLM 构建一个智能栗子表格提取工具？
  • AWS Lambda 最佳实践：构建高效无服务器应用的完整指南
  • Python 网络爬虫 —— requests 库和网页源代码
  • 永磁同步电机MTPA与MTPV曲线具体仿真实现
  • 大模型领域主流向量模型相似度算法、架构及指标对比
  • 在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用（详细）
  • 数据结构 栈(1)
  • 聚观早报 | 英伟达股价再创新高；中国联通eSIM手机业务开通上线；中国AI加速出海 阿里云提供全栈能力支持
  • Cookie 与 Session概述
  • 第2章通用的高并发架构设计——2.6 高并发写场景方案1：数据分片之数据库分库分表
  • R语言基础| 基本图形绘制（条形图、堆积图、分组图、填充条形图、均值条形图）
  • 软件项目管理学习笔记
  • 如何在PyCharm中删除虚拟环境
  • 项目--五子棋（模块实现）
  • mysql备份与视图
  • MyBatis延迟加载（Lazy Loading）之“关联查询”深度解析与实践
  • Spring原理揭秘--Spring的AOP
  • linux_线程同步
  • 「Java案例」递归实现整数的倒置
  • springboot打包二次压缩Excel导致损坏
  • git@github.com: Permission denied (publickey).
  • 基于5G系统的打孔LDPC编码和均匀量化NMS译码算法matlab性能仿真
  • 前端-HTML
  • 算法竞赛备赛——【图论】求最短路径——Dijkstra
  • 【Bluedroid】btif_a2dp_sink_init 全流程源码解析
  • (转)Kubernetes基础介绍
  • flask request实现两台PC之间文件传输通信
  • 解锁 iOS 按键精灵辅助工具自动化新可能：iOSElement.Click 让元素交互更简单
  • 【AI News | 20250716】每日AI进展
  • 《C++初阶之STL》【auto关键字 + 范围for循环 + 迭代器】