首頁 >web前端 >html教學 >html圖像標籤

html圖像標籤

无忌哥哥
无忌哥哥原創
2018-06-29 09:58:542143瀏覽

圖像標籤可能是最大最感興趣的啦,俗話說,有圖有真相,一張圖片,勝過萬語千言

頁面中有了圖像,會瞬間變得多姿多彩,使用戶的體驗也瞬間提升

但是圖像是外部資源,加載到當前頁面是需要時間的,所以圖像雖好,也不能濫用

用得好,畫龍點睛,用不好,畫蛇添足

圖像使用a1f02c36ba31691bcfe87b2722de723b標籤,這是在之前前端初體驗課程中提到過

因為圖像是外部資源,如果你引用的資源來自網絡,有可能會引用失敗或因為超時等原因加載失敗, 

所以,我們還要給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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:html連結標籤下一篇:html連結標籤