黑马前端 2024 · 教程站

主题

HTML 进阶（三） ​

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

学习目标 ​

  • 能够使用 input type="file" 创建文件域，并通过 multiple 属性实现多文件选择。
  • 能够使用 select 与 option 创建下拉表单，并使用 selected 指定默认选项，区分 checked 与 selected 的适用场景。
  • 能够使用 textarea 创建多行文本域，设置 rows、cols，并正确处理默认文本内容。
  • 能够使用 label 的 for-id 关联或包裹表单控件两种方式扩大点击范围，并完成文本框、单选按钮、复选框的绑定。
  • 能够使用 button 的 type="submit"、type="reset"、type="button" 创建提交、重置和普通按钮，并使用 form 包裹表单使重置/提交生效。
  • 能够区分 div 与 span 的无语义布局特性：div 独占一行、span 同行排列，并根据页面结构选择合适标签。

知识点 ​

本节说明与图片 ​

本节笔记标题是“05-字符实体”，配图是字符实体对照表：

HTML字符实体对照表

需要说明：提供的转写稿实际讲的是文件域、下拉菜单、textarea、label、按钮、form、div/span 等表单与布局内容，并没有出现“字符实体”的推导和调试过程。因此不能把表单内容硬套到本节里。转写稿中可对应的只是通用操作习惯：在编辑器中保存、刷新浏览器验证；同时纠正几个同音字： “文件语”应为“文件域”，“雷宝”应为“label”，“文本玉”应为“文本域”。这些属于表单章节，不并入下面的字符实体正文。

为什么需要字符实体 ​

为什么需要：HTML 里 <、>、& 等符号有语法含义，浏览器会把它们当成标签或实体开头。如果直接写“3 < 5”，浏览器可能误判为标签开始，导致页面显示不正确。

怎么想：凡是“要显示成普通文字、但又会被 HTML 误解析”的字符，就考虑字符实体；特殊符号如版权号、连续空格，也可用实体表示。

怎么做：字符实体通常写成 &实体名; 或 &#数字;。例如要显示小于号，写 &lt;；要显示大于号，写 &gt;；要显示 &，写 &amp;。

易错点：实体末尾的分号不能漏；实体名区分大小写；不要把 &lt; 写成 <lt>。

常见字符实体与示例 ​

为什么需要：常见符号在页面中经常出现，如版权号、引号、连续空格。直接输入有时能显示，但在不同环境或特殊位置下不够稳妥。

怎么想：先判断这个字符是否与 HTML 语法冲突。冲突优先用实体；不冲突的普通文字可直接写。

怎么做：常见写法如下：

html
<p>3 &lt; 5 &amp;&amp; 5 &gt; 3</p>
<p>&copy; 2024</p>
<p>姓名：张三&nbsp;&nbsp;年龄：18</p>

浏览器中会显示为：3 < 5 && 5 > 3、© 2024，以及带连续空格的文本。

易错点：&nbsp; 是不换行空格，不要用它大量排版；排版应交给 CSS。&amp; 显示的是 &，不是“amp”。&copy; 不要漏分号。

怎么做与调试过程 ​

为什么需要：字符实体写错时，页面往往不是报错，而是直接把 &lt; 原样显示出来，必须通过刷新页面观察结果。

怎么想：看到实体原样显示，先查三处：有没有漏分号、有没有多写 &、实体名是否拼错。

怎么做：在编辑器中写入示例，保存后刷新浏览器；再查看页面源代码或开发者工具中的 DOM，确认浏览器是把实体解析成目标字符，还是保留为文本。

易错点：不要凭记忆手写生僻实体，查对照表更稳；属性值中如果要用引号，也要注意与属性引号冲突。

小结 ​

字符实体的核心不是“背很多表”，而是建立判断：当某个字符会被 HTML 误解析，或需要稳定显示特殊符号时，用 &...; 的形式转义。先掌握 &lt;、&gt;、&amp;、&quot;、&copy;、&nbsp; 这些高频实体，再通过保存、刷新、查看显示结果来调试即可。

案例目标：先把新闻列表拆成“条目” ​

为什么需要： 综合案例不是孤立地背标签，而是把标签组合成真实页面结构。体育新闻列表的特点是“多条新闻重复出现”，每条都由图片和标题组成，先拆结构，后面写样式才不乱。

怎么想： 可以把整个区域看成一个列表：外层装多条新闻，每一条新闻是一个列表项，列表项里再放图片和标题。这样结构清晰，复制一条就能扩展多条。

怎么做： 按笔记给出的结构写成 ul > li > img + h3，效果参考下图：

体育新闻列表效果图

html
<ul>
  <li>
    <img src="./images/1.jpg" alt="">
    <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
  </li>
  <li>
    <img src="./images/2.jpg" alt="">
    <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
  </li>
  <li>
    <img src="./images/3.jpg" alt="">
    <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
  </li>
