插入圖片

1.1 元素 <img>

HTML中的多媒體在增強網頁的視覺效果方面起著重要作用。插入圖片是HTML多媒體的一個關鍵方面。 最常用的方式是使用<img>元素。讓我們更詳細地看看它：

元素 <img> 是用來在網頁上插入圖片的。這是一個空元素：它沒有閉合標籤，只包含屬性。

語法

    <img src="圖片_URL" alt="描述" width="寬度" height="高度">
  

    
      <img src="images/photo.jpg" alt="圖片描述" width="500" height="300">
    
  

讓我們更詳細地看看 <img> 元素的屬性

1.2 屬性 src

完整名稱 屬性 src 是 source (來源)。

屬性 src 指定了要在頁面上顯示的圖片文件的路徑。這可以是絕對路徑還是相對路徑。

例子：

絕對 URL：

    
      <img src="https://example.com/images/photo.jpg">
    
  

相對路徑：

    
      <img src="images/photo.jpg">
    
  

絕對 URL 包含圖片的完整地址，包括協議 (http 或 https)、域名和路徑。相對路徑則是相對於當前文檔指定文件的位置， 在處理本地文件時很方便。

1.3 屬性 alt

全名：alternative text (替代文字)

屬性 alt 提供了圖片的文字描述。當圖片無法顯示時，會顯示這段文字， 並且增強了可訪問性，因為屏幕閱讀工具可以使用它來向視障用戶描述圖片。

例子：

    
      <img src="images/sunset.jpg" alt="美麗的日落照片">
    
  

良好的替代文字能夠讓用戶在圖片不可用時理解其內容，並對提升頁面的SEO（搜索引擎優化）有幫助。

1.4. 屬性 width

屬性 width 設置圖片的寬度，以像素為單位。如果未指定 height 屬性，圖片在改變寬度時保持其比例。

例子：

    
      <img src="images/photo.jpg" width="500">
    
  

使用固定寬度可以有助於控制圖片大小，但在設計時要考慮到響應式設計。

1.5 屬性 height

屬性 height 設置圖片的高度，以像素為單位。如果未指定 width 屬性，圖片在改變高度時保持其比例。

例子：

    
      <img src="images/photo.jpg" height="300">
    
  

與屬性 width 類似，使用固定高度可能有用，但需要考慮自適應性。

屬性組合使用例子

    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
  

    
      <img src="images/sunset.jpg" alt="美麗的日落照片" width="500" height="300">
    
  

在這個例子中，圖片將從文件 images/sunset.jpg 加載，顯示為寬500像素和高300像素， 如果圖片無法加載，將顯示文字“美麗的日落照片”。