auto_ai 知识库

Appearance

Web 前端指网页中用户看得见、碰得着的部分，由 HTML（结构）、CSS（样式）、JavaScript（交互）三件套构成。本章系统过一遍 HTML 常用标签、CSS 与 JS 的三种引入方式，并掌握 Bootstrap 3 栅格系统与表单组件——这是后续用 Flask 渲染页面（Flask教程-模板引擎）的前置基础。

Web 前端三件套 ​

技术作用要点
HTML创建网页的结构和内容（标记语言）<p>、<h1>、<img> 等标签定义标题、段落、图像、链接；提供文档语义结构
CSS定义样式、布局和外观选择器 + 属性控制颜色、字体、间距、边框；样式与内容分离便于维护
JavaScript添加交互性和动态效果处理用户输入、改页面内容、动画、请求服务器数据，让网页响应行为

HTML 基础语法 ​

标签语句格式：<xxx attr1='test' attr2='test'>内容</xxx>，其中 attr 为属性、内容为标签所包含的文本。

1. 标题与文本 ​

html
<title>网页标题</title>   <!-- 浏览器标题栏文字 -->
<h1>~<h6>                <!-- 一级到六级标题 -->
<p>段落</p> <br/>        <!-- 段落 / 换行 -->

常用文本标签：&lt;p> 段落、&lt;a> 链接、&lt;ul>/&lt;ol> 无序/有序列表、&lt;li> 列表项、&lt;span> 行内容器、&lt;hr> 水平分割线。

2. 图像与视频 ​

html
<img src="static/img.png" alt="替代文本" width="300" height="200">
<video controls><source src="video.mp4" type="video/mp4"></video>
  • 静态资源放项目 static/ 目录，src 用相对路径引用
  • alt 为替代文本，图像加载失败时显示

3. 链接 ​

html
<a href="https://baidu.com">百度</a>
<a href="https://baidu.com" target="_blank">新窗口打开</a>
<!-- 图像链接：用 img 包在 a 内 -->
<a href="https://github.com/"><img alt="github" src="static/img.png"></a>

4. 表格 ​

html
<table>
  <tr><th>id</th><th>用户名</th><th>邮箱</th><th>操作</th></tr>
  <tr><td>1</td><td>John</td><td>john@gmail.com</td>
      <td><a href="#">编辑</a><a href="#">删除</a></td></tr>
</table>

5. 表单 ​

表单用于收集并提交用户输入数据，四个主要组成部分：输入字段（文本框/密码框/单选/复选/下拉）、标签（label）、按钮（提交/重置）、动作与方法（action 指定提交目标，method 指定 GET/POST）：

html
<form action="submit.js" method="post">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required><br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required><br>
  <input type="submit" value="提交">
</form>

GET vs POST：GET 参数在 URL 中可见（适合查询），POST 数据在请求体中（适合提交敏感/大量数据）。设计表单时按数据敏感性与长度选择。

CSS 的三种使用方式 ​

  1. 内联：标签 style 属性内嵌样式 &lt;p style="color: blue; font-size: 16px;">
  2. 内部：&lt;head> 内 &lt;style> 标签定义规则
  3. 外部：&lt;head> 内 &lt;link rel="stylesheet" href="styles.css"> 引入外部文件（推荐，样式与内容分离）

CSS 规则 = 选择器 + 大括号内的"属性: 值"声明，如 h1 &#123; color: red; font-size: 5em; }。

JavaScript 的三种使用方式 ​

  1. 内联：元素属性中嵌入，如 &lt;button onclick="alert('Hello, World!')">
  2. 内部：&lt;script> 标签在 HTML 内定义函数，onclick 调用
  3. 外部：&lt;script src="script.js">&lt;/script> 引入外部 .js 文件（推荐）

JS 的价值：很多用户操作可以不经过服务器，由浏览器端直接完成交互（本地校验、控件动画、异步加载）。

Bootstrap 前端框架 ​

Bootstrap 是 Twitter 开发的开源前端框架，提供预定义 HTML/CSS/JS 组件，快速构建响应式、一致外观的界面。特性：移动设备优先、主流浏览器支持、容易上手（只需 HTML+CSS 基础）、12 栏栅格布局。

引入方式（教材版本 3.3.7） ​

html
<!-- <head> 中 -->
<link rel="stylesheet" href="static/bootstrap.min.css">
<!-- <body> 尾部，注意 jquery 必须在 bootstrap 之前 -->
<script src="static/jquery.min.js"></script>
<script src="static/bootstrap.min.js"></script>

版本坑：Bootstrap 3 依赖 jQuery，4/5 才不依赖；教材用 3.3.7，4/5 语法有差异，下载别下错版本。

栅格系统 ​

  • 最多 12 列，通过 .row + .col-*-N（如 .col-xs-4）组合创建布局
  • .row 必须包含在 .container（固定宽）或 .container-fluid（100% 宽）中
  • 列总和超过 12 时，多余列自动换行
  • 栅格类按断点分层：.col-xs-*（手机）/.col-sm-*（平板）/.col-md-*（桌面）/.col-lg-*（大屏）

表单组件 ​

使用 .form-group 包裹 label + .form-control 输入控件可获得最佳排列；.form-control 默认 width: 100%；按钮用 .btn 系列类。

html
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

实践建议 ​

  1. 静态资源统一放 static/，用相对路径引用（Flask 默认托管该目录）
  2. 推荐组合：外部 CSS + 外部 JS，与 HTML 分离，维护成本最低
  3. 学习栅格系统去 https://v3.bootcss.com/css/ 实测，直观理解 12 栏布局
  4. 表单是后续 Flask教程-与用户交互 的核心——弄清 GET/POST 区别

一句话总结 ​

前端三件套：HTML 管结构、CSS 管样式、JS 管交互；布局先记 Bootstrap 12 栏栅格（.row + .col-*-N），并记住 Bootstrap 3 依赖 jQuery；静态资源放 static/，表单靠 action/method 区分 GET 与 POST。

相关概念 ​