text-transform: capitalize 仅将每个单词首字母大写且其余字母强制小写，适用于纯英文标题或姓名字段，但会破坏缩写（如HTML→Html）和大小写敏感词（如iOS→Ios），对中文无效，空格、连字符等为分隔符；JS方案更可控，用\b\w匹配单词边界实现首字母大写而保留原大小写。
text-transform: capitalize 只作用于单词首字母
直接用 text-transform: capitalize 是最常用做法，但它只把每个单词的首字母转大写，其余字母强制小写——这意味着原本是全大写的缩写（如 HTML）会变成 Html，iOS 会变成 Ios。
适用场景：纯英文标题、用户输入的姓名字段（如 john doe → John Doe），但不适合含专有名词、缩写或大小写敏感内容的文本。
- 对中文无效（中文无大小写概念）
- 对数字后紧接的字母也生效（
chapter1title→Chapter1title） - 空格、连字符、撇号都被视为单词分隔符（
mary-jane→Mary-Jane）
JavaScript 手动处理首字母大写更可控
当需要保留原有大小写（比如 iPhone、XMLHttpRequest），又只想让每个单词开头字母大写时，就得用 JS 拆词判断。核心逻辑是：按空格/标点切分，对每段非空字符串，把首字符转大写，其余保持原样。
示例代码：
立即学习“前端免费学习笔记（深入）”；
function capitalizeFirst(str) {
return str.replace(/\b\w/g, c => c.toUpperCase());
}
// 使用：capitalizeFirst("hello world") → "Hello World"
// 注意：\b 匹配单词边界，能正确处理 "iOS app" → "iOS App"
-
\b\w比^|\s更可靠，避免误匹配标点开头的词 - 不破坏 HTML 标签结构——若用于 innerHTML，需先提取文本再写回，否则可能污染 DOM
- 性能上，短文本无压力；长列表建议节流或服务端预处理
CSS :first-letter 仅对第一个字符生效
:first-letter 伪元素只能选中块级元素的第一个字符（常用于首字下沉），它不能实现“每个单词首字母大写”，也不支持对内联元素（如 <span>）生效。
- 只适用于
<p>、<div>等块容器 - 对换行符、空格、HTML 注释后的首个可见字符无效
- 若首字符是标点（如
"Hello"），它选中的是"，不是H
服务端渲染时注意 Unicode 和 locale 差异
在 Node.js 或 Python 中做首字母大写转换，别直接用 .toUpperCase() 粗暴处理。土耳其语的 i 大写是 İ，德语 ß 转大写是 SS，而某些字体里带重音的字母（如 café）可能因 locale 设置错误变成 CAFÉ 或 Café。
- JS 推荐用
toLocaleUpperCase('en-US')显式指定 locale - Python 的
str.title()对café有效，但对it's会错成It'S，改用string.capwords() - 数据库字段如果已存为全小写，前端再转可能掩盖原始录入问题
text-transform: capitalize 快速够用；一旦出现 API 变 Api 这类问题，就得切到 JS 方案。 
