尚硅谷前端 2023 · 教程站

主题

HTML5 新增标签（Day11 1/4） ​

本页对应 Day11_HTML5&CSS3，共 6 段视频，约 1 小时 6 分。

学习目标 ​

  1. 能概述 HTML5 标准的制定背景、W3C 与 WHATWG 的关系及 IE9+ 兼容性要求，并说明 HTML5 强调语义而非样式。
  2. 能使用 header、nav、main、article、aside、section、footer 等语义布局标签编写页面结构，并说明其与 div 的关系及 section 的适用场景。
  3. 能使用 figure 与 figcaption 为文章插图添加说明，并说明 hgroup 不推荐使用的原因。
  4. 能区分 meter 与 progress 的语义和常用属性，并分别编写静态度量与动态进度示例。
  5. 能使用 details 与 summary 创建可展开、收起的内容，并说明其样式限制与使用场景。
  6. 能使用 ruby 与 rt 为生僻字注音，使用 mark 标记或高亮文本，并说明它们均为行内双标签及 mark 的典型用途。

知识点 ​

HTML5 标准与兼容性：先弄清“为什么学” ​

为什么需要：HTML5 不是“几个新标签”这么简单。转写稿里反复强调，2014 年 10 月 W3C 完成标准制定，但 2004 年起相关草案和浏览器支持就已推进；它真正带来的变化，是新标签、表单增强、音视频，以及为 JavaScript 提供更多 API。怎么想：课堂把 H5 的“大头”归到 JS API 上，但这一节先学能直接上手的部分——新增标签、表单增强、页面音视频。历史上 W3C 曾推 XHTML，要求语法更严格，浏览器厂商和开发者不接受，WHATWG 推 HTML5 草案，后来 W3C 转而支持 HTML5；两者长期分分合合。怎么做：学习时以浏览器实际支持为准，尤其关注 IE。课堂要求至少 IE9 及以上才能识别 HTML5 新标签、表单增强和音视频。易错点：不要把“H5 很火”理解成“只会几个标签”；也不要死磕标准文档。IE 版本问题特殊，因为它集成在操作系统里，升级不自由；Chrome、Firefox 等更新机制不同。老系统、老 IE 的存量仍要考虑。

排版布局标签：用语义替代一部分 div ​

为什么需要：过去布局到处是 div，div 没有语义。HTML5 更强调标签语义，方便结构处理、SEO 和无障碍阅读。怎么想：header、footer、nav、section、aside、article、main、figure、figcaption 可以理解为“有语义的 div”，但没有自带样式，样式仍要自己写。怎么做：按课堂示例整理代码：

html
<header class="page-header">
  <h1>小乐的交易网站</h1>
</header>

<nav class="page-nav">
  <ul><li>首页</li><li>家用电器</li></ul>
</nav>

<main class="container">
  <section class="banner">banner</section>

  <article class="article">
    <h2>鲁迅给我们的35条忠告</h2>
    <section>
      <h3>学习篇</h3>
      <p>鲁迅先生的忠告。</p>
    </section>
    <figure>
      <img src="图片地址" alt="文章插图">
      <figcaption>对插图的说明</figcaption>
    </figure>
  </article>

  <aside class="aside">侧边栏</aside>
</main>

<footer class="page-footer">页脚</footer>

调试时，课堂给 header 设高度、背景色，h1 自带外边距导致塌陷，用 overflow: hidden 解决；容器设宽度并 margin: 0 auto 居中；article 左浮动、aside 右浮动，最后用 ::after 清浮动。易错点：section 不能代替所有 div。W3C 专门提醒过，section 表示页面中的独立区域或文章中的一节，页面里用得最多的仍是 div；拿不准就用 div。header/footer 理论上可多次出现，但实际先记“页头/页脚”。figure/figcaption 国内用得少，但无障碍阅读场景有意义。hgroup 基本不用，了解即可。

状态标签：meter 与 progress 别混用 ​

为什么需要：页面有时要表示“度量”或“进度”。怎么想：meter 表示已知范围内的静态度量，如电池电量、磁盘用量、温度湿度；progress 表示某个任务完成的动态进度。怎么做：

html
<meter min="0" max="100" low="20" high="80" optimum="50" value="60">60</meter>
<progress max="10000" value="6500"></progress>

易错点：meter 不是进度条；它的颜色和跨浏览器样式不好调，课堂明确说“不必深究”。progress 只设 max 和 value，进度从 0 开始，不设最小值。面试若问区别，就答“静态度量/已知范围”与“动态进度”。

