旅游推荐系统（login.html)

html 复制代码
<!DOCTYPE html>
<!-- 声明文档类型为HTML5，告诉浏览器这是一个现代的HTML文档 -->

<html lang="en">
<!-- HTML文档的根元素，lang="en"表示页面主要内容是英文 -->

<head>
  <!-- head部分包含页面的元数据，不会直接显示在页面上 -->
  
  <meta charset="utf-8">
  <!-- 设置字符编码为UTF-8，确保中文能正确显示，避免乱码问题 -->
  
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <!-- 视口设置，让页面在移动设备上正确缩放
       width=device-width：宽度等于设备宽度
       initial-scale=1.0：初始缩放比例为1.0 -->

  <title>{% block  title %}登录{% endblock %}</title>
  <!-- 页面标题，显示在浏览器标签页上
       {% block title %}是Django模板标签，表示这个区域可以被继承的子模板覆盖
       默认内容是"登录" -->

  <meta content="" name="description">
  <!-- 页面描述，用于SEO搜索引擎优化，这里为空 -->
  
  <meta content="" name="keywords">
  <!-- 页面关键词，用于SEO，这里为空 -->

  <!-- Favicons -->
  <!-- 网站图标和字体加载区域 -->
  
  <link href="https://fonts.gstatic.com" rel="preconnect">
  <!-- 预连接到Google字体服务器，加快字体加载速度 -->
  
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
  <!-- 加载Google字体：Open Sans、Nunito、Poppins三种字体，支持多种粗细和斜体样式 -->
  
  <link href="/static/img/favicon.png" rel="icon">
  <!-- 网站图标，显示在浏览器标签页上的小图标，路径为/static/img/favicon.png -->
  
  <link href="/static/img/apple-touch-icon.png" rel="apple-touch-icon">
  <!-- 苹果设备专用图标，当用户将网站添加到主屏幕时显示 -->
  
  <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- 加载Bootstrap CSS框架的压缩版，用于页面布局和样式 -->
  
  <link href="/static/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <!-- 加载Bootstrap图标库，提供各种图标 -->
  
  <link href="/static/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <!-- 加载Boxicons图标库，另一种图标样式 -->
  
  <link href="/static/vendor/quill/quill.snow.css" rel="stylesheet">
  <!-- 加载Quill富文本编辑器的Snow主题样式 -->
  
  <link href="/static/vendor/quill/quill.bubble.css" rel="stylesheet">
  <!-- 加载Quill富文本编辑器的Bubble主题样式 -->
  
  <link href="/static/vendor/remixicon/remixicon.css" rel="stylesheet">
  <!-- 加载Remix Icon图标库 -->
  
  <link href="/static/vendor/simple-datatables/style.css" rel="stylesheet">
  <!-- 加载Simple Datatables表格插件的样式，用于数据表格展示 -->
  
  <link href="/static/css/style.css" rel="stylesheet">
  <!-- 加载项目自定义的CSS样式，覆盖或补充框架样式 -->
</head>

