title属性仅适用于语义明确、有交互行为的元素，如<img>、<button>、、<abbr>、<input>等；不应加在<div>、<span>、<table>等非交互元素上，且移动端基本无效、不参与SEO、不能替代aria-label或显式标签。
title 属性不是 tooltip 替代方案，它只在鼠标悬停或键盘聚焦时触发纯文本提示，移动端基本无效，且不能替代 aria-label 或显式标签。
哪些元素适合加 title 属性
title 属性语义上只适合已有明确交互行为或缩写含义的元素：
-
<img>：补充图片内容，如<img src="logo.png" title="公司官方标识"> -
<button>、<a>：对图标按钮或简短链接提供轻量说明，如<button title="刷新列表">↻</button> -
<abbr>：这是 HTML 规范明确要求必须带 title 的元素，如<abbr title="World Health Organization">WHO</abbr> -
<input>、<select>：可加，但实际触发不稳定——聚焦时不显示，校验气泡会覆盖它，不建议依赖 - 避免给
<div>、<span>、<table>硬加 title，它们默认不可聚焦，旧版 Safari 甚至不触发提示
title 在桌面端失效的常见原因
写了 title="说明文字" 却没提示，大概率是以下某条在起作用：
- 父容器设置了
overflow: hidden，且子元素被伪元素（如::before）完全覆盖，导致悬停对象不是原标签 - 元素本身设置了
pointer-events: none，浏览器收不到事件，title 自然不出现 - 在 iOS Safari 中测试 —— 它**完全不支持 hover 触发 title**，长按也仅部分 Android 浏览器模拟
- 元素不可聚焦且没设
tabindex="0"，某些旧版 Safari 要求这个才能激活 title（尤其对<div>类非交互元素）
title 和 aria-label / aria-describedby 怎么选
三者目标不同，混用反而破坏可访问性：
立即学习“前端免费学习笔记（深入）”；
-
title：纯视觉提示，浏览器自动渲染，屏幕阅读器会读出，但**仅在悬停或聚焦时触发**，且支持不一致 -
aria-label：覆盖元素默认可访问名称，**不生成视觉提示，仅服务辅助技术**；适合图标按钮，如<button aria-label="删除"><svg></svg></button></li> <li><code>aria-describedby
：需配合真实 DOM ID 使用，比 title 更可控，例如<input aria-describedby="hint-1"><div id="hint-1">邮箱格式如 name@domain.com</div> - 错误做法：
<button title="删除" aria-label="移除">——两者冲突，读屏器可能只读aria-label，而桌面端又多一个冗余提示
移动端和 SEO 场景下必须绕开的坑
title 属性在这些场景里几乎等于“摆设”：
- 移动端用户不会悬停，iOS Safari 完全不触发，Android Chrome 长按支持极弱，**别把它当核心提示手段**
- 搜索引擎不抓取 title 属性值，它不参与 SEO；
<title>标签才是 SEO 关键，两者名字一样但毫无关系 - 表单中依赖 title 提示格式（如“请输入 6–20 位密码”），用户不悬停就看不到，且移动端根本看不到
- 真正需要提示的地方，优先用
<label>显式关联 +aria-describedby指向额外文案，或 CSS 实现的 tooltip 组件
最常被忽略的一点：title 值是纯文本，不解析 HTML，写 <strong>加粗</strong> 会原样显示；它也不支持换行或样式定制，超过 120 字符就该考虑用其他方式了。
