diff --git a/src/webapp/index.jsp b/src/webapp/index.jsp
index d4b780d..555bcd1 100644
--- a/src/webapp/index.jsp
+++ b/src/webapp/index.jsp
@@ -1,13 +1,21 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- 这是JSP页面指令，用于设置该JSP页面的内容类型（text/html表示页面内容是HTML格式）以及字符编码为UTF-8，
+确保页面能够正确显示各种字符，比如中文等，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<title>酒店管理系统</title>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-	</head>
+<head>
+	<!-- 设置页面的标题为“酒店管理系统”，该标题通常会显示在浏览器的标题栏中，方便用户识别当前页面所属的系统 -->
+	<title>酒店管理系统</title>
+	<!-- 这行代码用于引入一个图标文件（这里是img目录下的windows.ico图标），设置为页面的图标（favicon），
+在浏览器的标签页、书签栏等地方会显示该图标，增强页面的辨识度和品牌感，rel属性表示关联关系，type属性指定图标文件的类型 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+</head>
 
-	<body>
-		<jsp:forward page="login.jsp"></jsp:forward>
-	</body>
+<body>
+<!-- 使用JSP的内置动作标签<jsp:forward>，其作用是将当前请求转发到指定的页面（这里是login.jsp页面），
+意味着当访问当前这个JSP页面时，服务器会直接将请求转向到login.jsp页面进行后续处理，而不会渲染当前页面的其他内容，
+常用于页面跳转、根据不同条件引导用户到相应的登录、注册或其他功能页面等情况 -->
+<jsp:forward page="login.jsp"></jsp:forward>
+</body>
 
 </html>
\ No newline at end of file
diff --git a/src/webapp/insertLogin.jsp b/src/webapp/insertLogin.jsp
index ca25d07..d238019 100644
--- a/src/webapp/insertLogin.jsp
+++ b/src/webapp/insertLogin.jsp
@@ -1,24 +1,49 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
+保证页面能正确显示各类字符，避免出现乱码情况 -->
 <html>
 
 <head>
+    <!-- 设置HTML页面的字符编码为utf-8，虽然前面JSP指令已经设置了编码，但这里在HTML部分再次声明，
+可以增强浏览器对页面字符编码的识别和处理，确保内容正确显示 -->
     <meta charset="utf-8">
+    <!-- 设置页面的标题为“注册账户”，此标题会显示在浏览器的标题栏中，让用户清楚当前页面的功能 -->
     <title>注册账户</title>
+    <!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（当前目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
     <link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
+    <!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础，路径为当前目录下的js/layui/layui.js -->
     <script src="./js/layui/layui.js"></script>
+    <!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，这里的路径指向当前目录下的js/jquery.js -->
     <script src="./js/jquery.js"></script>
+    <!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
     <script src="./js/global.js"></script>
 </head>
 
 <body>
+<!-- 创建一个<fieldset>元素，用于对表单等相关元素进行分组显示，添加了Layui的样式类，设置了顶部外边距为10px，
+让页面布局更清晰美观 -->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
+    <!-- 在<fieldset>内部使用<legend>元素来为分组设置标题，这里标题为“注册用户”，起到说明该分组内容的作用 -->
     <legend>注册用户</legend>
 </fieldset>
+<!-- 创建一个Layui风格的表单，通过class="layui-form"应用Layui的表单样式和相关交互功能，action属性为空，
+表示表单提交的地址暂未设置（后续可能通过JavaScript动态指定或者在服务器端进行统一处理等） -->
 <form class="layui-form" action="">
+    <!-- 创建一个Layui表单项目（layui-form-item），用于组织表单内的各个输入元素等内容，使得表单结构更清晰 -->
     <div class="layui-form-item">
+        <!-- 创建一个内联的布局容器（layui-inline），方便在一行内放置多个表单元素，实现更灵活的布局 -->
         <div class="layui-inline">
+            <!-- 创建一个表单标签元素（layui-form-label），用于显示对应输入框的说明文字，这里显示“账户名” -->
             <label class="layui-form-label">账户名</label>
+            <!-- 创建一个内联的输入框容器（layui-input-inline），用于放置具体的输入框元素 -->
             <div class="layui-input-inline">
+                <!-- 创建一个文本输入框（input type="text"），设置了输入框的名称（name="loginName"）用于表单提交时传递参数，
+lay-verify属性指定了验证规则（这里要求必须输入且符合自定义的inputName规则），autocomplete="off"关闭浏览器的自动完成功能，
+placeholder属性设置了输入框的占位提示文字“您登录所需的账户”，同时应用了Layui的输入框样式类（layui-input） -->
                 <input type="text" name="loginName" lay-verify="required|inputName" autocomplete="off"
                        placeholder="您登录所需的账户" class="layui-input">
             </div>
@@ -28,6 +53,8 @@
         <div class="layui-inline">
             <label class="layui-form-label">密码</label>
             <div class="layui-input-inline">
+                <!-- 创建一个密码输入框（input type="password"），设置名称为“loginPwd”，指定了验证规则（required|inputPwd），
+关闭自动完成功能，设置占位提示文字“您登录所需的密码”，应用Layui输入框样式，并且给该输入框设置了id为“pwd1”，方便后续在JavaScript中通过id获取其值 -->
                 <input type="password" name="loginPwd" id="pwd1" lay-verify="required|inputPwd" autocomplete="off"
                        placeholder="您登录所需的密码" class="layui-input">
             </div>
@@ -37,6 +64,8 @@
         <div class="layui-inline">
             <label class="layui-form-label">确认密码</label>
             <div class="layui-input-inline">
+                <!-- 创建另一个密码输入框，用于用户再次输入密码进行确认，设置了验证规则，关闭自动完成，设置占位提示文字，
+同样应用Layui样式，其id为“pwd2”，方便后续与前面输入的密码进行比较验证 -->
                 <input type="password"  id="pwd2" lay-verify="required|inputPwd" autocomplete="off"
                        placeholder="重复你所输入的密码" class="layui-input">
             </div>
@@ -53,57 +82,86 @@
     </div>
     <div class="layui-form-item">
         <div class="layui-input-block">
+            <!-- 创建一个Layui风格的按钮（layui-btn），设置了lay-submit属性表示该按钮用于触发表单提交操作，
+lay-filter属性指定了一个过滤器名称（insertRome），用于在JavaScript中监听该按钮的提交事件，按钮文字为“注册” -->
             <button class="layui-btn" lay-submit lay-filter="insertRome">注册</button>
+            <!-- 创建一个重置按钮（type="reset"），样式为Layui的默认按钮样式（layui-btn layui-btn-primary），
+点击该按钮可将表单内的输入框等元素恢复到初始状态 -->
             <button type="reset" class="layui-btn layui-btn-primary">重置</button>
         </div>
     </div>
 </form>
 
 <script>
