在網(wǎng)頁中添加圖片的核心方法是使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >標(biāo)籤並配合必要的屬性。首先，使用自閉合的<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >標(biāo)籤，並通過src屬性指定圖片路徑，alt屬性提供替代文字；其次，可通過<a>標(biāo)籤包裹圖片實現(xiàn)點擊跳轉(zhuǎn)；再次，使用HTML5新增的<figure>與<figcaption>標(biāo)籤結(jié)構(gòu)化展示圖片及標(biāo)題；此外，可設(shè)置width、height或用CSS控製圖片尺寸，並通過loading="lazy"實現(xiàn)延遲加載以優(yōu)化性能。

在網(wǎng)頁中添加圖片是HTML 的基礎(chǔ)操作之一，HTML5 提供了更簡潔和語義化的標(biāo)籤與屬性來實現(xiàn)這一點。最核心的方式就是使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560420539.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >標(biāo)籤，並配合src和alt屬性。

基本寫法：使用<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >標(biāo)籤

要在網(wǎng)頁中插入一張圖片，最簡單直接的方法就是使用HTML 的<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560396668.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >標(biāo)籤。這個標(biāo)籤是一個自閉合標(biāo)籤，也就是說不需要額外的結(jié)束標(biāo)籤。

示例：

 <img src="/static/imghw/default1.png"  data-src="example.jpg"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？">

• src是必須的，它告訴瀏覽器圖片文件的位置。
• alt也是推薦必寫的，當(dāng)圖片無法加載時會顯示這段替代文字，同時對無障礙訪問也很重要。

路徑可以是相對路徑（如images/photo.jpg ），也可以是絕對路徑或網(wǎng)絡(luò)地址（如https://example.com/photo.jpg ）。

添加圖片鏈接：用<a>包裹<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560668748.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >

如果你希望圖片能被點擊並跳轉(zhuǎn)到另一個頁面或資源，可以把<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175355560668748.jpeg" class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" >放在<a>標(biāo)籤內(nèi)。

示例：

 <a href="https://example.com">
  <img src="/static/imghw/default1.png"  data-src="logo.png"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？">
</a>

這樣用戶點擊圖片就能跳轉(zhuǎn)到指定鏈接。這種做法常用於網(wǎng)站的logo 或廣告圖展示。

使用<figure>和<figcaption>添加標(biāo)題（HTML5 新增）

HTML5 引入了<figure>和<figcaption>標(biāo)籤，用來更結(jié)構(gòu)化地展示圖片及其說明文字，特別適合圖文混排的內(nèi)容。

示例：

 <figure>
  <img src="/static/imghw/default1.png"  data-src="nature.jpg"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？">
  <figcaption>美麗的山間風(fēng)光</figcaption>
</figure>

• <figure>表示獨立的內(nèi)容區(qū)塊，通常與主內(nèi)容相關(guān)但可單獨存在。
• <figcaption>是其子元素，用來為圖片添加標(biāo)題或說明。

這種方式不僅讓代碼更清晰，也提升了語義性和SEO 效果。

圖片尺寸控制和其他屬性

你可以通過設(shè)置width和height屬性來控製圖片的大小：

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？"    style="max-width:90%"  style="max-width:90%">

不過建議使用CSS 來控制尺寸，這樣樣式和結(jié)構(gòu)分離，更容易維護(hù)：

 <img src="/static/imghw/default1.png"  data-src="photo.jpg"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？"   style="max-width:90%">

此外還可以使用loading="lazy"來延遲加載圖片，提高頁面加載速度：

 <img src="/static/imghw/default1.png"  data-src="big-image.jpg"  class="lazy" alt="如何使用HTML5將圖像添加到網(wǎng)頁上？" loading="lazy">

基本上就這些。雖然加圖片看起來很簡單，但在實際開發(fā)中，路徑是否正確、替代文字是否合適、響應(yīng)式處理是否到位，都會影響用戶體驗和可訪問性。

以上是如何使用HTML5將圖像添加到網(wǎng)頁上？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！