关键在于语义化标签与css职责分离：html用、、等明确内容角色，css仅负责视觉表现，二者物理分离、逻辑协同，确保可访问性、可维护性与响应式适配。
关键在于用对标签、样式不越界、结构和视觉各司其职。语义化标签负责“说什么”，CSS 负责“怎么看起来”，二者物理分离但逻辑一致。
先搭准确的语义骨架
每个标签都有不可替代的职责，不能凭样式感觉乱用：
-
只包页面或章节顶部内容，比如网站 logo + 主导航，不是所有带背景色的顶部模块都该用它 - 必须是独立导航链接集合，页脚里的“友情链接”或侧边栏“相关文章”不算，需另加 aria-label 区分
-
全页唯一，不能嵌套在
或 里，键盘用户靠它一键跳转核心内容 - 代表可独立分发的内容项（如一篇博文），自带隐含上下文，适合 RSS 抓取和搜索引擎识别
- 只用于与主内容相关但可脱离存在的旁注，比如术语解释、作者简介，不是广告位或无关推荐区
CSS 只响应结构，不篡改语义
浏览器对
- 避免用 display: none 隐藏
- 表单中别用 placeholder 代替
- 键盘焦点样式不能删，禁用 outline: none；改用 outline: 2px solid #0066cc; outline-offset: 2px;
- 用 nav ul 选择器统一控制菜单列表，而不是给每个 加 class="menu-link"
类名做桥梁，不抢语义主角
语义标签表达“是什么”，类名补充“这一类有什么共性”，两者配合提升可维护性：
- 类名描述内容意义，比如 .post-header、.card，不用 .blue-bg 或 .float-right
- 组合使用增强精准度：例如 article.card { padding: 1rem; border-radius: 4px; }
- 侧边栏用
- BEM 类名如 .nav__item--active 可清晰表达层级关系，不破坏
响应式中守住结构底线
移动端适配时，视觉布局可以变，但语义顺序和层级不能妥协：
- 不要为实现“顶部导航+侧边栏折叠”就把
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
