当前位置 博文首页 > 大司空°的博客:关于html中的图片插入

    大司空°的博客:关于html中的图片插入

    作者:[db:作者] 时间:2021-07-18 19:19

    网页中的图片插入,html中提供了img标签

    <img src="图片路径" alt="图片未加载时的显示消息" />
    

    如果你只想插入一张图片的话,以上语句就已经可以实现了.

    src:图片路径可以选择你所选图片的绝对路径或者相对路径(相对路径需要将图片与html文档放在同一文件下)

    alt:图片加载失败时显示的文字消息,一般是因为路径出错或者图片名出错

    案例

    绝对路径

    <img src="C:\Users\233\Desktop\logo.png" alt="图片未加载" />
    

    相对路径(图片与html文档放在同一文件下)

    <img src="logo.png" alt="图片未加载" />
    

    如果你想继续对图片进行操作,如点击图片可以跳转网页点可以使用map标签,即为图片地图

    创立图片地图

    <map name="地图名称">
            <area shape="图形" coords="依照图形设计图形参数" alt="未加载时显示的消息" 
            href="点击图片该区域时会跳转的页面">
    </map>
    

    创立图片地图后即可在img中进行引用,属性为:usemap

    <img src="logo.png" alt="图片未加载"  usemap="#地图名称"/>
    

    效果为:在图片上划一块你选择区域,当鼠标移动上该区域时会变为一直伸出食指的小手。点击后页面会跳转至href里输入的网址.

    案例

    <map name="map">
             <area shape="rect" coords="0,0,500,500" alt="未加载" 
             href="https://www.baidu.com" title="百度""/>
    </map>
    
    <img src="logo.png" alt="图片未加载" usemap="#map">
    

    以上

    如果对您有帮助,请点一个赞再走吧

    如果有任何补充或者错误,大家可以在评论区指出哦

    cs
    下一篇:没有了