关键不是“能不能美”，而是“必须主动用CSS接管所有视觉层”。常见错误是写了

• 所有HTML5语义标签在CSS里都等价于 display: block（除个别如
  无特殊默认）
• 想让 横向排列菜单？得自己写 display: flex 或 float
• 不会自动变窄或加边框，必须用 width、border 显式定义

用CSS选择器精准匹配语义结构，避免过度依赖class

HTML5语义化的核心价值在于结构可读性与CSS可维护性。与其给每个标签加 class="header-style"，不如利用嵌套关系写更干净的规则：

article h2 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}
article > p {
line-height: 1.6;
margin-bottom: 1rem;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 1.5rem;
}

这样写的好处：结构变了（比如把

立即学习“前端免费学习笔记（深入）”；

• 慎用通配符如 * { margin: 0; }，它会重置 、 的原生间距，反而增加调试成本
• 用 > 子选择器比空格后代选择器更安全，防止样式污染深层嵌套内容
• 如果项目需兼容IE8及以下，语义标签需配合 document.createElement 脚本或 html5shiv，否则CSS根本选不到这些标签

响应式布局中，HTML5标签让媒体查询更语义清晰

用

@media (max-width: 768px) {
  main {
    width: 100%;
  }
  aside {
    display: none; /* 移动端隐藏侧栏 */
  }
}
@media (min-width: 769px) {
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
}

比起用 class 名（如 .col-main）做响应式，语义标签让CSS逻辑和内容角色对齐，后期调整时不容易混淆“哪个div才是主内容”。

• 在整个页面中只能出现一次，CSS里可放心用 main { ... } 全局控制
• 不要把
  当样式容器滥用——它表示主题独立的内容组，若只为实现某段圆角阴影而套
  ，反而破坏语义
• Flexbox/Grid 布局中，
  、 天然适合作为容器子项，无需额外 wrapper

字体、颜色、动效等细节需统一通过CSS变量管理

HTML5结构越清晰，CSS变量越容易落地。比如定义一套语义色值：

:root {
  --color-primary: #3498db;
  --color-text: #333;
  --color-bg: #f8f9fa;
  --spacing-unit: 1rem;
}
header {
background-color: var(--color-primary);
color: white;
padding: var(--spacing-unit);
}
article h1 {
color: var(--color-text);
margin-bottom: calc(var(--spacing-unit) * 1.5);
}

这样改主题色只需调一个变量，所有

• CSS变量不支持IE，如需兼容，可用 PostCSS 插件转为静态值
• 避免在变量名里塞具体值，比如 --blue-500 不如 --color-accent 语义明确
• 动画用 transition 绑定到语义标签（如 nav a:hover { opacity: 0.8; }），比靠 JS 控制更轻量、更可预测

实际项目中最容易被忽略的是：语义标签的无障碍属性（如 role、aria-label）和CSS美化必须协同。比如用 display: none 隐藏 时，屏幕阅读器也会跳过——若该侧栏含重要导航，就得改用 visibility: hidden 或 clip-path 并补上 aria-hidden="true"。美化不能以牺牲可访问性为代价。