1.基本用法
<img src="kof5.jpg" alt="特瑞">
src属性为图片的链接地址，如果图片加载失败，代替图片的就是alt属性设置的文本
2.设置图片的宽高
- img标签默认的宽高就是原图的宽高
- 设置图片的宽高 （设置width属性，无需单位）
<img src="kof5.jpg" width="240" alt="特瑞">
还可以写成（设置样式）
<img src="kof5.jpg" style="width:240px;" alt="特瑞">
3.img标签的width属性与样式的优先级问题
先说结论：样式的优先级比width属性高
原理：在渲染这个img元素时，会将img标签的width属性的值解析成样式渲染到元素中，只不过他的优先级比不上类选择器而已，更别说内联样式了。
（1）没有样式的情况下，标签的width属性决定图片的大小
<img src="resource/kyo.jpg" alt="草稚京" width="240">
执行下面的代码，修改width属性的值
document.querySelector('img').setAttribute('width',480)
（2）img标签的width属性的值会被解析成样式渲染到元素中，但是优先级比样式要低，存在样式的情况下width会被覆盖
.test{
width: 200px
}
<!-- 图片实际渲染的宽度为200px -->
<img src="timg.jpg" alt="ting" width="400" class="test">
width属性被解析成样式，但是优先级低
4.img标签的width属性/css样式/dom元素width属性三者的关系
(1)标签中的width属性(img.getAttribute("width"))与元素的width属性(img.width)是不一样的，img.width是由图片的最终大小来绝对，相当于getComputedStyle的无单位版本。
例如：
<img src="timg.jpg" alt="ting" width="400" style="width:200px">
<script>
window.onload=function(){
var img = document.querySelector('img')
console.log(getComputedStyle(img, false).width) // 200px
console.log(img.width) // 200 img元素的width属性
console.log(img.getAttribute("width")) // 400 标签的width属性
setTimeout(function(){
//修改样式
img.style.width = '300px'
//重新取值
console.log(getComputedStyle(img, false).width) // 300px
console.log(img.width) // 300 img元素的width属性
console.log(img.getAttribute("width")) // 400 标签的width属性
},3000)
}
</script>
渲染后的Dom元素：
<img src="timg.jpg" alt="ting" width="400" style="width: 300px;">
5.img图片出现下边距的问题
下面的代码，一行最多只能放2张图片。所以 第3，4张会自动放到下一行，不过两行之间会出现一条边距
<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
<img src="resource/kyo.jpg" alt="草稚京" width="240">
</div>
图片左边的边距是代码换行造成的，而图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的，即vertical-align，他的默认值为baseline，将图片的垂直对齐方式设置为 top 或 bottom就可以解决 这个问题
<div style="width: 490px;border:1px solid blue;margin: 0 auto;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="vertical-align: bottom">
</div>
解决办法二：而基线的位置是与字体相关的，也就是说字体越大，空隙越大。可以将字体大小设置为0,不仅可以去除底部的边距，还可以去除左边的边距
<div style="width: 490px;font-size:0px;">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
<img src="kof5.jpg" width=240 alt="特瑞">
</div>
解决办法三：将img标签设置为块级元素（会强制换行）
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="display: block;">
解决办法四:为img设置浮动(父元素高度会坍塌，要留意这个，设置父元素overflow: hidden可以解决)
<div style="width: 490px;border:1px solid blue;margin: 50px auto;overflow: hidden;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
<img src="resource/kyo.jpg" alt="草稚京" width="240" style="float: left;">
</div>
6.图片加载失败时img元素的大小
img默认是行内元素，行内元素的大小由内容撑开，如果图片加载失败，撑开img元素的就只能是alt属性对应的文本值
但是如果将img设置为块级元素，块级元素可以设置自己的宽高，这样即使图片加载失败，也不影响img元素的大小