语义化HTML与CSS协同提升代码可读性、SEO及无障碍访问，使用<header>、<nav>、<main>等标签明确结构，CSS通过类名如.card、.menu控制样式，避免破坏语义层级，结合BEM规范与响应式设计，保持结构完整性。
HTML语义化与CSS的配合，核心在于用正确的标签表达内容结构，再通过CSS精准控制样式。这样既能提升代码可读性，也有利于SEO和无障碍访问。
使用语义化标签明确内容角色
语义化标签如 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等，能清晰表达页面不同部分的功能。
CSS 不应破坏这种语义结构，而是基于这些标签或其上的类名来设置样式。
- <article> 表示独立内容，如博客文章，CSS 可设置边距、背景突出其独立性
- <nav> 包含主导航链接，CSS 可将其布局为横向菜单或响应式汉堡菜单
- <section> 代表内容区块，可用 CSS 添加分隔线或内边距增强可读性
通过类名增强语义与样式的桥梁
虽然语义标签已有含义，但实际开发中常结合类名来更灵活地控制样式。
立即学习“前端免费学习笔记（深入）”；
推荐使用语义清晰的类名，如 “.card”、“.menu”、“.post-header”，避免使用纯样式命名如 “.red-text” 或 “.float-left”。
- 类名应描述内容意义而非外观
- CSS 中通过组合标签与类名提高选择器可维护性，例如：
article.card { padding: 1rem; border: 1px solid #ddd; } - 利用 BEM 等命名规范提升结构一致性
利用CSS选择器尊重HTML结构
CSS 应尽量避免破坏 HTML 的语义层级，选择器优先使用标签+类的方式，而不是过度依赖 div 和深层嵌套。
- 用 nav ul 而不是给所有菜单项加独立类
- 通过 section h2 控制章节标题样式，体现内容层级
- 避免使用 div 模拟语义标签，如用 div class="header" 代替 <header>
响应式设计中保持语义完整性
在移动端适配时，不要为了布局方便而打乱语义结构。比如不应把 <footer> 改成 div 仅因要隐藏它。
- 使用 CSS 媒体查询控制显示，而不是替换标签
- 用 display: none 隐藏非关键语义区域，保留其语义价值
- Flexbox 与 Grid 布局可完美配合语义标签，无需额外包裹
基本上就这些。语义化 HTML 提供骨架，CSS 负责外观，两者分工明确才能写出高质量、易维护的前端代码。
