关键在于语义化标签与CSS职责分离：HTML用<header>、<nav>、<main>等明确内容角色，CSS仅负责视觉表现，二者物理分离、逻辑协同，确保可访问性、可维护性与响应式适配。
关键在于用对标签、样式不越界、结构和视觉各司其职。语义化标签负责“说什么”，CSS 负责“怎么看起来”，二者物理分离但逻辑一致。
先搭准确的语义骨架
每个标签都有不可替代的职责，不能凭样式感觉乱用：
- <header>只包页面或章节顶部内容，比如网站 logo + 主导航，不是所有带背景色的顶部模块都该用它
- <nav>必须是独立导航链接集合，页脚里的“友情链接”或侧边栏“相关文章”不算，需另加 aria-label 区分
- <main>全页唯一，不能嵌套在 <article> 或 <section> 里，键盘用户靠它一键跳转核心内容
- <article>代表可独立分发的内容项（如一篇博文），自带隐含上下文，适合 RSS 抓取和搜索引擎识别
- <aside>只用于与主内容相关但可脱离存在的旁注，比如术语解释、作者简介，不是广告位或无关推荐区
CSS 只响应结构，不篡改语义
浏览器对 <header>、<nav> 等标签默认只有块级行为，没有样式。所有视觉效果必须显式定义，且不能破坏语义路径：
- 避免用 display: none 隐藏 <nav> 或 <main>——保留语义价值，用媒体查询控制可见性更安全
- 表单中别用 placeholder 代替 <label>，必须显式绑定：<label for="email">邮箱</label><input id="email">
- 键盘焦点样式不能删，禁用 outline: none；改用 outline: 2px solid #0066cc; outline-offset: 2px;
- 用 nav ul 选择器统一控制菜单列表，而不是给每个 <a> 加 class="menu-link"
类名做桥梁，不抢语义主角
语义标签表达“是什么”，类名补充“这一类有什么共性”，两者配合提升可维护性：
立即学习“前端免费学习笔记（深入）”；
- 类名描述内容意义，比如 .post-header、.card，不用 .blue-bg 或 .float-right
- 组合使用增强精准度：例如 article.card { padding: 1rem; border-radius: 4px; }
- 侧边栏用 <aside>，再加 class="related-posts"，既保语义又便样式定位
- BEM 类名如 .nav__item--active 可清晰表达层级关系，不破坏 <nav> 的原始语义
响应式中守住结构底线
移动端适配时，视觉布局可以变，但语义顺序和层级不能妥协：
- 不要为实现“顶部导航+侧边栏折叠”就把 <aside> 拆成 <div> 或挪到 <header> 下面
- 用 Flexbox 或 Grid 布局 <main> 和 <aside>，通过 order 属性调整视觉顺序，DOM 结构保持原样
- 媒体查询中优先用 display: flex 或 grid-template-areas 重构布局，而非替换标签
- 所有语义区域（包括 <footer>）都应保留在 DOM 中，即使视觉上隐藏，辅助技术仍能访问
