<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img標(biāo)簽</title>
</head>
<body>
<!--
1.img標(biāo)簽中的img其實(shí)是英文image的縮寫
所以img標(biāo)簽的作用, 就是告訴瀏覽器我們需要顯示一張圖片
2.img標(biāo)簽格式: <img src="">
其實(shí)img標(biāo)簽中的src是英文source的縮寫
所以img標(biāo)簽中的src就是用來(lái)告訴img標(biāo)簽, 需要顯示的圖片名稱
3.注意點(diǎn)
- 和H系列標(biāo)簽/p標(biāo)簽還有Hr標(biāo)簽不一樣, img標(biāo)簽不會(huì)獨(dú)占一行
- 如果我們手動(dòng)指定了img標(biāo)簽顯示的圖片的寬度和高度, 有可能會(huì)導(dǎo)致圖片變形, 那么如果又想指定寬度和高度, 又不想讓圖片變形. 我們可以只指定寬度和高度其中的一個(gè)值即可
- 只要指定了高度, 系統(tǒng)會(huì)自動(dòng)根據(jù)高度計(jì)算出寬度, 只要指定了寬度, 系統(tǒng)會(huì)自動(dòng)根據(jù)寬度計(jì)算出高度, 并且都是等比拉伸的, 也就是說(shuō)不會(huì)變形
4.img中的其它屬性
width: 寬度
height: 高度
所以在img標(biāo)簽中width/height這兩個(gè)屬性的作用, 就是用來(lái)告訴img標(biāo)簽將來(lái)需要顯示的圖片有多寬有多高
如果img標(biāo)簽沒(méi)有指定需要顯示的圖片的寬高, 那么系統(tǒng)會(huì)按照?qǐng)D片默認(rèn)的寬高來(lái)顯示
如果img標(biāo)簽指定的寬高, 那么系統(tǒng)會(huì)按照指定的寬高來(lái)顯示
title: 用于告訴瀏覽器, 當(dāng)鼠標(biāo)懸停在圖片上時(shí), 需要彈出的描述框中顯示什么內(nèi)容
alt其實(shí)是英文alternate的縮寫, 它的作用就是用于告訴瀏覽器, 當(dāng)需要顯示的圖片找不到時(shí)顯示什么內(nèi)容
-->
<img src="images/QRCode.jpg">
<img src="images/QRCode.jpg" width="300" height="478">
<img src="images/QRCode.jpg" width="100" height="478">
<img src="images/QRCode.jpg" height="178">
<img src="images/QRCode.jpg" width="100">
<img src="images/QRCode.jpg" width="100" title="這個(gè)是江哥的微信二維碼圖片">
<img src="images/QRCode1.jpg" width="100" alt="對(duì)不起, 你需要查看的圖片不見(jiàn)了">
</body>
</html>
image.gif