详情标签：details 与 summary ​

为什么需要：需要可展开、收起的细节内容。怎么想：details 定义详情区域，summary 是标题。怎么做：

html
<details>
  <summary>鲁迅的真名是什么？</summary>
  <p>周树人。</p>
</details>

易错点：展开内容里可写段落、div、标题等；但样式不好调，箭头等动态效果交给 JS 更合适，所以实际用得不多。

注音与标记：ruby/rt 与 mark ​

为什么需要：中文存在“形音分离”，生僻字需要注音；文本中某些词需要标记。怎么做：

html
<p>我们一起来享受<ruby>饕餮<rt>tāo tiè</rt></ruby>盛宴吧。</p>
<p>请突出<mark>饕餮盛宴</mark>这个词。</p>

易错点：ruby 包裹要注音的文字，rt 写在 ruby 里写注音；二者是行内双标签，音调和复杂样式不要指望标签本身。mark 是行内标记，默认高亮，可改背景色和文字色，但不能设宽高。W3C 建议用于搜索结果关键词标记，但课堂观察国内搜索引擎并不常用。

收束：语义标签是“加分项”，div 仍是底盘 ​

为什么需要：新标签让结构更清晰。怎么想：能明确判断该用 header、nav、main、article、aside、section、footer 就用；判断不了就别纠结。怎么做：先保证结构正确，再写 CSS；课堂示例中所有新标签都没有自带样式，仍靠 CSS 完成布局。易错点：不要为了“拥抱新标准”把 div 全换成 section；div 仍是页面中最常用的结构标签。

一、HTML5 的定位：语义化是主线，API 是另一大头 ​

为什么需要：转写稿里反复强调，HTML5 不是“几个破标签”这么简单。2014 年 10 月 W3C 完成标准制定，但在此之前浏览器已逐步支持；它让前端从“写点页面和 jQuery 效果”逐渐变成能处理业务逻辑、数据展现的独立开发类别。
怎么想：HTML5 有两条线：一条是新增标签与表单增强，另一条是给 JavaScript 的 API，如离线、本地存储、Web Workers 等。本节先学标签，JS API 后面再学。标准制定还有 W3C 与 WHATWG 的分合：W3C 曾推 XHTML，浏览器厂商不同意，WHATWG 推 HTML5 草案，后来 W3C 转而支持 HTML5。
怎么做：学习时以浏览器实际支持为准，尤其关注 IE。转写稿明确：新增标签、表单新功能、音视频需要 IE9 及以上；更老版本要谨慎。
易错点：不要把“H5 很火”理解成只背标签；也不要把 W3C 文档当唯一死磕对象，浏览器兼容性才是落地关键。转写稿提到 hgroup 不必学，main 在旧 IE（包括 IE11）不支持，遇到旧 IE 要有降级意识。

二、排版布局标签：用有语义的标签替代一部分 div ​

为什么需要：过去页面到处是 div，div 没有语义；HTML5 强调语义，让结构可读、便于处理和优化。
怎么想：把 header 当页头或节头，nav 当导航，main 当主要内容，article 当文章/帖子/评论，aside 当侧边栏，section 当页面中的独立大区域或文章中的一节，footer 当页脚或节脚。关键原则：拿不准就用 div；section 不是用来替代所有 div 的。
怎么做：可按转写稿搭一个骨架，并写少量样式验证“它们和 div 一样没有默认样式”。

html
<header class="page-header">
  <h1>小乐的交易网站</h1>
</header>
<nav class="page-nav">导航</nav>
<main class="page-main">
  <article class="article">
    <h2>鲁迅给我们的35条忠告</h2>
    <section>
      <h3>学习篇</h3>
      <p>段落内容</p>
      <figure>
        <img src="图片路径" alt="文章插图">
        <figcaption>对插图的说明</figcaption>
      </figure>
    </section>
    <section>
      <h3>生活篇</h3>
      <p>段落内容</p>
    </section>
  </article>
  <aside class="aside">侧边栏</aside>
</main>
<footer class="page-footer">页脚</footer>

调试时转写稿给 page-header 设高度、背景色，发现 h1 外边距塌陷，用 overflow: hidden 解决；page-main 里 article 左浮动、aside 右浮动，再用 ::after { display:block; clear:both; } 清浮动。
易错点：section 曾经被误当成“装逼利器”替代 div，W3C 专门说明不是这么用；一个页面可以多个 header/footer；figure/figcaption 国内网站用得少，但无障碍阅读较重视，别因为少见就完全否定。

