html中如何添加提示信息

提示：在标签中添加title属性

1.文本中如何添加提示信息？

　　1.1直接在标签中加title=“值”；

　　例如：<p title="爱笑，爱哭，爱生活">我是女生，漂亮的女生，我是女生，爱哭的女生</p>

　　1.2当鼠标移到p标签上时，显示title里面的内容。

2.图片中如何添加提示信息？

2.1在整张图片中添加提示信息

　　直接在img标签中添加title=“内容”；另外：alt属性在图片加载不出来时候显示

　　例如：<img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" title="tupian">

　　当鼠标移到img标签上时显示title里面的内容

2.2在指定区域显示提示信息

　　步骤：a.在img标签中添加usemap="#内容"

　　　　　b.在img同级中添加map标签，并且在map标签里面添加area标签

　　　　　c.map标签里的id名和name名必须同img里的usemap里的内容一致

3.完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>usemap用法</title>
</head>
<body>
    <!-- 在文本中添加提示信息 -->
    <p title="爱笑，爱哭，爱生活">我是女生，漂亮的女生，我是女生，爱哭的女生</p>

    <!-- 在整张图片中添加提示信息 -->
    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" title="tupian">    
    
    <!-- 在图片固定位置添加提示信息 -->
    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" usemap="#tupian">
    <map name="tupian" id="tupian">
        <area shape="rect" coords="0,0,50,50" title="爱你" alt="图片">
        <!-- <area shape="cicle" coords="200,200,50" href="" alt=""> -->
        <!-- <area shape="polygon" coords="10,10,20,20,30,30,40，40" href="" alt="" title="爱你"> -->
    </map>        
</body>
</html>

View Code