圖像標籤可能是最大最感興趣的啦,俗話說,有圖有真相,一張圖片,勝過萬語千言
頁面中有了圖像,會瞬間變得多姿多彩,使用戶的體驗也瞬間提升
但是圖像是外部資源,加載到當前頁面是需要時間的,所以圖像雖好,也不能濫用
用得好,畫龍點睛,用不好,畫蛇添足
圖像使用標籤,這是在之前前端初體驗課程中提到過
因為圖像是外部資源,如果你引用的資源來自網絡,有可能會引用失敗或因為超時等原因加載失敗,
所以,我們還要給img標籤添加alt屬性,指示當前圖片的文字描述,例如: 混血車模
如果當前圖片不能顯示或使用者禁止影像顯示的話,就會顯示這個提示文字
這個提示文字非常重要,我們剛才介紹過,搜尋引擎是不能辨識影像內容的,所以如果想讓搜尋引擎,如百度
知道你的圖片是什麼,就必須要添加alt標籤,這樣你的圖片資訊就會被檢索到了,有利於網站的優化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>6.图像标签</title> </head> <body> <!-- <img src="../images/9.jpg"> --> <!-- 发现图片太大了,我们刚才介绍过,img标签还有二个属性可以设置图片的大小 --> <!-- width:设置宽度, height:设置高度,单位默认为像素,可以不写单位,只有数值 --> <!-- <img src="../images/9.jpg" width="300px"> --> <!-- <img src="../images/9.jpg" width="300"> --> <!-- 宽度与高度写一个就可以,另一个属性会自动等比例缩放的 --> <img src="../images/9.jpg" width="300" alt="混血车模"> </body> </html>
以上是html圖像標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
