HTML5 音视频与HTML5 新增全局属性（Day11 3/4）

本页对应 Day11_HTML5&CSS3，共 5 段视频，约 59 分钟。

学习目标

• 能使用 input 的 list 属性关联 datalist，并通过多个 option 实现输入框搜索提示，验证输入关键字时提示项可被过滤匹配。
• 能使用 video 与 audio 标签插入音视频，并正确配置 src、controls、muted、autoplay、loop、preload、poster、width、height 等属性。
• 能使用 source 标签配合 src 与 type 为音视频提供多格式资源，说明其兼容性处理作用，并判断当前是否仍有必要使用该写法。
• 能说明浏览器对自动播放的限制，验证视频在 muted 条件下可自动播放、非静音时自动播放失效，并能给出静音播放或调整需求的处理方案。
• 能实现视频背景效果：设置 html、body、video 高度为 100%，使用 object-fit: cover 消除留白，并通过定位将文字内容叠加显示在视频上方。

知识点

一、datalist：给输入框加搜索提示

为什么需要：百度搜索框输入“高”会出现“高小乐、高志强”等提示，这类功能能减少用户输入成本。百度用 div 定位加 JS 实现；本节先用 HTML5 的 datalist 做简化版。

怎么想：datalist 本身不显示，必须和 input 建立关联；提示项用 option 写。关联方式与 label 不同：这里给 datalist 加 id，再让 input 的 list 属性指向这个 id。

怎么做：

<input type="text" class="text-input" list="search-data">
<datalist id="search-data">
  <option value="高小乐"></option>
  <option value="高志强"></option>
  <option value="高育良"></option>
  <option value="hello"></option>
  <option value="hello world"></option>
  <option value="老头乐"></option>
</datalist>

.text-input {
  width: 400px;
  padding: 10px;
  border: 1px solid #999;
}

易错点：datalist 不写 id、input 不写 list，两者就没有关系；datalist 自己不会显示；VSCode 可能不提示该标签，但浏览器支持，是否能用看浏览器。转写稿还演示了输入“乐”时“高小乐”“老头乐”都出现，说明它是按包含关键字匹配，不是只匹配开头。默认样式较丑，若要百度式下拉面板，需要 div 定位加 JS。

二、video 最小用法：src 与 controls

为什么需要：早期网页插入视频要靠 Flash，扩展名常见 .swf、.flv，麻烦且兼容性差。HTML5 提供 video 后，插入视频像插入图片一样简单。

怎么想：先写双标签 video，用 src 指向视频地址；默认不显示控制条，所以要加 controls。

怎么做：

<video src="./videos/2.mp4" controls></video>

易错点：只写 src 页面可能是一块黑色区域，不是没引入，而是没有控制条；controls 是布尔属性，不写值也能生效。元素默认尺寸通常等于视频原始尺寸；可以只设 width 或只设 height，另一边按比例变化。同时设宽高不会像图片那样随意拉伸，容易出现留白，一般设置一个即可。

三、video 常用属性：muted、autoplay、loop、preload、poster

为什么需要：真实页面常要默认静音、自动播放、循环、封面图等。

怎么想：这些大多是布尔属性；自动播放受浏览器策略限制，尤其 Chrome 要求静音后才允许自动播放。

怎么做：

<video
  src="./videos/2.mp4"
  controls
  muted
  autoplay
  loop
  poster="./images/BG01.png">
</video>

preload 表示预先加载：不加时通常点击播放才下载，避免用户不看却浪费流量；若已 autoplay，预加载意义不大。

易错点：autoplay 不加 muted 往往不生效；大型视频网站可能通过白名单获得自动播放能力，普通站点不要强行研究“绕过”，优先和产品经理沟通静音播放。loop 是循环播放；poster 只负责封面图，和视频内容不一定有关。

四、audio 与 source：音频标签和兼容写法

为什么需要：网页也要播放音频。audio 用法与 video 类似，但没有宽高和封面。

怎么想：最小结构仍是 src 加 controls；音频自动播放体验差，转写稿结论是实际不建议依赖自动播放。

怎么做：

<audio src="./music/1.mp3" controls></audio>

source 用于多格式兼容：浏览器按顺序选择支持的格式。现代项目 MP4/MP3 已够用，老写法认识即可。

<video controls>
  <source src="./videos/2.mp4" type="video/mp4">
  <source src="./videos/2.ogg" type="video/ogg">
  您的浏览器不支持视频播放。
</video>

易错点：source 是单标签，要写 src 和 type；不支持 video 的旧浏览器会显示标签内文字。audio 不要试图设宽高，想要好看播放器需自己写 div 样式并结合 JS。

