表单中的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，但现代开发中主要使用标准语法即可。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

加载提示（Loading Placeholder）设计

当页面内容异步加载（如图片、文章列表）时，显示“加载中”提示或骨架屏（Skeleton Screen）能有效减少空白等待感。

常见实现方式：

• 使用CSS动画模拟加载状态，如闪烁的灰色块
• JavaScript控制，在数据未返回前显示占位结构
• 结合框架（如vue、react）动态切换显示内容

简单骨架占位示例： “`html

“` “`css .skeleton-line { height: 16px; background: #eee; margin-bottom: 12px; border-radius: 4px; animation: loading 1.5s infinite ease-in-out; } .short { width: 60%; } @keyframes loading { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } “`

结合JavaScript动态控制

可通过JavaScript在加载完成时隐藏占位内容，显示真实数据。

“`javascript // 模拟加载完成后替换内容 setTimeout(() => { document.querySelector(‘.skeleton’).style.display = ‘none’; document.querySelector(‘#content’).style.display = ‘block’; }, 2000); “` “`html

“`

基本上就这些。合理使用 placeholder 和加载提示，能让界面更友好。关键是保持语义清晰，避免滥用 placeholder 代替标签，同时确保加载反馈及时可见。

以上就是