html标签名必须统一用小写，因html5规范强制要求、工具链默认适配、团队协作需要；大写标签虽浏览器可解析，但在xhtml/xml工具、编辑器校验、ssr框架、jsx及typescript中均会出错。
HTML 标签在解析时确实不区分大小写，但实际开发中必须统一用小写——这不是浏览器兼容性问题，而是 HTML5 规范强制要求、工具链默认适配、团队协作基础。
为什么 <div> 能运行但不该用
<p>浏览器的 HTML 解析器会把 <code><div>、<code><div>、<code><div> 全部当作同一个标签处理，这是历史兼容性设计。但 HTML5 规范明确声明：“标签名必须使用 ASCII 小写字母”。这意味着：
<ul>
<li>
<code><script></script> 在 HTML 文档中能执行，但在 XHTML 或基于 XML 的工具（如某些构建流程、SSG 静态站点生成器）中直接报错
<img>
eslint-plugin-html 等格式化/检查工具默认修复为小写，反复提交易引发无意义 diff
<input> 和 <input> 在 JSX 中根本不能混用
JSX 不是 HTML，它是 JavaScript 语法扩展，所有标签名会被转为 React.createElement() 调用。React 官方文档明确要求：自定义组件首字母大写，原生 HTML 标签必须全小写。否则：
-
<input type="text">会被 React 当作一个名为INPUT的自定义组件，而非原生input元素 → 渲染为空白或报错React.createElement: type is invalid - 即使侥幸渲染，
ref、onChange等原生属性可能不生效，因为事件系统绑定的是小写标签名 - TypeScript 类型推导（如
JSX.IntrinsicElements）只识别"input"，不识别"INPUT"
哪些地方会悄悄踩坑
大小写问题常在“看起来没毛病”的场景里暴露：
- 从旧代码或 Word/PDF 复制 HTML 片段时，自动转换可能产生
<table> —— 浏览器照常显示，但 CI 流水线里的 <code>html-validate直接失败 - 使用
innerHTML动态插入内容：el.innerHTML = "<p>hello</p>"在 Chrome 里正常，但 Safari 对某些标签（如<svg></svg>）的大小写更敏感 - 模板引擎（如 Handlebars、EJS）若开启严格模式，
<div> 可能被 lint 工具标记为违规 <li>XML 解析器（如读取 SVG 文件、RSS feed）遇到 <code><link>写成<link>会直接解析失败，因为 XML 区分大小写
最稳妥的做法不是“记住哪些能大写”，而是把编辑器设置成保存时自动转小写，并在 ESLint 配置中启用 react/no-unknown-property 和 html-validate 规则——一旦出现大写标签，编辑器立刻提醒，比等部署后报错强得多。
