HTML标签语义化问题无法靠肉眼判断，必须依赖插件在编辑阶段拦截；仅写<header>或<nav>不等于语义正确，关键看上下文是否符合规范，如<main>缺失、标题跳级、img缺alt、input无label等均需HTMLHint或axe等工具主动校验并结合业务逻辑甄别。
HTML 标签语义化问题无法靠肉眼判断，必须依赖插件在编辑阶段拦截 —— 仅靠手动写 <header> 或 <nav> 不等于语义正确，关键要看上下文是否符合规范。
HTMLHint 启用 alt-require 和 label-required 规则
很多开发者以为加了 <img> 就算完成，但没配 alt 属于严重可访问性缺陷。HTMLHint 的 alt-require 规则能强制检查所有 <img>、<area[href]>、<input[type=image]> 是否含非空 alt 值。
- 在项目根目录新建
.htmlhintrc，至少启用："alt-require": true、"input-requires-label": true、"html-lang-require": true -
input-requires-label会标记所有孤立<input>，但注意：它不检查aria-labelledby等替代方案，只认显式<label for="xxx">或包裹结构 - 若用 Vue 单文件组件，需确认 HTMLHint 插件已配置
"htmlvalidate": { "includeLanguages": ["html", "vue"] }，否则<template>内部不生效
axe DevTools 扫描时忽略“结构性建议”类误报
axe 会报告如 “<div> 应替换为语义化标签” 这类提示，但它无法判断业务逻辑 —— 比如一个纯装饰性容器用 <div> 是合理且必要的。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 右键 HTML 文件执行
Analyze with axe后，重点关注带critical或serious级别的结果，比如landmark-one-main（缺失主内容区）、heading-order（标题层级跳变） - 对
region类警告（如 “页面缺少<main>”），先确认是否真有独立主内容；若整个页面是仪表盘或弹窗，可忽略 - axe 不校验自定义元素（如
<my-card>）的语义，除非你显式声明role或用is="xxx"继承原生行为
Auto Rename Tag 对语义标签重命名的边界限制
改 <section> 为 <article> 时，Auto Rename Tag 会同步闭合标签，但它不管语义是否合理 —— 把导航栏改成 <footer> 也能成功重命名，但逻辑错误。
立即学习“前端免费学习笔记（深入）”；
- 该插件只做字符串匹配，不解析 DOM 结构或上下文，所以它不能替代语义规则检查
- 在 JSX 或 Vue 中，如果模板被包裹在
v-if或ng-container里，重命名可能失效，因插件无法穿透条件渲染语法识别真实标签对 - 当标签嵌套过深（如超过 6 层）或文件 >500 行时，VS Code 1.85+ 版本会主动禁用自动重命名，此时需手动修改或拆分组件
真正卡住语义落地的，不是工具能不能扫出问题，而是开发者是否理解每条规则背后的用户场景 —— 比如为什么 <h2> 后直接跟 <h4> 是错的，不是因为语法违规，而是屏幕阅读器会跳过中间层级，导致信息断层。
