后端转全栈学习-Day1

学习时间：约 2 小时

1. HTML 是什么

HTML（HyperText Markup Language）不是编程语言，是标记语言。

它的全部工作就是：用标签把内容包起来，告诉浏览器"这是什么"。

html 复制代码

<h1>一级标题</h1>      <!-- 告诉浏览器：这是一级标题 -->
<p>这是一个段落</p>    <!-- 告诉浏览器：这是一个段落 -->
<img src="logo.png" /> <!-- 告诉浏览器：这里有一张图片 -->
<button>点击</button>   <!-- 告诉浏览器：这是一个按钮 -->

HTML 不负责"怎么显示"（那是 CSS 的事），也不负责"怎么交互"（那是 JS 的事）。HTML 只负责声明内容的结构------这是标题，这是段落，这是输入框，这是按钮。

2. HTML 文档结构

一个 HTML 文件的最外层骨架：

html 复制代码

<!DOCTYPE html>                 <!-- 文档类型声明：告诉浏览器这是 HTML5 -->
<html lang="zh-CN">             <!-- 根元素，lang="zh-CN" 表示页面语言是中文 -->
  <head>                        <!-- 配置区：放元数据、标题、引用的 CSS/JS 文件 -->
    <meta charset="UTF-8" />    <!-- 字符编码：不改会导致中文乱码 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                                 <!-- 移动端适配配置 -->
    <title>页面标题</title>       <!-- 浏览器标签栏上显示的文字 -->
  </head>
  <body>                        <!-- 内容区：页面上所有看得见的东西都写在这里 -->
    <div id="app"></div>        <!-- Vue 挂载点 ------ Vue 会把这个 div 替换成整个页面 -->
    <script src="/src/main.js"></script>  <!-- 引入 JS 文件 -->
  </body>
</html>

3. 标签的组成

基本语法

html 复制代码

<!-- 双标签（绝大多数标签都有头有尾）： -->
<标签名 属性1="值1" 属性2="值2">内容</标签名>

<!-- 单标签（自闭合，没有内容）： -->
<标签名 属性1="值1" 属性2="值2" />

<!-- 实际例子 -->
<div class="container" id="main">这里是内容</div>
<input type="text" placeholder="请输入" />

标签的解剖

html 复制代码

<div class="card" id="card1">
  ^                        ^
  |                        |
  起始标签                 结束标签（注意多了一个 /）

中间的 "class='card' id='card1'" 叫属性（attributes）
"class" 叫属性名，"card" 叫属性值

嵌套规则

html 复制代码

<div>
  <span>
    <strong>文字</strong>
  </span>
</div>

规则很简单：先开的标签后关。

html 复制代码

<!-- ❌ 错误：交叉嵌套 -->
<div><span>文字</div></span>

<!-- ✅ 正确：一层包一层，像洋葱 -->
<div><span>文字</span></div>

4. 核心标签大全

按功能分组讲解，看到能认出来就行，不要求一次全记住。

4.1 文档级标签（每个页面只有一个）

标签	用途
`<html>`	根元素，整个页面最外层
`<head>`	配置区，用户看不见
`<body>`	内容区，用户看得见
`<title>`	浏览器标签栏标题
`<meta>`	元数据配置

html 复制代码

<head>
  <meta charset="UTF-8" />                          <!-- 不乱码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />  <!-- 手机适配 -->
  <title>电商平台</title>
</head>

4.2 结构分区标签（块级，独占一行）

块级标签的特点是：独占一行，前后的内容都会换行。

标签	用途
`<div>`	★ 通用容器，最最常用，什么都能装
`<header>`	页头------页面顶部区域（Logo、导航栏）
`<footer>`	页脚------页面底部（版权信息）
`<nav>`	导航区域（菜单链接）
`<main>`	主体内容（每个页面只有一个）
`<section>`	区域/章节------把内容按主题分段
`<article>`	独立的内容块（一篇公告、一条新闻）
`<aside>`	侧边栏 / 附注内容

html 复制代码

<header>
  <nav>
    <a href="/">首页</a>
    <a href="/policies">订单管理</a>
  </nav>
</header>

<main>
  <section>
    <h2>订单列表</h2>
    <p>这里是订单表格...</p>
  </section>
</main>

<footer>
  <p>© 2026 电商平台</p>
</footer>

注意：<div> 和 <section> 在显示效果上没有区别。区别在于语义：<section> 告诉读代码的人"这里的内容围绕同一个主题"。对于你自己做项目，先用 <div> 完全没问题，以后熟悉了再换语义标签。

4.3 文本标签（行内，不换行）

行内标签的特点是：从左到右排列，不会换行。

