html中如何添加提示信息

時間 2019-11-12

標籤 html 如何添加提示信息欄目 HTML 简体版

原文原文鏈接

提示：在標籤中添加title屬性html

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

　　1.1直接在標籤中加title=「值」；spa

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

　　1.2當鼠標移到p標籤上時，顯示title裏面的內容。htm

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

2.1在整張圖片中添加提示信息圖片

　　直接在img標籤中添加title=「內容」；另外：alt屬性在圖片加載不出來時候顯示ci

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

　　當鼠標移到img標籤上時顯示title裏面的內容event

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>