黑马前端 2024 · 教程站

主题

HTML 进阶（四） ​

本页对应 HTML 进阶，共 6 段视频，约 43 分钟。

学习目标 ​

  • 能准确选用 header、nav、aside、section、footer 等语义化标签搭建典型网页结构，并说明各标签对应的页面区域。
  • 能使用  、<、> 等字符实体在页面中正确显示空格及尖括号，并通过浏览器预览验证显示效果。
  • 能独立使用 ul、li、img、h3 完成“体育新闻列表”案例，页面结构清晰且图片、标题与列表项对应正确。
  • 能独立使用 form、input、label、select、option、textarea、checkbox、radio、button 完成“注册信息”页面，并验证输入、选择、重置等基本交互有效。
  • 能根据效果图判断各区域应使用的 HTML 标签和表单控件类型，并按先搭结构、再填内容的步骤完成页面编写。
  • 能使用 VS Code 常用快捷键完成新建文件、复制行、移动行、注释、保存等操作，并在编码过程中实际演示。

知识点 ​

页面效果与完整结构 ​

本节完成“注册信息”综合案例，主要练习各种表单控件。页面效果如下：

注册信息页面效果

为什么需要：注册页信息多，必须先用标题分区，再用 form 统一包住表单控件。
怎么想：先写 h1 注册信息，再用 h2 分“个人信息、教育经历、工作经历”；表单控件先逐个写，最后套 form 也可以。
怎么做：保留下面完整结构，课堂调试时可以先写 h1、h2，再复制相同结构改文字，提高速度。
易错点：form 的 action 可先留空；标题层级要统一，h2 分区标题不要和 h1 混用。

html
<h1>注册信息</h1>
<form action="">
  <!-- 表单控件 -->
  <!-- 个人信息 -->
  <h2>个人信息</h2>
  <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
  <br><br>
  <label>密码：</label><input type="password" placeholder="请输入密码">
  <br><br>
  <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
  <br><br>
  <label>性别：</label>
  <label><input type="radio" name="gender"> 男</label>
  <label><input type="radio" name="gender" checked> 女</label>
  <br><br>
  <label>居住城市：</label>
  <select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <option>武汉</option>
  </select>
  <!-- 教育经历 -->
  <h2>教育经历</h2>
  <label>最高学历：</label>
  <select>
    <option>博士</option>
    <option>硕士</option>
    <option>本科</option>
    <option>大专</option>
  </select>
  <br><br>
  <label>学校名称：</label><input type="text">
  <br><br>
  <label>所学专业：</label><input type="text">
  <br><br>
  <label>在校时间：</label>
  <select>
    <option>2015</option>
    <option>2016</option>
    <option>2017</option>
    <option>2018</option>
  </select>
  --
  <select>
    <option>2019</option>
    <option>2020</option>
    <option>2021</option>
    <option>2022</option>
  </select>
  <!-- 工作经历 -->
  <h2>工作经历</h2>
  <label>公司名称：</label><input type="text">
  <br><br>
  <label>工作描述：</label>
  <br>
  <textarea></textarea>
  <br><br>
  <!-- 协议 和 按钮 -->
  <input type="checkbox"><label>已阅读并同意以下协议：</label>
  <ul>
    <li><a href="#">《用户服务协议》</a></li>
    <li><a href="#">《隐私政策》</a></li>
  </ul>
  <br><br>
  <button>免费注册</button>
  <button type="reset">重新填写</button>
</form>

个人信息区 ​

为什么需要：姓名、密码、确认密码、性别、城市是注册页最常用控件。
怎么想：文字输入用 text，密码用 password；性别是单选，必须用 radio；城市选项多用 select。
怎么做：用 label 包住文字，点击“姓名：”也能聚焦输入框；密码框加 placeholder；两个性别 radio 的 name 写成相同值，课堂调试时点击男女测试是否只能选一个；checked 可默认选中“女”。
易错点：两个 radio 的 name 不同会变成两个独立单选框；密码框不要误写 text；placeholder 是提示文字，不是默认值。

教育经历区 ​

为什么需要：教育经历包含学历、学校、专业、在校时间，控件类型不同。
怎么想：最高学历和年份用下拉 select，学校名称、专业用文本框；在校时间用两个下拉中间加“--”表示起止。
怎么做：先写一个 select，里面放 option，再复制改内容；文本框可直接复制学校名称结构，改 label 文字。
易错点：select 里必须写 option；两个年份下拉不要漏掉中间分隔；复制后记得改文字，避免两个“学校名称”。

工作经历区 ​