<body>
  <!-- body部分是页面的主体内容，用户能看到的所有东西都写在这里 -->
  
  <main style="background:url('https://img1.baidu.com/it/u=2571995243,1755597314&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800');background-repeat:no-repeat;background-size:cover">
    <!-- main标签定义文档的主要内容区域
         style内联样式设置背景图片：
         - background:url() 设置背景图片URL，这是一张从百度图片加载的风景图
         - background-repeat:no-repeat 防止背景图片重复平铺
         - background-size:cover 让背景图片覆盖整个容器，可能裁剪部分图片 -->
    
    <div class="container" >
      <!-- Bootstrap容器类，提供响应式固定宽度的容器，居中显示内容 -->

      <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
        <!-- section定义页面中的区域
             class属性多个值：
             - section：自定义样式类
             - register：注册/登录页专用样式
             - min-vh-100：最小高度为视口高度的100%
             - d-flex：启用flex布局
             - flex-column：flex方向为列（垂直排列）
             - align-items-center：交叉轴居中（水平居中）
             - justify-content-center：主轴居中（垂直居中）
             - py-4：上下内边距为4个Bootstrap单位 -->
        
        <div class="container">
          <!-- 内层容器 -->
          
          <div class="row justify-content-center">
            <!-- row表示一行，justify-content-center让这一行的内容水平居中 -->
            
            <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">
              <!-- 列定义响应式布局：
                   col-lg-4：大屏设备占4列（共12列，约1/3宽度）
                   col-md-6：中屏设备占6列（一半宽度）
                   d-flex等：让这一列的内容也居中显示 -->

              <div class="d-flex justify-content-center py-4">
                <!-- 放置Logo的区域，居中显示，上下内边距4 -->
                
                <a href="index.html" class="logo d-flex align-items-center w-auto">
                  <!-- 链接指向首页，logo样式类 -->
                  
                  <img src="assets/img/logo.png" alt="">
                  <!-- 网站Logo图片，alt为空表示纯装饰图片 -->
                  
                  <span class="d-none d-lg-block">文旅数据分析推荐系统</span>
                  <!-- 网站名称文本，d-none d-lg-block表示在小屏隐藏，大屏显示 -->
                </a>
              </div><!-- End Logo -->
              <!-- HTML注释，标记Logo部分结束 -->
              
              {% block  content %}
              <!-- Django模板标签，定义名为content的块，子模板可以覆盖这个区域 -->
              
              <div class="card mb-3">
                <!-- 卡片组件，Bootstrap的卡片样式，mb-3表示下边距3 -->
                
                <div class="card-body">
                  <!-- 卡片主体内容 -->
                  
                  <div class="pt-4 pb-2">
                    <!-- 上下内边距，pt-4上边距4，pb-2下边距2 -->
                    
                    <h5 class="card-title text-center pb-0 fs-4">登录您的用户</h5>
                    <!-- 卡片标题，居中显示，下边距0，字体大小4 -->
                    
                    <p class="text-center small">输入用户名和密码</p>
                    <!-- 提示文字，居中，small小号字体 -->
                  </div>
                  
                  <form method="POST" action="{% url 'login' %}" class="row g-3 needs-validation" novalidate>
                    <!-- 表单元素：
                         method="POST"：使用POST方法提交，适合登录这种敏感信息
                         action="{% url 'login' %}"：提交到名为login的URL，Django模板标签反向解析
                         class="row g-3"：Bootstrap行样式，g-3表示间距
                         needs-validation：启用Bootstrap验证样式
                         novalidate：禁用浏览器默认验证，使用自定义验证 -->
                    
                    <div class="col-12">
                      <!-- 占12列（整行） -->
                      
                      <label for="yourUsername" class="form-label">用户名</label>
                      <!-- 标签，for关联到输入框的id -->
                      
                      <div class="input-group has-validation">
                        <!-- 输入组，has-validation表示包含验证功能 -->
                        
                        <input type="text" name="username" class="form-control" id="yourUsername" required>
                        <!-- 文本输入框：
                             type="text"：文本类型
                             name="username"：字段名，后端通过这个名字获取数据
                             class="form-control"：Bootstrap表单控件样式
                             id="yourUsername"：被label的for属性关联
                             required：必填字段，浏览器会检查是否为空 -->
                        
                        <div class="invalid-feedback">请输入您的用户名</div>
                        <!-- 验证失败时显示的提示信息，配合needs-validation使用 -->
                      </div>
                    </div>
                    
                    <div class="col-12">
                      <!-- 占12列（整行） -->
                      
                      <label for="yourPassword" class="form-label">密码</label>
                      <!-- 密码标签 -->
                      
                      <input type="password" name="password" class="form-control" id="yourPassword" required>
                      <!-- 密码输入框：
                           type="password"：密码类型，输入内容会显示为圆点 -->
                      
                      <div class="invalid-feedback">请输入您的密码</div>
                      <!-- 密码验证失败提示 -->
                    </div>
                    
                    <div class="col-12">
                      <!-- 占12列（整行） -->
                      
                      <div class="form-check">
                        <!-- 复选框容器 -->
                        
                        <input class="form-check-input" type="checkbox" name="remember" value="true" id="rememberMe">
                        <!-- 复选框：
                             type="checkbox"：复选框类型
                             name="remember"：字段名
                             value="true"：选中时提交的值为true
                             id="rememberMe"：关联标签 -->
                        
                        <label class="form-check-label" for="rememberMe">记住我</label>
                        <!-- 复选框标签 -->
                      </div>
                    </div>
                    
                    <div class="col-12">
                      <!-- 占12列（整行） -->
                      
                      <button class="btn btn-primary w-100" type="submit">登录</button>
                      <!-- 提交按钮：
                           btn：按钮基础样式
                           btn-primary：蓝色主题按钮
                           w-100：宽度100%
                           type="submit"：点击后提交表单 -->
                    </div>
                    
                    <div class="col-12">
                      <!-- 占12列（整行） -->
                      
                      <p class="small mb-0">还没有账号? <a href="{% url 'register' %}">创建账号</a></p>
                      <!-- 注册链接：
                           small：小号字体
                           mb-0：下边距0
                           href="{% url 'register' %}"：链接到注册页面，使用Django反向解析 -->
                    </div>
                  </form>
                </div>
              </div>
    </div>
              {% endblock %}
              <!-- content块结束 -->
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  <!-- main标签结束 -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
  <!-- 返回顶部按钮：
       href="#"：点击后回到页面顶部
       back-to-top：自定义样式
       d-flex等：居中显示
       bi-arrow-up-short：Bootstrap图标，向上的箭头 -->
</body>
</html>
<!-- HTML文档结束 -->
上述代码是一个基于Django模板的登录页面HTML文件，主要实现以下功能：
页面结构方面，它构建了一个带有风景背景图的登录界面，包含网站Logo、系统名称"文旅数据分析推荐系统"以及完整的登录表单。
用户交互方面，表单收集用户名和密码，提供"记住我"复选框，并在底部提供注册链接。表单采用POST方法提交，数据会发送到Django后端进行验证。
技术特点方面，使用了Bootstrap框架实现响应式布局，确保在不同设备上都能正常显示。通过Django模板标签{% block %}实现了页面模板的继承和扩展，用{% url %}反向解析登录和注册的URL地址。
样式资源方面，页面加载了多种字体、图标库和CSS文件，保证了界面的美观性和用户体验。
基础模板（父模板）

您刚才看的登录页面其实是一个"子模板"，它继承自某个基础模板。
{% block %}标签 就是在告诉Django：这里是一个可被替换的区域。