今天我們來認識圖片標籤及屬性~

<img>

<img> 標籤用在網頁中嵌入圖像。它是一個自閉合標籤，就是不需要閉合標籤，並且主要依靠屬性來提供圖片的來源、顯示的尺寸、替代文本等。圖片不會被視為真正的內容元素，而是作為圖形資源來渲染。

基本語法：

<img src="圖片路徑" alt="替代文本">

常用屬性：

• src：指定圖片的路徑或 URL。這是唯一必需的屬性，用來告訴瀏覽器從哪裡獲取圖片。

  <img src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg">
  

• alt：替代文本，當圖片無法正常加載時顯示的文本內容。這個屬性也是對無障礙設計非常重要的部分，因為使用屏幕閱讀器的用戶可以通過 alt 文本來瞭解圖片的意圖。

  <img alt="卡皮巴拉" src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg" >
  

• width 和 height：定義圖片顯示的寬度和高度，可以是像素值或百分比。這些屬性通常與 CSS 結合使用來控制圖片的大小。

  <img width="150" height="300" src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg">
  

  下面的圖片是有定義圖片的寬度和高度
  

• title：圖片的工具提示文本，當用戶懸停在圖片上時會顯示。title 屬性對於提供額外的非必需信息很有用。

  <img title="卡皮巴拉" src="https://i.pinimg.com/originals/48/2b/f5/482bf51ec5f95c2e09f802a5796a610b.jpg">
  

  

今天先介紹到這裡，謝謝觀看！