五、视频背景：全屏适配与文字定位

为什么需要：滴滴等首页会把视频当背景，上面叠文字，视觉更高级。

怎么想：video 设宽高 100%，但 body 默认高度由内容撑开，所以只给视频 height:100% 无效；先让 html、body 高度 100%。视频比例和视口不一致时，用 object-fit: cover 裁切填满，而不是留白。

怎么做：

<video class="video-bg" src="./videos/3.mp4" muted autoplay loop></video>
<div class="banner">
  <h1>小乐的幸福生活</h1>
</div>

html, body {
  height: 100%;
  margin: 0;
}
.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner {
  position: fixed;
  top: 10px;
  left: 50%;
  width: 600px;
  margin-left: -300px;
  color: #fff;
}

易错点：忘记给 html、body 高度，视频高度百分比失效；object-fit: cover 会裁掉部分画面，但能保证铺满；背景视频不要 controls，通常加 muted autoplay loop；文字用定位叠在视频上，居中可用 left:50% 配合负 margin-left。

本节要解决什么问题

这一节笔记很短，核心只有三件事：旧标准里常见的全局属性、HTML5 新增的全局属性 hidden、以及 a 标签新增的 download 属性。全局属性的特点是：它们不是某个元素专属，而是可以作用在多数 HTML 元素上，用来统一描述标识、样式、语言、提示或状态。学习时要抓住两个判断：这个属性是不是“全局可用”；它是不是“写上就生效、不需要复杂赋值”。

旧标准中的全局属性

为什么需要：没有全局属性时，很多元素都要重复定义标识、样式、语言等信息，页面会变得零散。全局属性提供了一套通用描述方式，比如用 id 做唯一标识，用 class 做样式分组，用 lang 标明语言。

怎么想：先分清用途。id 强调唯一，class 强调可复用分组，style 是内联样式，name 常见于表单元素，title 是悬停提示，lang 描述语言。它们不是“每个元素都必须写”，而是按语义需要选择。

怎么做：笔记中列出的旧标准全局属性如下，保留原代码：

id
class
style
name
title
lang

易错点：id 不要重复；class 可以多个；style 能写但不建议大量写，维护性差；name 并不是所有元素都有表单提交意义；title 是提示，不是可见正文；lang 应写语言代码，不要随意写中文说明。

hidden：HTML5 新增的全局隐藏属性

为什么需要：有些内容在某个状态下需要隐藏，但又希望它留在 HTML 结构里，比如权限不足时的提示区、暂时不展示的模块。hidden 提供了一个不写 JavaScript 也能表达“隐藏”的全局属性。

怎么想：hidden 是布尔型属性，关键在“出现即表示隐藏”，不需要写成 hidden="true"。它表达的是元素当前不应展示，而不是把元素从源码里删除。

怎么做：笔记中的原始说明是：

hidden 		让元素隐藏，不需要值

实际写法可以是一个最小示例：

<div hidden>这段内容默认不显示</div>

易错点：第一，不要写 hidden="false" 就以为会显示；布尔属性只要出现通常就按“真”处理。第二，hidden 不是安全措施，内容仍在 DOM 中，不能拿来藏密码。第三，浏览器默认样式通常会让它不显示，但 CSS 仍可能覆盖，所以调试时要检查计算样式。第四，不要把它和删除元素混为一谈。

download：a 标签新增的下载属性

为什么需要：普通超链接点击后通常是“导航打开”，但有些文件希望点击后直接下载。download 让 a 标签具备下载提示能力，减少“点开图片/PDF 而不是下载”的困惑。

怎么想：先确认它是写在 a 上的属性；再确认目标文件与当前页面是否同服务器。笔记明确说：目标文件需要与当前文件同服务器，才有下载功能。也就是说，跨服务器时浏览器可能忽略下载提示，改为直接打开。

怎么做：笔记中的原始说明是：

download	如果设置该属性，超链接点击下载目标文件，该属性不需要值。
            目标文件需要与当前文件同服务器，才有下载功能

最小写法可以是：

<a href="目标文件地址" download>下载文件</a>

也可以给下载文件名一个建议值，但这属于扩展用法；本节先掌握“设置该属性即触发下载提示，且同服务器才可靠”。

易错点：不要把 download 当成绝对命令，浏览器和文件类型会影响行为；跨域/不同服务器时不要假设一定下载；不要写 download="false" 试图取消下载；它也不是“强制所有用户必须下载”的安全机制。

用转写稿里的调试思路验证新增属性

