placeholder不能替代label，必须共存且分工明确：label提供可访问性语义，placeholder仅作示例提示；移动端需严格设置height与line-height相等、避免空value与transform、配合inputmode/pattern/title增强引导；::placeholder需全前缀兼容并确保对比度≥4.5:1。
placeholder 不能替代 label，但能强化语义引导
占位文本本身不构成可访问性语义，屏幕阅读器大概率跳过 placeholder，只读 label。如果删掉 label、只留 placeholder="邮箱"，视障用户根本不知道这个框是干啥的。
正确做法是二者共存且职责分明：
-
label写明确字段用途，比如<label for="email">电子邮箱地址</label> -
placeholder写具体示例，比如placeholder="name@example.com"，而不是重复“邮箱” - 若视觉上需隐藏
label，用visually-hidden类（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;），别用display: none或visibility: hidden
移动端 placeholder 显示异常的三个硬性约束
iOS Safari 和微信 WebView 对 placeholder 渲染极其敏感，不是样式没写对，而是触发了底层渲染边界条件。
- 必须给
input设置显式height和line-height，且两者数值严格相等；仅靠padding-top撑高会导致基线错位、文字被截顶 - 避免同时设置
value=""和placeholder——某些 WebKit 版本会优先渲染空value，直接覆盖提示文字 - 禁用
transform: scale()、perspective等属性，它们会破坏::placeholder的图层合成，导致残留或错位
用 inputmode + pattern + title 做轻量格式引导
placeholder 本身不校验、不拦截、不格式化，但可以和原生属性配合，在不写 JS 的前提下提升输入引导效果。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
inputmode="tel"触发手机数字键盘，比type="number"更可靠（后者在 iOS 上可能弹出带小数点的键盘） -
pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"配合title="请按 XXX-XXXX-XXXX 格式输入"，表单提交时浏览器会弹原生提示（注意：pattern在type="number"下无效） - 不要把关键规则塞进
placeholder，例如"6–12位字母数字"——用户一聚焦就消失，且移动端常被截断为“6–12位字…”
::placeholder 样式必须写全前缀且控制对比度
现代浏览器支持 input::placeholder，但旧版 Safari、Firefox 和 Android WebView 仍需兼容写法，且默认透明度不一致。
- 必须同时声明：
input::placeholder、input::-webkit-input-placeholder、input::-moz-placeholder、input:-ms-input-placeholder - 统一加
opacity: 1，否则 Firefox 默认半透明，其他浏览器不透明，颜色深浅不一 - 慎用
font-style: italic或过低对比度（如color: #ccc），色觉障碍用户可能完全看不见；建议最低对比度 ≥ 4.5:1，可用 axe 插件验证 - 别给
::placeholder设line-height或transform，部分安卓机型会渲染错位或文字消失
最常被忽略的一点：placeholder 属性值本身不会被 form.reset() 清除，但用户看到的“空框”其实是 DOM 的 value 为空——这容易让人误判重置逻辑是否生效。
