1.8 为标签添加title属性
本节向读者介绍title属性的使用方法。前文介绍head标签时讲过在HTML网页头部使用title标签的方法，而本节介绍的title属性与title标签是完全不同的。
在标签内使用title属性相当于为该标签附加上提示信息，其表现形式为当鼠标移到该标签区域时会显示一个工具条提示信息文本（Tooltip Text）。
我们先来看一下为标签添加title属性的语法：
<element title="value"></element>
如果读者想为标签添加title属性，一般需要遵循上面的写法。
下面看一段为标签添加title属性的代码，这段代码（参见源代码chapter01/ch01-htmlcomptitle.html文件）给出在HTML网页内为标签添加title属性的方法。
【示例1-31】在HTML网页内为标签添加title属性
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <!-- 添加文档头部内容 -->
05 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
06 <style type="text/css">
07 div {
08 margin: 2px;
09 padding: 2px;
10 width: auto;
11 height: auto;
12 border: 0px solid #000;
13 background: #f0f0f0;
14 }
15 </style>
16 <title>HTML之为标签添加title属性</title>
17 </head>
18 <body>
19 <!-- 添加文档主体内容 -->
20 <h3>HTML之为标签添加title属性</h3>
21 <hr>
22 <!-- 添加文档主体内容 -->
23 <p>
24 层叠样式表(<abbr title="Cascading Style Sheets">CSS</abbr>)目前最新版本为CSS 3.
25 </p>
26 <p>
27 <a href="#" title="链接到...">链接到...</a>
28 </p>
29 <!-- 添加文档主体内容 -->
30 <div>
31 表单提交：<br><br>
32 <form>
33 用户名：<input type="text" title="请输入用户名" value="" /><br><br>
34 密码：<input type="password" title="请输入密码" value="" /><br><br>
35 </form>
36 </div>
37 </body>
38 </html>
在这段HTML代码中，第24行为abbr标签添加了title属性，其中abbr标签属性用于标记一个缩写。在HTML标准规范中，abbr标签使用全局的title属性，同时必须配合title属性来使用。这样，当鼠标移到abbr缩写区域上时，就可以提示该缩写的完整内容。
下面运行测试这个页面，并将鼠标移到CSS缩写上，效果如图1.36所示。
图1.36 在HTML网页内为abbr标签添加title属性
从图1.36中看到，当鼠标移到CSS缩写上时，其完整内容Cascading Style Sheets就会以工具条提示信息的方式自动显示出来。
接着看【示例1-31】这段HTML代码，第27行为超链接<a>标签添加了title属性。在HTML标准规范中，一般建议给a标签添加title属性，这是为了给用户提供更多的提示信息。
下面将鼠标移到超链接“链接到…”区域上，页面效果如图1.37所示。当鼠标移到“链接到…”区域上时，其提示信息“链接到…”同样以工具条提示信息的方式自动显示出来。最后，将鼠标移到表单区域中的输入框区域，页面效果如图1.38所示。当鼠标移到“用户名”输入框区域时，其提示信息“请输入用户名”同样以工具条提示信息的方式自动显示出来。在表单中合理使用title属性可以为用户在填写表单时提供更多的提示与帮助信息。
图1.37 在HTML网页内为a标签添加title属性
图1.38 在HTML网页内为form表单元素添加title属性