标准化是让每个HTML标签、属性和结构承担明确职责，否则会导致样式错乱、SEO降权、读屏障碍及测试失败；必须强制校验DOCTYPE、lang、charset等基础规范，语义化标签须严格按行为契约使用，HTMLHint需裁剪规则以适配工程实际，class命名与嵌套深度影响长期可维护性。
标准化不是加一堆检查规则就完事，而是让每个标签、每行属性、每个文件结构都承担明确职责——不按标准写，轻则样式错乱、SEO掉权，重则屏幕阅读器读不出导航，测试环境里根本跑不通。
HTML文档结构必须强制校验
很多问题其实从第一行就埋下了：缺少 <!DOCTYPE html> 或位置不对，浏览器会进怪异模式；<html lang="zh-CN"> 漏掉 lang 属性，NVDA 读屏直接跳过整页；<meta charset="utf-8"> 没放 <head> 最前面，中文字符在部分旧版 Edge 里直接变方块。
-
<!DOCTYPE html>必须是文件首行，且不能有任何空格或注释前置 -
lang值必须严格匹配 BCP 47，zh或zh_CN都算错，只认zh-CN -
<meta charset="utf-8">要紧贴<head>开始，早于<title>和任何<link>
语义化标签不能当 div 别名用
<header> 不是“顶部区域”，<nav> 不是“有链接的地方”——它们各自带行为契约。把登录按钮塞进 <nav>，会让屏幕阅读器误判为导航项；在 <main> 外套 <section>，SEO 权重会被稀释；用 <div class="card"> 而不用 <article>，等于主动放弃内容可提取性。
-
<main>在整个页面中必须唯一，且不能嵌套在<article>、<aside>、<footer>内部 -
<nav>只包裹真正用于页面跳转的链接集合，面包屑、页脚友情链接可各自独立用一个<nav> -
<section>要有主题，且通常配<h2>～<h6>；纯样式分组请回退到<div>
HTMLHint 配置要关掉“看起来合理”的规则
开箱即用的 htmlhint 默认启用 40+ 规则，但其中不少和工程化目标冲突：比如 attr-lowercase 看似规范，却会把 Vue 模板里的 v-if、@click 当成错误；id-class-value 强制 class 值小写，但 BEM 的 user__profile--active 里双连字符就是合法命名。
立即学习“前端免费学习笔记（深入）”；
- 必须保留的硬性规则：
doctype-first、meta-charset-require、alt-require、tag-pair - 建议关闭的规则：
attr-lowercase（除非纯静态页）、id-class-ad-disabled（BEM 场景下失效） - VS Code 中需确认
"html.validate.scripts": true已启用，否则 JS 内联模板里的 HTML 片段不会被扫描
class 命名和嵌套深度直接影响维护成本
写 <div class="box box--red"> 看似省事，但三个月后没人记得 box--red 是指警告框还是按钮状态；缩进用 Tab 混合空格，Git diff 里一眼看不出哪层漏了闭合标签；<div><div><div><p> 套四层才出文字，CSS 选择器一写就是 .page .content .list .item p，改个间距得翻三页代码。
- class 名强制
kebab-case，禁用驼峰和下划线：search-input✅，searchInput❌，search_input❌ - 单个块级元素独占一行，兄弟元素缩进一致，嵌套不超过 4 层（
<main> <section> <article> <header>已到顶） - 布尔属性必须显式写出值：
<input required="required">，而不是<input required>（后者在某些 SSR 场景下会被忽略）
真正的工程化卡点不在工具链多炫酷，而在每个 <header> 是否真承载页眉逻辑、每个 lang 是否精确到地区、每次提交前有没有人手动删掉那行多余的 <div class="wrapper">——这些细节堆起来，才是代码能活过两年的关键。