标签	用途
`<h1>` ~ `<h6>`	标题，h1 最大（每页只用一个），h6 最小
`<p>`	段落
`<span>`	★ 通用行内容器，不换行
`<strong>`	加粗（表示重要的内容）
`<em>`	斜体（表示强调）
`<a href="...">`	★ 超链接------核心功能
`<br />`	强制换行（不要用它来制造间距！）
`<hr />`	水平分割线

html 复制代码

<h1>电商平台</h1>
<h2>订单管理</h2>

<p>这是一个段落，包含一段完整的文字。</p>

<span>这是一段行内文字，不会换行。</span>
<strong>重要提示</strong>

<a href="https://www.baidu.com">点我去百度</a>
<a href="/policies/1001">查看订单详情</a>
<a href="/help" target="_blank">新标签打开帮助页</a>

4.4 列表标签

html 复制代码

<!-- 无序列表（圆点符号） -->
<h3>清单：</h3>
<ul>
  <li>清单1</li>
  <li>清单2</li>
  <li>清单3</li>
</ul>

<!-- 有序列表（数字编号） -->
<h3>操作步骤：</h3>
<ol>
  <li>登录系统</li>
  <li>选择订单</li>
  <li>提交退款申请</li>
</ol>

4.5 表格标签

html 复制代码

<table>
  <thead>           <!-- 表头 -->
    <tr>            <!-- 行（table row） -->
      <th>订单号</th>  <!-- 表头单元格（table header），自动加粗居中 -->
      <th>商家</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>           <!-- 表体 -->
    <tr>
      <td>P001</td> <!-- 普通单元格（table data） -->
      <td>英伟大</td>
      <td>已通过</td>
    </tr>
    <tr>
      <td>P002</td>
      <td>特斯夯</td>
      <td>待审核</td>
    </tr>
  </tbody>
</table>

表格结构：<table> → <thead> + <tbody> → <tr> → <th> / <td>

4.6 表单标签（★★★ 最重要）

html 复制代码

<form action="/login" method="POST">
  <!-- label：输入框的标签文字 -->
  <label for="phone">手机号：</label>

  <!-- 文本输入 ------ 最最常用 -->
  <input type="text" id="phone" name="phone" placeholder="请输入手机号" />

  <!-- 密码输入 -->
  <input type="password" name="password" placeholder="请输入密码" />

  <!-- 数字输入 -->
  <input type="number" name="age" min="0" max="150" />

  <!-- 日期选择 -->
  <input type="date" name="birthday" />

  <!-- 下拉选择框 -->
  <select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
  </select>

  <!-- 多行文本 -->
  <textarea name="remark" rows="4" cols="50"></textarea>

  <!-- 按钮 ------ 用 <button> 不用 <input type="submit"> -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button" onclick="cancel()">取消</button>

  <!-- 复选框（多选） -->
  <input type="checkbox" name="hobby" value="coding" /> 编程
  <input type="checkbox" name="hobby" value="reading" /> 阅读

  <!-- 单选框（单选） -->
  <input type="radio" name="gender" value="male" /> 男
  <input type="radio" name="gender" value="female" /> 女

  <!-- 隐藏字段（用户看不见，但提交时会带上） -->
  <input type="hidden" name="userId" value="12345" />
</form>

你项目中的应用（登录页的表单部分）：

html 复制代码

<el-form ...>
  <el-form-item prop="phone">
    <el-input v-model="pwdForm.phone" placeholder="手机号" />
  </el-form-item>
  <el-form-item prop="password">
    <el-input v-model="pwdForm.password" type="password" placeholder="密码" />
  </el-form-item>
  <el-button @click="handlePwdLogin">登 录</el-button>
</el-form>

虽然这里用了 Element Plus 的 <el-form> / <el-input>，但浏览器最终渲染的还是 <form> / <input>。Element Plus 只是帮你封装了样式和行为。

4.7 媒体标签

html 复制代码

<!-- 图片（★★★ 非常常用） -->
<img src="/logo.png" alt="Logo" />
<!-- src：图片路径；alt：图片加载失败时显示的文字 -->

<!-- 图片验证码（你项目登录页用了） -->
<img :src="captchaImage" alt="点击刷新验证码" />

4.8 代码和引用

html 复制代码

<!-- 行内代码 -->
<p>在 Java 中，用 <code>System.out.println()</code> 打印日志。</p>

<!-- 代码块（保留空格和换行） -->
<pre>
public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello");
    }
}
</pre>

<!-- 引用 -->
<blockquote>
  <p>保险是转移风险的金融工具。------ 某位保险学家</p>
</blockquote>

5. 属性详解

5.1 全局属性（几乎所有标签都能用）

