表单中的placeholder属性用于提示输入格式，加载提示则通过骨架屏或动画提升等待体验。需注意placeholder不可替代label以保证可访问性，可通过CSS自定义样式；加载状态常用CSS动画与JavaScript控制切换内容，结合框架可实现动态展示，合理使用能显著提升用户体验。
在HTML中，占位内容（placeholder）和加载提示常用于提升用户体验，尤其是在表单输入或资源加载过程中。它们能让用户更清楚当前操作状态或预期输入格式。
表单中的 placeholder 属性
placeholder 是HTML5为表单输入字段提供的原生属性，用于显示简短的提示信息，提示用户应输入的内容格式或示例。该提示文字通常以浅灰色显示，输入内容后自动消失。
示例： ```html ```适用于 input 和 textarea 元素。注意：不要用 placeholder 替代 label，因为屏幕阅读器可能无法识别 placeholder 作为标签使用，影响可访问性。
自定义占位内容样式
可以通过CSS修改 placeholder 的显示样式，例如颜色、字体等。
立即学习“前端免费学习笔记（深入）”；
示例：改变提示文字颜色 ```css input::placeholder { color: #999; font-style: italic; } textarea::placeholder { opacity: 0.7; } ```不同浏览器对伪元素写法支持略有差异，如旧版Webkit内核需使用 ::-webkit-input-placeholder，但现代开发中主要使用标准语法即可。
加载提示（Loading Placeholder）设计
当页面内容异步加载（如图片、文章列表）时，显示“加载中”提示或骨架屏（Skeleton Screen）能有效减少空白等待感。
常见实现方式：
- 使用CSS动画模拟加载状态，如闪烁的灰色块
- JavaScript控制，在数据未返回前显示占位结构
- 结合框架（如Vue、React）动态切换显示内容
结合JavaScript动态控制
可通过JavaScript在加载完成时隐藏占位内容，显示真实数据。
```javascript // 模拟加载完成后替换内容 setTimeout(() => { document.querySelector('.skeleton').style.display = 'none'; document.querySelector('#content').style.display = 'block'; }, 2000); ``` ```html加载中...
```
基本上就这些。合理使用 placeholder 和加载提示，能让界面更友好。关键是保持语义清晰，避免滥用 placeholder 代替标签，同时确保加载反馈及时可见。
