必须严格使用12个高频语义标签的边界属性，如<time>缺datetime、<img>缺有意义alt、<button>在form中缺type等，否则Lighthouse直接报错而非警告。
别背标签，先盯住12个高频语义标签的使用边界——记错或漏用它们，Lighthouse 会直接标红“Missing alt”“main not found”“time missing datetime”这类问题，不是浏览器不渲染，而是机器读不懂你。
哪些文本标签一漏属性就出事
HTML里很多文本标签看着简单，但关键属性一缺，语义就断了。Chrome Accessibility 面板、W3C Validator、Lighthouse 全部会报错，不是警告，是硬性失败。
-
<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>在<form>内默认是type="submit"；不显式写type="button"，点一下可能意外提交整个表单
怎么现场判断该用哪个标签
比查文档更快的判断法：看内容能不能被整块删掉。删掉后不影响主逻辑，就用 <aside>；图文强归属，必须用 <figure> + <figcaption>；纯装饰图、背景图、图标字体一律不用 <figure>，走 <img src="" alt=""> 或 CSS background-image。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
<header>可出现在页面顶部（全站页眉），也允许嵌套在<article>或<section>内部（局部标题区）；但别往<nav>里塞<header>，它本身已是导航容器 -
<main>必须且只能有一个，且不能嵌套在<article>、<aside>、<footer>、<header>、<nav>中 -
<blockquote>表示**引用他人内容**，需有明确来源（可用<footer>或cite属性标注）；单纯想缩进排版？用 CSSmargin，别滥用
标题与强调类标签的真实分工
<h1>–<h6> 是层级结构，不是字号开关。每页建议只有一个 <h1>（主主题），<h2> 是一级子主题，依此类推。跳过层级（比如 <h1> 后直接 <h3>）会破坏大纲，影响 SEO 和辅助技术解析。
立即学习“前端免费学习笔记（深入）”；
-
<strong>表达语义上的“重要性”，浏览器默认加粗，但重点在机器可读的权重提升 -
<em>表达语气强调，浏览器默认斜体，对应的是朗读时的语调变化，不是视觉样式 -
<mark>是高亮，用于页面内需要突出的片段（如搜索关键词匹配），不是通用强调手段 -
<small>不是“小号字体”的快捷键，而是表示附属细则（如版权信息、免责声明），语义上属于次要内容
真正难的不是记住标签名，而是理解每个标签在 DOM 树中的角色、在无障碍树里的表达方式、以及 Lighthouse 检查项背后的真实意图。打开任意主流新闻站，右键「查看页面源代码」，搜 <main>、<time>、<figure>，看三篇真实源码，比背十遍定义管用。