属性	用途	说明
`id`	唯一标识	一个页面中每个 id 只能用一次，就像身份证号
`class`	样式分类	多个元素可以用相同的 class，像标签分类
`style`	行内 CSS 样式	直接写在标签里，少量用可以，多了应该写到 CSS 文件
`title`	鼠标悬停提示	鼠标放上去就会显示这段文字
`data-*`	自定义数据	以 `data-` 开头，后面自己起名
`hidden`	隐藏元素	写了就隐藏，不写就显示

html 复制代码

<div id="policy-1001" class="card highlight" style="color: red" title="订单详情">
  订单内容...
</div>

5.2 表单常用属性

属性	取值示例	说明
`type`	`text`, `password`, `number`, `email`, `date`, `checkbox`, `radio`, `hidden`, `file`	输入框类型
`name`	`phone`, `password`	提交到后端时的字段名
`value`	`13800138000`	输入框的当前值
`placeholder`	`请输入手机号`	输入框里的占位提示文字
`required`	（不需要赋值，写了就生效）	必填
`disabled`	（不需要赋值）	禁用，不能输入也不能提交
`readonly`	（不需要赋值）	只读，不能改但可以提交
`maxlength`	`11`	最多能输几个字
`min` / `max`	`0` / `150`	数字或日期的范围
`pattern`	`[0-9]{11}`	正则校验

html 复制代码

<input
  type="text"
  name="phone"
  placeholder="请输入手机号"
  required
  maxlength="11"
/>

5.3 布尔属性

写了就生效，不写就不生效，不需要给值：

html 复制代码

<input disabled />      <!-- 禁用状态 -->
<input required />      <!-- 必填 -->
<input readonly />      <!-- 只读 -->
<input checked />       <!-- 复选框默认选中 -->
<option selected />     <!-- 下拉框默认选中 -->

6. 语义化 HTML

"语义化"就是用合适的标签放合适的内容 ，而不是什么东西都用 <div>。

html 复制代码

<!-- ❌ 不推荐：全是 div -->
<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
  </div>
</div>
<div class="main">
  <div class="section">内容...</div>
</div>

<!-- ✅ 推荐：用语义标签 -->
<header>
  <nav>
    <a href="/">首页</a>
  </nav>
</header>
<main>
  <section>内容...</section>
</main>

为什么语义化重要？

代码可读性 ------ 看到 <nav> 就知道是导航，不用看 class 名
SEO ------ 搜索引擎会优先读 <main> 里的内容
无障碍 ------ 屏幕阅读器会根据标签辅助残障人士浏览

刚开始先用 <div> 完全没问题，先把功能跑通，语义化后面慢慢加。

7. HTML + Vue 模板

在你的项目里，.vue 文件的 <template> 是基于 HTML 的。Vue 在原生 HTML 之上加了几个扩展语法（第 11 天会系统学，今天先混个眼熟）：

Vue 指令速览

写法	用途	示例
`:属性名`	属性值从 JS 变量取	`<img :src="captchaImage" />`
`v-model`	输入框和 JS 数据双向同步	`<input v-model="phone" />`
`v-for`	循环渲染列表	`<tr v-for="item in list" />`
`v-if`	条件显示/隐藏	`<span v-if="status === 'APPROVED'" />`
`@事件`	绑定事件处理	`<button @click="handleLogin" />`

Element Plus 组件标签

你的项目大量使用 Element Plus，组件标签以 el- 开头：

组件标签	说明
`<el-row>` `<el-col>`	布局容器（行和列）
`<el-form>` `<el-form-item>`	表单（带校验、布局）
`<el-input>`	输入框
`<el-button>`	按钮
`<el-table>` `<el-table-column>`	表格
`<el-dialog>`	弹窗
`<el-card>`	卡片容器
`<el-tabs>` `<el-tab-pane>`	选项卡
`<el-tag>`	标签徽章

第 17-19 天会系统学 Element Plus。今天先知道"以 el- 开头的是 Element Plus 的组件"就行了。

8. DevTools 实战

浏览器 DevTools 是你的前端调试工具。

打开方式

系统	快捷键
Windows	`F12` 或 `Ctrl + Shift + I`
Mac	`Cmd + Option + I`

Elements 面板

打开后默认就在 Elements 面板，你可以看到：

左侧：当前页面的完整 HTML 树，可以展开/折叠
右侧：选中元素的 CSS 样式

常用操作

选中元素：点击左上角的箭头图标（🖱️），再点击页面上的任意元素

编辑文字：在 Elements 面板双击任何文字 → 直接修改 → 回车生效

查看结构 ：展开 <div id="app">，看看 Vue 渲染出了什么 HTML

