为什么强制推荐全小写？

这不是风格偏好，而是为兼容性和可维护性让步：

立即学习“前端免费学习笔记（深入）”；

• 在 Vue/React 中是自定义组件，而 可能被当成原生标签忽略
• 属性名如 class、data-id 在 HTML 中不区分大小写，但 JS 中 element.className 是固定写法，混用易引发混淆
• 服务器端渲染（SSR）或静态站点生成（如 Next.js、Nuxt）通常基于标准 HTML 解析器，非小写标签可能导致 hydration 失败

容易踩的坑：自定义元素与 SVG 标签

HTML5 允许自定义元素（如 ），但它们必须包含短横线且全小写；而 SVG 标签（如 、）在 HTML 文档中也必须小写 —— 即使 SVG 规范本身允许大写，在 HTML5 上下文中仍需遵守小写约定。

常见错误示例：

这段代码虽能渲染，但 和 不符合 HTML5 规范，会导致：

• W3C 验证器报错 Element “SVG” not allowed as child of element “body”
• 某些 PWA 工具链拒绝打包
• TypeScript + JSX 中类型检查失败（如 JSX.IntrinsicElements.svg 仅匹配小写 svg）

实际开发中该怎么做？

把大小写当作语法的一部分来对待，而不是“浏览器能认就行”的宽容项：

• 所有原生 HTML5 标签（
  、