</ul>

易错点： li 要放在 ul 里面，不要把 h3 直接写成 ul 的子元素；图片的 src 路径要真实存在；笔记代码里 alt="" 是空值，实际开发中建议补上中文说明，例如“新闻配图”，便于图片加载失败时理解内容。

用列表承载新闻：理解“盒子”和排列关系 ​

为什么需要： 新闻条目需要上下排列、结构统一。转写稿里讲布局标签时反复强调“盒子”思维：div 是独占一行的盒子，span 是不换行、一行可放多个的盒子。这里要纠正转写稿中的同音字：“第二位”应写作 div，“ssp/span”应写作 span。本案例整条新闻适合用列表项承载，而不是把每条新闻都塞进一个不换行的小盒子。

怎么想： 先判断内容是“并列的多条”，还是“一行中的小片段”。体育新闻列表是三条并列新闻，应该纵向排开；图片和标题属于同一条新闻内部，应该包在同一个 li 里。

怎么做： 外层用 ul，每条新闻用 li，li 内先放 img，再放 h3。三条 li 结构保持一致，只改图片路径和标题文字。

易错点： 不要把 li 写成 span 来包整条新闻，否则在没有样式的情况下容易变成一行排列；不要漏掉结束标签；复制 li 后要同步修改 1.jpg/2.jpg/3.jpg 和三条标题，避免三条新闻内容重复。

图片与标题的调试：先保证能显示，再检查层级 ​

为什么需要： 列表案例最常见的调试问题是图片不显示、标题和图片对不上。先解决“能不能显示”，再检查“结构对不对”，比一上来改样式更有效。

怎么想： img 是单标签，靠 src 找图片；h3 是双标签，包住标题文字。转写稿里讲检查元素时，会选中标签看它在页面中的盒子区域；这里也可以用同样思路检查每条 li 是否完整包住图片和标题。

怎么做： 保存后在浏览器打开页面，确认三条新闻纵向出现；如果图片不显示，依次检查 images 文件夹是否存在、文件名是否为 1.jpg、2.jpg、3.jpg、扩展名大小写是否一致；再用开发者工具查看 ul > li > img + h3 的层级是否完整。

易错点： src 拼写错误、路径少了 ./images/、图片扩展名写成 .png 都会导致加载失败；img 不需要写结束标签；h3 不要误写成 h2 或 p，否则标题层级和后续样式控制会混乱。

综合检查：让结构为后续样式预留空间 ​

为什么需要： 综合案例先把 HTML 结构写正确，后面才能用 CSS 统一控制图片大小、标题间距和列表样式。转写稿里强调“用盒子包起来方便统一改颜色、粗细、大小”，本案例中每个 li 就是一条新闻的盒子。

怎么想： 不急着美化，先检查三条新闻是否一一对应：第一张图配第一条标题，第二张图配第二条标题，第三张图配第三条标题；结构统一后，后续给 li、img、h3 加样式才有稳定选择器。

怎么做： 对照代码逐条核对 src 和标题文字；在浏览器中确认三条新闻都出现；保留 ul/li/img/h3 的原始结构，不在 HTML 里堆无关标签。

易错点： 复制后只改标题不改图片，或只改图片不改标题，会造成图文错位；不要为了“看起来像”随意增加无语义嵌套；先完成结构，再进入样式阶段。

案例整体：先用 form 圈出“一份表单” ​

为什么需要：页面里散着一堆 input、select，用户点“免费注册”时，浏览器得知道要提交哪一片区域的数据。form 就是用来划分提交范围的“盒子”：点了按钮，只收集这个 form 里面的控件。

怎么想：本案例分“个人信息、教育经历、工作经历、协议与按钮”四块，它们属于同一次注册提交，所以整体套一个 form。

怎么做：

注册信息案例效果图

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>

易错点：form 别写成 from（来自），两个单词长得像，写错整段标签就失效；action 现在留空不影响页面显示，等学了后端再说。

label：让“姓名”这两个字也能点中 ​

为什么需要：单选按钮那个小圆点很小，手一抖就点不中；点文字“男”如果能选中按钮，体验会好很多。

怎么想：label 的作用就是给表单控件做说明文字，并和控件绑定，从而扩大点击范围。两种写法：① for 与控件的 id 同名；② 直接用 label 把文字和 input 一起包起来。

怎么做：案例里性别就是第二种写法，<label><input type="radio" name="gender"> 男</label>，点“男”字就能选中。姓名那一行写的是 <label>姓名：</label><input>，没有绑定，点“姓名”不会聚焦输入框；想生效要改成 <label for="name">姓名：</label><input id="name">，或者把 input 包进 label。

