<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    // 获取当前应用的上下文路径，例如在Web应用中，可能是项目名称那部分路径
    String path = request.getContextPath();
    // 构建基础路径，包含协议（如http或https）、服务器名称、服务器端口以及上下文路径，用于后续资源引用等
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    // 用于指定浏览器渲染引擎的模式，这里兼容多种模式，优先尝试webkit、ie-comp、ie-stand等
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    // 告诉浏览器以最高的标准模式（IE的最高可用模式，比如在IE中以IE8及以上的标准模式渲染）来渲染页面
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    // 设置视口相关属性，width=device-width表示宽度跟随设备宽度，initial-scale等设置缩放相关限制，禁止用户手动缩放
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // 控制页面是否被缓存为离线应用，这里设置为不缓存为离线应用
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    // 设置页面书签图标（收藏时显示的图标）的链接
    <link rel="Bookmark" href="/favicon.ico" >
    // 设置页面的快捷图标（在浏览器标签等地方显示的图标）链接
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    // 如果浏览器版本小于IE9，引入html5shiv.js，用于让低版本IE支持HTML5新标签
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    // 引入respond.min.js，用于让低版本IE支持CSS3媒体查询
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    // 引入H-ui框架的基础样式文件，路径通过前面构建的basePath拼接，使其能正确找到资源位置
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
    // 引入H-ui.admin框架的样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
    // 引入Hui-iconfont字体图标库的样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
    // 引入H-ui.admin默认皮肤的样式文件，通过id="skin"可以后续方便切换皮肤等操作
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
    // 引入H-ui.admin的额外自定义样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    // 针对IE6浏览器，引入DD_belatedPNG_0.0.8a-min.js脚本，用于修复IE6下PNG图片透明等显示问题
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    // 调用脚本中的fix方法，对页面所有元素尝试修复PNG显示问题
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    // 设置页面标题为“添加车次”
    <title>添加车次</title>
</head>
<body>
    <article class="page-container">
        // 定义一个表单，表单提交的地址是通过basePath拼接的AddTrainServlet，提交方式为POST，设置了表单类名和id用于样式和脚本操作
        <form action="<%=basePath%>AddTrainServlet" method="post" class="form form-horizontal" id="form-member-add">
            <div class="row cl">
                // 定义表单标签，用于显示“车次：”文本，设置了类名用于样式布局，添加了红色星号表示必填项
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车次：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    // 创建一个文本输入框，设置了类名，初始值为空，占位符为空，设置了id和name属性，方便后续获取输入值和提交数据
                    <input type="text" class="input-text" value="" placeholder="" id="trainNumber" name="trainNumber">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起始站：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="startStation" name="startStation">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>终点站：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="endStation" name="endStation">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开车时间：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    // 创建一个日期时间本地输入框（HTML5新特性），用于输入开车时间，同样设置了相关属性
                    <input type="datetime-local" class="input-text" value="" placeholder="" id="startTime" name="startTime">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>到站时间：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="datetime-local" class="input-text" value="" placeholder="" id="endTime" name="endTime">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车票价格：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="price" name="price">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>座位数量：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="seatNumber" name="seatNumber">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    // 创建一个提交按钮，设置了按钮的类名、样式等属性，按钮上显示的文本是“提交”
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>

    <!--_footer 作为公共模版分离出去-->
    // 引入jQuery库的压缩版本，这是一个常用的JavaScript库，方便操作DOM、处理事件等
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
    // 引入layer.js，这可能是一个用于弹出层等交互效果的JavaScript插件
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    // 引入H-ui框架的JavaScript脚本文件，用于实现框架相关的交互功能等
    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
    // 引入H-ui.admin框架的JavaScript脚本文件，实现后台管理相关的功能逻辑等
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

    <!--请在下方写此页面业务相关的脚本--> 
    // 引入My97DatePicker日期选择器的脚本文件，可能用于日期相关的输入选择等操作（虽然页面已有HTML5的日期时间输入框，但可能用于兼容等情况）
    <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
    // 引入jQuery验证插件的主文件，用于对表单进行验证，比如必填项验证、格式验证等
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
    // 引入验证插件的扩展验证方法文件，可能包含自定义的验证规则等
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
    // 引入验证插件的中文提示信息文件，用于在验证不通过时显示中文的错误提示消息
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>

    <!--/请在上方写此页面业务相关的脚本-->
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    // 获取当前应用的上下文路径，例如在Web应用中，可能是项目名称那部分路径
    String path = request.getContextPath();
    // 构建基础路径，包含协议（如http或https）、服务器名称、服务器端口以及上下文路径，用于后续资源引用等
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    // 用于指定浏览器渲染引擎的模式，这里兼容多种模式，优先尝试webkit、ie-comp、ie-stand等
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    // 告诉浏览器以最高的标准模式（IE的最高可用模式，比如在IE中以IE8及以上的标准模式渲染）来渲染页面
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    // 设置视口相关属性，width=device-width表示宽度跟随设备宽度，initial-scale等设置缩放相关限制，禁止用户手动缩放
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    // 控制页面是否被缓存为离线应用，这里设置为不缓存为离线应用
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    // 设置页面书签图标（收藏时显示的图标）的链接
    <link rel="Bookmark" href="/favicon.ico" >
    // 设置页面的快捷图标（在浏览器标签等地方显示的图标）链接
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    // 如果浏览器版本小于IE9，引入html5shiv.js，用于让低版本IE支持HTML5新标签
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    // 引入respond.min.js，用于让低版本IE支持CSS3媒体查询
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    // 引入H-ui框架的基础样式文件，路径通过前面构建的basePath拼接，使其能正确找到资源位置
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
    // 引入H-ui.admin框架的样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
    // 引入Hui-iconfont字体图标库的样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
    // 引入H-ui.admin默认皮肤的样式文件，通过id="skin"可以后续方便切换皮肤等操作
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
    // 引入H-ui.admin的额外自定义样式文件
    <link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
    <!--[if IE 6]>
    // 针对IE6浏览器，引入DD_belatedPNG_0.0.8a-min.js脚本，用于修复IE6下PNG图片透明等显示问题
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    // 调用脚本中的fix方法，对页面所有元素尝试修复PNG显示问题
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    // 设置页面标题为“添加车次”
    <title>添加车次</title>
