placeholder是HTML表单控件的临时提示文本属性，仅在字段为空且未聚焦或失焦时显示，不参与提交、不设默认值、不支持HTML标签、无障碍支持弱，需用value预填数据、label说明用途，样式需加厂商前缀，动态修改建议用data属性+伪元素替代。
placeholder 是 HTML 表单控件（如 <input>、<textarea></textarea>）的原生属性，用来显示一段**临时提示文本**，仅在字段为空且未获得焦点、或获得焦点后又失去焦点时可见。
它不是默认值，也不参与表单提交
很多人误以为设置 placeholder="邮箱" 就等于设了默认内容——其实不是。它不改变 value，用户一输入就消失，提交时也完全不会被发送。如果你需要预填数据，请用 value 属性；如果想引导用户理解字段用途，请配一个 <label></label> 元素。
-
placeholder文本纯属视觉提示，无障碍支持弱（屏幕阅读器不一定读出） - 它不支持 HTML 标签，写
<strong>邮箱</strong>会原样显示为字符串 - 移动端要注意：某些 iOS 版本下，若
font-size过小或line-height不匹配，提示文字可能被截断或压扁
怎么自定义 placeholder 的样式？
不能直接用 .my-input::placeholder 在所有浏览器生效，得加厂商前缀：
input::placeholder {
color: #999;
}
input::-webkit-input-placeholder { /* Chrome/Edge/Safari */
color: #999;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999;
}
input:-ms-input-placeholder { /* IE 10+ */
color: #999;
}注意：::-moz-placeholder 和 ::-ms-input-placeholder 是伪元素，但它们不继承父级字体设置，需单独声明 font-size、line-height 等。
立即学习“前端免费学习笔记（深入）”；
为什么 placeholder 动态修改后不刷新显示？
直接 JS 赋值 input.placeholder = "新提示" 是有效的，但部分老版本 Android WebView 或旧版 Safari 可能不重绘。更稳妥的做法是切换 class：
.has-placeholder::before {
content: attr(data-placeholder);
position: absolute;
left: 8px;
color: #999;
}然后用 JS 控制 element.dataset.placeholder = "新文本" 并切换 class。这样绕过原生渲染限制，也便于统一控制样式和响应式行为。
最常被忽略的一点：placeholder 提示文案必须足够简短，且不能承载关键操作指引（比如“密码需含大小写字母和数字”），因为它随时会消失——真正重要的规则，得放在 <label></label> 后面或用 <small></small> 辅助说明。