转写稿里虽然主要演示的是 datalist、video、audio 等内容，但有几个调试思路可以迁移到本节。讲师反复强调：VS Code 不提示某个新标签或新属性，并不代表浏览器不支持，“能不能用，主要看浏览器支不支持”；他还通过刷新页面、输入关键字、检查元素来验证实际效果。这个推导同样适用于 hidden 和 download：先写最小页面，刷新看浏览器真实行为；用开发者工具确认元素是否还在、属性是否写上；不要只凭编辑器是否高亮判断。

另外，转写稿中多次出现“这个属性不需要值”的现象，如 controls、muted、autoplay、loop。这能帮助理解 hidden 这类布尔属性：出现即生效，不要画蛇添足赋值。download 虽然不是布尔属性，但本节笔记也说明它“不需要值”，先按最小写法验证，再考虑文件名等扩展。这样既尊重笔记范围，也避免把转写稿中视频、音频的具体结论误套到全局属性上。

5 HTML5 兼容性方案总览

这一节围绕 HTML5 里几个“新标签”展开：datalist 做输入框搜索提示，video 插入视频，audio 插入音频，source 处理格式兼容，最后用 video 做全屏视频背景。它们共同点是：浏览器支持后，写法比旧方案简单很多；但默认样式、自动播放规则、尺寸适配都有坑。

输入框搜索提示：datalist

为什么需要：百度输入“高”会出现一批以“高”开头的提示，输入“乐”也能匹配到包含“乐”的词。我们希望普通输入框也有这种提示能力。
怎么想：百度那种下拉框是 div 定位加 JS 事件做的；HTML5 提供了更简单的 datalist。它本身不显示，必须和 input 建立关联。
怎么做：

<input class="text-input" list="search-data">
<datalist id="search-data">
  <option value="高小乐"></option>
  <option value="高志强"></option>
  <option value="高玉良"></option>
  <option value="hello"></option>
  <option value="hello world"></option>
  <option value="老头乐"></option>
</datalist>

.text-input {
  width: 400px;
  padding: 10px;
  border: 1px solid #999;
}

关键是：datalist 加 id，input 用 list="search-data" 关联。关联后，输入“高”只出现含“高”的项，输入“乐”会把“高小乐”“老头乐”都匹配出来，说明它匹配的是“包含关键字”，不只是开头。
易错点：datalist 写完不会自己显示；VSCode 不提示这个标签不代表浏览器不支持；它默认样式比较丑，想要百度式下拉框，仍需 div 定位加 JS。

视频标签 video

为什么需要：早期网页插视频要靠 Flash，格式常是 .swf、.flv，很麻烦。HTML5 让插视频像插图片一样简单。
怎么想：用双标签 video，src 指向视频地址；默认没有控制条，要加 controls。
怎么做：

<video src="./videos/demo.mp4" controls width="800"></video>

常用属性：controls 显示控制条，muted 默认静音，autoplay 自动播放，loop 循环播放，preload 预先加载，poster 设置封面图。
调试自动播放时会发现：只写 autoplay 不生效；加上 muted 后才自动播放。这是 Chrome 的规则：有声音的自动播放可能泄露隐私，默认静音才允许。preload 是提前下载，若已 autoplay，意义就不大。
易错点：只设宽或高，另一项按比例自动调整；同时设宽高不会拉伸视频，而会出现留白。一般设置一个尺寸即可。

音频标签 audio

为什么需要：网页要播放音乐、背景音时，需要音频标签。
怎么想：和 video 类似，用 audio 加 src，但音频没有画面，默认也没有控制条。
怎么做：

<audio src="./music/demo.mp3" controls></audio>

它同样支持 muted、loop、preload 等属性，但没有宽高，也没有 poster 封面。
易错点：音频即使静音后自动播放，用户也听不到，实际意义不大；转写稿中的结论是“不能自动播放”。很多网页会把 audio 隐藏，自己用图标加 JS 控制。

source 标签与兼容写法

为什么需要：早期浏览器对 MP4、OGG、WebM 支持不一致，需要准备多种格式。
怎么想：video 不写 src，里面放多个 source，浏览器按顺序选择自己能支持的格式。
怎么做：

<video controls>
  <source src="./videos/demo.mp4" type="video/mp4">
  <source src="./videos/demo.ogg" type="video/ogg">
  <source src="./videos/demo.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

易错点：现在 MP4 兼容性已经很好，直接写 video src 通常就够；看到别人用 source 不用纠结，它主要是历史兼容写法。source 是单标签，type 用来告诉浏览器格式。

视频背景

