html圖像標籤-html教學-PHP中文網

首頁

web前端

html教學

html圖像標籤

无忌哥哥

Jun 29, 2018 am 09:58 AM

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

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

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

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

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

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

所以,我們還要給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