基本语法
<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, 但是存在很大的兼容性问题
网友评论