HTML5 兼容性方案与CSS3 基本语法（Day11 4/4）

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

学习目标

能列举 HTML5 新增全局属性中常用的 hidden，并演示其隐藏元素的效果及与 display:none 的相似性。
能使用超链接 download 属性实现同服务器目标文件下载，并解释跨服务器或本地双击打开时仍会跳转的原因。
能说明 H5 兼容方案中 X-UA-Compatible 元信息与 html5shiv 的作用及适用场景。
能识别常见浏览器私有前缀 -webkit-、-moz-、-ms-、-o-，并说明 CSS3 模块化特点及兼容性查询方法。
能区分 rem 与 em、vw 与 vh、vmax 与 vmin 的参照对象，并使用相应单位设置元素尺寸。
能使用 rgba()、hsl()、hsla() 设置颜色，并解释 alpha 透明度取值及其显示效果。

知识点

先厘清：H5 兼容性到底兼容什么

为什么需要：HTML5 新增了语义标签、全局属性和 CSS3 能力，但旧版 IE 等浏览器可能不认识，老项目里常要处理兼容。怎么想：兼容分三层看——HTML 结构、标签属性、CSS 特性；现代项目大多可直接用，但遇到老代码要能看懂。怎么做：先认识新增属性，再了解 IE=edge、双核浏览器、html5shiv.js 和条件注释这些历史方案。易错点：条件注释只有 IE 认，其他浏览器只当普通注释；这些方案今天基本不用，不要当成新技术深挖。

HTML5 新增全局属性：记住 hidden

为什么需要：有时希望元素在页面和文档结构中彻底消失，hidden 提供了标签自带属性。怎么想：它类似 display:none，不是 visibility:hidden；后者看不见但仍占位置。怎么做：

html

<p>中文段落</p>
<p hidden>English paragraph</p>
<p>中文段落</p>

给中间英文段落加 hidden 后，它被彻底隐藏，调试工具中也不再占布局高亮。易错点：hidden 不需要值；它和 display:none 效果接近，但以后用 JS 操作元素自带属性往往比操作 CSS 更方便。

a 标签 download：同服务器才下载

为什么需要：浏览器能直接打开的网页、图片、MP4，点击链接默认是跳转；download 想让它们改为下载。怎么想：download 是无值属性，但有一个关键限制——目标文件必须与当前文件在同一台服务器上。怎么做：

html

<a href="01.html" download>下载网页</a>
<a href="https://www.baidu.com" download>下载百度（不会下载）</a>

调试时：双击打开本地页面，点击 download 链接仍会跳转，因为此时没有 Web 服务器；用 Live Server 打开后地址变成 127.0.0.1，同服务器文件才可下载；百度页面不在同一服务器，即使写了 download 仍跳转。易错点：跨服务器不生效；不要以为写了 download 就一定下载。

H5 兼容方案：meta、双核与 html5shiv

为什么需要：老 IE 可能用旧引擎渲染，也可能不认识 header、footer、nav 等标签。怎么想：一类是告诉浏览器用新引擎，一类是让旧 IE“认识”新标签。怎么做：模板中常见：

html

<meta http-equiv="X-UA-Compatible" content="IE=edge">

它告诉 IE 使用最新引擎。双核浏览器曾通过 meta 优先选择 Chrome/WebKit 内核。旧 IE 还可引入 html5shiv.js，并用条件注释：

html

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

易错点：条件注释只有 IE 识别；2023 年后基本无需手写，老代码里见到知道作用即可。

CSS3 概述与浏览器私有前缀

为什么需要：CSS3 按模块发展，不同浏览器、不同版本支持不一致，不能像 H5 几个标签那样简单说“IE9 以上都支持”。怎么想：查兼容性可看 Can I use；黄色通常表示需加私有前缀，红色表示不支持。怎么做：历史写法如圆角：

css

.box{
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
}

易错点：现在绝大多数属性直接写标准写法；只有个别新属性才需前缀，工程化工具可自动补。不要背一堆旧前缀。

CSS3 新增长度单位：rem、vw/vh、vmax/vmin