</head>
<body>
    <article class="page-container">
        // 定义一个表单，表单提交的地址是通过basePath拼接的AddTrainServlet，提交方式为POST，设置了表单类名和id用于样式和脚本操作
        <form action="<%=basePath%>AddTrainServlet" method="post" class="form form-horizontal" id="form-member-add">
            <div class="row cl">
                // 定义表单标签，用于显示“车次：”文本，设置了类名用于样式布局，添加了红色星号表示必填项
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车次：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    // 创建一个文本输入框，设置了类名，初始值为空，占位符为空，设置了id和name属性，方便后续获取输入值和提交数据
                    <input type="text" class="input-text" value="" placeholder="" id="trainNumber" name="trainNumber">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>起始站：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="startStation" name="startStation">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>终点站：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="endStation" name="endStation">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开车时间：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    // 创建一个日期时间本地输入框（HTML5新特性），用于输入开车时间，同样设置了相关属性
                    <input type="datetime-local" class="input-text" value="" placeholder="" id="startTime" name="startTime">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>到站时间：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="datetime-local" class="input-text" value="" placeholder="" id="endTime" name="endTime">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>车票价格：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="price" name="price">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>座位数量：</label>
                <div class="formControls col-xs-8 col-sm-9" style="width:300px;">
                    <input type="text" class="input-text" value="" placeholder="" id="seatNumber" name="seatNumber">
                </div>
            </div>

            <div class="row cl">
                <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                    // 创建一个提交按钮，设置了按钮的类名、样式等属性，按钮上显示的文本是“提交”
                    <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                </div>
            </div>
        </form>
    </article>

    <!--_footer 作为公共模版分离出去-->
    // 引入jQuery库的压缩版本，这是一个常用的JavaScript库，方便操作DOM、处理事件等
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
    // 引入layer.js，这可能是一个用于弹出层等交互效果的JavaScript插件
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    // 引入H-ui框架的JavaScript脚本文件，用于实现框架相关的交互功能等
    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
    // 引入H-ui.admin框架的JavaScript脚本文件，实现后台管理相关的功能逻辑等
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

    <!--请在下方写此页面业务相关的脚本--> 
    // 引入My97DatePicker日期选择器的脚本文件，可能用于日期相关的输入选择等操作（虽然页面已有HTML5的日期时间输入框，但可能用于兼容等情况）
    <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
    // 引入jQuery验证插件的主文件，用于对表单进行验证，比如必填项验证、格式验证等
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
    // 引入验证插件的扩展验证方法文件，可能包含自定义的验证规则等
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
    // 引入验证插件的中文提示信息文件，用于在验证不通过时显示中文的错误提示消息
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>

    <!--/请在上方写此页面业务相关的脚本-->
</body>
</html>