语义化标签需精准匹配内容角色：main必须唯一且直接子元素，article强调独立可分发，section仅作逻辑分组；header/footer依上下文复用；nav专指主要导航系统。
用对语义化标签，页面结构自然清晰，不用靠注释或 class 名猜意图。关键不是“用了没”，而是“用得准不准”——每个标签都对应明确的内容角色和可访问性含义。
main 必须唯一，且不能嵌套
- ✅ 正确：直接放在下，包裹文章列表、产品详情等真正“不可删”的内容
- ❌ 错误：套在
里，或被 - ⚠️ 注意：
内可以包含多个 ，但 里不能再放
article 和 section 的本质区别
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 用
：RSS 订阅条目、微博单条、电商商品卡片（含标题、图、描述、价格） - ✅ 用
：官网页面里的“关于我们”“服务优势”“客户案例”三个区块 - ? 判断法：删掉周围内容，这块还能不能自洽？能 → article；不能 → section
header/footer 可复用，但需匹配上下文
页面级
- ✅ 允许：一个
里有自己的 （含 标题+
- ✅ 允许：
开头加 ，里面放 小节标题
- ❌ 避免：在
里放一个纯装饰性的 ，里面没有标题类元素（h1–h6） - ? footer 同理：页面底部版权信息用全局
nav 不是所有链接的容器
- ✅ 属于
- ❌ 不属于
- ? 小技巧：如果一组链接能被屏幕阅读器用户用“跳至导航”快捷键直达，那它就适合
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
