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元素的大小