html5语义化标签不改变css渲染规则但影响选择器习惯和默认样式；需显式声明样式、避免纯标签选择器；doctype html触发标准模式以支持css3特性；data-*属性实现css与js轻量协同；canvas/svg的css作用边界与普通元素不同。
HTML5 的语义化标签直接影响 CSS 选择器行为
HTML5 新增的 <header></header>、<nav></nav>、<article></article> 等标签本身不改变 CSS 渲染规则，但会改变开发者编写选择器的习惯和浏览器默认样式表（user agent stylesheet）的匹配逻辑。例如，旧版 HTML 中用 <div class="header">，CSS 写 <code>.header { … }；HTML5 中改用 <header></header> 后，很多人直接写 header { … } —— 这会导致全局污染，且在未重置样式的场景下，不同浏览器对 header 的默认 display、margin 处理略有差异。
实操建议：
- 不要依赖 HTML5 标签的“语义”自动带来样式优势，仍需显式声明
display、margin等关键属性 - 使用
html5shiv或现代触发标准模式，否则 IE8 及更早版本会忽略这些标签并退化为 <code>inline行为 - 避免纯标签选择器（如
nav），优先用带类名的组合（如nav.main-nav），防止意外覆盖或继承异常
CSS3 的某些特性在 HTML5 文档模式下才被完整启用
不是所有 CSS3 特性都“只认 HTML5”，但部分特性（尤其是与 DOM 结构强相关的）需要浏览器处于标准渲染模式（Standards Mode），而该模式由 显式触发 —— 这是 HTML5 文档的标志性写法。若页面漏写 DOCTYPE 或写成 <code>，IE 和部分旧版浏览器会进入 Quirks Mode，导致 <code>flexbox、grid、@supports 查询甚至 rem 单位计算异常。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
-
display: grid完全不生效，检查document.compatMode返回"BackCompat" -
@supports (display: flex) { … }内部规则被跳过，即使浏览器支持 flex -
calc(100vh - 60px)在 iOS Safari 旧版中计算结果为 0，实际是 DOCTYPE 缺失导致视口单位解析失败
HTML5 的自定义数据属性（data-*）让 CSS 与 JS 协同更轻量
HTML5 明确允许 data- 前缀的自定义属性，CSS 可通过属性选择器直接响应其值变化，无需 JS 操作 class。这并非“HTML5 让 CSS3 更紧”，而是提供了更干净的耦合路径。
button[data-loading="true"] {
opacity: 0.6;
pointer-events: none;
}
button[data-loading="true"]::after {
content: "…";
}注意点：
- 属性值必须是字符串，
data-active="1"和data-active="true"是不同值，CSS 里要严格匹配 - IE9+ 支持属性选择器，但 IE9 不支持
::after在某些替换元素上生效（如<input>），慎用于表单控件 - 变更
data-属性需用 JS 的element.dataset或setAttribute，直接改对象属性（如el.dataset.loading = true）会自动转为小写，影响 CSS 匹配
HTML5 的 <canvas></canvas> 和 <svg></svg> 改变了 CSS 渲染边界
CSS3 的变换（transform）、滤镜（filter）、混合模式（mix-blend-mode）可以作用于 <canvas></canvas> 和 <svg></svg> 元素本身，但无法穿透到其内部绘制内容 —— 这和普通 HTML 元素完全不同。例如，给 <canvas></canvas> 加 filter: blur(2px) 是对整个 canvas 位图做后处理；而对 SVG 内部 <circle></circle> 加同样 filter，则走的是 SVG 原生滤镜管线，效果和性能都不同。
容易踩的坑：
- 对
<canvas></canvas>使用transform: scale()会导致像素模糊，因 canvas 绘制分辨率未同步缩放 - SVG 中嵌入的 CSS（如
<style></style>块）受 HTML5 的<svg></svg>嵌套上下文影响，外部 CSS 的层叠优先级可能被意外截断 -
will-change: transform对<canvas></canvas>有效，但对 SVG 子元素无效，需加在容器上
HTML5 和 CSS3 的协同不是“更紧”，而是边界更清晰：HTML5 提供了更可靠的结构基础和扩展机制，CSS3 则在该基础上获得稳定执行环境。真正容易被忽略的是——哪怕写了 ，如果服务器返回了 <code>X-UA-Compatible: IE=EmulateIE7 响应头，所有 HTML5/CSS3 协同努力都会在 IE 中失效。