为什么需要：现在流行把视频铺在页面底部当背景，上面叠文字，视觉更高级。
怎么想：video 仍是标签，不是 CSS 背景图；要让它铺满视口，再让文字定位到它上面。
怎么做：

<style>
  * { margin: 0; padding: 0; }
  html, body { height: 100%; }
  .video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .content {
    position: fixed;
    left: 50%;
    top: 10px;
    width: 600px;
    margin-left: -300px;
    color: #fff;
  }
</style>

<video class="video-bg" src="./videos/bg.mp4" muted autoplay loop></video>
<div class="content">
  <h1>小乐的幸福生活</h1>
  <p>这里是叠在视频上的文字内容。</p>
</div>

调试时会遇到：video 设 height: 100% 却没效果。因为它的父元素 body 高度由内容撑开，父子互相等高度会“尬住”。所以先给 html, body 设 height: 100%，再给视频设 100%。加 object-fit: cover 后，视频会裁剪一部分来铺满区域，避免留白。
易错点：背景视频不要 controls，通常配 muted autoplay loop；文字用定位叠上去；object-fit: cover 的本质是裁切显示，不是拉伸。

课堂画面

代码示例

示例 1：datalist 输入框搜索提示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>输入框搜索提示</title>
  <style>
    .text-input {
      width: 400px;
      padding: 10px;
      border: 1px solid #999;
    }
  </style>
</head>
<body>
  <!-- list 属性的值 = datalist 的 id -->
  <input type="text" class="text-input" list="search-data">

  <datalist id="search-data">
    <option value="高小乐"></option>
    <option value="高志强"></option>
    <option value="高育良"></option>
    <option value="hello"></option>
    <option value="hello world"></option>
    <option value="老头乐"></option>
  </datalist>
</body>
</html>

• input 的 list 属性是专门给 datalist 准备的，值写 datalist 的 id，两者靠这个建立关联；不关联就完全不生效。
• datalist 自身在页面上不会显示，写上也看不见，必须被 input 关联后才会弹出提示。
• 提示项用 option 写，提示文本放在 value 上。
• 匹配规则是包含关键字而不是只匹配开头：输入“高”只剩姓高的，输入“乐”则“高小乐”和“老头乐”都会出来；什么都不输入时全部显示。
• VS Code 不提示 datalist 属于编辑器工具库没收录，不影响浏览器支持，能不用就不用，关键看浏览器。
• 下拉列表的样式浏览器给的很丑，基本改不了；要做成百度那种和输入框等宽的下拉面板，只能用 div 定位 + JS 自己实现。

示例 2：video / audio 标签及属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>video 与 audio</title>
  <style>
    .video-box {
      width: 800px; /* 只设宽，高度按比例自动 */
    }
  </style>
</head>
<body>
  <video class="video-box"
         controls
         muted
         autoplay
         loop
         poster="./images/bg01.png">
    <!-- 兼容写法：按顺序找浏览器支持的格式 -->
    <source src="./videos/01.mp4"  type="video/mp4">
    <source src="./videos/01.ogg"  type="video/ogg">
    <source src="./videos/01.webm" type="video/webm">
    您的浏览器不支持视频播放，<a href="./videos/01.mp4">点此下载</a>
  </video>

  <br>

  <audio src="./music/01.mp3" controls loop></audio>
</body>
</html>

• video 是双标签，src 可以直接写在 video 上；不写 controls 就只有一块黑，没有播放按钮。
• 尺寸只设宽或只设高其中一个即可，另一个按视频比例自动算；同时设宽高会把元素撑成那个尺寸，视频区域上下留白，因为视频不能像图片那样随意拉伸。
• autoplay 想生效必须同时加 muted：Chrome 规定有声音不允许自动播放，去掉 muted 自动播放立刻失效。
• preload 是预先下载，但一旦设了 autoplay 就没意义了（反正要马上加载）；不设则点播放时才下载，省流量。
• poster 设封面图地址，值是一张图片的地址。
• 用 source 写多份格式是旧式兼容做法，浏览器按顺序取第一个支持的；type 要和真实格式对应（video/mp4 / video/ogg / video/webm）。现在 MP4 兼容性足够，直接写 src 就行。
• video 里的那段文字和链接是后备内容：浏览器不认 video 标签时才会显示出来。
• audio 没有宽高、没有封面，功能很单一，只有一条控制条；音频一般不自动播放，静音自动播放也毫无意义。

