title属性是html全局属性，用于在鼠标悬停或键盘聚焦时显示纯文本提示框，适用于、、等语义明确的交互元素；移动端基本无效，不支持html解析与样式定制，应优先用aria-label或aria-describedby提升可访问性。
title属性的基本用法
HTML 元素的 title 属性是最直接的提示信息设置方式，浏览器默认在鼠标悬停时显示为小黄框提示。它适用于几乎所有元素，但语义上更适合用于补充说明，而非关键操作指引。
-
title值是纯文本，不解析 HTML 标签，写<strong>加粗</strong>会原样显示 - 对屏幕阅读器可见，但部分用户可能因设置跳过，不可替代
aria-label或真实标签 - 移动端基本不触发（iOS Safari 和 Android Chrome 默认无 hover），别依赖它做核心提示
- 示例：
<button title="删除这条记录，不可恢复">?️</button>
title与aria-label的区别和取舍
当需要更可靠、更可访问的提示时，aria-label 是更好的选择，尤其对按钮、图标类元素。它优先级高于 title，且被主流读屏软件正确识别。
-
title是视觉/鼠标友好型“附属提示”，aria-label是语义层“替代性标签” - 同一元素同时设两者时，读屏器只读
aria-label，title仅对鼠标悬停有效 - 若元素已有可见文字（如
<button>提交</button>），通常无需title；若只有图标，优先用aria-label - 错误写法：
<span title="加载中..." aria-label="加载中...">⋯</span>—— 多余且可能干扰
title在表单控件中的实际表现
title 在 <input>、<select></select> 等表单元素上能生效，但行为不稳定，尤其在聚焦/校验场景下容易被忽略或覆盖。
- 输入框获得焦点时，多数浏览器不会显示
title提示（除非移出再悬停） - 配合
required或自定义校验时，浏览器原生报错气泡会压过title，导致提示丢失 - 更稳妥的做法：用
<label></label>明确关联 +aria-describedby指向额外提示文案 - 示例：
<input id="email" required title="请输入公司邮箱地址"><label for="email">邮箱</label>——title存在但不可靠
title的兼容性与性能注意点
title 属于 HTML4 就存在的老属性，所有浏览器都支持，但渲染细节差异大，且存在隐式性能开销。
- Chrome 和 Edge 对长
title文本自动截断+省略号，Firefox 则换行显示，长度控制难统一 - 大量使用
title（比如表格每行都加）可能轻微拖慢 DOM 渲染，尤其在低配设备上 - 某些企业内网环境或禁用 JS 的页面中，
title是唯一可用提示手段，此时需确保内容简洁、无换行符 - 避免动态频繁修改
title属性值——它会触发重绘，且无过渡效果，显得突兀
title”，而是“这个信息是否必须通过悬停传达”。很多情况下，把它挪到标签旁、用 aria-live 区域更新、或干脆做成常驻 help icon 更靠谱。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
