语义化标签本身无样式，必须手动用CSS定义视觉效果；浏览器只识别选择器而非语义，如nav默认仅为block空盒，需显式设置display:flex等才能横排，main不自动占宽居中，须手动设width、margin等。
语义化标签本身不带样式，所谓“无缝契合”根本不存在——必须手动写 CSS 才能让 header 有背景、nav 横排、main 占满宽度。浏览器只认选择器，不认语义。
为什么写了 nav 却没变成导航栏？
因为 nav 只是告诉屏幕阅读器“这是导航”，浏览器默认只把它当 display: block 的空盒子，连内边距都没有。
- 常见错误现象：
nav里的链接垂直堆叠、文字紧贴顶部、没有间距，误以为“标签失效” - 真实原因：没写
nav ul { list-style: none; padding: 0; margin: 0; }，也没给nav li设display: inline-block或用display: flex - 性能影响：用
nav a做选择器比.nav-link权重低，容易被第三方 CSS 覆盖；但过度加类名（如nav class="flex-nav"）又让语义和样式耦合 - 建议做法：用
nav+ 少量明确类（如nav class="primary-nav"），CSS 写.primary-nav { display: flex; gap: 1.2rem; }
main 为什么没撑开容器、也不居中？
main 不是布局神器，它不自动设置 width、max-width 或 margin，更不会响应式适配断点。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 常见错误现象：页面主体内容窄窄一竖条、左右留白巨大、在小屏上溢出
- 关键参数差异：
main默认无box-sizing控制，若父容器用了padding但没设box-sizing: border-box，内容会错位 - 兼容性注意：IE11 支持
main，但若项目需兼容旧版 IE，仍得靠html5shiv注册元素 - 实操建议：
main应包裹在div.layout或直接设main { width: 100%; max-width: 1200px; margin: 0 auto; }；配合article使用时，别给main加display: grid后再让article用grid-column—— 层级混乱易覆盖
用 section 和 aside 时，哪些 CSS 写法会破坏语义？
语义破坏往往不是标签用错，而是 CSS 强行扭转结构意图，比如把 aside 当广告位塞满无关内容，或用 section > div > h2 这种深层选择器掩盖标题缺失。
立即学习“前端免费学习笔记（深入）”；
- 典型踩坑：
section { float: left; width: 30%; }—— 浮动已过时，且让后续元素布局不可控；aside { position: absolute; top: 0; right: 0; }—— 脱离文档流，辅助技术可能跳过 - 正确边界：
section必须含h2–h6，否则只是视觉分组，不是语义分区；aside若与邻近article无逻辑关联（比如放 unrelated banner），就该换回div - 推荐组合：
section.featured { padding: 1.5rem 0; border-top: 1px solid #eee; }，用类名承载样式意图，标签保留语义职责 - 响应式注意：媒体查询里用
@media (max-width: 768px) { aside { display: none; } }是安全的——隐藏不等于删除语义，屏幕阅读器仍可访问
最易被忽略的一点：语义标签的嵌套规则无法靠 CSS 修复。比如 main 出现两次、nav 套在 footer 里，再精细的 CSS 也救不了结构缺陷——验证工具报错，SEO 和 a11y 都会掉档。