+    // 使用Layui框架的模块加载机制，加载['form', 'layedit', 'laydate']这几个模块，
+    // 并在加载完成后执行回调函数，在回调函数内可以使用这些模块提供的功能，
+    // 这里主要是使用form模块来处理表单相关操作，layer模块用于弹出提示框等交互功能
     layui.use(['form', 'layedit', 'laydate'], function () {
         var form = layui.form,
             layer = layui.layer;
 
-        //自定义验证规则
+        // 自定义验证规则，通过form.verify方法来定义，下面分别针对inputName和inputPwd规则进行具体的验证逻辑设置
         form.verify({
             inputName: function (value) {
+                // 验证账户名长度，如果输入的字符长度小于4个字符，返回错误提示信息“账户至少4个字符”，
+                // 阻止表单提交，提示用户输入符合要求长度的账户名
                 if (value.length < 4) {
                     return '账户至少4个字符';
                 }
 
+                // 如果输入的字符长度大于10个字符，返回错误提示信息“账户至多10个字符”，同样阻止表单提交，
+                // 要求用户输入合理长度的账户名
                 if (value.length > 10) {
                     return '账户至多10个字符'
                 }
             },
             inputPwd: function (value) {
+                // 验证密码长度，当输入的密码字符长度小于4个字符时，返回“密码至少4个字符”的提示信息，
+                // 让用户知晓密码长度不符合要求，无法提交表单
                 if (value.length < 4) {
                     return '密码至少4个字符';
                 }
 
+                // 如果密码字符长度大于18个字符，返回“密码至多18个字符”的提示信息，提醒用户修改密码长度，
+                // 只有密码长度符合要求才能进行后续的表单提交操作
                 if (value.length > 18) {
                     return '密码至多18个字符'
                 }
             }
         });
 
-        //监听提交
+        // 监听表单的提交事件，通过form.on方法监听指定过滤器（lay-filter="insertRome"）对应的提交操作，
+        // 当点击注册按钮（触发提交且符合验证规则）时，会执行这个回调函数，data参数包含了表单提交的数据等相关信息
         form.on('submit(insertRome)', function (data) {
 
+            // 通过jQuery选择器（$("#pwd1")）获取id为“pwd1”的密码输入框元素，并获取其输入的值，存储在变量pwd1中，
+            // 该值为用户第一次输入的密码
             var pwd1 = $("#pwd1").val();
+            // 同样的方式获取id为“pwd2”的密码输入框元素的值，存储在变量pwd2中，用于和pwd1进行比较验证
             var pwd2 = $("#pwd2").val();
 
-            if (pwd1 != pwd2) {
+            // 比较两次输入的密码是否一致，如果不一致，通过layer.msg方法弹出提示框，显示“二次密码验证不一致”的提示信息，
+            // 告知用户需要重新输入密码，确保两次密码相同才能进行注册操作
+            if (pwd1!= pwd2) {
                 layer.msg("二次密码验证不一致");
             } else {
-
+                // 如果两次密码一致，使用jQuery的$.post方法进行异步POST请求，向服务器端发送数据，
+                // baseUrl + '/InsertLoginServlet'是请求的URL地址（baseUrl可能是在全局变量中定义的基础地址，
+                // InsertLoginServlet应该是服务器端用于处理注册逻辑的Servlet等程序），
+                // JSON.stringify(data.field)将表单提交的数据（经过Layui处理后的字段数据）转换为JSON字符串格式发送给服务器，
+                // 最后在请求成功的回调函数中根据服务器返回的code值进行不同的提示处理
                 $.post(baseUrl + '/InsertLoginServlet', JSON.stringify(data.field), function (code) {
                     if (code === 1) {
+                        // 如果服务器返回的code值为1，表示注册成功，通过layer.alert方法弹出一个提示框，
+                        // 设置标题为“成功”，图标为6（表示成功的图标样式），动画效果为5，告知用户注册成功
                         layer.alert('注册成功！', {
                             title: '成功',
                             icon: 6,
                             anim: 5
                         });
                     } else {
+                        // 如果服务器返回的code值不为1，表示注册失败，同样弹出提示框，设置标题为“异常”，图标为5（表示失败的图标样式），
+                        // 动画效果为6，向用户提示注册失败的信息，让用户知晓操作未成功
                         layer.alert('注册失败！', {
                             title: '异常',
                             icon: 5,
@@ -113,6 +171,8 @@
                 });
             }
 
+            // 返回false，表示阻止表单的默认提交行为，因为这里通过异步请求（$.post）已经自行处理了提交相关的数据交互，
+            // 不需要浏览器再进行默认的表单提交刷新页面等操作
             return false;
         });
     });
diff --git a/src/webapp/login.jsp b/src/webapp/login.jsp
index d5f0483..4ffc47b 100644
--- a/src/webapp/login.jsp
+++ b/src/webapp/login.jsp
@@ -1,141 +1,211 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置该页面的内容类型为text/html（表示是HTML格式页面），字符编码为UTF-8，
+确保页面能够正确显示各种字符，避免出现乱码问题 -->
 <html>
 
-	<head>
-		<meta charset="utf-8">
-		<title>酒店管理系统</title>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-		<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
-		<script src="./js/global.js"></script>
-	</head>
-
-	<body>
-
-		<div id="box"></div>
-
-		<!--主栏-->
-		<div class="cent-box">
-			<!--标题-->
-			<div class="cent-box-header">
-				<h1 class="main-title">HotelBook</h1>
-				<h2 class="sub-title">酒店管理系统</h2>
-			</div>
-
-			<div class="cont-main clearfix">
-
-				<!--登录区域开始-->
-				<div class="login form">
-					<!--文本输入框-->
-					<div class="group">
-						<!--用户名输入框-->
-						<div class="group-ipt loginName">
-							<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
-						</div>
-						<!--密码输入框-->
-						<div class="group-ipt loginPwd">
-							<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
-						</div>
-					</div>
-					<!--登录按钮-->
-					<div class="button" id="btnLogin">
-						<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
-					</div>
+<head>
+	<!-- 设置HTML页面自身的字符编码为utf-8，再次强调页面的字符编码规范，有助于浏览器准确解析页面内容 -->
+	<meta charset="utf-8">
+	<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户明确当前页面所属的系统或功能 -->
+	<title>酒店管理系统</title>
+	<!-- 引入一个图标文件（img目录下的windows.ico）作为页面的图标（favicon），用于在浏览器的标签页、书签栏等地方显示，
+rel属性表示关联关系（这里表示图标关联），type属性指定图标文件的类型 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+	<!-- 引入外部样式表文件（register-login.css），用于定义页面的样式，该文件位于css/login目录下，
+type="text/css"明确了样式表的文本/css类型 -->
+	<link rel="stylesheet" type="text/css" href="css/login/register-login.css">
+	<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
+	<script src="./js/global.js"></script>
+</head>
+
+<body>
+<!-- 创建一个空的div元素，id为"box"，可能后续会通过JavaScript动态添加内容或者用于页面布局等用途 -->
+<div id="box"></div>
+
+<!-- 创建一个类名为"cent-box"的div元素，作为页面的主栏部分，用于组织页面主要内容，起到布局划分的作用 -->
+<div class="cent-box">
+	<!-- 创建一个类名为"cent-box-header"的div元素，用于放置标题相关内容，属于主栏内的标题区域 -->
+	<div class="cent-box-header">
+		<!-- 创建一个h1标题元素，应用类名"main-title"，显示主要标题"HotelBook"，通常是页面较为突出醒目的标题内容 -->
+		<h1 class="main-title">HotelBook</h1>
+		<!-- 创建一个h2标题元素，应用类名"sub-title"，显示副标题"酒店管理系统"，对主标题进行补充说明，进一步明确页面主题 -->
+		<h2 class="sub-title">酒店管理系统</h2>
+	</div>
+
+	<!-- 创建一个类名为"cont-main clearfix"的div元素，用于放置主要的内容区域，"clearfix"类可能用于清除浮动等布局相关的处理 -->
+	<div class="cont-main clearfix">
+
+		<!-- 开始登录区域的代码部分，创建一个类名为"login form"的div元素来划分登录相关的功能模块 -->
+		<div class="login form">
+			<!-- 创建一个类名为"group"的div元素，用于对文本输入框进行分组，方便布局和样式设置 -->
+			<div class="group">
+				<!-- 创建一个类名为"group-ipt loginName"的div元素，用于包裹用户名输入框，"loginName"类可能用于特定的样式设置或后续的JavaScript操作标识 -->
+				<div class="group-ipt loginName">
+					<!-- 创建一个文本输入框（input type="text"），设置名称（name）和id都为"loginName"，方便通过JavaScript获取其值和传递参数，
+应用类名"ipt"用于样式设置，placeholder属性设置了占位提示文字“输入您的用户名”，required属性表示该输入框为必填项 -->
+					<input type="text" name="loginName" id="loginName" class="ipt" placeholder="输入您的用户名" required>
 				</div>
-				<!--登录区域结束-->
-				<!--尾注-->
-				<div class="remember clearfix">
-					<label class="remember-me">
-                <a href="#">获取帮助</a>
-            </label>
-					<label class="forgot-password">
-                <a href="#">忘记密码？</a>
-            </label>
+				<!-- 创建一个类名为"group-ipt loginPwd"的div元素，用于包裹密码输入框，类似用户名输入框的设置逻辑 -->
+				<div class="group-ipt loginPwd">
+					<!-- 创建一个密码输入框（input type="password"），设置名称和id为"loginPwd"，应用"ipt"样式类，设置占位提示文字“输入您的登录密码”，
+同样为必填项 -->
+					<input type="password" name="loginPwd" id="loginPwd" class="ipt" placeholder="输入您的登录密码" required>
 				</div>
 			</div>
+			<!-- 创建一个类名为"button"，id为"btnLogin"的div元素，用于放置登录按钮相关内容，起到布局容器的作用 -->
+			<div class="button" id="btnLogin">
+				<!-- 创建一个按钮元素（button type="submit"），应用多个类名用于样式设置，id为"embed-submit"，按钮文字为“登录”，
+type="submit"表示点击该按钮会触发表单提交行为（虽然这里可能并不一定是传统表单提交，后续会通过JavaScript处理） -->
+				<button type="submit" class="login-btn register-btn button" id="embed-submit">登录</button>
+			</div>
 		</div>
-
-		<!--脚注-->
-		<div class="footer">
-			<p>© 2017
-				<a href="#">HotelBook System</a>
-			</p>
+		<!-- 登录区域结束 -->
+		<!-- 创建一个类名为"remember clearfix"的div元素，用于放置一些提示相关的内容，如获取帮助、忘记密码等链接，"clearfix"类用于布局处理 -->
+		<div class="remember clearfix">
+			<!-- 创建一个label元素，应用类名"remember-me"，里面包含一个超链接（a href="#"），文字为“获取帮助”，
+点击该链接可能会跳转到相应的帮助页面（这里href="#"表示暂时未设置具体链接地址） -->
+			<label class="remember-me">
+				<a href="#">获取帮助</a>
+			</label>
+			<!-- 类似地，创建另一个label元素，应用类名"forgot-password"，包含一个超链接，文字为“忘记密码？”，
+用于引导用户进行忘记密码相关的操作（同样暂时未设置具体链接地址） -->
+			<label class="forgot-password">
+				<a href="#">忘记密码？</a>
+			</label>
 		</div>
-
-		<script type="text/javascript" src="./js/login/particles.js"></script>
-		<script type="text/javascript" src="./js/login/background.js"></script>
-		<script type="text/javascript" src="./js/jquery.js"></script>
-		<script type="text/javascript" src="./js/layui/layui.js"></script>
-		<script type="text/javascript" src="./js/Cookie.js"></script>
-
-		//引入win10的api
-		<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
-
-		<script>
-			//模块化调用layui
-			layui.use(['layer'], function() {
-				var layer = layui.layer;
-				$(document).ready(function() {
-					//alert("网页加载完毕");
-
-					//按钮点击事件
-					$('#btnLogin').click(function() {
-						//alert("按钮被点击");
-
-						loginName = $('#loginName').val();
-						var loginPwd = $('#loginPwd').val();
-						var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
-
-						if(loginName === "")
-							layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
-						else if(loginPwd === "")
-							layer.tips("请输入密码", "#loginPwd");
+	</div>
+</div>
+
+<!-- 创建一个类名为"footer"的div元素，作为页面的脚注部分，用于显示版权等相关信息 -->
+<div class="footer">
+	<!-- 创建一个p段落元素，显示版权信息“© 2017”以及一个超链接（a href="#"），文字为“HotelBook System”，
+这里同样href="#"暂时未设置具体跳转地址，可能用于指向系统相关介绍等页面 -->
+	<p>© 2017
+		<a href="#">HotelBook System</a>
+	</p>
+</div>
+
+<!-- 引入particles.js文件，该文件可能用于实现页面上的粒子效果等特效相关的JavaScript功能，路径为js/login目录下 -->
+<script type="text/javascript" src="./js/login/particles.js"></script>
+<!-- 引入background.js文件，可能用于设置页面背景相关的JavaScript逻辑，同样位于js/login目录下 -->
+<script type="text/javascript" src="./js/login/background.js"></script>
+<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），方便后续进行DOM操作、事件处理以及AJAX交互等，路径为当前目录下的js/jquery.js -->
+<script type="text/javascript" src="./js/jquery.js"></script>
+<!-- 引入Layui框架的JavaScript脚本文件（layui.js），用于使用Layui框架提供的各种组件和功能，如弹出提示框、表单验证等，
+位于js/layui目录下 -->
+<script type="text/javascript" src="./js/layui/layui.js"></script>
+<!-- 引入Cookie.js文件，可能用于处理浏览器Cookie相关的操作，比如设置、获取、删除Cookie等功能，路径为当前目录下的js/Cookie.js -->
+<script type="text/javascript" src="./js/Cookie.js"></script>
+
+<!-- 引入win10.child.js文件，从注释看是用于引入win10的相关API，文件路径为MAIN/js目录下，
+这里可能是要在网页中使用一些特定的类似Windows 10系统风格的功能或交互逻辑（具体取决于该文件内容） -->
+<script type="text/javascript" src="MAIN/js/win10.child.js"></script>
+
+<script>
+	// 使用Layui框架的模块加载机制，加载['layer']模块，在加载完成后执行回调函数，
+	// 在回调函数内可以使用layer模块提供的功能，如弹出提示框等交互操作
+	layui.use(['layer'], function() {
+		var layer = layui.layer;
+		// 当DOM结构加载完成后（即整个HTML页面的元素都已解析完毕），执行以下函数内的代码，
+		// 相当于jQuery中的$(document).ready()函数的作用，确保在操作页面元素时它们已经存在
+		$(document).ready(function() {
+			// 这行代码原本是弹出一个提示框显示“网页加载完毕”，可能用于测试或者调试目的，
+			// 实际应用中如果不需要这样的提示可以注释掉或者删除
+			//alert("网页加载完毕");
+
+			// 为id为"btnLogin"的元素（即前面定义的登录按钮所在的div元素）绑定点击事件，
+			// 当按钮被点击时，会执行下面的回调函数内的代码
+			$('#btnLogin').click(function() {
+				// 这行代码原本也是弹出提示框显示“按钮被点击”，同样可用于测试或调试，
+				// 实际中可按需保留或去除
+				//alert("按钮被点击");
+
+				// 通过jQuery选择器（$('#loginName')）获取id为"loginName"的用户名输入框元素的值，
+				// 并将其存储在变量loginName中（这里没有使用var声明，可能是在外部有声明或者处于全局作用域，
+				// 不过更规范的做法建议加上var声明局部变量）
+				loginName = $('#loginName').val();
+				// 同样的方式获取id为"loginPwd"的密码输入框元素的值，存储在变量loginPwd中
+				var loginPwd = $('#loginPwd').val();
+				// 拼接一个字符串形式的参数，格式为"loginName=用户名值&loginPwd=密码值"，
+				// 用于后续发送AJAX请求时传递用户名和密码数据（这种拼接方式相对简单，实际应用中如果参数复杂可考虑使用更专业的参数序列化方式）
+				var params = "loginName=" + loginName + "&loginPwd=" + loginPwd;
+
+				// 判断用户名输入框的值是否为空，如果为空，通过layer.tips方法在用户名输入框（"#loginName"为选择器）旁边弹出提示框，
+				// 显示“请输入用户名”的提示信息，引导用户输入用户名
+				if(loginName === "")
+					layer.tips("请输入用户名", "#loginName"); //layer.tips(“string","#吸附容器")
+						// 判断密码输入框的值是否为空，如果为空，通过layer.tips方法在密码输入框（"#loginPwd"为选择器）旁边弹出提示框，
+				// 显示“请输入密码”的提示信息，提醒用户输入密码
+				else if(loginPwd === "")
+					layer.tips("请输入密码", "#loginPwd");
+				else {
+					// 使用jQuery的$.post方法发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据，
+					// baseUrl可能是在全局变量中定义的基础地址，QueryLoginNameServlet应该是服务器端用于处理用户名验证逻辑的Servlet等程序，
+					// params是前面拼接好的包含用户名和密码的参数，在请求成功的回调函数中根据服务器返回的数据（data）进行不同的处理
+					$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
+						if(data === '-1')
+								// 如果服务器返回的数据为'-1'，表示用户名不存在，通过layer.msg方法弹出一个提示框，
+								// 设置动画效果为6，告知用户用户名不存在，提示用户检查输入的用户名是否正确
+							layer.msg("用户名不存在", {
+								anim: 6
+							});
+						else if(data === '0')
+								// 如果返回数据为'0'，表示密码不正确，同样弹出提示框，设置动画效果为6，提示用户密码输入有误，需要重新输入密码
+							layer.msg("密码不正确", {
+								anim: 6
+							});
 						else {
-							//发出ajax请求，调用后端功能
-							$.post(baseUrl + '/QueryLoginNameServlet', params, function(data) {
-								if(data === '-1')
-									layer.msg("用户名不存在", {
-										anim: 6
-									});
-								else if(data === '0')
-									layer.msg("密码不正确", {
-										anim: 6
-									});
-								else {
-									layer.msg('登录成功', {
-										icon: 16,
-										shade: 0.01
-									});
-
-									//根据写入的session值得到结果
-									$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
-
-										//数据返回样例
-										<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
-
-										//取值方法
-										var obj = JSON.parse(loginInfo);
-										//alert(obj.loginName);
-										//alert(obj.loginPwd);
-										//alert(obj.loginNickName);
-										//alert(obj.loginAdmin);
-
-										//设置cookie
-										setCookie("loginName", loginName);
-										setCookie("loginNickName", obj.loginNickName);
-										setCookie("loginAdmin", obj.loginAdmin);
-									});
-
-									setTimeout(function() {
-										location.href = 'MAIN/main.html';
-									}, 1000); //等待一段时间后跳入
-								}
+							// 如果返回的数据既不是'-1'也不是'0'，则认为登录成功，通过layer.msg方法弹出提示框，
+							// 设置图标为16（可能是表示成功的图标样式），阴影透明度为0.01，告知用户登录成功
+							layer.msg('登录成功', {
+								icon: 16,
+								shade: 0.01
 							});
-						}
-					}); //button
-				}); //jquery
-			}); //layui
-		</script>
 
-	</body>
+							// 再次发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginInfoServlet'地址发送请求，
+							// 该请求可能是用于获取登录用户的详细信息，在请求成功的回调函数中对返回的登录信息（loginInfo）进行处理
+							$.post(baseUrl + '/QueryLoginInfoServlet', function(loginInfo) {
+
+								// 以下几行代码是原本的注释内容，展示了服务器返回的登录信息数据的示例格式，
+								// 是一个JSON格式的字符串，包含了如登录ID、用户名、密码、昵称、管理员权限等信息，方便后续解析和使用数据时参考
+								// 数据返回样例
+								<%--{"loginId":1,"loginName":"root","loginPwd":"toor","loginNickName":"管理员","loginAdmin":0}--%>
+
+								// 通过JSON.parse方法将服务器返回的JSON格式的登录信息字符串（loginInfo）解析为JavaScript对象，
+								// 以便后续可以通过对象属性的方式获取具体的信息值，存储在变量obj中
+								var obj = JSON.parse(loginInfo);
+								// 这几行代码原本是用于弹出提示框显示解析后的登录信息的各个属性值，同样可用于测试或调试目的，
+								// 实际应用中可根据需要保留或去除，比如可能会将这些信息存储到Cookie或者用于页面其他地方的展示等
+								//alert(obj.loginName);
+								//alert(obj.loginPwd);
+								//alert(obj.loginNickName);
+								//alert(obj.loginAdmin);
+
+								// 使用自定义的setCookie函数（应该是在前面引入的Cookie.js文件中定义）设置名为"loginName"的Cookie，
+								// 值为当前登录的用户名（loginName），用于在浏览器端保存用户登录的相关信息，方便后续页面使用或者实现自动登录等功能
+								setCookie("loginName", loginName);
+								// 类似地，设置名为"loginNickName"的Cookie，值为从服务器返回的登录用户昵称（obj.loginNickName）
+								setCookie("loginNickName", obj.loginNickName);
+								// 设置名为"loginAdmin"的Cookie，值为从服务器返回的登录用户管理员权限标识（obj.loginAdmin），
+								// 不同的权限值可能在后续页面中用于控制不同的操作权限和显示内容等
+								setCookie("loginAdmin", obj.loginAdmin);
+							});
+
+							// 使用setTimeout函数设置一个定时器，在1000毫秒（1秒）后执行里面的函数，
+							// 函数内通过location.href属性将页面重定向到'MAIN/main.html'页面，
+							// 实现登录成功后等待一段时间自动跳转到系统的主页面的功能
+							setTimeout(function() {
+								location.href = 'MAIN/main.html';
+							}, 1000); //等待一段时间后跳入
+						}
+					});
+				}
+			}); //button
+		}); //jquery
+	}); //layui
+</script>
+
+</body>
 
 </html>
\ No newline at end of file
diff --git a/src/webapp/loginTable.jsp b/src/webapp/loginTable.jsp
index ab3490b..75f8fca 100644
--- a/src/webapp/loginTable.jsp
+++ b/src/webapp/loginTable.jsp
@@ -1,79 +1,128 @@
 <%@ page contentType="text/html;charset=UTF-8" %>
+<!-- JSP页面指令，设置页面内容类型为text/html（即HTML格式页面），并指定字符编码为UTF-8，
+保证页面能正确显示各类字符，避免出现乱码情况 -->
 <html>
 
 <head>
+    <!-- 设置HTML页面的字符编码为utf-8，再次明确页面字符编码规范，有助于浏览器准确解析页面内容 -->
     <meta charset="utf-8">
+    <!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户明确当前页面所属的系统或功能 -->
     <title>酒店管理系统</title>
+    <!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（当前目录下的js/layui/css/layui.css），
+media="all"表示该样式适用于所有的媒体类型，也就是在各种设备上都应用此样式 -->
     <link rel="stylesheet" href="./js/layui/css/layui.css" media="all">
+    <!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
+路径为当前目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
     <link rel="stylesheet" href="./MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
+    <!-- 引入Layui框架的JavaScript脚本文件（layui.js），该文件包含了Layui框架的各种功能实现，
+是后续使用Layui组件和功能的基础，路径为当前目录下的js/layui/layui.js -->
     <script src="./js/layui/layui.js"></script>
+    <!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
+方便简化JavaScript编程，这里的路径指向当前目录下的js/jquery.js -->
     <script src="./js/jquery.js"></script>
+    <!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了项目中通用的函数、变量或者其他自定义逻辑，
+路径为当前目录下的js/global.js -->
     <script src="./js/global.js"></script>
+    <!-- 引入自定义的Cookie操作相关的JavaScript脚本文件（Cookie.js），用于处理浏览器Cookie的设置、获取、删除等操作，
+路径为当前目录下的js/Cookie.js -->
     <script src="./js/Cookie.js"></script>
     <style>
         body {
-            margin: 10px;
+        // 设置页面主体（body）元素的外边距为10px，用于控制页面内容与浏览器窗口边缘的距离，使页面布局更美观
+        margin: 10px;
         }
 
         .layui-elem-field legend {
-            font-size: 14px;
+        // 设置Layui框架中<fieldset>元素内<legend>元素（通常用于显示字段集标题）的字体大小为14px
+        font-size: 14px;
         }
 
         .layui-field-title {
-            margin: 25px 0 15px;
+        // 设置Layui框架中具有layui-field-title类的元素的外边距，上外边距为25px，下外边距为15px，左右外边距为0，
+        // 用于调整这类元素在页面中的布局间距
+        margin: 25px 0 15px;
         }
     </style>
 </head>
 
 <body>
+<!-- 创建一个<fieldset>元素，应用Layui的样式类（layui-elem-field layui-field-title），并设置顶部外边距为30px，
+用于对页面中的一组相关功能按钮等元素进行分组显示，使其在页面布局上更清晰 -->
 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
     <legend>
         <div>
             <div class="layui-inline">
+                <!-- 创建一个Layui风格的按钮（layui-btn），样式为默认的主要按钮样式（layui-btn-primary），
+同时应用Font Awesome字体图标库的图标类（fa fa-pencil-square-o）来显示一个铅笔图标，按钮id为"insertButton"，文字为“新增”，
+点击该按钮可触发新增相关的功能操作 -->
                 <button class="layui-btn layui-btn-primary fa fa-pencil-square-o " id="insertButton"> 新增</button>
             </div>
             <div class="layui-inline">
+                <!-- 类似地，创建另一个Layui按钮，样式为默认按钮样式，应用Font Awesome的下载图标类（fa fa-cloud-download），
+id为"toXlsButton"，文字为“导出”，用于触发导出相关功能 -->
                 <button class="layui-btn layui-btn-primary fa  fa-cloud-download" id="toXlsButton"> 导出</button>
             </div>
             <div class="layui-inline">
+                <!-- 创建一个普通按钮（type="button"），应用Layui默认按钮样式，Font Awesome的上传图标类（fa fa-cloud-upload），
+id为"upload"，文字为“导入”，用于触发导入相关功能 -->
                 <button type="button" class="layui-btn layui-btn-primary fa fa-cloud-upload" id="upload"> 导入</button>
             </div>
         </div>
     </legend>
 </fieldset>
+<!-- 创建一个空的HTML表格元素，id为"tableID"，后续会通过JavaScript（使用Layui的表格组件）动态填充表格内容 -->
 <table id="tableID"></table>
 <script type="text/html" id="barAuth">
+    <!-- 定义一段HTML模板代码，id为"barAuth"，用于在Layui表格的某一列中显示操作按钮，这里定义了两个超链接（a标签），
+应用Layui按钮的样式类（layui-btn layui-btn-xs），并通过lay-event属性分别定义了点击事件的名称（"edit"表示改密，"del"表示删除），
+用于在表格中针对每一行数据提供相应的操作按钮 -->
     <a class="layui-btn layui-btn-xs" lay-event="edit">改密</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
 <script>
-
-    layui.use(['util', 'layer', 'table','upload'], function () {
+    // 使用Layui框架的模块加载机制，加载['util', 'layer', 'table', 'upload']这几个模块，
+    // 并在加载完成后执行回调函数，在回调函数内可以使用这些模块提供的功能，
+    // 比如操作表格、弹出提示框、处理文件上传等功能
+    layui.use(['util', 'layer', 'table', 'upload'], function () {
         $(document).ready(function () {
             var table = layui.table,
                 layer = layui.layer,
                 upload = layui.upload,
                 util = layui.util;
 
-            upload.render({ //允许上传的文件后缀
+            // 使用Layui的上传组件（upload）进行相关配置，用于实现文件上传功能
+            upload.render({
+                // 通过elem属性指定触发文件上传的DOM元素选择器，这里绑定到id为"upload"的元素（即前面的导入按钮）
                 elem: '#upload'
-                ,url: baseUrl + '/UploadFileServlet'
-                ,accept: 'file' //普通文件
-                ,exts: 'xlsx' //只允许上传excel文件
-                ,before: function(){
+                // 设置上传文件的请求地址，baseUrl可能是在全局变量中定义的基础地址，UploadFileServlet应该是服务器端用于处理文件上传的Servlet等程序
+                , url: baseUrl + '/UploadFileServlet'
+                // 设置允许上传的文件类型为普通文件（file表示任意类型的普通文件，与一些特殊类型如图片、视频等区分开）
+                , accept: 'file'
+                // 进一步限制只允许上传扩展名为.xlsx的Excel文件，用于对上传文件的格式进行筛选控制
+                , exts: 'xlsx'
+                // 在文件上传前执行的回调函数，这里通过layer.msg方法弹出提示框显示“文件上传中”，告知用户文件正在上传的状态
+                , before: function () {
                     layer.msg('文件上传中');
                 }
-                ,success: function(res){
+                // 文件上传成功后的回调函数，参数res包含了服务器返回的响应数据，这里简单地通过alert弹出响应数据中的msg属性值，
+                // 实际应用中可能需要根据具体的返回数据结构进行更合理的处理，比如判断上传结果并给用户相应提示等
+                , success: function (res) {
                     alert(res.msg);
                 }
             });
 
             var countNum;
+            // 使用Layui的表格组件（table）创建并渲染一个表格，配置相关参数来定义表格的各种属性和行为
             var tableIns = table.render({
-                elem: '#tableID',
-                id: 'tableID',
-                url: baseUrl + '/LoginTableServlet',
-                cols: [
+                // 通过elem属性指定表格对应的DOM元素选择器，这里绑定到id为"tableID"的空表格元素
+                elem: '#tableID'
+                // 为表格设置一个唯一的标识id，这里同样设置为"tableID"，方便后续对表格进行操作，比如重新加载数据等
+                , id: 'tableID'
+                // 设置表格数据的请求地址，向服务器端的baseUrl + '/LoginTableServlet'地址获取表格数据，
+                // LoginTableServlet应该是用于处理表格数据查询等相关逻辑的后端程序
+                , url: baseUrl + '/LoginTableServlet'
+                // 定义表格的列信息，是一个二维数组，每个子数组表示一行的列配置，这里配置了多列的字段名、标题、宽度、排序、固定列等属性
+                , cols: [
                     [{
                         field: 'loginId',
                         title: '用户ID',
@@ -93,17 +142,23 @@
                         toolbar: '#barAuth',
                         width: 150
                     }]
-                ],
-                page: true,
-                where: {
+                ]
+                // 设置表格支持分页功能，Layui会根据后端返回的数据自动进行分页显示等相关处理
+                , page: true
+                // 可以向服务器传递额外的查询参数，这里设置make参数为0，具体含义取决于后端服务器对该参数的处理逻辑，
+                // 可能用于区分不同的查询条件或数据筛选情况等
+                , where: {
                     make: 0
-                },
-                done: function (res, curr, count) {
+                }
+                // 表格数据加载完成后的回调函数，参数res表示服务器返回的数据，curr表示当前页码，count表示总数据条数，
+                // 这里将总数据条数存储在countNum变量中，可能用于后续其他相关的逻辑处理（如显示数据总数等）
+                , done: function (res, curr, count) {
                     countNum = count;
                 }
             });
 
-            //监听工具条
+            // 监听Layui表格的工具条事件，当点击表格中具有lay-event属性定义的操作按钮（如前面定义的"edit"或"del"按钮）时，
+            // 会触发这个回调函数，obj参数包含了与该操作相关的数据、事件等信息
             table.on('tool', function (obj) {
                 var data = obj.data,
                     layEvent = obj.event;
@@ -111,32 +166,46 @@
                 var loginName = data.loginName;
                 var loginNameNow = getCookie("loginName");
                 if (layEvent === 'del') {
-                    if (loginName != loginNameNow) {
+                    // 判断要删除的数据对应的用户名（loginName）与当前登录的用户名（loginNameNow）是否不相等，
+                    // 如果不相等，说明不是当前登录账号的数据，允许进行删除操作
+                    if (loginName!= loginNameNow) {
+                        // 通过layer.confirm方法弹出一个确认框，询问用户是否确定要删除该条数据，设置了确认框的垂直偏移量为180px，
+                        // 并定义了两个按钮的文字（['是滴', '手滑']），点击不同按钮会执行对应的回调函数
                         layer.confirm('您确定要删除该条数据吗？', {
                             offset: '180px',
                             btn: ['是滴', '手滑']
                         }, function () {
+                            // 通过Layui的表格组件（table）重新加载表格数据，向服务器传递新的查询参数，
+                            // 这里设置make参数为4，loginId参数为要删除的数据对应的用户ID（loginId），
+                            // 具体的参数含义和服务器端的处理逻辑相关，可能用于告知服务器执行删除操作并更新表格数据显示等
                             table.reload('tableID', {
                                 where: {
                                     make: 4,
                                     loginId: loginId
                                 }
                             });
+                            // 通过layer.msg方法弹出提示框，显示“删除结果如下”，设置垂直偏移量为250px，图标为1（可能表示某种提示图标样式），
+                            // 告知用户删除操作已执行，可查看相应结果
                             layer.msg('删除结果如下', {
                                 offset: '250px',
                                 icon: 1
                             });
                         }, function () {
+                            // 如果用户点击了“手滑”（取消）按钮，通过layer.msg方法弹出提示框，显示“删除操作已取消”，
+                            // 设置垂直偏移量为250px，告知用户删除操作已取消，不进行实际的删除行为
                             layer.msg('删除操作已取消', {
                                 offset: '250px'
                             });
                         });
                     } else {
+                        // 如果要删除的数据对应的用户名与当前登录用户名相等，说明是当前登录账号，不允许删除，
+                        // 通过layer.msg方法弹出提示框，显示“当前登陆账号禁止删除”，设置垂直偏移量为250px，告知用户不能删除该账号数据
                         layer.msg('当前登陆账号禁止删除', {
                             offset: '250px'
                         });
                     }
                 } else if (layEvent === 'edit') {
+                    // 当点击表格中的“改密”（edit）按钮时，执行以下逻辑，弹出一个密码输入框，提示用户输入旧密码
                     layer.prompt({
                         title: '请输入旧密码',
                         formType: 1,
@@ -144,9 +213,13 @@
                         maxlength: 18
                     }, function (value, index) {
                         var params = "loginName=" + loginName + "&loginPwd=" + value;
+                        // 使用jQuery的$.post方法发起一个异步POST请求，向服务器端的baseUrl + '/QueryLoginNameServlet'地址发送数据，
+                        // QueryLoginNameServlet应该是用于验证密码是否正确的后端程序，在请求成功的回调函数（updateCheck）中根据服务器返回的数据进行后续处理
                         $.post(baseUrl + '/QueryLoginNameServlet', params, function updateCheck(data) {
                             layer.close(index);
                             if (data === "0") {
+                                // 如果服务器返回的数据为"0"，表示密码不正确，通过layer.alert方法弹出一个警告提示框，
+                                // 设置标题为“警告”，图标为2（表示警告的图标样式），动画效果为6，垂直偏移量为220px，告知用户密码输入有误
                                 layer.alert('密码不正确！', {
                                     title: '警告',
                                     icon: 2,
@@ -154,6 +227,7 @@
                                     offset: '220px'
                                 });
                             } else {
+                                // 如果密码验证通过（服务器返回的数据不是"0"），再次弹出一个密码输入框，提示用户输入新密码
                                 layer.prompt({
                                     title: '请输入新密码',
                                     formType: 1,
@@ -161,6 +235,7 @@
                                     maxlength: 18
                                 }, function (value1, index1) {
                                     var pwd1 = value1;
+                                    // 接着又弹出一个密码输入框，提示用户再次输入新密码，用于确认密码输入一致
                                     layer.prompt({
                                         title: '请再次输入新密码',
                                         formType: 1,
@@ -168,8 +243,10 @@
                                         maxlength: 18
                                     }, function (value2, index2) {
                                         var pwd2 = value2;
-                                        if (pwd2 != pwd1) {
+                                        if (pwd2!= pwd1) {
                                             layer.close(index2);
+                                            // 如果两次输入的新密码不一致，通过layer.alert方法弹出警告提示框，显示“两次输入的值不一致！”，
+                                            // 设置相关提示框属性，告知用户密码输入不一致，需要重新输入
                                             layer.alert('两次输入的值不一致！', {
                                                 title: '警告',
                                                 icon: 2,
@@ -180,8 +257,12 @@
                                             layer.close(index1);
                                             layer.close(index2);
                                             params = "loginName=" + loginName + "&loginPwd=" + value2;
+                                            // 当两次新密码输入一致后，发起一个异步POST请求，向服务器端的baseUrl + '/UpdatePwdServlet'地址发送数据，
+                                            // UpdatePwdServlet应该是用于更新密码的后端程序，在请求成功的回调函数中根据服务器返回的数据判断密码修改是否成功
                                             $.post(baseUrl + '/UpdatePwdServlet', params, function updateCheck(data) {
                                                 if (data === '1') {
+                                                    // 如果服务器返回的数据为'1'，表示密码修改成功，通过layer.alert方法弹出成功提示框，
+                                                    // 设置标题为“成功”，图标为6（表示成功的图标样式），动画效果为1，垂直偏移量为220px，告知用户密码修改成功
                                                     layer.alert('修改成功！', {
                                                         title: '成功',
                                                         icon: 6,
@@ -189,75 +270,5 @@
                                                         offset: '220px'
                                                     });
                                                 } else {
-                                                    layer.alert('修改失败！', {
-                                                        title: '失败',
-                                                        icon: 2,
-                                                        anim: 6,
-                                                        offset: '220px'
-                                                    });
-                                                }
-                                            });
-                                        }
-                                    });
-                                });
-
-                            }
-                        });
-                    });
-
-                }
-            });
-
-            //新增
-            $('#insertButton').click(function () {
-                layer.open({
-                    title: "新增",
-                    btn: ['关闭'],
-                    yes: function (index) {
-                        tableIns.reload({
-                            where: {
-                                make: 0
-                            }
-                        });
-                        layer.close(index); //关闭弹窗
-                    },
-                    type: 2,
-                    area: ['450px', '500px'],
-                    fixed: false,
-                    maxmin: true,
-                    content: '/hb/insertLogin.jsp',
-                    cancel: function () {
-                        tableIns.reload({
-                            where: {
-                                make: 0
-                            }
-                        });
-                    }
-                });
-
-            });
-
-            //导出
-            $('#toXlsButton').click(function () {
-                location.href = baseUrl + '/LoginExcelServlet';
-                layer.alert('Excel文件生成完成！', {
-                    title: '成功',
-                    icon: 6,
-                    anim: 1,
-                    offset: '250px'
-                });
-            });
-
-            //回到顶端
-            util.fixbar({
-                showHeight: 2,
-                click: function (type) {
-                    console.log(type);
-                }
-            });
-        });
-    });
-</script>
-</body>
-
-</html>
\ No newline at end of file
+    // 如果服务器返回的数据不是'1'，表示密码修改失败，同样弹出提示框，设置标题为“失败”，图标为2（表示失败的图标样式），
+    // 动画效果为6，垂直偏移量为220
\ No newline at end of file
diff --git a/src/webapp/nav.html b/src/webapp/nav.html
index af2637b..93b49b3 100644
--- a/src/webapp/nav.html
+++ b/src/webapp/nav.html
@@ -1,149 +1,199 @@
 <!-- saved from url=(0043)http://hi.baidu.com/com/error/?from=oldblog -->
+<!-- 这看起来像是浏览器保存页面时添加的注释信息，用于标记页面原始的来源网址等相关信息，不过一般对页面功能无实质影响 -->
 <HTML>
 
-	<HEAD>
-		<TITLE>nav</TITLE>
-		<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
-		<!--STATUS OK-->
-		<META http-equiv=Content-Type content="text/html; charset=utf-8">
-
-		<style>
-			.mod-page-body {
-				height: auto;
-				_height: 100%;
-				min-height: 100%;
-				zoom: 1;
-			}
-			
-			.mod-page-body .mod-page-main .x-page-container {
-				padding: 0;
-				margin: 0;
-				zoom: 1
-			}
-			
-			.mod-page-body {
-				color: #454545;
-				zoom: 1
-			}
-			
-			.mod-page-body .mod-page-main {
-				padding-top: 50px
-			}
-			
-			.mod-page-body .mod-page-main {
-				padding-bottom: 85px
-			}
-			
-			.wordwrap {
-				word-break: break-all;
-				word-wrap: break-word
-			}
-			
-			pre.wordwrap {
-				white-space: pre-wrap
-			}
-			
-			.clearfix:after {
-				content: '\20';
-				display: block;
-				height: 0;
-				clear: both
-			}
-			
-			.clearfix {
-				zoom: 1
-			}
-			
-			.grid-98 {
-				overflow: hidden;
-				margin: 0 auto;
-				padding: 0
-			}
-			
-			.grid-98 {
-				width: 980px
-			}
-			
-			.mod-footer {
-				padding: 30px 0 15px 0;
-				width: 100%;
-				height: 40px;
-				position: relative;
-				margin-top: -85px;
-				clear: both;
-				zoom: 1
-			}
-			
-			.mod-footer .hidden-box {
-				line-height: 0;
-				height: 0;
-				overflow: hidden
-			}
-			
-			.mod-footer .footer-box {
-				text-align: center;
-				font-family: Arial, simsun;
-				font-size: 12px
-			}
-			
-			.mod-footer .footer-box .copy-box {
-				color: #959595;
-				line-height: 12px;
-				height: 12px;
-				overflow: hidden
-			}
-			
-			.mod-footer .footer-box .inner-box {
-				margin-bottom: 10px;
-				line-height: 14px;
-				height: 14px;
-				overflow: hidden;
-				color: #3FA7CB
-			}
-			
-			.mod-footer .hidden-box {
-				line-height: 0;
-				height: 0;
-				overflow: hidden
-			}
-			
-			.mod-page-body
-		</style>
-		<STYLE type=text/css>
-			.mod-notfound {
-				BORDER-RIGHT: #444444 1px solid;
-				BORDER-TOP: #444444 1px solid;
-				MARGIN-TOP: 10px;
-				BACKGROUND: #F0F0F0;
-				BORDER-LEFT: #444444 1px solid;
-				BORDER-BOTTOM: #444444 1px solid;
-				HEIGHT: 380px;
-				TEXT-ALIGN: center;
-				border-radius: 10px
-			}
-		</STYLE>
-	</HEAD>
-	<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
-	</HEAD>
-
-	<BODY bgcolor="#f0f0f0">
-		<SECTION class=mod-page-body>
-			<DIV class="mod-page-main wordwrap clearfix">
-				<DIV class=x-page-container>
-					<DIV class="mod-notfound grid-98">
-						<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
-						<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
-					</DIV>
-				</DIV>
-			</DIV>
-		</SECTION>
-		<FOOTER class="mod-footer mod-cs-footer">
-			<DIV class="clearfix hidden-box"></DIV>
-			<DIV class=footer-box>
-				<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
+<HEAD>
+	<!-- 设置页面的标题为“nav”，该标题通常会显示在浏览器的标题栏中，方便用户识别当前页面的主题或功能 -->
+	<TITLE>nav</TITLE>
+	<!-- 引入一个图标文件（img目录下的windows.ico图标），设置为页面的图标（favicon），
+rel属性表示关联关系，type属性指定图标文件的类型，用于在浏览器的标签页、书签栏等地方显示该图标，增强页面辨识度 -->
+	<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
+	<!-- 这可能是某种状态标识注释，写着“STATUS OK”，或许是开发过程中用于标记页面相关状态的说明，实际对页面展示和功能没有直接作用 -->
+	<!--STATUS OK-->
+	<!-- 设置HTML页面的元信息（META），通过http-equiv属性指定等效的HTTP头部字段，这里设置Content-Type表示内容类型，
+content属性具体定义了类型为“text/html”（即HTML格式页面）以及字符编码为“utf-8”，确保页面能正确显示字符，避免乱码 -->
+	<META http-equiv=Content-Type content="text/html; charset=utf-8">
+
+	<style>
+		.mod-page-body {
+		// 设置元素的高度为自动，根据内容自适应高度，同时设置了一些浏览器兼容性相关的属性，
+		// _height属性（可能针对特定浏览器）设置为100%，min-height设置最小高度为100%，zoom:1常用于解决IE浏览器下的一些布局问题，触发hasLayout属性
+		height: auto;
+			_height: 100%;
+			min-height: 100%;
+			zoom: 1;
+		}
+
+		.mod-page-body.mod-page-main.x-page-container {
+		// 设置内边距为0，外边距为0，同样zoom:1用于浏览器兼容性处理，用于清除浮动等布局相关问题，使该容器元素内部布局更规整
+		padding: 0;
+			margin: 0;
+			zoom: 1
+		}
+
+		.mod-page-body {
+		// 设置元素内文字颜色为#454545这种深灰色，并且再次添加zoom:1用于浏览器兼容性相关的布局处理
+		color: #454545;
+			zoom: 1
+		}
+
+		.mod-page-body.mod-page-main {
+		// 设置该元素的顶部内边距为50px，用于调整内部内容与顶部的距离，使页面布局更美观
+		padding-top: 50px
+		}
+
+		.mod-page-body.mod-page-main {
+		// 设置该元素的底部内边距为85px，类似顶部内边距的作用，调整内容与底部的距离，方便后续布局其他元素（如底部版权等信息）
+		padding-bottom: 85px
+		}
+
+		.wordwrap {
+		// 设置文字的换行规则，word-break: break-all表示允许单词内换行，
+		// word-wrap: break-word表示如果单词过长则强制换行，保证文字在容器内合理显示，避免溢出
+		word-break: break-all;
+			word-wrap: break-word
+		}
+
+		.pre.wordwrap {
+		// 对于<pre>元素应用.wordwrap类时，设置其空白符处理方式为pre-wrap，
+		// 即保留空白符的同时也能根据容器宽度自动换行，方便显示格式化的文本内容
+		white-space: pre-wrap
+		}
+
+		.clearfix:after {
+		// 使用:after伪元素，添加一个内容为空的字符（'\20'，可能是空格之类的占位，不同浏览器有不同处理方式），
+		// 并设置为块级元素，高度为0，用于清除浮动，确保父元素能正确包含浮动的子元素，维持布局的正常显示
+		content: '\20';
+			display: block;
+			height: 0;
+			clear: both
+		}
+
+		.clearfix {
+		// 为应用.clearfix类的元素添加zoom:1属性，同样用于解决特定浏览器（如IE）下的布局问题，触发hasLayout属性，配合:after伪元素实现清除浮动等布局效果
+		zoom: 1
+		}
+
+		.grid-98 {
+		// 设置元素超出部分隐藏，使其不会显示在容器外面，并且设置水平方向上居中（margin: 0 auto），
+		// 内边距设置为0，用于布局一个宽度固定且水平居中的容器，方便页面内容的整体排版
+		overflow: hidden;
+			margin: 0 auto;
+			padding: 0
+		}
+
+		.grid-98 {
+		// 明确设置该元素的宽度为980px，结合前面的居中设置等，常用于构建页面的主体内容区域宽度，适配常见的屏幕分辨率等情况
+		width: 980px
+		}
+
+		.mod-footer {
+		// 设置底部元素（.mod-footer）的内边距，上内边距为30px，下内边距为15px，左右内边距为0，
+		// 同时设置宽度为100%铺满整个父元素宽度，高度为40px，用于定义底部区域的大小和内部内容的布局空间
+		padding: 30px 0 15px 0;
+			width: 100%;
+			height: 40px;
+		// 设置相对定位（position: relative），用于后续调整其内部元素的位置等，
+		// margin-top: -85px将元素向上移动85px，可能是为了使其与上面的内容重叠一部分，实现特定的布局效果，
+		// clear: both用于清除浮动，避免受到上面浮动元素的影响，保证在底部正确显示，zoom:1用于浏览器兼容性布局处理
+		position: relative;
+			margin-top: -85px;
+			clear: both;
+			zoom: 1
+		}
+
+		.mod-footer.hidden-box {
+		// 设置行高为0，高度为0，并且超出部分隐藏，可能用于隐藏一些不需要显示但又在HTML结构中存在的元素，或者用于创建一些空白占位等布局用途
+		line-height: 0;
+			height: 0;
+			overflow: hidden
+		}
+
+		.mod-footer.footer-box {
+		// 设置文本居中对齐，定义字体为Arial和宋体（simsun，针对中文显示），字体大小为12px，用于规范底部版权等文字的显示样式
+		text-align: center;
+			font-family: Arial, simsun;
+			font-size: 12px
+		}
+
+		.mod-footer.footer-box.copy-box {
+		// 设置文字颜色为#959595这种浅灰色，行高为12px，高度为12px，超出部分隐藏，用于设置版权相关文字的样式和显示效果
+		color: #959595;
+			line-height: 12px;
+			height: 12px;
+			overflow: hidden
+		}
+
+		.mod-footer.footer-box.inner-box {
+		// 设置底部其他相关元素（.inner-box）的底部外边距为10px，行高为14px，高度为14px，超出部分隐藏，颜色为#3FA7CB这种蓝色，
+		// 用于区分不同的底部文字内容，调整其显示布局和样式
+		margin-bottom: 10px;
+			line-height: 14px;
+			height: 14px;
+			overflow: hidden;
+			color: #3FA7CB
+		}
+
+		.mod-footer.hidden-box {
+		// 再次出现相同的样式设置，可能是重复定义或者用于覆盖之前的设置，作用与前面的.hidden-box样式中关于隐藏元素的设置相同
+		line-height: 0;
+			height: 0;
+			overflow: hidden
+		}
+
+		.mod-page-body
+	</style>
+	<STYLE type=text/css>
+		.mod-notfound {
+		// 设置元素的右边框为1px的实线，颜色为#444444这种深灰色，同理设置上边框、左边框和下边框，
+		// 背景颜色设置为#F0F0F0浅灰色，高度为380px，文本居中对齐，并且设置边框圆角为10px，用于创建一个具有特定样式的、带边框和圆角的容器元素，
+		// 可能用于显示特定的提示信息等内容，比如这里可能是用于展示页面出错或未找到相关内容的提示区域样式
+		BORDER-RIGHT: #444444 1px solid;
+			BORDER-TOP: #444444 1px solid;
+			MARGIN-TOP: 10px;
+			BACKGROUND: #F0F0F0;
+			BORDER-LEFT: #444444 1px solid;
+			BORDER-BOTTOM: #444444 1px solid;
+			HEIGHT: 380px;
+			TEXT-ALIGN: center;
+			border-radius: 10px
+		}
+	</STYLE>
+</HEAD>
+<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
+</HEAD>
+
+<BODY bgcolor="#f0f0f0">
+<!-- 创建一个<SECTION>元素，应用类名.mod-page-body，用于划分页面的主体内容区域，结合前面定义的相关样式来控制该区域的布局和显示效果 -->
+<SECTION class=mod-page-body>
+	<!-- 在<SECTION>元素内创建一个<DIV>元素，应用多个类名（mod-page-main wordwrap clearfix），
+用于放置主要的页面内容，其中“wordwrap”类控制文字换行，“clearfix”类用于清除浮动等布局处理 -->
+	<DIV class="mod-page-main wordwrap clearfix">
+		<!-- 在上述<DIV>元素内再创建一个<DIV>元素，应用类名.x-page-container，可能作为更具体的页面内容容器，方便后续进一步布局子元素 -->
+		<DIV class=x-page-container>
+			<!-- 创建一个<DIV>元素，应用类名.mod-notfound grid-98，结合前面定义的样式，它具有特定的边框、背景、高度等样式，
+并且宽度为980px，水平居中，用于展示特定的内容，这里可能是在页面出现某种情况（如未找到对应内容）时显示相关提示及图片等 -->
+			<DIV class="mod-notfound grid-98">
+				<!-- 在该<DIV>元素内插入一张图片，应用类名.img-notfound，设置图片的高度为300px，宽度为786px，图片来源路径为./img/nav.jpg -->
+				<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
+				<!-- 创建一个段落元素<P>，设置字体大小为18px，行高为50px，里面包含一段文字“推開窗 回到夢裡的故鄉”，用于显示特定的提示性文字内容 -->
+				<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
 			</DIV>
-		</FOOTER>
+		</DIV>
+	</DIV>
+</SECTION>
+<!-- 创建一个<FOOTER>元素，应用类名.mod-footer mod-cs-footer，用于构建页面的底部区域，结合前面定义的底部样式来显示版权等相关信息 -->
+<FOOTER class="mod-footer mod-cs-footer">
+	<!-- 在<FOOTER>元素内创建一个<DIV>元素，应用类名.clearfix hidden-box，可能用于清除浮动或者作为隐藏的布局占位元素等用途 -->
+	<DIV class="clearfix hidden-box"></DIV>
+	<!-- 再创建一个<DIV>元素，应用类名.footer-box，用于放置底部具体的文字内容，按照前面定义的.footer-box样式进行显示 -->
+	<DIV class=footer-box>
+		<!-- 在.footer-box内又创建一个<DIV>元素，应用类名.copy-box，用于显示版权相关的文字，按照.copy-box样式设置显示效果，
+这里显示“©2017&nbsp;酒店管理系统”，表示版权归属及系统名称等信息 -->
+		<DIV class=copy-box>©2017&nbsp;酒店管理系统</DIV>
+	</DIV>
+</FOOTER>
 
-	</BODY>
+</BODY>
 
 </HTML>
\ No newline at end of file
