img标签基本分析在HTML5中，img标签图片有四个元素：（1）src：图片路径（2）width：（3）height：（4）alt：alert功能：当图片出现错误时，usethefunctioninalt表示错误内容容易被搜索引擎抓取（easyforsearchenginestograb,easyforSEOrendering）注意：（1）img设置的宽高必须是图片的原始大小(2)内联元素一般不能设置宽高。img虽然也是内联元素，但是是可以通过src传递的替换元素，所以内联元素和行内元素的宽高差异可以独立设置。内联元素间距问题如何解决：下图中内联元素上下空隙的原因：img是一个内联元素=>内联元素默认会在元素代码中产生换行符（又名asblanks=>也可以默认为asatextstring)下图中内联元素垂直空隙的原因：内联元素默认基线对齐导致出现空节点(vertical-align:baseline;)什么是基线对齐？垂直、水平工作什么是空白节点？垂直方向出现空白节点的原因：由于imginline元素在浏览器中可能会被当做字符串处理，可能会受到front-size字体大小的影响，line-height也会影响空白节点=>添加图片的时候下面会多出一个空白行，这是空白节点的作用。方案一：因为内联元素被当做字符串处理，所以可以在parent中添加一个font-size:0；对齐方式变为：vertical-align:middle;但它可能会导致父级中的文本样式出现问题。方案二：利用display从内联元素变为块级元素：注意：vertical-align和line-height是CSS中最难理解的两个。:为什么可以更改font-size=0;可以让img的空白节点消失文本图片示例：span标签和图片一起使用，两个内联元素的对齐方式为vertical-align:baseline;很明显，文字超出了图片的基线如果下图中改变文字大小，图片的垂直间距也会变大。原因：文字会有一个默认的行高，导致文字之间有垂直间距，而且文字越大，间距越大=>使用“vertical-align:middle;”时当文字位置上升时，将没有间距如下图
