直接用<header>、<nav>、<main>、<aside>、<footer>这五个语义化标签比div更可靠易维护；<div>仅用于纯样式/脚本容器、无标题的分组、第三方组件包裹或嵌套布局等无语义场景。
直接用 <header>、<nav>、<main>、<aside>、<footer> 这五个语义化标签，比套一堆 <div> 更可靠、更易维护，也更少出兼容性问题。
什么时候该用 <div> 而不是语义标签
语义标签不是万能的，有些场景必须退回 <div>：
- 纯粹为样式或 JS 操作临时包裹一组元素，比如动画容器、加载遮罩层、弹窗根节点——这些没有内容语义，用
<div>最干净 - 需要嵌套多层布局容器（如 Grid 子项再 Flex 布局），而语义标签不支持嵌套同类结构（例如不能在
<main>里再套一个<main>） - 第三方组件库输出的结构强制用
<div>包裹（如某些 React 组件渲染结果），强行替换会破坏行为 -
<section>和<article>要求内部有标题（<h1>–<h6>），没标题就别硬套，用<div>更诚实
<main> 的唯一性约束和常见误用
<main> 在整个页面中只能出现一次，且不能嵌套在 <article>、<aside>、<footer>、<header>、<nav> 内部。违反这点会导致屏幕阅读器跳过内容，SEO 权重稀释。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误写法：
<article><main>...</main></article>——<main>不该出现在<article>里 - 错误写法：
<main>...</main><main>...</main>—— 页面里出现两个<main> - 正确做法：把真正面向用户的核心内容（非导航、非侧边栏、非页脚）全部放在唯一一个
<main>内，哪怕它包含多个<section>或<article>
Flex/Grid 布局下容器的 class 命名陷阱
即使用了语义标签，仍需加 class 控制样式；但 class 名容易暴露逻辑混乱：
立即学习“前端免费学习笔记（深入）”；
- 避免用
class="left-nav"这类纯位置描述名——如果某天改成顶部导航，class 就失效或误导 - 避免
class="container-1"、class="wrap"这类无意义命名，后期查 DOM 根本不知道它管哪块 - 推荐组合式命名：比如
class="nav-primary"（主导航）、class="sidebar-related"（相关推荐侧栏）、class="main-article-list"（主内容区的文章列表） - 如果用 BEM，确保修饰符反映功能而非视觉，例如
nav__item--active可以，nav__item--blue不行
最常被忽略的是：语义标签本身不带任何默认 margin/padding，但不同浏览器对 <main> 或 <aside> 的默认 display 解析可能略有差异（尤其旧版 Safari），上线前务必在真实设备上检查空白间距是否一致。
