HTML5语义标签无内置样式，必须用CSS显式定义外观；其核心价值在于提升结构可读性、CSS可维护性与无障碍支持，需配合变量、选择器优化及兼容性处理。
HTML5语义标签本身不带样式，必须用CSS控制外观
浏览器对 关键不是“能不能美”，而是“必须主动用CSS接管所有视觉层”。常见错误是写了 HTML5语义化的核心价值在于结构可读性与CSS可维护性。与其给每个标签加 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;
} 这样写的好处：结构变了（比如把 立即学习“前端免费学习笔记（深入）”； 用 @media (min-width: 769px) {
main {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
} 比起用 class 名（如 HTML5结构越清晰，CSS变量越容易落地。比如定义一套语义色值： 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);
} 这样改主题色只需调一个变量，所有 实际项目中最容易被忽略的是：语义标签的无障碍属性（如 、 等HTML5标签只提供默认的 display 行为（比如 是 block），但**没有预设颜色、间距、边框或字体**。直接写语义标签却没写CSS，页面看起来和一堆 就以为底部会自动居中+变灰——其实它默认就是普通块级元素，可能紧贴上文、文字黑色、无 padding。
display: block（除个别如 无特殊默认） 横向排列菜单？得自己写 display: flex 或 float
不会自动变窄或加边框，必须用 width、border 显式定义用CSS选择器精准匹配语义结构，避免过度依赖class
class="header-style"，不如利用嵌套关系写更干净的规则：article h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 0.5rem;
}
换成 ），样式不会意外失效；也减少HTML里一堆重复 class。
* { margin: 0; }，它会重置 、 的原生间距，反而增加调试成本> 子选择器比空格后代选择器更安全，防止样式污染深层嵌套内容document.createElement 脚本或 html5shiv，否则CSS根本选不到这些标签
响应式布局中，HTML5标签让媒体查询更语义清晰
+ 替代 div#content + div#sidebar，媒体查询能直接表达意图：@media (max-width: 768px) {
main {
width: 100%;
}
aside {
display: none; /* 移动端隐藏侧栏 */
}
}
.col-main）做响应式，语义标签让CSS逻辑和内容角色对齐，后期调整时不容易混淆“哪个div才是主内容”。
在整个页面中只能出现一次，CSS里可放心用 main { ... } 全局控制 当样式容器滥用——它表示主题独立的内容组，若只为实现某段圆角阴影而套 ，反而破坏语义 天然适合作为容器子项，无需额外 wrapper字体、颜色、动效等细节需统一通过CSS变量管理
:root {
--color-primary: #3498db;
--color-text: #333;
--color-bg: #f8f9fa;
--spacing-unit: 1rem;
}
、 的主色自动同步。比散落各处的 #3498db 好维护得多。
--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"。美化不能以牺牲可访问性为代价。