三、状态标签：meter 是静态度量，progress 是动态进度 ​

为什么需要：页面要表示电量、磁盘用量、温度湿度，或任务完成进度，需要不同语义。
怎么想：meter 表示已知范围内的测量标准，有最大、最小；progress 表示任务完成进度，通常从 0 开始，所以只有 max 和 value，没有 min。
怎么做：

html
<meter max="100" min="0" value="60"></meter>
<progress max="10000" value="6500"></progress>

转写稿现场发现 VS Code 不提示 meter/progress，但浏览器认识；meter 可设宽高，颜色跨浏览器差异大，火狐和 Chrome 表现不完全一样，所以不必深究样式。
易错点：别用 meter 做进度条；progress 不要设 min；状态标签“混个眼熟”即可，面试能说清静态度量与动态进度的区别。

四、详情标签：details 与 summary ​

为什么需要：需要“点击标题展开/收起内容”的语义结构。
怎么想：details 定义可展开收起的细节区域，summary 是它的标题。
怎么做：

html
<details>
  <summary>鲁迅的真名是什么？</summary>
  <p>周树人。</p>
</details>

易错点：转写稿指出它样式和箭头不好调，动态展开收起交给 JS 更灵活，所以了解即可，不必硬改。

五、注音与标记：ruby/rt、mark ​

为什么需要：中文存在生僻字，需要注音；文本中需要突出关键词。
怎么想：ruby 包裹要注音的文字，rt 写在 ruby 内部写注音；mark 用于标记文本，行内元素。
怎么做：

html
<p>我们一起来享受<ruby>饕餮<rt>tāo tiè</rt></ruby>盛宴吧。</p>
<p>给<mark>高晓乐</mark>加上标记。</p>

易错点：转写稿说 rt 加不了声调；mark 不能设宽高，但可改背景色和文字颜色；W3C 举例可用于搜索结果关键词标记，但百度实际用 em 包关键词，别把建议当铁律。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 排版布局标签</title>
  <style>
    body { margin: 0; }
    .page-header {
      height: 200px;
      background: #ccc;
      text-align: center;
      overflow: hidden;
    }
    .page-nav {
      height: 40px;
      background: #ccc;
      margin-top: 10px;
      text-align: center;
    }
    .container {
      width: 1000px;
      margin: 0 auto;
    }
    .page-banner {
      height: 300px;
      background: #444;
      line-height: 300px;
      text-align: center;
      color: #fff;
    }
    .main { margin-top: 10px; }
    .main::after {
      content: "";
      display: block;
      clear: both;
    }
    .main article {
      float: left;
      width: 790px;
    }
    .main aside {
      float: right;
      width: 200px;
      height: 800px;
      background: #ccc;
      text-align: center;
      padding: 20px 0;
      box-sizing: border-box;
    }
    .page-footer {
      height: 200px;
      margin-top: 10px;
      line-height: 200px;
      background: #ccc;
      text-align: center;
    }
    article img { width: 100%; }
  </style>
</head>
<body>
  <header class="page-header">
    <h1>小乐的交易网站</h1>
  </header>

  <nav class="page-nav">
    <a href="#">首页</a>
    <a href="#">家用电器</a>
    <a href="#">秒杀专场</a>
  </nav>

  <div class="container">
    <section class="page-banner">banner</section>

    <main class="main">
      <article>
        <h2>鲁迅给我们的35条忠告</h2>

        <section>
          <h3>学习篇</h3>
          <p>鲁迅先生的忠告一。</p>
          <p>鲁迅先生的忠告二。</p>

          <figure>
            <img src="3.jpg" alt="插图">
            <figcaption>使用华为Mate的插图说明</figcaption>
          </figure>
        </section>

        <section>
          <h3>生活篇</h3>
          <p>鲁迅先生的忠告三。</p>
        </section>
      </article>

      <aside>侧边栏</aside>
    </main>
  </div>

  <footer class="page-footer">页脚</footer>
</body>
</html>

