学习笔记—图像元素

图像标签的属性

图像标签的语法

图像标签是用于在html中显示图片的标签,具体的书写语法如下:

图片标签的语法与属性

图片代替文本

相关属性的介绍

  • src属性:src是图片存在的路径,可以是本地路径和网络路径,本地路径包含同级路径、相对路径、绝对路

  • alt属性:alt属性是图片替代文本,有两方面的作用,一是用于搜索引擎搜索,二是用户提示,在图片未加载出来时可以看到alt信息,src与alt是img的必选选项

  • title属性:title属性是提示文字,鼠标移入图片时会显示提示文字

  • width属性、height属性:设置图片宽度和高度的属性,Width和height改变图像的宽度和高度,如果害怕设置了width和height会使得图像变形,那么就可以只设置其中一个参数,另一个参数会自动对应比例呈现

代码展示



    

    


    
    
    风景壁纸
    
    
    
    
    
    

绝对路径与相对路径

绝对路径与相对路径的区别

  • 绝对路径是指文件在硬盘上真正存在的路径,从该盘符开始的路径

例如:E:\HTML\images\photo.jpg    该路径表示在E盘HTML文件夹下images文件夹下的photo.jpg图像

  • 相对路径是指以当前路径为参考,相对于当前位置的路径

例如:当前路径为E:\HTML,要想加载photo.jpg该图像,只需输入images/photo.jpg

相对路径的表示方法

  • 同级路径:同属于一层路径下,访问文件可以直接写文件名称

代码展示

  • 如果访问该路径下面的文件夹,应该先输入文件夹名称然后加“ / ”,再输入文件名

代码展示

  • 如果访问该路径上一层文件夹下的内容,应该先加“.. / ”再添加文件名,退出多层应该加“../../”再加文件名

代码展示

  •   如果向上返回两层应该这样写:

代码展示

图片热点地图用法

热点地图写法格式

下面是图片热点地图的写法格式



 


  
  
  
  

相关属性及其注意事项

下面介绍相关属性

  • shape属性:shape是指定形状类型,有三种形状,rect-矩形,circle-圆形,poly-多边形

  • coords属性:coords是指定热点范围,指定绘制的区域 ,鼠标移动到相关区域会显示点击图标

  • href属性:href指定跳转的地址

  • target属性:是指定跳转页面的方式(self、blank、parent、top)

注意事项

  • shape属性规定area元素的形状, rect(矩形) circle(圆形)poly(多边形)

  • coords 属性规定形状的坐标, rect(x1,y1,x2,y2)     circle(x,y,radius)   poly(x1,y1,x2,y2,..,xn,yn)

  • target规定打开窗口的方式

  • href规定打开的链接地址

  • 中的 usemap 属性引用

    中的 name 属性

  • area 元素永远嵌套在 map 元素内部

代码展示



    

    图像热点地图方法


    
    
    
        
        
        
        
        
        
        
        
        
        
    

效果展示

发表评论

电子邮件地址不会被公开。 必填项已用*标注