html标签和属性名必须全小写、属性值必须加双引号，这是html5规范强制要求；大小写错误在ssr、jsx、xml环境会直接报错，需通过html-validate、prettier、husky等工具链自动化保障。
HTML标签必须全小写，不是“可以”而是“必须”
HTML5规范第12.1.1节白纸黑字写着：“标签名必须由ASCII小写字母组成”。浏览器能解析 <div> 是历史兼容性兜底，不是你该用的理由。一旦进入SSR（如Next.js）、静态生成（如Hugo）、XHTML工具链或JSX环境，<code><input> 就会直接变成无效组件名，React报错 React.createElement: type is invalid，TypeScript类型系统也认不出 INPUT。
常见踩坑场景包括：
- 从Word/PDF复制代码，带出
<table> 或 <code><img>—— 浏览器照常渲染，但CI里的html-validate直接失败 - 在JSX中写
<div>，被当作自定义组件而非原生 <code><div>，ref和事件绑定失效 <li>SVG内联时用 <code><svg></svg>，Safari或某些XML解析器拒绝处理 - VS Code装
html-validate插件，输入时就标黄<div> <li>Prettier配置 <code>htmlWhitespaceSensitivity: "css"，保存自动转小写、补引号、重排属性顺序 - Git提交前用husky + lint-staged运行
html-validate --config .htmlvalidate.json，不合规代码进不了主干 - CI流水线强制校验，失败即阻断发布
属性名必须小写，属性值必须加双引号
class、id、data-id、aria-label 全部小写；CLASS、HREF、DATA-ID 都是违规写法。虽然浏览器能容错，但XML解析器（比如RSS读取、SVG处理脚本）会直接丢弃这些属性。
属性值不加引号看似能跑，但不符合HTML5标准：width=100 和 type=checkbox 会被W3C验证器标记为 Attribute value must be quoted。更麻烦的是，含空格或特殊字符的值（如 class=header active）会解析成两个独立属性，第二个被忽略。
布尔属性如 required、disabled 可省略值，但显式写成 required="required" 更稳妥——旧IE或某些服务端XML解析器可能跳过无值属性。
团队协作靠工具落地，不是靠人记规范
指望开发者自觉写 <img src="a.jpg" alt="描述"> 而不是 <img src="a.jpg"> 不现实。真正起效的是自动化：
注意：Prettier不检查语义化（比如该用 <button></button> 还是 <div onclick>），这部分需搭配 <code>eslint-plugin-html 或 axe-core 补足。
class/id值大小写敏感，但别混用
CSS选择器对 class 和 id 值是大小写敏感的：.MyClass 和 .myclass 完全是两个类。所以即使HTML标签不区分大小写，你在类名里写 class="Header"，就得确保CSS里也写 .Header，否则样式不生效。
推荐统一用 kebab-case（如 main-header、user-profile-card），避免大写字母和下划线。Stylelint可配 selector-class-pattern 规则，提交时直接拦截 bigRedBtn 或 user_profile 这类命名。
最易被忽略的一点：空格分隔多个类名时，前后不能有额外空格，class=" header active " 会导致首尾空类名被创建，虽不影响渲染，但增加DOM冗余、干扰JS查询逻辑。
