必须严格使用12个高频语义标签的边界属性，如缺datetime、缺有意义alt、在form中缺type等，否则lighthouse直接报错而非警告。

别背标签，先盯住12个高频语义标签的使用边界——记错或漏用它们，Lighthouse 会直接标红“Missing alt”“main not found”“time missing datetime”这类问题，不是浏览器不渲染，而是机器读不懂你。

哪些文本标签一漏属性就出事

HTML里很多文本标签看着简单，但关键属性一缺，语义就断了。Chrome Accessibility 面板、W3C Validator、Lighthouse 全部会报错，不是警告，是硬性失败。

• <time></time> 不带 datetime 属性 = 白写。写成 <time>2024-06-15</time> 对屏幕阅读器和搜索引擎无效；正确写法必须是 <time datetime="2024-06-15">六月十五日</time>
• <img> 的 alt 不能为空字符串或占位符（如 alt="" 或 alt="图片"）。Lighthouse 明确要求 meaningful text alternative，哪怕写 alt="公司Logo，蓝色渐变字母A" 也比空着强
• <button></button> 在 <form></form> 内默认是 type="submit"；不显式写 type="button"，点一下可能意外提交整个表单

怎么现场判断该用哪个标签

比查文档更快的判断法：看内容能不能被整块删掉。删掉后不影响主逻辑，就用 <aside></aside>；图文强归属，必须用 <figure></figure> + <figcaption></figcaption>；纯装饰图、背景图、图标字体一律不用 <figure></figure>，走 <img src="" alt=""> 或 CSS background-image。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <header></header> 可出现在页面顶部（全站页眉），也允许嵌套在 <article></article> 或 <section></section> 内部（局部标题区）；但别往 <nav></nav> 里塞 <header></header>，它本身已是导航容器
• <main></main> 必须且只能有一个，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 中
• <blockquote></blockquote> 表示**引用他人内容**，需有明确来源（可用 <footer></footer> 或 cite 属性标注）；单纯想缩进排版？用 CSS margin，别滥用

标题与强调类标签的真实分工

<h1></h1>–<h6></h6> 是层级结构，不是字号开关。每页建议只有一个 <h1></h1>（主主题），<h2></h2> 是一级子主题，依此类推。跳过层级（比如 <h1></h1> 后直接 <h3></h3>）会破坏大纲，影响 SEO 和辅助技术解析。

• <strong></strong> 表达语义上的“重要性”，浏览器默认加粗，但重点在机器可读的权重提升
• <em></em> 表达语气强调，浏览器默认斜体，对应的是朗读时的语调变化，不是视觉样式
• <mark></mark> 是高亮，用于页面内需要突出的片段（如搜索关键词匹配），不是通用强调手段
• <small></small> 不是“小号字体”的快捷键，而是表示附属细则（如版权信息、免责声明），语义上属于次要内容

真正难的不是记住标签名，而是理解每个标签在 DOM 树中的角色、在无障碍树里的表达方式、以及 Lighthouse 检查项背后的真实意图。打开任意主流新闻站，右键「查看页面源代码」，搜 <main></main>、<time></time>、<figure></figure>，看三篇真实源码，比背十遍定义管用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！