语义化开发是让HTML元素自然承载内容角色，需按结构逻辑选标签、保持标题层级连贯、正确使用语义容器与属性，并通过可访问性工具验证，确保机器与人都能准确理解。
语义化开发不是给标签“贴标签”，而是让每个元素自然承载它的角色——结构对了，逻辑才立得住，机器和人都能一眼看懂。
先想内容角色，再选对应标签
写代码前停一秒：这块是导航？是独立文章？还是辅助信息？别问“这里该用什么标签”，要问“这段内容在页面里起什么作用”。比如作者信息+发布时间，不是简单套个 div，而是用 <p><time datetime="2026-06-05">6月5日</time></p>，既表达时间含义，又提供机器可解析的精确值。
- 标题层级必须连贯：h1 → h2 → h3，跳级会打断屏幕阅读器的导航流
- section 要配标题（h2–h6），否则它只是个空壳，语义不成立
- article 用于可独立分发的内容（如博客正文、新闻条目），不是所有内容块都适用
拒绝视觉模拟，守住语义底线
用 <nav> 不是为了让它看起来像导航，而是告诉浏览器“这是主导航链接集合”；用 <header> 不等于加个顶部样式，它自带隐式 role 和结构意义。反过来，div class="nav" 再漂亮，对屏幕阅读器来说也只是一堆没名字的盒子。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- button 必须有 type 属性，否则点击可能意外提交表单
- img 的 alt 不能空着乱填，装饰图才写 alt=""，信息图必须描述内容
- 别用 div role="button" 替代 button，除非你手动补全键盘支持（tabindex + Enter/Space 事件）
验证语义是否真正生效
写了语义标签不等于语义就活了。打开 Chrome DevTools → Elements 面板，右键元素 → “Inspect Accessibility Properties”，看 role、name、level 是否符合预期。
立即学习“前端免费学习笔记（深入）”；
- time 的 datetime 值必须是标准格式（如 2026-06-11），写成 "2026/06/11" 机器就认不出
- 用 JS 控制显隐时，display: none 同时要加 aria-hidden="true"
- main 在整个页面中只能出现一次，且不能嵌套在 article 或 aside 里
与 CSS、JS 协作时不破坏语义根基
样式和交互是服务结构的，不是覆盖结构的。移除 button 默认边框时，必须保留清晰的 :focus-visible 焦点样式；用 JS 封装组件，别把 input type="checkbox" 包进无意义的 div 里导致 ID 关联失效。
- details/summary 自带展开收起逻辑和键盘支持，别用 JS 强行接管默认行为
- 响应式切换布局时，优先靠 media query + 语义容器（如 main/aside）实现，少用 JS 搬运 DOM
- 组件库输出 HTML 时，确保 role、aria-*、label 关系完整，不因封装丢失语义链