为什么需要：工作描述可能多行，不能用单行文本框。
怎么想：公司名称用 text，工作描述用 textarea。
怎么做：复制“学校名称”一行改成“公司名称”；“工作描述”后换行写 textarea，需要多行时可在内容中加换行。
易错点：textarea 不是 input；标签名不要写成“文本玉”等同音错字，正确是文本域 textarea。

协议与按钮 ​

为什么需要：注册前要确认协议，并提供提交与重置操作。
怎么想：同意协议用复选框 checkbox；协议条目用无序列表 ul>li>a；免费注册用提交按钮，重新填写用重置按钮。
怎么做：checkbox 默认不选中；按钮写 <button>免费注册</button>，重置写 <button type="reset">重新填写</button>。课堂调试时填写内容后点“重新填写”，能复原说明重置成功。
易错点：复选框不要误写成 radio；重置按钮的 type 是 reset，不是 rescent；提交按钮可写 type="submit"，不写时按默认提交理解。

调试与检查清单 ​

为什么需要：表单控件多，容易漏标签、漏换行、漏相同 name。
怎么想：按“标题分区→控件类型→文字提示→换行间距→测试交互”检查。
怎么做：先看页面结构是否完整，再点 label 是否聚焦、单选是否互斥、下拉是否可选、重置是否复原；间距先用 <br><br> 调整。
易错点：label 嵌套层级不要乱；select、textarea、checkbox 的单词要写对；忘记用 form 包住表单控件会导致后续提交不便。

本节要解决的问题 ​

这节笔记看起来只是“VSCode 常用快捷键”表格，但真正要练的是：写 HTML 结构时，如何用快捷键减少重复劳动、保持层级清楚。转写稿里反复强调“先认识，忘了回来查”“能复制就复制，改改更快”“自己亲自敲一遍记忆更好”，所以下面不要求死背，而是把快捷键放进本节 dl/dt/dd 代码里理解。转写稿中把 HTML 说成“AT码”、把 shift+alt 说成“shift out”，这里按正确写法纠正。

基础编辑：复制、粘贴、剪切、保存 ​

为什么需要：写列表、表单时大量内容是重复的，手打容易错。
怎么想：先写一个正确样本，再复制、粘贴、改文字。
怎么做：ctrl+c 复制，ctrl+v 粘贴，ctrl+x 剪切，ctrl+s 保存。转写稿案例里就是“先写第一个小 li，再复制”，不要一开始写三个再逐个改。
易错点：复制后忘记改文字，出现重复内容；改完不按 ctrl+s，页面看不到最新效果。

行操作：上移一行、快速复制一行 ​

为什么需要：调整 dd 顺序、复制多个链接项时，拖鼠标容易乱。
怎么想：当前行要移动就用“上移”，要新增相似行就用“快速复制一行”。
怎么做：alt+上箭头 上移一行；shift+alt+下箭头 快速复制一行。比如写 <dd><a href="#">手机</a></dd> 后，用 shift+alt+下箭头 复制出多行，再把“手机”改成“电视、笔记本、平板”。
易错点：shift+alt+下箭头 是复制当前行，不是移动；复制后要检查标签是否闭合。

缩进：tab 与 shift+tab ​

为什么需要：HTML 靠缩进表达层级，父子关系清楚，调试时一眼能看出 dt 和 dd 属于哪个 dl。
怎么想：往里一层用 tab，往外一层用 shift+tab。笔记注释也写了：tab 往右缩进 2 个空格，shift+tab 往左缩进 2 个空格。
怎么做：选中多行 dd，按 tab 整体右移；按 shift+tab 整体左移。
易错点：只缩进一行导致层级乱；缩进不是语义，别把缩进当成标签嵌套本身。

批量修改：ctrl+d ​

为什么需要：多个重复文字要一起改，比如多个“联系我们”或统一链接文字。
怎么想：先选中一个词，再连续按 ctrl+d 选中下一个相同内容，一起修改。
怎么做：双击选中文字，按 ctrl+d 增加选择，再输入新文字。
易错点：选多了会误改其他位置；改完要检查每个 dd 的文字是否仍然合理。

用本节代码串起来 ​

下面代码保留原笔记内容。写的时候可先写一个 dl，用 shift+alt+下箭头 复制 dd，用 tab/shift+tab 调层级，用 ctrl+d 批量改重复文字。

html
<!--       > 父子关系    + 兄弟关系 -->
<dl>
  <dt>选购指南</dt>
  <dd><a href="#">手机</a></dd>
  <dd><a href="#">电视</a></dd>
  <dd><a href="#">笔记本</a></dd>
  <dd><a href="#">平板</a></dd>
</dl>

