zoukankan      html  css  js  c++  java
  • 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

    4.area中的shape和coords详解

      shape选择的区域coords坐标

      shape的值:default默认的区域    rect矩形区域     cicle圆形区域  poly多边形区域

      4.1矩形:顶点坐标为(0,0)斜对角线坐标(200,200)

        写法:<area shape="rect" coords="0,0,200,200" title="图片" alt="图片">

         4.2 圆形:圆心坐标(200,200)半径50

        写法:<area shape="cicle" coords="200,200,50" href="" alt="">

      4.3不规则图形:由坐标(10,10)(20,20)(30,30)(40,25)围成的多边形

        写法:<area shape="polygon" coords="10,10,20,20,30,30,40,25" href="" alt="">

        注意:不规则图形坐标值是成对出现的,所以coords里的值也是成对出现的,否则设置无效

         

      

  • 相关阅读:
    如何入门深度学习
    机器学习之激活函数
    轻量化模型之SqueezeNet
    聚类算法之MeanShift
    目标检测之RefineDet
    语义分割之RefineNet
    数学基础之高斯核函数
    目标检测之人脸识别
    梯度下降算法及优化方法
    机器学习高阶训练营知识点一览
  • 原文地址:https://www.cnblogs.com/gvip-cyl/p/6259818.html
Copyright © 2011-2022 走看看