HTML title 语法
在 HTML 中，title 是一个全局属性，它用于为元素定义鼠标悬停时的提示信息。
语法：
<element title="提示内容"></element>说明：
element 是支持 title 属性的元素。
对于 title 属性，小伙伴们要注意以下几点。
- 移动端无效：title 属性的提示框只有在 “鼠标悬停（hover）” 时才会出现。而对于手机、平板等设备来说是不存在 “鼠标悬停” 这一操作的，此时用户无法看到 title 的内容。因此，不要将重要信息仅放在 title 属性中。
- 用户体验较差：浏览器默认的 title 提示出现速度慢、样式丑且无法修改。在实际开发中，我们更倾向于使用 JavaScript 或 CSS 自定义的 Tooltip（提示框），来代替原生的 title 属性。
- 只能作为补充：不要使用 title 属性来替代 alt（图片描述）或 label（表单标签），它只能作为非必要的辅助补充信息。
HTML title 摘要
| 属于 | HTML 属性 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML title 示例
接下来，我们通过几个简单的例子来讲解一下 HTML title 属性是如何使用的。
示例 1：img 元素使用 title 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img src="imgs/bird.jpg" alt="little bird" title="little bird">
</body>
</html>页面效果如下图所示。
分析：
当我们把鼠标移到图片上时，就会显示 title 中的提示文字，如下图所示。
示例 2：其他元素使用 title 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div title="绿叶网 - 为好教程，全力以赴">绿叶网</div>
</body>
</html>页面效果如下图所示。
分析：
当鼠标移到 div 元素上时，就会显示 title 属性的内容，如下图所示。