要点解释关键行和易错点：

  • header、nav、main、article、aside、section、footer 是“有语义的 div”，默认没有自带样式，样式仍要自己写。
  • section 不是用来替代所有 div 的；它表示页面中的独立区域或文章中的一节，页面里用得最多的仍然是 div。
  • article 可表示文章、博客、评论、帖子；aside 表示侧边栏。
  • main 表示页面主要内容部分。
  • 浮动后必须清除浮动，示例用 .main::after { content: ""; display: block; clear: both; }。
  • figure 常配合 figcaption 给插图做说明；图片路径 3.jpg 要真实存在，否则只显示 alt 文本。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 状态标签与详情标签</title>
  <style>
    meter {
      width: 400px;
      height: 40px;
    }
    progress {
      width: 400px;
      height: 20px;
    }
    details {
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <h2>状态标签</h2>

  <p>
    静态度量：
    <meter max="100" min="0" value="60"></meter>
  </p>

  <p>
    动态进度：
    <progress max="10000" value="6500"></progress>
  </p>

  <h2>详情标签</h2>

  <details>
    <summary>鲁迅的真名是什么？</summary>
    <p>周树人</p>
  </details>

  <details>
    <summary>请自我介绍一下</summary>
    <h3>我的生活</h3>
    <p>自我介绍第一段。</p>
    <p>自我介绍第二段。</p>
  </details>
</body>
</html>

要点解释关键行和易错点：

  • meter 表示已知范围内的静态度量，如电量、磁盘容量、温度、湿度等；可设置 min、max、value。
  • progress 表示某个任务完成的动态进度；通常只设置 max 和 value，进度从 0 开始，不能设置 min。
  • meter 和 progress 都是双标签，面试常问区别：一个静态度量，一个动态进度。
  • details 表示可展开或收起的细节内容，summary 是 details 中的标题。
  • details 的样式不太好设置，实际项目中展开收缩动态效果更常交给 JS。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5 注音标签与标记标签</title>
  <style>
    mark {
      background: red;
      color: white;
    }
  </style>
</head>
<body>
  <p>
    我们一起来享受
    <ruby>饕餮<rt>涛</rt></ruby>
    盛宴吧。
  </p>

  <p>
    我们一起来享受
    <mark>饕餮盛宴</mark>
    吧。
  </p>

  <p>
    高晓乐
    <mark>高晓乐</mark>
  </p>
</body>
</html>

要点解释关键行和易错点：

  • ruby 用于包裹要注音的文字，rt 用于写具体注音，且 rt 要写在 ruby 内部。
  • ruby、rt、mark 都是双标签，属于行内元素。
  • mark 用于对文字做标记，默认有高亮效果；可以改背景色和文字颜色。
  • mark 是行内元素，不能设置宽高，但背景色、文字颜色可以调整。

常见错误 ​

1. 全站 section 化

  • 现象：页面里原本写 div 的地方全换成 section，代码层级变多，样式和结构反而更乱。
  • 原因：把"新标签"当成"更先进"，误以为 section 是 div 的升级替代品。
  • 修法：section 只留给页面中完整独立的大区块（秒杀专场、家用电器、banner 这种）。分上下、分左右的内部结构划分一律用 div，拿不准就写 div。

2. 布局标签加了背景色却"撑不开"

  • 现象：给 header 设了高度和背景色，里面的 h1 顶着上边距、容器上方多出一块空白，或背景没包住内容。
  • 原因：header 等新标签没有自带样式，塌陷来自内部 h1 的外边距（margin 塌陷），不是标签的问题。
  • 修法：给容器加 overflow: hidden 触发 BFC，或在 reset 里统一清掉标题的默认外边距。

3. 两栏布局做完，父容器高度为 0

  • 现象：main 里 article 左浮动、aside 右浮动，刷新后 footer 直接顶上来压在中间。
  • 原因：浮动元素脱离文档流，父级 main 没有被撑开。
  • 修法：给 main 加 ::after { content:''; display:block; clear:both; }，或改用 flex 布局。

4. meter 和 progress 用反

  • 现象：做上传/加载进度条用了 meter，做电池电量、温度显示用了 progress。
  • 原因：只记住"两个都长得像进度条"，没区分语义——一个是已知范围的静态测量值，一个是任务完成进度。
  • 修法：有 min 和 max、表示某个量的当前读数（电量、湿度、库存占比）用 meter；从 0 开始、随任务推进变化的用 progress（只给 max 和 value）。

5. 花时间定制 meter / details 的外观

  • 现象：想改 meter 的颜色、details 的箭头，写了一堆伪元素选择器，Chrome 能看、Firefox 打开又不一样，越调越乱。
  • 原因：这两类标签由浏览器原生渲染，可定制性差且各内核实现不统一。
  • 修法：接受默认样式。产品要求高就自己用 div + CSS + JS 重做一套，别在原生控件上死磕。

6. 给 mark 设宽高

  • 现象：mark { width: 100px; height: 30px; } 写了完全没反应，但改背景色、文字颜色却有效。
  • 原因：mark 是行内元素，行内元素不接受宽高。
  • 修法：只做颜色类标记；确实需要尺寸就改 display: inline-block 或外面再包一层。

7. 用 main 标签后在 IE 里样式全丢

  • 现象：本地 Chrome 正常，IE 打开后 main 里的样式全部不生效，元素像被当成未知标签。
  • 原因：main 不在 WHATWG 标准中、且所有版本 IE 均不支持，浏览器遇到不认识的标签时按行内未知元素处理，样式自然设不上。
  • 修法：先确认项目目标浏览器；必须兼容旧 IE 就换回 div，或引入 html5shiv 之类的垫片。

8. 用了 hgroup

  • 现象：写完标题组没有任何效果，查文档也查不到。
  • 原因：W3C 标准里根本没有 hgroup 这个标签。
  • 修法：删掉。大标题用 h1，副标题用 p 或 span 配样式即可。

练习 ​

练习 1｜页面骨架 用 header / nav / main / article / aside / footer 搭出"小乐的交易网站"页面：header 内放 h1 标题，nav 内放 ul>li>a 导航，main 内左 article 右 aside 两栏，footer 写版权。要求：article 左浮动宽 790px、aside 右浮动宽 200px，外层容器宽 1000px 居中，并正确清除浮动。 验收：刷新后两栏左右并排，footer 在下方，缩放窗口不塌陷。

练习 2｜插图与说明 在 article 的某个小节里用 figure + img + figcaption 插入一张插图并写一句说明文字。图片先故意写错 src，观察现象后再改正；最后给 img 设 width: 100% 使其不撑破容器。 验收：能说出"图片不显示"和"图片过大溢出"分别是什么原因造成的。

练习 3｜状态标签辨析 在同一页面写两个元素： ① meter：min=0、max=100、value=60、low=20、high=80、optimum=60，代表"当前电量"； ② progress：max=100、value=65，代表"文件上传进度"。 用一句话分别写出两者语义区别，并把 meter 的 value 改成 10 观察颜色变化。 验收：能不看笔记说出"什么时候用哪个"。

练习 4｜FAQ 折叠 用 details + summary 做 3 条常见问题（例如"鲁迅的真名是什么"），展开后显示答案。其中一条答案里包含一个 h3 和两个 p 段落。 验收：三条都能独立展开收起，内容多的那条展开后结构正常。

练习 5｜注音与高亮 写一段话"我们一起来享受饕餮盛宴吧"，用 ruby + rt 给"饕餮"注上拼音；再用 mark 高亮文中另一个关键词。然后用 CSS 把 mark 的背景色改成红色、文字改成白色，并尝试给它设宽高。 验收：注音正确显示在文字上方；能说明为什么宽高设置无效。

原视频对照 ​

#视频时长
1HTML5概述16:43
2新增标签-排版布局标签29:25
3新增标签-状态标签09:03
4新增标签-详情标签04:31
5新增标签-注音标签02:41
6新增文本标签-标记标签03:40

小结 ​

  1. 换标签不等于换外观——这一组新增标签全都没有自带样式，视觉效果仍然 100% 由 CSS 决定。
  2. div 依然是页面中用得最多的标签。语义标签只覆盖"页头、页角、导航、主内容、独立大区块"这几种高确定性场景，其余照旧用 div。
  3. 判断该不该用某个语义标签的标准很简单：能明确感受到"这里就是页头/导航/一篇文章"，就用；一旦开始纠结，直接写 div。
  4. meter、progress、details、ruby、mark、hgroup 属于"混脸熟"级别：知道它们是什么、能说出 meter 与 progress 的区别即可，不值得投入时间调样式。
  5. 兼容性上真正要记住的只有两点：main 标签在所有 IE 中不支持，HTML5 新标签整体需要 IE9 及以上；项目开工前先确认目标浏览器再决定是否用。
  6. 语义化的实际收益主要落在无障碍阅读和 SEO 上，国内项目普遍不重视，但方向不会变，写的时候顺手带上成本很低。
  7. 学新标准要有取舍：W3C 和 WHATWG 两套文档并存且细节有出入，死磕规范不如看浏览器实际支持情况和项目里的真实用法。
  8. 本组内容的掌握优先级：排版布局标签（必须熟练）> mark / ruby（会用）> meter / progress / details（了解）> hgroup（不用）。