语义化标签的核心作用是定义文档结构而非控制样式，CSS应尊重结构并用语义类名精准修饰；main必须全局唯一且不可嵌套，否则破坏无障碍与SEO；BEM类名应表达角色而非样式，响应式中保留语义标签并用媒体查询控制显示。
直接说结论：语义化标签不是用来“配样式”的，而是用来“定结构”的；CSS 要做的，是尊重这个结构，再用类名或组合选择器精准施加样式，而不是靠 class="float-left" 或 div 嵌套强行模拟语义。
为什么不能直接用 nav 标签写样式而不加类名
浏览器对 nav 的默认样式几乎为零（比如没有 margin、padding、display 变化），直接写 nav { display: flex; } 看似省事，但问题明显：
- 一旦页面出现多个
nav（比如页头导航 + 侧边栏导航 + 文章内目录），所有都会被强制 flex，逻辑错乱 - 未来要加响应式菜单时，
@media里还得反复覆盖nav，维护成本飙升 - 团队协作中，别人看到
nav ul li a选择器，无法判断这是主导航还是面包屑，语义被样式绑架了
正确做法是给每个有明确角色的 nav 加语义类名，比如：<nav class="main-navigation"> 或 <nav class="article-toc">，再用 .main-navigation 控制样式。
main 和 section 的嵌套关系影响 CSS 作用域
main 必须全局唯一且不能嵌套在 section、header 等内部——这不是样式问题，是语义硬约束。一旦嵌套错误，CSS 写得再漂亮，无障碍工具（如 axe）也会报 landmark-unique 错误，屏幕阅读器可能跳过整个区域。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 合法结构：
<main><article><section><h2>评论</h2></section></article></main> - 非法结构：
<section><main>...</main></section>（main被忽略，SEO 和 a11y 全崩） - CSS 影响：你写
main section h2是安全的；但若结构非法，main选择器根本匹配不到元素，样式白写
用 BEM 类名桥接语义与样式，而不是破坏它
纯语义标签无法表达“变体”或“状态”，比如同一个 article 在列表页是卡片，在详情页是宽屏正文。这时候不能改标签，而应加类名：
- ✅ 推荐：
<article class="post-card">/<article class="post-detail"> - ❌ 危险：
<div class="post-card">（丢掉article语义，SEO 和 a11y 受损） - 类名必须描述“是什么”，不是“长什么样”——
.post-card表达内容角色，.bg-blue这类纯样式名会随设计迭代失效 - BEM 中的修饰符（如
.post-card--featured）可安全扩展，不影响基础语义
响应式布局中，别用 display: none 消灭语义
移动端隐藏侧边栏？别删掉 aside，更不要替换成 div。正确方式是：
- 保留
<aside class="sidebar">，用@media (max-width: 768px) { .sidebar { display: none; } } - 这样屏幕阅读器仍能识别它是补充信息区，搜索引擎也继续索引其内容
- 如果真要动态移除（比如后台管理页切换视图），用
aria-hidden="true"+tabindex="-1"，而非 DOM 删除 - Flexbox/Grid 布局完全支持语义标签直连，无需额外包裹
div来“方便布局”
最常被忽略的一点：语义标签本身不渲染任何样式，它的价值只在 DOM 结构、辅助技术识别和搜索引擎解析中生效。CSS 写得再炫，如果结构错了，这些价值就归零——而修复结构的成本，远高于重写几行 CSS。
