html5语义化标签无默认样式，需手动css定义；ie8需html5shiv；css选择器严格匹配结构；flex/grid布局要兼顾语义与性能；data-*属性需配合属性选择器使用，避免滥用。
HTML5语义化标签不等于自动有样式
浏览器对 <article></article>、<nav></nav>、<section></section> 这类新标签默认只做“无样式块级处理”，和 <div> 一样是空的——别指望它们自带边距、字体或配色。
<p>常见错误现象：<code><header></header> 里文字没居中、<aside></aside> 和主内容挤在一起、<footer></footer> 没变小字号，全因没写 CSS。
- 必须手动用 CSS 给语义标签加样式，比如
nav { margin-bottom: 1rem; } - 不要为了“语义”而弃用
<div>：当纯布局容器不需要传达结构含义时，<code><div> 更轻量、更可控 <li>IE8 及更早版本根本不认识这些标签，需配合 <code>document.createElement或html5shiv脚本才能让 CSS 生效 -
nav ul li a能匹配<nav><ul><li><a></a></li></ul></nav>，但若换成<nav><menu><li><a></a></li></menu></nav>就断掉 - 避免过度依赖嵌套深度，比如
main > article > header > h1，改结构时极易崩；优先用类名定位：<h1 class="page-title"></h1> -
:not()和:is()在旧版 Safari（≤15.4）或安卓 WebView 中支持不稳定，慎用于关键样式逻辑 -
nav { display: flex; gap: 1rem; }比浮动或 inline-block 更干净，但记得设flex-wrap: wrap应对窄屏 -
main { display: grid; grid-template-areas: "header" "content" "sidebar"; }是错的——grid-template-areas要求子元素有grid-area，不能靠语义标签名自动映射 - 想让
<aside></aside>固定在右侧？直接给它align-self: start不如加个类class="sidebar"再写.sidebar { grid-column: 2; }，更可读、更易维护 - 推荐写法：
<button data-loading="true"></button>+button[data-loading="true"] { opacity: 0.6; cursor: not-allowed; } - 避免写
data-id="123"然后试图用[data-id^="1"]控制样式——ID 不是样式维度，该用类名或状态属性 -
data-theme="dark"可以配合:root变量切换，但注意：CSS 变量需提前定义，data-仅作触发条件，不存储值
CSS3选择器匹配HTML5结构时的坑
用 section > h2 选中章节标题没问题，但若 HTML 里写成 <section><h3>标题</h3></section>，这个选择器就失效了——不是语法错，是结构不匹配。
使用场景：组件化开发中常按语义嵌套，但 CSS 选择器对层级和标签名极其敏感。
立即学习“前端免费学习笔记（深入）”；
Flexbox/Grid 布局与 HTML5语义组合的实际写法
用 display: flex 布局 <nav></nav> 或 <header></header> 是合理且主流的做法，但要注意：Flex 容器会改变子元素的渲染行为，可能破坏语义标签原本的隐含流式含义。
性能影响：语义标签本身无开销，但若在 <main></main> 上滥用 display: grid 并配大量 grid-template-areas，CSS 解析和重排成本会上升，尤其在低端移动设备上。
自定义属性（data-*）怎么和CSS3联动
data- 属性本身不触发样式，但配合属性选择器可以精准控制状态，比如 [data-state="loading"] 配合 transition 实现按钮状态动画。
容易踩的坑：把业务逻辑塞进 data- 当开关，却忘了在 JS 更新后，CSS 无法监听变化——除非你用 attr()（目前仅支持 content，且不适用于其他属性）。
真正难的是语义和样式的责任边界——HTML5 告诉浏览器“这是什么”，CSS3 告诉浏览器“这看起来像什么”。两者不耦合，才不容易在改需求时互相拖垮。
