HTML标签名不区分大小写但必须全小写才符合标准，属性名同理；class/id值大小写敏感，推荐用kebab-case；工具强制小写是为保障跨平台兼容性。
HTML标签名大小写敏感吗
不敏感，但必须全小写才符合标准。浏览器会把 <DIV>、<div> 都解析成同一个元素，但 HTML5 规范明确要求标签名用小写——XHTML 甚至直接报错。
常见错误现象：<Img src="a.jpg"> 在某些旧工具链里触发 lint 警告，或被 Prettier 自动转成小写；更麻烦的是，当混用大小写写自定义元素（如 <MyComponent>）时，React/Vue 的解析行为可能不一致。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有原生 HTML 标签统一用小写：
<header>、<section>、<input> - 自定义元素（Web Components）必须含短横线，且推荐全小写：
<my-button>，避免<MyButton>这类写法 - 模板引擎（如 Vue SFC、JSX）中，组件名大小写取决于框架规则，和 HTML 解析无关，别混淆
HTML属性名大小写怎么写才安全
属性名不区分大小写，但同样强烈建议全小写。浏览器对 CLASS、class、Class 一视同仁，但 XMLHttpRequest 或服务端 XML 解析器可能严格区分。
立即学习“前端免费学习笔记（深入）”；
使用场景：服务端渲染（SSR）、静态站点生成（如 Hugo/Jekyll）、XML-based 工具链（比如某些 SVG 处理脚本）里，大小写错位会导致属性丢失或解析失败。
实操建议：
- 始终用小写属性名：
id、class、data-id、aria-label -
for属性（用于<label>）不能写成For，否则部分屏幕阅读器识别异常 - 布尔属性（如
disabled、checked）不要写Disabled，即使能运行，也增加协作理解成本
class 和 id 值里能用大写字母吗
可以，但不推荐。CSS 选择器对 class/id 值是大小写敏感的，.MyClass 和 .myclass 是两个不同选择器。
容易踩的坑：团队协作时，有人写 class="Header"，有人写 class="header"，结果样式没生效还查半天；或者用 JS 通过 document.querySelector('.Header') 拿不到元素，因为实际 DOM 是 class="header"。
实操建议：
- class/id 值统一用 kebab-case（短横线分隔）：
main-header、user-profile-card - 完全避开大小写混合，省去大小写比对成本
- 如果必须兼容旧代码里的 PascalCase，确保 CSS 和 JS 全链路保持一致，不要只改一半
为什么有些工具强制转小写
不是“强制”，是按 HTML5 规范做标准化处理。Prettier、ESLint + eslint-plugin-html、Volar、Vetur 等工具默认把标签/属性转小写，本质是在预防跨平台或跨解析器的不一致。
性能影响几乎没有，但兼容性影响真实存在：比如用 innerHTML 插入含大写标签的字符串，在 IE 或某些 WebView 里可能触发怪异解析；又比如 XML 解析器（如浏览器的 DOMParser）在解析 XHTML 时，大小写错误直接抛 SyntaxError。
实操建议：
- 把格式化工具的小写规则当成基础约束，而不是可选项
- CI 流程里加一道 HTML lint（如
html-validate），检查attr-lowercase、element-lowercase - 注意：内联 SVG 中的属性（如
viewBox）是 XML 属性，必须严格按大小写书写，不能盲目小写
大小写问题本身不难，难的是它藏得深——出问题时往往不在 HTML 本身，而在和它交互的 JS、CSS、构建工具或服务端模板里。盯住那一行 <Div Class="Wrapper">，它可能只是冰山露出的一角。
