zoukankan      html  css  js  c++  java
  • 今天我们谈一下HTML标签中的<map>标签的用法和使用场景

    首先我们看下这个标签到底是干什么的!

    W3C的定义:

    然后兼容性:

    然后与之配套使用的另一个标签:

    <area/>规定其区域;

    我们来看看<map>标签支不支持全局属性;=====》

    发现它是支持全局属性的;

    使用方法:其实<map>只是给浏览器做了一个说明,我要对一个图片创建一个区域映射;所以我们还得有一张图片指向<map>标签。作为指向那么是唯一的;所以我们可以设置id与图片对应;还可以设置name与其进行对应;

    如下code;

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Map标签的用法</title>
            <style type="text/css">
                div{
                    width: 800px;
                    height: 800px;
                    position: relative;
                    margin: 0 auto;
                }
            </style>
        </head>
    
        <body>
            <div class="CsOuterdiv">
                <h2>Map标签的用法</h2>
                <img src="../../img/Sky.jpg" style=" 600px;height: auto;" />
                <map></map>
            </div>
        </body>
    
    </html>
    View Code

    //首先注意:<area/>是个单标签;

    它的属性有;

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title>Map标签的用法</title>
            <style type="text/css">
                div {
                    width: 800px;
                    height: 800px;
                    position: relative;
                    margin: 0 auto;
                }
            </style>
        </head>
    
        <body>
            <div class="CsOuterdiv">
                <h2>Map标签的用法</h2>
                <img src="../../img/Sky.jpg" style=" 600px;height: auto;" usemap="#MyfirstMap" border="0" alt="testimg" />
                <map id="MyfirestMap" name="MyfirstMap">
                    <area shape="circle" coords="180,139,14" href ="http://www.baidu.com" alt="百度" />
                     <area shape="circle" coords="129,161,10" href ="http://jingdong.com" alt="京东" />
                      <area shape="rect" coords="0,0,110,260" href ="http://taobao.com" alt="淘宝" />
                </map>
            </div>
        </body>
    
    </html>
    View Code
    努力不一定成功,但放弃一定失败。
  • 相关阅读:
    接口开发中的 RestTemplate 传参问题
    逆流成河:五年软件开发生涯
    .NET Web开发技术简单整理
    2011-05-29 21:48 VS.NET2010水晶报表安装部署[VS2010]
    WPF 基础到企业应用系列3——WPF开发漫谈
    C# WinForm开发系列
    接口和委托的区别
    通过jquery触发select自身的change事件
    php去掉字符串中的最后一个字符和汉字
    Go语言学习之数据类型
  • 原文地址:https://www.cnblogs.com/alideai/p/7868112.html
Copyright © 2011-2022 走看看