9. 项目实战分析

登录页 HTML 结构逐行解读

html 复制代码

<!-- el-row = Element Plus 的行容器 -->
<!-- justify="center" 水平居中，align="middle" 垂直居中 -->
<!-- style 里写了 min-height: 100vh（占满整个屏幕高度）和渐变色背景 -->
<el-row justify="center" align="middle"
        style="min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">

  <!-- el-col = 列容器，:span="6" = 占 6/24 宽度（≈ 25%） -->
  <el-col :span="6">

    <!-- el-card = 卡片容器（带阴影、圆角、白色背景） -->
    <el-card shadow="always" style="padding: 20px">

      <!-- h2 = 二级标题，style 控制居中显示 -->
      <h2 style="text-align: center; margin-bottom: 24px">商业险管理平台</h2>

      <!-- el-tabs = 选项卡，v-model="activeTab" 绑定当前选中的是哪个 -->
      <el-tabs v-model="activeTab" stretch>
        <el-tab-pane label="密码登录" name="pwd">
          <!-- 密码登录表单：手机号 + 密码 + 验证码 + 登录按钮 -->
        </el-tab-pane>
        <el-tab-pane label="短信登录" name="sms">
          <!-- 短信登录表单：手机号 + 短信验证码 + 登录按钮 -->
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </el-col>
</el-row>

结构树（便于理解嵌套关系）：

复制代码

el-row（全屏居中背景）
  └─ el-col（居中列，宽25%）
       └─ el-card（白色卡片）
            ├─ h2（标题：商业险管理平台）
            └─ el-tabs（两个选项卡）
                 ├─ el-tab-pane（密码登录）
                 │    └─ el-form（手机号+密码+验证码+登录按钮）
                 └─ el-tab-pane（短信登录）
                      └─ el-form（手机号+短信验证码+获取验证码+登录按钮）

10. 练习

练习 1（初级）：认识标签

打开项目登录页，用 DevTools（F12）找到以下标签各一个：

练习 2（中级）：自己写一个页面

在项目目录下新建 test.html，用 VS Code 写：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>我的第一个页面</title>
</head>
<body>
  <h1>欢迎来到电商平台</h1>
  <p>这是我的第一个 HTML 页面</p>
  <a href="https://www.baidu.com">点我去百度</a>
  <br /><br />
  <img src="https://via.placeholder.com/200x100" alt="示例图片" />
  <br /><br />
  <button onclick="alert('你好！')">点我</button>
</body>
</html>

用浏览器双击打开这个文件，看看效果。然后试着改一改。

11. 常见陷阱

陷阱 1：忘记闭合标签

html 复制代码

<!-- ❌ 没闭合，页面布局会乱 -->
<div>内容
<!-- ✅ 正确 -->
<div>内容</div>

VS Code 会自动帮你补全闭合标签。如果页面布局乱了，90% 是标签没闭合。

陷阱 2：id 重复

html 复制代码

<!-- ❌ 一个页面不能有两个相同的 id -->
<div id="main">A</div>
<div id="main">B</div>
<!-- ✅ id 必须唯一 -->
<div id="main">A</div>
<div id="secondary">B</div>

id 是唯一的，class 可以重复使用。记住：id = 身份证号（唯一），class = 标签分类（可共享）。

陷阱 3：该用 class 却用了 id

html 复制代码

<!-- ❌ 三个卡片用了三个不同的 id ------ 不对，它们是一类东西 -->
<div id="card1">卡片1</div>
<div id="card2">卡片2</div>
<div id="card3">卡片3</div>
<!-- ✅ 用 class，因为它们是同一类 -->
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>

陷阱 4：用 `<br>` 来制造间距

html 复制代码

<!-- ❌ 不推荐：用换行来撑间距 -->
<div>第一行</div>
<br /><br /><br />
<div>第二行</div>
<!-- ✅ 正确：用 CSS margin -->
<div style="margin-bottom: 30px;">第一行</div>
<div>第二行</div>

附：HTML 标签速查表

复制代码

文档结构：<!DOCTYPE html>, <html>, <head>, <body>, <title>, <meta>

分区标签：<div>, <section>, <article>, <nav>, <aside>, <header>, <footer>, <main>

标题标签：<h1> <h2> <h3> <h4> <h5> <h6>

文本标签：<span>, <p>, <a>, <strong>, <em>, <br>, <hr>, <code>, <pre>

列表标签：<ul>, <ol>, <li>

表格标签：<table>, <thead>, <tbody>, <tr>, <th>, <td>

表单标签：<form>, <input>, <textarea>, <select>, <option>, <button>, <label>

媒体标签：<img>, <video>, <audio>

后端转全栈学习-Day1