当前位置: 移动技术网 > IT编程>网页制作>CSS > 02HTML-<img>

02HTML-<img>

2018年09月26日  | 移动技术网IT编程  | 我要评论

一、img的属性:alt/title

  alt属性是替换名字,是给搜索引擎抓取使用,当图片显示不出来时,就会显示出alt的内容;

    

  title 属性是提示文字,当鼠标移到图片上的时候会显示出来,大部分的标签都会有这个属性

    

 

*******************************alt和title属性的区别******************************
** alt属性:
  alt属性是为了在文档中图像不能显示的时候,提供给用户的文字说明。(alt text)
  目标元素:img/area/input:image
  图像不能显示的情况:
    用户的浏览器不支持图像显示,或者图像显示被禁止
    视觉障碍或者使用屏幕阅读器的用户
  注意事项:
    有文字的图像,通常会将alt设置为该文字
    装饰性的图片可以设置alt=””,但是不能忽略,否则文字浏览器或屏幕浏览器会显示图片的文件名
    alt的长度应该遵循“尽可能短,尽需要长”
** title属性
  title属性能够为元素提供额外信息,(tool tip)
  目标元素:除了html/head/meta/title/script/base/basefont/param外的所有元素
  主要用途:
    为链接添加描述性文字
    为图像提供额外的说明信息

 

二、设置图片加载错误时的显示默认图

  在js中有onload、onerror两个事件,可在图片中加入,修改于的src地址,这样可改善网络差或者图片丢失时的用户体验:
    

<img src="img/3.jpg" onload="this.src='default.jpg'" onerror="this.src='error.jpg'"/>

  在使用js时,为了避免’的嵌套,可以

    

onerror=javascript:this.src="images/icon2.png"

  

 

三、图片下莫名的间隙问题

  原理:vertical默认基线(baseline)对齐
  理解:vertical-align指定了inline元素/table-cell元素的垂直对齐方式,默认值是baseline对齐,要注意的是,该对齐是元素相对于相邻文字的基线对齐的,以图片为例,我们假设在图片相邻有一个字母x,事实上,字母x非常特殊,他恰好是处于同元素内的中线(middle)和基线(baseline)中间的位置,也就是说图片相对于基线对齐,而基线和底线也是有距离的,这段距离所呈现的空白,也就是莫名间隙出现的原因。

 

  * 那么在没有文字的情况下为什么也会出现间隙呢,,
    在h5的文档声明下,块状元素内部的内联元素的行为表现看,就好像块元素的内部有一个(有可能是两个)没有实体,看不见的空白节点,所以内部的inline元素相对于这个节点基线对齐,就产生了元素与父级之间的间隙。由于文字x的高度与line-height相关,而font-size又影响line-height,所以这个间隙的大小可以通过line-height/font-size进行间接的控制。
  解决方法:

  •     给元素设置vertical-align:top/middle/bottom;
  •     对图片设置display:block;

      *** vertical-align对块元素不起作用

  •     在不影响布局的情况下,设置浮动/绝对定位
  •     设置块元素的行高足够小
  •     设置font-size

      由于font-size间接控制line-height,所以这种方法本质上还是改变的行高

  **一个inline-block元素,如果里面没有inline内联元素,或者他的overflow不是visible,则该元素的基线就是其margin底边缘,否则,他的基线就是元素中最后一行内联元素的基线。

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网