placeholder仅对和有效，不支持、、等元素；其值为纯文本、无html解析与换行，需用浮动标签实现多行/富文本提示；样式须用::placeholder伪元素并兼容各浏览器前缀；不可替代的语义与无障碍功能。
placeholder 属性只对 <input> 和 <textarea></textarea> 有效
它不是万能提示方案，不能用在 <select></select>、<button></button> 或自定义组件上。浏览器原生只支持表单控件中的文本类输入元素。如果给 <div> 或封装的组件加 <code>placeholder，纯属无效属性，不会有任何表现。
常见误用场景：
- 在 Vue/React 封装的输入组件上直接透传
placeholder，但内部没用到该 prop 渲染到原生<input> - 用 JS 动态设置
element.placeholder = 'xxx'，但元素本身不是可编辑的表单控件（比如<span></span>） - 期望
placeholder在contenteditable="true"元素中生效 —— 实际不支持
placeholder 的值会被自动截断或换行异常
它本质是纯文本，不解析 HTML，也不支持换行符渲染。哪怕你写 placeholder="第一行
第二行"，大多数浏览器会把
当成空格或直接忽略，最终显示为连续无换行文字。
如果你需要多行提示或富文本样式（比如加粗关键词），必须放弃原生 placeholder，改用「浮动标签」（floating label）模式：用 <label></label> + CSS 控制显隐，或用 <span></span> 浮在输入框上方模拟。
另外注意长度限制：iOS Safari 对 placeholder 文本过长时会缩略显示（如“请输入…”，而非完整文案），且无法通过 CSS 控制截断行为。
样式控制只能靠伪元素 ::placeholder，且兼容性要留心
想改颜色、字体大小或透明度？必须用 CSS 伪元素，不能直接设在元素上：
input::placeholder {
color: #999;
font-size: 14px;
opacity: 1;
}
但各浏览器前缀不同，实际项目中建议这样写全：
-
input::placeholder（Chrome 57+、Firefox 52+、Safari 10.1+） -
input::-webkit-input-placeholder（旧版 Chrome/Safari/Edge） -
input::-moz-placeholder（Firefox 19–51，注意有冒号） -
input:-ms-input-placeholder（IE10–11）
别漏掉 opacity: 1 —— Firefox 默认会让 placeholder 半透明，而其他浏览器默认不透明，不统一就会出现视觉不一致。
placeholder 不是 label，也不能替代无障碍需求
它只是视觉提示，没有语义。屏幕阅读器默认不读 placeholder 内容（除非用户特别设置），更不会把它当作字段说明。W3C 明确建议：placeholder 仅用于补充示例格式（如“example@domain.com”），不能替代 <label></label>。
错误做法：
- 只写
<input placeholder="邮箱">，没配<label></label> - 用
placeholder做必填提示（如“*为必填项”）—— 用户聚焦后文字消失，提示就没了 - 依赖
placeholder传达错误信息（如“密码需8位以上”）—— 违反表单反馈原则
真正需要提示语义和可访问性的场合，<label for="xxx"></label> 是唯一可靠选择；动态提示则应放在输入框下方，用 aria-describedby 关联。
placeholder 最容易被忽略的一点：它在用户输入任意字符（包括空格）后就彻底消失，且无法通过 JS 监听“placeholder 隐藏”事件 —— 所以任何依赖它状态做 UI 反馈的逻辑，都得改用 input.value.length 或 input.checkValidity() 来判断。
