<!--

? ? ? ? 圖片標簽

? ? ? ? 場景：在網頁中顯示圖片

? ? ? ? 代碼：

? ? ? ? ? ? ?<img src="./6.dog.gif" alt="白狗" title="這是一只大白狗" ?width="200" height="200">

? ? ? ? 解釋：

? ? ? ? ? ? ?img: 標簽名

? ? ? ? ? ? ?src: 屬性名

? ? ? ? ? ? ? “ ”: 屬性值

? ? ? ? ? ? ? src=" ": 標簽屬性

? ? ? ? ? ? ? alt: 屬性名

? ? ? ? ? ? ? 屬性值:替換文本

? ? ? ? ? ? ? 當圖片加載失敗時，才顯示alt的文本

? ? ? ? ? ? ? 當圖片加載成功時，不會顯示alt的文本? ? ?? ?? ? ? ? ? ? ? title: 屬性名

? ? ? ? ? ? ? 屬性值：提示文本

? ? ? ? ? ? ? 當鼠標懸停時，才顯示的文本

? ? ? ? ? ? ? 注意點：title屬性不僅僅可以用于圖片標簽，還可以用于其他標簽

? ? ? ? ? ? ?width和height屬性

? ? ? ? ? ? ? whidth和height：屬性名

? ? ? ? ? ? ? 屬性值：寬度和高度（數字）

? ? ? ? ? ? ? 注意點：

? ? ? ? ? ? ? 如果只設置width或height中的一個，另一個沒設置的會自動等比例縮放（此時圖片不會變形）

? ? ? ? ? ? ? 如果同時設置了width和height兩個，若設置不當，此時圖片可能變形
?

屬性注意點：

? ? ? ? ? ?1.標簽的屬性寫在開始標簽內部

? ? ? ? ? ?2.標簽上可以同時存在多個屬性

? ? ? ? ? ?3.屬性之間可以空格隔開

? ? ? ? ? ?4.標簽名與屬性之間必須以空格隔開

? ? ? ? ? ?5.屬性之間沒有順序之分

圖片標簽特點:

? ? ? ? ? ? 單標簽

? ? ? ? ? ? img標簽需要展示對應的效果，需要借助標簽的屬性進行設置

? ? ?-->

? ? ?<img src="./6.dog.gif" alt="白狗" title="這是一只大白狗" ?width="200" height="200">

總結

以上是生活随笔為你收集整理的前端基础-html-图片标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。