必须用<section>而非<div>当内容有独立主题且含<h2>–<h6>标题，否则语义失效；仅用于样式、布局或脚本钩子时应选<div>，二者分工明确，误用损害SEO与可访问性。
选错容器元素，页面结构就埋了雷：SEO掉权、屏幕阅读器念错、后期改样式要重写三成 CSS。
什么时候必须用 <section> 而不是 <div>
<section> 不是“带样式的 <div>”，它代表一个有标题、可被独立引用的内容单元。浏览器大纲生成、屏幕阅读器跳转、搜索引擎提取摘要都依赖这个语义。
- 这块内容在文档大纲里该出现一级/二级条目（比如“产品特性”“用户评价”）→ 用
<section>，且必须配<h2>或更高级别标题 - 只是加个边框、设个宽度、配合 Grid 布局 →
<div>更干净，没额外语义干扰 - 删掉某层
<div>后样式没崩？那它大概率不该存在；删掉<section>却导致大纲缺失或读屏器跳过整块内容 → 说明它承载了真实结构意义
<main> 和 <article> 能混用吗
不能互换，角色完全不同：<main> 是整个页面的唯一主内容区（全页只能有一个），<article> 是可独立分发、复用的内容单元（如一篇博文、一条新闻、一个评论）。
- 首页聚合多篇文章 → 外层用
<main>，每篇用<article> - 单篇博文页 → 整个主体内容包在
<main>里，<article>可省略（除非页面含侧边推荐文章等其他<article>） - 错误写法：
<main><h1>关于我们</h1><p>…</p></main>—— “关于我们”不是可独立分发的内容，不该套<article>，也不该让<main>承担语义单元职责
嵌套太深的 <div> 怎么破
三层以上 <div> 嵌套不是布局问题，是结构失控信号。DevTools 里点开五层才看到目标元素，JS 查询慢、CSS 选择器冗长、改一个 margin 要翻三页样式表。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 检查每一层是否真必要：删掉中间某层
<div>，看样式是否真崩？没崩就删 - 用 CSS 的
contain: layout style替代部分包裹需求，限制样式泄漏和布局影响范围 - Vue/React 中避免无意义
<div>包裹组件，改用<template>或 Fragment（<></>） - 警惕 UI 库自动生成的 wrapper 类名，如
class="wrapper-inner__container"——这类命名往往是冗余嵌套的标志
自定义元素当容器用会出什么问题
像 <my-card> 这类自定义标签默认是 display: inline，且零语义、零 ARIA 支持。直接替换 <div> 会让屏幕阅读器读成 “my card”，而不是“卡片：标题”。
- 必须手动设置
display: block或display: flex - 需显式添加
role="region"或更具体的 role（如role="article"），并配aria-labelledby - 如果只是为了封装样式逻辑，优先考虑 CSS 自定义属性 + 原生语义元素组合，而非造新标签
最常被忽略的其实是 <section> 必须带标题这个硬约束——没 <h2> 或更高阶标题的 <section>，在辅助技术中等于不存在。