易错点：for 和 id 的值必须一模一样；label 别写成 table。

下拉菜单：selected 才是默认选中 ​

为什么需要：城市、学历、年份选项多，用一排单选按钮太占地方，下拉菜单收起时只占一行。

怎么想：select 是“选择”，里面每个 option 是“选项”。默认选中用 selected——注意单选、复选框默认选中用的是 checked，下拉用的是 selected，两者不能混。

怎么做：案例中居住城市默认北京；如果想让武汉默认选中，写 <option selected>武汉</option>。

易错点：selected 加在 option 上，不是加在 select 上；在校时间那里两个 select 中间的 -- 只是分隔符号，不是标签。

文本域 textarea：工作描述要写多行 ​

为什么需要：input type="text" 只能输入一行，工作描述往往要写好几段。

怎么想：需要多行文本就用双标签 textarea，中间写默认文字。

怎么做：案例里 <textarea></textarea>。调试时发现，如果写成

html
<textarea>
</textarea>

打开页面输入框里会多出一段空白——标签之间的换行和空格被当成了默认内容。所以尽量写成一行。尺寸现在用 rows、cols 粗略控制，实际开发用 CSS 设宽高，并禁用右下角拖拽。

易错点：textarea 是双标签，没有 type 属性。

按钮：重置必须靠 form 才生效 ​

为什么需要：填错了要清空重填，填完了要提交。

怎么想：button 的 type 有三个值：submit（提交，默认值）、reset（重置）、button（普通按钮，配合 JS 用）。

怎么做：<button>免费注册</button> 不写 type 就是提交；<button type="reset">重新填写</button> 点一下前面填的内容全部复原。

易错点：如果按钮没被 form 包住，点“重新填写”毫无反应——这就是案例为什么要整体套一层 form。

补充：注册页常见的文件域与布局容器 ​

上传头像用 <input type="file">，默认一次只能选一个文件；加 multiple 属性就能按住 Ctrl 或 Shift 多选。div 和 span 都是无语义的盒子：div 独占一行，适合做上中下的区块；span 一行可放多个，适合包住“|”这类小元素，方便后面用 CSS 统一改颜色。

课件图示 ​

课件第34页：字符实体 作用：在网页中显示预留字符。 提示： • lt 是 less than

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

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

代码示例 ​

示例一：注册信息表单（综合案例二 + 文件域 / label / 按钮） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>注册信息</title>
</head>
<body>
  <h1>注册信息</h1>

  <form action="">
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    <label for="username">姓名：</label><input type="text" id="username" 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 selected>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>
    <br><br>
    <label>上传头像：</label><input type="file" multiple>

    <!-- 教育经历 -->
    <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 必须把所有控件包起来，否则 <button> 的提交 / <button type="reset"> 的重置都不生效（转写稿：重置点下去“什么都没起效果”，就是因为没有 form 包裹）。
  • label 两种绑定方式：① for="username" 对应 id="username"，两者值必须完全一模一样；② 直接用 label 把文字和 input 包在一起（示例中的“男 / 女”），不用写 for 和 id。注意单词是 label，不要写成 table。
  • 单选按钮 type="radio" 的 name 必须相同（都是 gender）才能互斥；默认选中用 checked。
  • 下拉框默认选中用 selected，不是 checked —— 单选 / 复选框用 checked，option 用 selected，这是最容易混的一处。
  • input type="file" 是文件域，加 multiple 才能按住 Ctrl / Shift 多选文件；真正的上传要等学 JS 和后端。
  • textarea 是双标签，标签内不要换行、不要缩进，否则内容前面会多出空白；rows / cols 能控制行列数，但实际开发中用 CSS 设尺寸、并禁用右下角拖拽。
  • <button> 默认 type="submit"；要重置写 type="reset"。
  • 标签单双要分清：input、br、hr 是单标签；select、option、textarea、button、label 是双标签。

示例二：体育新闻列表（综合案例一） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>体育新闻列表</title>
  <style>
    /* 仅用于演示排版，笔记原案例只给出了 HTML 结构 */
    ul {
      list-style: none;
      padding: 0;
    }
    li {
      border-bottom: 1px solid #ccc;
      padding: 8px 0;
    }
    img {
      width: 120px;
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <img src="./images/1.jpg" alt="体育新闻配图">
      <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
      <img src="./images/2.jpg" alt="体育新闻配图">
      <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
      <img src="./images/3.jpg" alt="体育新闻配图">
      <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
  </ul>
</body>
</html>

关键行与易错点

  • 结构是 ul > li，每个 li 里放 img + h3，li 只能直接子级是 ul，不要写成 ul 里直接塞 img。
  • 图片路径 ./images/1.jpg 是相对路径，图片文件夹要和 HTML 文件放在同一目录下，否则图片不显示。
  • alt 是图片加载失败时的替代文字，笔记原例是 alt=""，实际开发建议写有意义的描述。
  • h3 自带上下外边距，与图片同排会显得间距很大，样式问题留到 CSS 课程统一处理。

示例三：div 与 span 无语义布局标签 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>div 和 span</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 1px solid pink;
    }
    span {
      color: red;
    }
  </style>
