HTML学习
标题(h1~h6)-段落p-换行br
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>
<!--
标题 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
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>
<!--
有序列表 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
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 相对路径 以当前资源的所在路径为出发点去找目标资源
./ 表示当前资源的所在路径，可以省略不写
../ 表示当前资源的上一层路径，需要时必须显示写出
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
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/logo.png" width="300px" title="尚硅谷" alt="尚硅谷logo" />
<br>
<img src="/demo1-html/img/logo.png" title="atguigu" alt="" />
</body>
</html>表格table
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 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
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>
<!--
form 表单标签
action 定义数据的提交地址
1 url
2 相对路径
3 绝对路径
method 定义数据的提交方式
GET
1 参数会以键值对方式放在url后提交 url?key=value&key=value&key=value
2 数据直接暴露在地址栏上相对不安全
3 地址栏长度是有限制的，所以提交的数据量不大
4 地址栏上，只能是字符，不能提交文件
5 相比于post,效率高一些
POST
1 参数不会放到url后
2 数据不能直接暴露在地址栏上，相对安全
3 数据是单独打包通过请求体发送，提交的数据量比较大
4 请求体中，可以是字符，也可以是字节数据，可以提交文件
5 相比于get效率略低一些
PUT
DELETE
...
表单项标签
表单项标签一定要定义name属性，该属性用于明确提交时的参数名
表单项还需要明确value属性，该属性用于明确提交时的实参
input
type 输入信息的表单项类型
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>布局
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>特殊字符
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的代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义
<
>
-->
<h1>一级标题</h1>
<hr>
&gt;
</body>
</html>css的使用
引入方式
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>
/* 元素选择器，通过标签名确定样式的作用元素 */
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
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>
<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选择器
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>
/*
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浮动
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>
/* 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定位
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>
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 相对 相对浏览器窗口
left
right
top
bottom
*/
</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盒子模型
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>
.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;
}
/*
padding
margin
*/
.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引入方式
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>
.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>变量和数据类型
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中的变量的声明 统统使用var
int i = 10 var i = 10
String str = 'asdf' var str = 'asdf'
JS中常见的数据类型
数值类型 number 整数 小数
字符串类型 string
布尔类型 boolean
引用类型 Object
function类型 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 弱类型变量,可以统一声明成var
2 var声明的变量可以再次声明
3 变量可以使用不同的数据类型多次赋值
4 JS的语句可以以;结尾，也可以不用;结尾
5 变量标识符严格区分大小写
6 标识符的命名规则参照JAVA
7 如果使用了一个没有声明的变量,那么运行时会报uncaught ReferenceError: ***is not defined at in index.html
8 如果一个变量只声明,没赋值,那么值是undefined
*/
var i = 10;
var str = "asdf";
var i = true; //重复声明 不同类型赋值
console.log(i);
var I
console.log(I); //区分大小写
// let const
</script>
</head>
<body></body>
</html>运算符
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 number
2 复合算数 ++ -- += -= *= /= %=
3 关系 > < >= <= != == ===
== 如果两端的数据类型不一致，会尝试将两端的数据都转换成number在对比
'123' -> 123
true -> 1
false -> 0
=== 如果两端的数据类型不一致，直接返回false，相同则会继续对比
4 逻辑 || &&
5 条件 条件表达式?值1:值2
6 位 | & ^ << >> >>>
*/
// 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>分支结构
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>
/*
if
switch
*/
//根据月份输出季节
// 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 非空字符串 会判断为true
2 非空对象 会判断为 true
3 非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>循环结构
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)+" ")
// 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)+" ")
// }
// 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函数
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 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对象的创建
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 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
java
<!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等代码即可
java
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 {
@Test
public void testWriteJson() throws JsonProcessingException {
//实例化 Person对象 将Person对象转换为JSON字符串
Dog dog = new Dog("小黄");
Person person = new Person("张三", 10, dog);
//将Person对象转换成一个字符串 Gson Jackson Fastjson
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(person);
System.out.println(personStr);
}
@Test
public 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
@Test
public 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
*/
@Test
public 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常用对象
java
<!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测试
java
<!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 - 11
console.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常见事件演示
java
<!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 onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onblur onchange
3 事件的触发
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()">
用户昵称：<input
type="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 />
<input
type="button"
value="按钮"
onclick="fun1(),fun2()"
ondblclick="fun3()"
/>
<br />
<img
src="img/logo.png"
onmouseover="fun4()"
onmousemove="fun5()"
onmouseleave="fun6()"
/>
<br />
<input type="text" onkeydown="fun7()" onkeyup="fun8()" />
</body>
</html>jsDOM编程处理
java
<!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 onmouseleave
2 键盘事件 onkeydown onkeyup
3 表单事件 onfocus onblur onchange
4 页面加载事件 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对象本身是一种树形结构的文档对象。
java
<!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
java
<!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.document
2 从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 />
<input
type="button"
value="通过父元素获取子元素"
onclick="fun5()"
id="btn05"
/>
<input
type="button"
value="通过子元素获取父元素"
onclick="fun6()"
id="btn06"
/>
<input
type="button"
value="通过当前元素获取兄弟元素"
onclick="fun7()"
id="btn07"
/>
<hr />
<input
type="button"
value="根据id获取指定元素"
onclick="fun1()"
id="btn01"
/>
<input
type="button"
value="根据标签名获取多个元素"
onclick="fun2()"
id="btn02"
/>
<input
type="button"
value="根据name属性值获取多个元素"
onclick="fun3()"
id="btn03"
/>
<input
type="button"
value="根据class属性值获得多个元素"
onclick="fun4()"
id="btn04"
/>
</body>
</html>DOM编程API2
java
<!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.document
2 从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 > backgroundColor
in1.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
java
<!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.document
2 从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.firstChild
while(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中使用正则处理
java
<!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/g
var str = 'hello world!'
var result = str.match(reg)
console.log(result); */
// 替换 i 忽略大小写
/* var reg = /o/gi
var 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/i
var reg2 = /^java/i
var 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
java
<!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，在页面上提示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");
//格式有误时，返回false，在页面上提示
if (!userPwdReg.test(userPwd)) {
userPwdMsg.innerText = "密码必须是6位数字";
return false;
}
//格式OK，返回true，在页面上提示OK
userPwdMsg.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>
<input
class="ipt"
type="text"
id="usernameInput"
name="username"
onblur="checkUsername()"
/>
<span id="usernameMsg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input
class="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
java
<!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>
<input
class="ipt"
id="usernameInput"
type="text"
name="username"
onblur="checkUsername()"
/>
<span id="usernameMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>请输入密码</td>
<td>
<input
class="ipt"
id="userPwdInput"
type="password"
name="userPwd"
onblur="checkUserPwd()"
/>
<span id="userPwdMsg" class="msg"></span>
</td>
</tr>
<tr class="ltr">
<td>确认密码</td>
<td>
<input
class="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
如果你觉得默认快捷键不方便，也可以自定义快捷键：
- 打开快捷键设置：
- 菜单栏：
文件 > 首选项 > 键盘快捷方式（Windows/Linux） - 或
Code > Preferences > Keyboard Shortcuts（macOS） - 或使用快捷键：
Ctrl + K Ctrl + S（Windows/Linux）、⌘ Command + K ⌘ Command + S（macOS）
- 菜单栏：
- 搜索
toggleBlockComment（这是生成/* */的命令）或addComment相关命令。 - 双击该命令，然后输入你想要的快捷键组合。
shift+alt+A 块注释快捷键 /**/
java中的IDEA
调用快捷键Alt+Insert(Insert在笔记本键盘F12旁边，外接长键盘Back右边)，快速创建get、set、toString