为什么需要：移动端适配希望尺寸随屏幕或根字号变化。怎么想：em 看自身或继承的字体大小，rem 永远只看根元素 html 的字体大小。怎么做：

css

html{font-size:18px}
body{font-size:14px}
.box1{width:20rem;height:20rem}
.box2{width:20em;height:20em}

调试：html 为 18px 时，二者都先变 360×360；body 设 14px 后，em 变 280×280，rem 仍 360×360；盒子自身设 16px 后，em 变 320×320，rem 不动。vw/vh 把视口宽/高分成 100 份，10vw 是视口宽 10%；vmax 取宽高中较大者，vmin 取较小者。易错点：vw 不是百分比，百分比参照父元素，vw 只看视口；一般更关心宽度，高度受滚动条影响。

CSS3 新增颜色设置方式：rgba、hsl、hsla

为什么需要：需要半透明颜色，做出更丰富的视觉效果。怎么想：rgba 前三个是红绿蓝，a 是不透明度，0 全透、1 不透；hsl 中 H 是色相 0–360，S 饱和度、L 亮度用百分比；hsla 再加透明度。怎么做：

css

.a{background:rgba(255,0,0,.5)}
.b{background:hsl(90,100%,50%)}
.c{background:hsla(0,100%,50%,.5)}

调试 rgba 的 A：0.1 更透，0.9 只轻微透，0 几乎只剩文字，1 完全不透；半透明只作用于颜色，文字本身不受影响。易错点：程序员常用 rgba，hsl/hsla 了解即可；半透明颜色别和整个元素透明度混为一谈。

从 H5 新增属性过渡到 CSS3 基本语法

这一节先从 H5 新增的全局属性和超链接属性讲起，再进入 CSS3 的概述、浏览器私有前缀、新增长度单位与颜色设置方式。转写稿里反复强调：很多新标准属性“设计时想得很好，实践中未必常用”，所以学习时要抓住真正有用的部分，别被属性表吓住。

hidden：让元素彻底隐藏

为什么需要：以前隐藏元素常用 display:none 或 visibility:hidden，但 H5 给元素提供了一个自带属性 hidden，在后续用 JS 操作元素自带属性时更方便。

怎么想：hidden 不需要值，写上就能隐藏。它的效果和 display:none 一样：元素看不见，也不占位置，在文档结构里也找不到它的高亮区域。

怎么做：

html

<p>中文段落</p>
<p hidden>English paragraph</p>
<p>中文段落</p>

调试时给中间英文段落加 hidden，刷新后它会彻底消失。注意它和 visibility:hidden 不同：后者“看不见但位置还占着”，hidden 是彻底隐藏。

易错点：hidden 不需要写 hidden="hidden" 之类；新增全局属性很多，但转写稿明确说“记这一个就行”，其他大多用不上。

a 标签的 download：点击下载而不是跳转

为什么需要：浏览器能直接打开网页、图片、MP4 时，超链接默认是跳转/打开；有时我们希望点击后下载目标文件。

怎么想：给 a 标签加 download，它不需要值。但有一个关键限制：目标文件必须与当前文件在同一台服务器上，否则即使写了 download，仍然会跳转。

怎么做：

html

<a href="./01.html" download>下载网页</a>
<a href="./images/bg.jpg" download>下载图片</a>
<a href="./video.mp4" download>下载视频</a>

调试过程很重要：双击打开本地 HTML 时没有 Web 服务器，download 可能不生效；用 Live Server 打开后地址变成 127.0.0.1:端口，再点同一服务器下的文件才会下载。若写百度首页地址并加 download，因为不在同一服务器，仍然跳转。

易错点：把“同服务器”误认为“同文件夹”；用 file:// 双击页面测试下载，结果失败就以为属性没用。

H5 兼容方案：了解即可

为什么需要：老 IE 可能不认识 header、footer、nav 等标签，也可能落入旧渲染模式。怎么想：常见方案有三类：meta 源信息让 IE 用最新引擎；双核浏览器优先 WebKit 内核；引入 html5shiv.js 让老 IE 认识新标签。转写稿明确说 2023 年基本不需要写，遇到老代码知道即可。

