简单说说的那些事儿

基本语法

<img>是空标签，只有属性，没有闭合标签

<img src='' alt=''>

常见属性

• src：指的是source，属性值为图片的url地址，也可以将图片编码赋给src属性。通过img标签，我们可以将图片引入到页面中
• alt：替换文本属性，作用是当img的src地址发生错误或者图片失效所导致图片无法正常显示时，浏览器将显示这个替代性的文本，可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，对搜索引擎也比较友好
• width和height属性：设置图片的宽高。建议使用css设置

title属性和alt属性有啥区别？

• title是全局属性，可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签；alt是img元素的属性
• alt是在图片无法加载出来时显示，title是鼠标放在设置了title属性的元素上时显示
• title是对元素的额外说明或者提示，而alt起到的是替代图片的作用
• 如果为图片同时设置了alt和title属性，在低版本IE浏览器中，鼠标经过图片显示的却是alt的属性值，忽略了title属性

图片底部为什么总会有一条白边？

  在写页面时经常会发现图片的最下面有一条白边，有点影响页面的美观。
  这是因为“基线”的问题，什么是基线？在字体设计时，有top,text top(顶线)，super(上基线)，baseline(基线),sup(下基线)，text bottom(底线)，bottom这几条线组成，具体可以查https://www.zhihu.com/question/21558138下方尤大神的讲解，比较直观。默认情况是基线对齐，所以会出现白边的问题。
解决：

• 处理基线问题：

img{
  vertical-align: bottom;
}

• 当图片的父元素中没有文字时，将父元素的字体大小font-size：0；
• 将图片变成块盒：

img{
  display: block;
}

图片排列时，图片横向之间有空隙

1.PNG

  如果我们想让个图片上下左右之间都无隙排列正常情况就会这样，上下间隙就是因为上面所说的基线问题。<img>元素默认display样式是inline，不单单是img元素，凡是行内元素都具有这样的特性，在HTML代码格式化后，行内元素之间的换行，空格等都会被浏览器解析成一个空格，就出现了左右的空隙
解决:

• 最直接的方式就是此段代码不换行，但是这样做不利于程序的可读性，如果使用js创建img元素，再设置不换行又增添了麻烦
• 父元素容器font-size：0；同时解决上下左右的空隙问题
• 使用浮动
• 设置margin-left/right
• 使用white-space-collapse :discard, 但是存在很大的兼容性问题