<dl>
  <dt>选购指南</dt>
  <dd><a href="#">服务中心</a></dd>
  <dd><a href="#">申请售后</a></dd>
  <dd><a href="#">售后政策</a></dd>
  <dd><a href="#">维修服务</a></dd>
</dl>

<dl>
  <dt>关注我们</dt>
  <dd><a href="#">新浪微博</a></dd>
  <dd><a href="#">官方微信</a></dd>
  <dd><a href="#">联系我们</a></dd>
  <dd><a href="#">联系我们</a></dd>
</dl>

<!-- shift + tab  往左缩进2个空格 -->
<!-- tab  往右缩进2个空格 -->

易错点汇总 ​

快捷键不要死背，先知道“有这个东西”，忘了查笔记；真正写代码时按“先写一个样本→复制→改文字→调缩进→保存预览”的顺序练。ctrl+d 是批量选相同内容，不是复制；shift+alt+下箭头 是复制行；alt+上箭头 才是移动行。转写稿里说“今天定位是认识，忘了回来查”，快捷键也一样，用多了自然熟。

课件图示 ​

课件第8页：练习 完成以下效果 四大名著 《水浒传》 《水浒传》是中国历史上第一部用古白话文

课件第18页：作用：收集用户信息。 使用场景： • 登录页面 • 注册页面 • 搜索区域 表单

课件图示（PPTX） ​

day02 课件图

day02 课件图

day02 课件图

day02 课件图

代码示例 ​

