在HTML中输入“看得见”的空格应使用 （非断行空格），它能强制渲染不可折叠、不可换行的空格，兼容性好、语义清晰；直接敲空格会被浏览器合并，CSS的white-space:pre副作用大，Unicode字符易乱码，框架中需用\u00A0转义。
HTML 里怎么输入一个“看得见”的空格
普通键盘敲空格，在 HTML 中会被浏览器自动合并成单个空白符，前后多个空格、换行、制表符全算一个。所以直接打空格键，<input placeholder="搜索 商品"> 里的两个空格，页面上只显示一个。
是最常用也最稳妥的写法
用 （non-breaking space）能强制渲染一个不可折叠、不可换行的空格。它在所有主流浏览器中兼容性好，语义清晰，适合用在搜索框提示语、标题、按钮文字等需要精确控制空隙的场景。
<input type="text" placeholder="搜索 商品" />
上面例子会显示“搜索 商品”（两个连续空格），且不会因容器变窄而把“商品”挤到下一行。
-
- 别用 Unicode 字符如
\u00A0直接写进 HTML 源码——编码不一致时容易变乱码 - CSS 的
white-space: pre虽然也能保留空格，但会影响整个元素的换行行为，副作用大，不推荐为单个空格动用 CSS
其他空格实体要慎用
HTML 还有 （半个汉字宽）、 （一个汉字宽）、 （细空格）等，但它们：
立即学习“前端免费学习笔记（深入）”；
- 在部分老浏览器或某些字体下渲染不一致
- 搜索框提示语这类轻量文案，没必要引入语义过重的排版单位
- 如果真需要“比空格更宽”，优先考虑 CSS 的
letter-spacing或伪元素 +width控制，更可控
Vue/React 等框架里别忘了转义
在 JSX 或 Vue 模板中直接写 会报错或被当作字符串字面量。必须写成：
// React JSX
<input placeholder={"搜索\u00A0\u00A0商品"} />
// Vue 模板（v-bind）
<input :placeholder="'搜索' + '\u00A0\u00A0' + '商品'" />
或者用 {' '}（数字字符引用）也行，但 \u00A0 更直观。注意：不要写成 字符串，JSX 不解析 HTML 实体。
真正容易出问题的不是“怎么打空格”，而是没意识到 HTML 默认压缩空白符，以及在框架里混淆了模板语法和运行时字符串。留心这两处，基本就不会出现提示语空格消失或乱码了。