html

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

易错点：IE 条件注释只有 IE 认识，其他浏览器当普通注释；不要花大量时间学已淘汰方案。

CSS3 概述与浏览器私有前缀

为什么需要：CSS3 按模块发展，没有“某个浏览器版本以上全支持”的简单结论。查兼容性可用 “Can I use”。怎么想：新属性浏览器尝试支持时，会要求加私有前缀：-webkit- 给 Chrome/Safari，-moz- 给 Firefox，-ms- 给 IE，-o- 给 Opera。怎么做：以圆角为例：

css

.box {
  width: 400px;
  height: 300px;
  border: 2px solid #900;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

易错点：现代开发大多直接写标准属性，约九成不需要手写前缀；需要兼容可由工程化工具自动生成。私有前缀属性有“试验性”，语法可能变，别滥用。

新增长度单位：rem、vw、vh、vmax、vmin

为什么需要：移动端屏幕宽窄差异大，需要更灵活的尺寸单位。怎么想：rem 是根元素字体大小的倍数，永远只看 html；em 是自身字体大小的倍数，自身没设就看继承。vw/vh 把视口宽/高分成 100 份；vmax/vmin 取视口宽高较大/较小者分成 100 份。怎么做：

css

html { font-size: 18px; }
.box1 { width: 20rem; height: 20rem; } /* 360×360 */
.box2 { width: 20em;  height: 20em;  } /* 随自身/继承字体变化 */
.box3 { width: 10vw;  height: 10vw;  }
.box4 { width: 10vh;  height: 10vh;  }

调试时给父元素改 font-size，rem 不变，em 会变；调浏览器窗口宽度，vw 跟着变。易错点：把 vw 当百分比——百分比参照父元素，vw 只看视口；移动端常用 rem 结合 JS 调根字体，或直接用 vw 适配宽度。

新增颜色设置方式：rgba、hsl、hsla

为什么需要：需要半透明颜色。怎么想：rgba 前三个是红绿蓝，a 是不透明度，取 0–1，越大越不透明；hsl 中 H 是色相 0–360，S 饱和度、L 亮度取百分比；hsla 再加透明度。怎么做：

css

.box1 { background: rgba(255, 0, 0, .5); }
.box2 { background: hsl(90, 100%, 50%); }
.box3 { background: hsla(0, 100%, 50%, .5); }

易错点：rgba 的半透明只作用于颜色，不影响文字；opacity 写小数或百分比都行，但别和 rgba 的 a 混淆。实际开发中不透明颜色常用十六进制，半透明常用 rgba。

课堂画面

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

代码示例

示例一：HTML5 新增全局属性 `hidden`、超链接 `download` 与兼容性方案

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- 兼容方案1：告诉 IE 用最新引擎渲染，避免被切到旧模式 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>H5 新增属性：hidden 与 download</title>

  <!-- 兼容方案2：IE 条件注释，只有 IE 版本小于 9 才加载 html5shiv.js -->
  <!--[if lt IE 9]>
    <script src="html5shiv.js"></script>
  <![endif]-->

  <style>
    p {
      width: 600px;
      padding: 20px;
      background: #cccccc;
    }
    a {
      display: inline-block;
      margin: 6px 0;
    }
  </style>
</head>
<body>
  <p>第一个段落：中文内容</p>
  <!-- hidden 不需要值，直接写属性名即可，元素被彻底隐藏 -->
  <p hidden>Second paragraph（英文段落，被 hidden 隐藏）</p>
  <p>第三个段落：中文内容</p>

  <!-- 普通超链接：点击跳转（浏览器能打开就直接打开） -->
  <a href="./01-网页.html">普通超链接 —— 跳转</a><br>

  <!-- download：点击下载目标文件，同样不需要值 -->
  <a href="./01-网页.html" download>download —— 下载网页</a><br>
  <a href="./bg4.jpg" download>download —— 下载图片</a><br>

  <!-- 跨服务器：加了 download 也照样跳转，下不下来 -->
  <a href="https://www.baidu.com/" download>download —— 百度的页面（无效）</a>
</body>
</html>

要点解释 / 易错点

hidden 是不需要值的布尔属性，效果与 display: none 一致，元素彻底不显示（不像 visibility: hidden 那样还占着位置）。
既然有 display: none，为什么还用 hidden？因为它属于标签自带属性，以后用 JS 操作元素自带属性比操作 CSS 更方便（尤其是这种无值属性）。
download 也是无值属性，作用是点击后不跳转、直接下载目标文件。
最大易错点：download 要求目标文件必须与当前文件在同一台服务器上。双击 file:// 打开页面时无法判断服务器，download 会失效；只有用 Live Server（127.0.0.1:端口号）这类 Web 服务器打开才生效。
即使走服务器，指向百度首页这种别家服务器的地址，加了 download 依旧只是跳转。
X-UA-Compatible 和条件注释里引入 html5shiv.js 属于老兼容方案，现代项目基本不用，但老代码里常见，知道"注释里写 if 的只有 IE 认"即可。

示例二：CSS3 浏览器私有前缀 + 五个新增长度单位

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 私有前缀与新增长度单位</title>
  <style>
    /* 根元素字体大小，rem 只认它 */
    html { font-size: 18px; }
    /* 普通元素继承的字体大小，em 认它 */
    body { font-size: 14px; }

    /* 1. 边框圆角：私有前缀的经典写法 */
    .radius {
      width: 400px;
      height: 300px;
      border: 2px solid #990000;
      -webkit-border-radius: 10px; /* 谷歌 Chrome、苹果 Safari */
      -moz-border-radius: 10px;    /* 火狐 Firefox */
      -ms-border-radius: 10px;     /* 微软 IE / Edge */
      -o-border-radius: 10px;      /* 欧朋 Opera */
      border-radius: 10px;         /* 标准写法放最后 */
    }

    /* 2. 五个新增长度单位 */
    .book {
      background: #990000;
      color: #ffffff;
      text-align: center;
      display: inline-block;
    }
    .book01 { width: 20rem;  height: 20rem;  } /* 20 × 18px = 360px */
    .book02 { width: 20em;   height: 20em;   } /* 20 × 14px = 280px */
    .book03 { width: 10vw;   height: 10vw;   } /* 视口宽度的 10% */
    .book04 { width: 10vh;   height: 10vh;   } /* 视口高度的 10% */
    .book05 { width: 10vmax; height: 10vmax; } /* 视口宽、高中较大者的 10% */
    .book06 { width: 10vmin; height: 10vmin; } /* 视口宽、高中较小者的 10% */
  </style>
</head>
<body>
  <div class="radius"></div>

  <div class="book book01">20rem</div>
  <div class="book book02">20em</div>
  <div class="book book03">10vw</div>
  <div class="book book04">10vh</div>
  <div class="book book05">10vmax</div>
  <div class="book book06">10vmin</div>
</body>
</html>

要点解释 / 易错点

私有前缀顺序：-webkit-（Chrome/Safari）、-moz-（Firefox）、-ms-（IE/Edge）、-o-（Opera），不带前缀的标准写法写在最后，保证标准生效时覆盖前面。
现在 90% 的属性都不用加私有前缀，border-radius 兼容性早就很好了；需要兼容性统一交给工程化工具（如 webpack）自动生成即可。
rem = 根元素（html）字体大小的倍数，永远只看 html，自身、父元素的 font-size 都不影响它；em = 自身字体大小的倍数，自身没设就继承父元素。
验证技巧：把 html 改成 font-size: 18px，rem 元素跟着变、em 元素不变；把 body 改成 font-size: 14px，em 元素变小、rem 元素不动。
vw / vh 是把视口宽 / 高分成 100 份占几份，与百分比完全不同：百分比参照的是父元素，vw/vh 只参照浏览器视口，千万别混为一谈。
vmax / vmin 取的是视口宽高中较大 / 较小的那个，所以它此刻可能等于 vw，也可能等于 vh，取决于当前视口谁大。
常用的是 rem 和 vw（移动端适配看宽度），vh/vmax/vmin 基本很少用。

示例三：CSS3 新增颜色设置方式 `rgba`、`hsl`、`hsla`

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 新增颜色设置方式</title>
  <style>
    body {
      /* 加张背景图，方便看出半透明效果 */
      background: url(./bg4.jpg) no-repeat center / cover;
    }

    .book {
      width: 600px;
      height: 100px;
      padding: 20px;
      margin: 20px 0 0 20px;
      color: #ffffff;
      line-height: 100px;
    }

    /* rgba：前三个是红绿蓝，最后一个是透明度 */
    .book01 { background: rgba(255, 0, 0, 0.5); }

    /* hsl：色相 0~360 度、饱和度 0%~100%、亮度 0%~100% */
    .book02 { background: hsl(90, 100%, 50%); }

    /* hsla：在 hsl 基础上多一个透明度 */
    .book03 { background: hsla(100, 100%, 50%, 0.5); }
  </style>
</head>
<body>
  <div class="book book01">rgba —— 半透明红</div>
  <div class="book book02">hsl —— 绿色</div>
  <div class="book book03">hsla —— 半透明绿</div>
</body>
</html>

要点解释 / 易错点

rgba 的 a 是 opacity 不透明度，取值 0~1 的小数：0 完全透明、1 完全不透明、0.5 半透明；写百分比也可以（1% 就是 0.01）。
半透明只作用于这个颜色本身，不会影响里面的文字，所以文字设成 #fff 依然是纯白。
hsl 的 H 是色相（0~360 的角度，色相环上不同角度对应不同颜色）、S 是饱和度、L 是亮度；亮度最高变白、最低变黑，中间最合适。这套更适合作图设计人员，程序员日常还是用 RGB。
hsla 的 A 与 rgba 的 A 完全一样，只多了一层透明控制。
实用结论：不透明的颜色用十六进制（#990000）即可；需要半透明效果时优先用 rgba，它最常用、也最好用。

常见错误

现象：给 a 加 download 后点击仍跳转。原因：目标文件未与当前页面处于同一服务器/同源环境，file:// 双击打开会误判。修法：用 Live Server 等本地服务器打开测试；跨站链接不要指望 download 强制下载。
现象：用 hidden 隐藏后想保留占位，结果元素彻底消失。原因：hidden 表现接近 display:none。修法：需占位改用 visibility:hidden 或透明度方案；需 JS 快速切换可优先 hidden。
现象：给 CSS3 属性手写 -webkit-、-moz-、-ms-、-o- 一大串。原因：沿用旧兼容思路，现代浏览器多数已不需前缀。修法：只写标准属性；确需兼容交给 Autoprefixer 等工程化工具。
现象：把 rem 当 em 用，改父元素字号后尺寸不符合预期。原因：rem 只参照根元素字号，em 参照当前/继承字号。修法：先明确参照对象；移动端调根字号时统一用 rem。
现象：移动端用 vh 做全屏高度，地址栏伸缩时布局跳动或溢出。原因：vh 跟随视口高度变化，移动端高度不稳定。修法：核心高度慎用 vh，优先宽度适配、百分比或现代动态视口单位。
现象：想让背景半透明，却用 opacity 导致文字也变淡。原因：opacity 作用于整个元素及子内容，rgba/hsla 只作用于颜色。修法：只透明背景用 rgba()/hsla()；整块透明才用 opacity。
现象：按“某浏览器版本以上都支持 CSS3”判断兼容性。原因：CSS3 按模块演进，各属性支持情况不同。修法：用 Can I use 按具体属性查，不按浏览器大版本一刀切。

练习

建三个 p，给中间元素加 hidden，分别对比 display:none、visibility:hidden 的占位与文档结构；再用 JS 切换 hidden。
准备本地网页、图片、MP4 三个链接，分别加 download，用 file:// 和 Live Server 打开对比；再加一个跨站链接验证下载限制。
做两个盒子分别用 20rem 和 20em，修改 html 字号与父级字号，记录尺寸变化并说明原因。
用 vw、vh、vmax、vmin 各做一个盒子，拖动窗口宽高，记录四者关系；说明移动端为何慎用 vh。
用 rgba() 和 hsla() 做半透明背景卡片，再与 opacity 方案对比子文字效果；用 Can I use 查 border-radius 或 background-size 的支持情况。

原视频对照

#	视频	时长
1	新增的全局属性和新增的超链接属性	11:22
2	了解H5的兼容方案	04:35
3	CSS3概述和浏览器私有前缀	11:31
4	CSS3新增长度单位	17:41
5	CSS3新增颜色设置方式	08:44

小结

H5 新增全局属性优先掌握 hidden，它隐藏彻底且便于 JS 操作，但表现接近 display:none。
a[download] 不是万能下载，受同服务器/同源限制；本地双击打开测试容易得出错误结论。
H5 兼容方案多为历史遗留：X-UA-Compatible、双核内核优先、条件注释等，现代项目了解即可。
CSS3 按模块演进，兼容性必须按具体属性查 Can I use，不能按浏览器大版本简单判断。
私有前缀只在个别新属性或旧环境需要；现代开发写标准属性，兼容前缀交给工程化工具。
新长度单位重点掌握 rem 与 vw：rem 看根字号，vw 看视口宽度；vh 在移动端高度场景要谨慎。
半透明颜色优先 rgba()/hsla()；opacity 会影响整个元素，二者不要混用。
兼容方案和私有前缀不应成为学习主线，遇到遗留代码能识别、能改即可。

HTML5 兼容性方案与CSS3 基本语法（Day11 4/4） ​

学习目标 ​

知识点 ​

先厘清：H5 兼容性到底兼容什么 ​

HTML5 新增全局属性：记住 hidden ​

a 标签 download：同服务器才下载 ​

H5 兼容方案：meta、双核与 html5shiv ​

CSS3 概述与浏览器私有前缀 ​

CSS3 新增长度单位：rem、vw/vh、vmax/vmin ​

CSS3 新增颜色设置方式：rgba、hsl、hsla ​

从 H5 新增属性过渡到 CSS3 基本语法 ​

hidden：让元素彻底隐藏 ​

a 标签的 download：点击下载而不是跳转 ​

H5 兼容方案：了解即可 ​

CSS3 概述与浏览器私有前缀 ​

新增长度单位：rem、vw、vh、vmax、vmin ​

新增颜色设置方式：rgba、hsl、hsla ​

课堂画面 ​

代码示例 ​

示例一：HTML5 新增全局属性 hidden、超链接 download 与兼容性方案 ​

示例二：CSS3 浏览器私有前缀 + 五个新增长度单位 ​

示例三：CSS3 新增颜色设置方式 rgba、hsl、hsla ​

常见错误 ​

练习 ​

原视频对照 ​

小结 ​

HTML5 兼容性方案与CSS3 基本语法（Day11 4/4）

学习目标

知识点

先厘清：H5 兼容性到底兼容什么

HTML5 新增全局属性：记住 hidden

a 标签 download：同服务器才下载

H5 兼容方案：meta、双核与 html5shiv

CSS3 概述与浏览器私有前缀

CSS3 新增长度单位：rem、vw/vh、vmax/vmin

CSS3 新增颜色设置方式：rgba、hsl、hsla

从 H5 新增属性过渡到 CSS3 基本语法

hidden：让元素彻底隐藏

a 标签的 download：点击下载而不是跳转

H5 兼容方案：了解即可

CSS3 概述与浏览器私有前缀

新增长度单位：rem、vw、vh、vmax、vmin

新增颜色设置方式：rgba、hsl、hsla

课堂画面

代码示例

示例一：HTML5 新增全局属性 `hidden`、超链接 `download` 与兼容性方案

示例二：CSS3 浏览器私有前缀 + 五个新增长度单位

示例三：CSS3 新增颜色设置方式 `rgba`、`hsl`、`hsla`

常见错误

练习

原视频对照

小结