text-transform: uppercase仅改变文本渲染效果而不修改DOM实际值，如输入"hello"显示为"HELLO"但JS读取仍为"hello"；适用于纯展示场景如导航菜单、按钮文字、标签等，禁用于input/textarea；与JS的toUpperCase()有本质区别，后者真实转换字符串。
text-transform: uppercase 会让字母变大写，但不改变 DOM 中的实际值
这个 CSS 属性只影响渲染效果，textContent 和 value 仍保持原始大小写。比如用户输入 "hello"，加了 text-transform: uppercase 后页面显示 "HELLO"，但 JS 读取时还是 "hello"。这点常被忽略，导致表单提交或校验逻辑出错。
哪些元素适合用 text-transform: uppercase
适合纯展示、无需交互或数据处理的文本场景。常见用法包括：
- 导航菜单项：
<nav><a href="#" style="text-transform: uppercase;">home</a></nav> - 按钮文字（无大小写敏感逻辑）：
<button style="text-transform: uppercase;">submit</button> - 标题缩写或标签：
<span class="tag" style="text-transform: uppercase;">beta</span> - 避免用于
<input>或<textarea>——用户无法直观感知输入内容是否被“伪装”成大写
和 JavaScript toUpperCase() 的关键区别
CSS 的 text-transform: uppercase 是视觉层变换；JS 的 toUpperCase() 是真实字符串操作。两者混用容易引发 bug：
const input = document.querySelector('input');
input.value = input.value.toUpperCase(); // 真实修改值
// vs
input.style.textTransform = 'uppercase'; // 仅改样式，value 不变
典型陷阱：
立即学习“前端免费学习笔记（深入）”；
-
后端接收的是小写
"api"，但前端显示为"API"，排查时误以为已处理 - 用
input.value === 'HELLO'做判断，永远为false（除非 JS 也做了转换） - 国际化场景下，
text-transform对土耳其语等语言支持有限，而toUpperCase()可配合locales参数更准确
替代方案：什么时候该用 font-variant-caps 或 letter-spacing
text-transform: uppercase 不控制字间距或字形细节。如果需要更精细的视觉控制，可组合使用：
-
font-variant-caps: all-small-caps：用小型大写字母（比普通大写略小，更协调） -
letter-spacing: 0.1em：避免全大写连在一起显得拥挤 - 慎用
text-transform: capitalize：它只首字母大写，且对中文、数字后字母无效（如"user1name"→"User1name"，不是"User1Name"）
真正要让数据变成大写，必须在 JS 层调用 toUpperCase() 或服务端处理；CSS 永远只是“看起来像”。