示例一：综合案例二 · 注册信息表单 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>注册信息</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; font-size: 14px; }
    form { width: 560px; margin: 0 auto; }
    h1 { text-align: center; }
    h2 { font-size: 16px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
    label { margin-right: 6px; }
    input[type="text"], input[type="password"] { width: 180px; }
    textarea { width: 320px; height: 80px; }
    button { padding: 4px 16px; margin-right: 12px; }
  </style>
</head>
<body>
  <h1>注册信息</h1>
  <form action="">
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    <label>密码：</label><input type="password" placeholder="请输入密码">
    <br><br>
    <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
    <br><br>
    <label>性别：</label>
    <label><input type="radio" name="gender"> 男</label>
    <label><input type="radio" name="gender" checked> 女</label>
    <br><br>
    <label>居住城市：</label>
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>

    <!-- 教育经历 -->
    <h2>教育经历</h2>
    <label>最高学历：</label>
    <select>
      <option>博士</option>
      <option>硕士</option>
      <option>本科</option>
      <option>大专</option>
    </select>
    <br><br>
    <label>学校名称：</label><input type="text">
    <br><br>
    <label>所学专业：</label><input type="text">
    <br><br>
    <label>在校时间：</label>
    <select>
      <option>2015</option>
      <option>2016</option>
      <option>2017</option>
      <option>2018</option>
    </select>
    --
    <select>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>

    <!-- 工作经历 -->
    <h2>工作经历</h2>
    <label>公司名称：</label><input type="text">
    <br><br>
    <label>工作描述：</label>
    <br>
    <textarea></textarea>
    <br><br>

    <!-- 协议 和 按钮 -->
    <input type="checkbox"><label>已阅读并同意以下协议：</label>
    <ul>
      <li><a href="#">《用户服务协议》</a></li>
      <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
</body>
</html>

要点与易错点：

  • form 要把所有表单控件包起来（转写稿：“按道理这个表单应该被 form 包起来”），标题 h1、h2 放不放在 form 里都可以。
  • 标题层级要统一：h1 是“注册信息”，三个分栏标题“个人信息 / 教育经历 / 工作经历”都用 h2，不要一个 h2 一个 h3，否则大小不一致。
  • 文本框、密码框靠 type 区分：type="text" 和 type="password"；placeholder 是输入框里的灰色提示文字，是重点要记的属性。
  • 单选框必须同 name（这里都是 name="gender"）才能互斥，否则男女可以同时选中；checked 给“女”做默认选中。
  • button 不写 type 时默认是提交按钮；“重新填写”必须写 type="reset"，点了才能把表单恢复成初始状态（转写稿现场演示过）。
  • 易错点：这里 <label>姓名：</label><input> 是分开写的，没写 for/id，所以点“姓名”这两个字不会自动聚焦到输入框；想实现点击聚焦必须 for="id" 对应。
  • 易错点：换行用的是 <br><br>，间距先这么凑合，真正调整上下边距要等学了 CSS 再用 margin/padding，不要用一堆 <br> 硬撑。
  • textarea 是多行文本域（工作描述），select+option 是下拉菜单，转写稿特别说明下拉菜单样式难调、实际开发常改用 div 模拟，先会用就行。

示例二：字符实体（空格与尖括号） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>字符实体</title>
</head>
<body>
  <!-- 1. 空格：直接敲空格不管用，用 &nbsp; -->
  <p>&nbsp;&nbsp;&nbsp;&nbsp;这里开头空了四格，用的是 &nbsp; 加英文分号。</p>

  <!-- 2. 小于号、大于号：直接写尖括号会被当成标签解析 -->
  <p>我要在页面上显示一个段落标签：&lt;p&gt; 这是一个段落 &lt;/p&gt;</p>

  <!-- 3. 对比：这样写浏览器会直接解析成真正的段落，页面上看不到标签 -->
  <p>对比下面这行：</p>
  <p>这是一个段落</p>
</body>
</html>

要点与易错点：

  • 字符实体就是网页里预留的特殊符号，统一以 & 开头、; 结尾，分号不能少。
  • &nbsp; 表示一个空格。HTML 里连续敲空格只算一个（或直接被忽略），想要多个空格就多写几个 &nbsp;。
  • &lt; 是小于号 <，&gt; 是大于号 >。因为 HTML 是标签语言，尖括号会被当成标签边界；想原样显示 <p> 就必须写成 &lt;p&gt;，否则浏览器直接把它解析成段落。
  • 易错点：段落首行缩进不要用一堆 &nbsp;，十个段落就要写十遍，非常麻烦；CSS 里有专门的首行缩进样式，一句话就能让所有段落生效（转写稿原话）。
  • 易错点：&nbsp; 真正常用的场景是让两个文字之间多出一点点距离（如淘宝“亲，请登录”和“免费注册”之间），而不是拿来做排版缩进。

示例三：有语义的布局标签 + 自定义列表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>有语义的布局标签</title>
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; margin: 0; }
    header, nav, footer { padding: 10px 16px; }
    header { background: #eee; }
    nav { background: #333; color: #fff; }
    .wrap { display: flex; }
    section { flex: 1; padding: 10px 16px; }
    aside { width: 160px; background: #f7f7f7; padding: 10px 16px; }
    footer { background: #eee; display: flex; }
    dl { margin: 0 40px 0 0; }
    dt { font-weight: bold; margin-bottom: 6px; }
    dd { margin: 0; line-height: 24px; }
    a { color: #333; text-decoration: none; }
  </style>
</head>
<body>
  <header>头部 header</header>
  <nav>导航 nav</nav>

  <div class="wrap">
    <section>
      <article>文章内容 article</article>
    </section>
    <aside>侧边栏 aside</aside>
  </div>

  <footer>
    <dl>
      <dt>选购指南</dt>
      <dd><a href="#">手机</a></dd>
      <dd><a href="#">电视</a></dd>
      <dd><a href="#">笔记本</a></dd>
      <dd><a href="#">平板</a></dd>
    </dl>
    <dl>
      <dt>选购指南</dt>
      <dd><a href="#">服务中心</a></dd>
      <dd><a href="#">申请售后</a></dd>
      <dd><a href="#">售后政策</a></dd>
      <dd><a href="#">维修服务</a></dd>
    </dl>
    <dl>
      <dt>关注我们</dt>
      <dd><a href="#">新浪微博</a></dd>
      <dd><a href="#">官方微信</a></dd>
      <dd><a href="#">联系我们</a></dd>
      <dd><a href="#">联系我们</a></dd>
    </dl>
  </footer>
</body>
</html>

要点与易错点：

  • header 头部、footer 底部、nav 导航、aside 侧边栏、section 大块、article 文章，这几个是 HTML5 新增的有语义标签，作用就是替换掉“满屏都是 div”的写法——看到标签名就知道这块是干什么的（转写稿原话）。
  • 易错点：它们默认没有任何样式，不写 CSS 时表现和 div 完全一样（都是块级、各占一行）；想让它们好看，必须自己加背景、宽度、内边距。上面的 CSS 只是为了看得清结构。
  • 易错点：这些标签是“认识 + 会用”，不用死背，忘了回来查；课程重点仍在无序列表、表格基本标签、文本框/密码框/placeholder、单选复选框、label、textarea、button 上。
  • dl 是自定义列表：dt 是列表标题（如“选购指南”），dd 是标题下的每一项。一个 dt 配多个 dd，一对 dl 就是一组，不要把三组塞进同一个 dl。
  • 易错点：dd 默认带左缩进（margin-left），不对齐时要手动重置 margin: 0。
  • 提示：笔记里第二组 dt 也写的是“选购指南”、第三组“联系我们”重复了两次，实际开发中应改成对应栏目名（如“服务中心”）并去掉重复项。

常见错误 ​

  1. 性别两个单选框可以同时选中 现象：点"男"再点"女"，两个都亮着，或者一个都取消不掉。 原因：两个 input 的 name 不一致，或者其中一个漏写了 name；单选按钮靠相同的 name 归成一组。 修法：两个 radio 写同一个 name（如 name="gender"），同一组内只允许一个 checked。

  2. 只能点小圆点才能选中，"男""女"文字点不动 现象：鼠标必须精确对准控件，点文字没有反应。 原因：文字没有放在 label 里，label 也没有通过 for 指向 input 的 id。 修法：用 <label><input type="radio" name="gender"> 男</label> 把控件包进 label；或者给 input 加 id，再用 <label for="man">男</label> 关联。

  3. 点"重新填写"没反应，或者一按按钮页面就跳走/刷新 现象：写好的内容清不掉，或者页面突然重载。 原因：button 不写 type 时默认是 submit，两个按钮实际都在提交。 修法：重置按钮显式写 type="reset"，提交按钮写 type="submit"。

  4. 密码框里是明文 现象：输入的密码原样显示。 原因：type 写成 text，或者复制文本框后只改了 placeholder 忘了改 type。 修法：改成 type="password"，确认密码框同理。

  5. 姓名、密码、城市全挤在同一行 现象：几个字段连成一长条，和设计图完全不像。 原因：label、input、select 都是行内或行内块元素，本来就不独占一行。 修法：每条字段后补 <br>（本案例做法），或用块级元素包一层；最终美观靠后续 CSS 解决。

  6. 提交时数据丢失 / 控件"不在表单里" 现象：某些字段填了却提交不上去，或者重置时只清了一部分。 原因：边写边加 form，导致部分控件写在了 </form> 外面。 修法：先搭 form 骨架再往里填内容，最后按缩进层级整体检查一遍开闭标签是否配对。

  7. 复制粘贴后忘记改，出现重复内容 现象：确认密码的提示是"请输入密码"；城市下拉里出现两个"北京"；两个下拉年份完全一样。 原因：用 shift+alt+↓ 或 ctrl+c/v 复制后，只改了结构没改文字和属性。 修法：复制一行、立刻改一行，改完再复制下一行；option 的年份尤其容易漏改。

  8. 缩进错乱，标签层级对不上 现象：</form>、</ul> 位置漂移，展开折叠时看不出谁包着谁。 原因：手动敲空格缩进，或用 tab 与 shift+tab 时只缩进了一行。 修法：选中整块代码再按 tab / shift+tab 整体移动；整行搬家用 alt+↑，不要手敲空格。

练习 ​

  1. 打开注册页，逐个检查表单控件的 name 属性并补齐；重点确认性别的两个 radio 用同一个 name，然后点文字验证是否互斥。
  2. 把性别选项从"label 包裹 input"改写成"input 加 id + label for"的写法，功能保持不变，对比两种写法的代码量。
  3. 用 shift+alt+↓ 快速补齐"在校时间"两个下拉框，左边 2015–2018、右边 2019–2022，中间用横杠隔开并保持同一行显示。
  4. 给"工作描述"的 textarea 加上合适的 rows、cols，让它默认显示 4 行左右，并保证前面的"工作描述："标签和它不在同一行。
  5. 用 Emmet 的 > 和 + 缩写一行写出 form > h2 + label + input + br 的结构，按 tab 展开后检查父子/兄弟关系是否符合预期。

原视频对照 ​

#视频时长
1有语义的标签04:08
2字符实体06:53
3综合案例104:52
4综合案例2制作上06:13
5综合案例制作下11:44
6复习09:57

小结 ​

  • 表单控件的分组关系由 name 决定，不由位置或视觉决定；单选互斥失败的排查第一站永远是 name。
  • label 的价值在于扩大可点击区域，包裹写法和 for/id 写法二选一，不要两种混着写。
  • button 的默认类型是提交，凡是"重置"意图都必须显式声明 type="reset"。
  • 本案例的字段顺序就是提交顺序，控件必须在 form 内，边写边加 form 是数据丢失的高发动作。
  • 用 <br> 换行只是临时手段，它解决的是"能不能看"，"好不好看"留给 CSS。
  • 复制粘贴是这个案例的核心效率来源，但"复制必改"要形成肌肉记忆：文字、placeholder、type、name 四项逐个过。
  • 缩进和标签层级用快捷键整体调整，手敲空格是层级错乱的根源。
  • 单词记不住不算错误，能查笔记写出来就是达标；后面每天都会用到，自然会记住。