示例 3：视频背景

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频背景</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    /* 关键：让 video 的 height:100% 有参照 */
    html,
    body {
      height: 100%;
    }
    .video-bg {
      width: 100%;
      height: 100%;
      object-fit: cover;   /* 填满容器，多余部分裁掉 */
      position: fixed;
      top: 0;
      left: 0;
    }
    .content {
      position: fixed;
      left: 50%;
      top: 10px;
      width: 600px;
      margin-left: -300px; /* 水平居中 */
      color: #fff;
    }
  </style>
</head>
<body>
  <video class="video-bg" src="./videos/bg3.mp4" muted autoplay loop></video>

  <div class="content">
    <h1>小乐的幸福生活</h1>
    <p>生活不止眼前的苟且，还有诗和远方的田野。</p>
  </div>
</body>
</html>

• video 设 height: 100% 时，百分比参照的是父元素 body 的高度，而 body 默认没有高度、只被内容撑开，父子互相依赖就卡住了；所以必须给 html, body 都加 height: 100%，html 的百分比才参照浏览器视口。
• object-fit: cover 是让视频内容铺满整个 video 元素的关键：不加就是按原比例留白，加了才铺满，原理是把超出比例的部分裁掉不显示，所以不同屏幕看到的画面范围不同，但看起来永远是满的。
• 文字压在视频上靠定位实现：video 只是普通元素，没有“背景视频”这种概念，只能把文字元素定位上去。
• 背景视频不需要 controls，只要 muted + autoplay + loop 三件套，静音是自动播放的前提，漏了 muted 视频就静止不动。
• 这段视频尺寸远大于屏幕，正因为有 cover 才不会被拉伸变形，不用担心原视频多大。

常见错误

• 现象：输入框输入关键字没有任何搜索提示；原因：input 未通过 list 关联 datalist，或 datalist 缺少 id；修法：给 datalist 设置唯一 id，在 input 上写 list="该id"。
• 现象：video 引入后只显示黑框，没有播放按钮；原因：未添加 controls；修法：在 video 上添加 controls（布尔属性，无需赋值）。
• 现象：设置了 autoplay 但视频不自动播放；原因：浏览器自动播放策略限制，通常要求静音；修法：同时添加 muted，或改为用户交互后播放；不要依赖未经验证的绕过手段。
• 现象：视频背景铺不满，出现留白或比例异常；原因：只给 video 设了宽高，未处理内容适配，或父级高度未建立；修法：设置 html, body { height: 100%; }，video 宽高 100%，并加 object-fit: cover;。
• 现象：source 写了多个格式但未按预期加载；原因：缺少 type 或顺序不符合浏览器选择逻辑；修法：每个 source 同时写 src 和正确的 type，按期望优先级排列。
• 现象：hidden="false" 元素仍然隐藏；原因：hidden 是布尔属性，存在即生效；修法：要显示就移除该属性，或用 JS/CSS 控制显示状态。

练习

1. 用 datalist 给一个输入框添加 5 条搜索提示，并验证输入“高”“h”等关键字时的匹配效果。
2. 写一个 video 标签：带控制条、默认静音、自动播放、循环播放，并设置封面图；说明自动播放生效的关键条件。
3. 用 source 为同一个视频提供 MP4、OGG、WebM 三种格式，补全 type，并说明浏览器如何选择。
4. 实现一个全屏视频背景页面：视频静音自动循环，中央显示标题文字，要求视频无留白、文字覆盖在视频上。
5. 判断以下场景是否可行并说明修法：跨服务器文件使用 a[download] 强制下载；audio 通过宽高属性调整大小。

原视频对照

#	视频	时长
1	输入框搜索提示	06:51
2	视频	28:12
3	音频	05:26
4	source标签的使用	05:35
5	视频背景	13:09

小结

• datalist 的可用前提是 input[list] 与 datalist[id] 正确关联，提示 UI 由浏览器决定，样式定制能力有限。
• video/audio 的基础播放依赖 src 与 controls；audio 不具备视频封面和宽高尺寸能力。
• 自动播放不是单靠 autoplay 就能稳定生效，主流浏览器通常要求静音或用户交互。
• source 的价值在多格式兼容与按序选择，现代项目通常 MP4 已足够，但仍需认识旧写法。
• 视频尺寸可 CSS 或属性控制，单独设宽或高更利于保持比例；铺满容器要配合 object-fit: cover。
• 视频背景的关键是父级高度链路、video 宽高 100%、内容裁切适配，以及用定位把文字覆盖到视频上。
• 原生音视频控件样式能力有限，隐藏音频、自定义播放器、复杂交互都需要 JS 与自定义 DOM/CSS。
• hidden 是布尔全局属性；download 受同源/服务器限制，不能简单理解为任意链接都能强制下载。