</head>
<body>
  <div>我是一个普通的盒子</div>
  <div>我是第二个盒子</div>

  <span>新闻</span>
  <span>|</span>
  <span>体育</span>
  <span>音乐</span>
</body>
</html>

关键行与易错点

  • div 和 span 都是没有语义的盒子，本身说不出含义，作用只是“装东西、摆布局”；有语义的是 h1（标题）、p（段落）、strong（加粗）这类。
  • 唯一区别：div 独占一行，span 一行可以放多个。页面上下排列的大块用 div，横向并排的小块（如“新闻 | 体育 | 音乐”中间那根竖线）用 span。
  • 不给 CSS 时看不出“盒子”的样子，加上 width / height / border 才能看到边框范围（这正是转写稿里 border: 1px solid pink 的演示目的）。
  • 用 span 把竖线包起来，是为了以后统一改颜色、粗细；如果把竖线直接写成文字，就只能一个个改，所以 span 盒子很重要。

常见错误 ​

  1. 上传头像只能选一个文件 → 文件域漏写 multiple，或误以为按住 Ctrl/Shift 就能多选 → 在 input type="file" 上补 multiple，再用 Ctrl/Shift 验证多选。
  2. 下拉框默认项不是想要的省份 → 把 checked 用到 option 上，或 selected 写错位置 → 只在目标 option 上加 selected，单选/复选才用 checked。
  3. textarea 左侧出现莫名空白、默认文字位置不对 → 开始/结束标签之间换行或缩进被当作内容 → 让 textarea 内容尽量贴标签写，或先清空标签间空白再放默认文字。
  4. 点“姓名/密码/男/女”文字无法聚焦或选中 → label 的 for 与表单 id 不一致，或 label 拼成 lable/table → 核对 for 和 id 值完全一致；单选/复选也可用 label 直接包裹文字和控件。
  5. “重新填写”点了没反应 → 按钮和表单控件没有被同一个 form 包裹，或 button 的 type 写错 → 用 form 包住相关控件，重置按钮写 type="reset"，提交按钮写 type="submit"。
  6. 页面出现多个互不相关的提交区域，点注册把登录信息也带上 → 多个业务表单混在一个 form 里 → 按业务边界拆成多个 form，每个 form 只包自己的控件和按钮。
  7. 新闻列表图片和标题上下错位、导航竖线换行 → 该用 span 的小元素用了 div，或该分行的盒子用了 span → 大块上下结构优先 div，同行小片段优先 span，再用浏览器检查盒子范围。

练习 ​

  1. 给“上传头像”文件域增加多选能力，并用 Ctrl/Shift 各选多个文件验证；再故意删掉 multiple，记录现象差异。
  2. 改造“居住城市”下拉框：默认选中“上海”；再新增一个“杭州”选项，验证展开和默认值。
  3. 给注册表单补全 label 绑定：姓名、密码用 for/id 方式；性别“男/女”用 label 包裹控件方式，点击文字验证聚焦/选中。
  4. 将注册表单拆成“个人信息”“教育经历”“工作经历”三个业务区块，分别放入独立 form，测试三个区域的重置按钮只影响各自区域。
  5. 用 div 和 span 各做一个“新闻标题 + 来源 + 时间”的布局草稿：要求标题独占一行，来源和时间同行；用浏览器检查盒子占行情况。

原视频对照 ​

#视频时长
1文件域和下拉表单08:10
2文本域textarea09:02
3label标签10:07
4按钮10:28
5表单复习04:02
6div和span布局标签无语义08:25

小结 ​

  1. 表单类错误大多不是“标签不会写”，而是属性放错位置：multiple、selected、checked、for/id 要逐一核对。
  2. textarea 对标签间空白敏感，默认内容写法要固定成团队规范，避免“看起来多出空格”的低级问题。
  3. label 的核心价值是扩大点击范围；能用包裹写法时优先包裹，复杂布局再用 for/id。
  4. button 的提交/重置效果依赖 form 边界，按钮无效时先查是否同属一个 form，再查 type。
  5. 多个业务表单不要塞进同一个 form，否则提交和重置范围会失控。
  6. div 与 span 的选择看布局结果：上下分行用 div，同行小片段用 span，不要凭感觉混用。
  7. 每个练习都要用浏览器实际点击、选择、重置、检查盒子范围来验收，不能只看代码是否“像对的”。