HTML 圖片

影象改善了外觀並直觀展示了網頁的許多概念。

在 HTML 文件中插入影象

網路不僅僅是文字，它的多媒體和 HTML 的多媒體功能允許你在網頁中包含影象，音訊剪輯，視訊剪輯和其他多媒體元素。

<img> 標籤是用來在 HTML 文件中插入圖片。它是一個空元素，僅包含屬性。 <img> 標籤的語法如下：

<img src="url" alt="some_text">

以下示例在網頁上插入三個影象：

<img src="kites.jpg" alt="Flying Kites">
<img src="sky.jpg" alt="Cloudy Sky">
<img src="balloons.jpg" alt="Hot Air Balloons">

注： 同 <br> 一樣影象 <img> 元素也是空元素，並沒有閉合標籤。在 XHTML 中，它以 /> 結尾。

影象的 Src 屬性

每個影象都有一個 src 屬性（src 代表原始碼）。src 屬性告訴瀏覽器在哪裡可以找到要顯示的影象。作為 src 屬性值提供的影象的 URL 指向儲存影象的位置。

例如，位於 www.tastones.com 上 images 目錄中的名為 sky.jpg 的影象具有以下 URL： http://www.tastones.com/images/sky.jpg

<img url =“http://www.tastones.com/images/sky.jpg” alt= `Sky` \>

影象的 Alt 屬性

如果無法顯示影象，則 alt 屬性是影象的替代描述。alt 屬性的值是作者定義的文字。

<img url =“http://www.tastones.com/images/kites.jpg” alt=“Sky kites”\>

**注意：**如果由於某種原因的使用者由於連線速度慢， src 屬性錯誤或使用者使用螢幕閱讀器而無法檢視影象，則 alt 屬性會為影象提供備用資訊。

設定影象的寬度和高度

width 和 height 屬性用於指定影象的高度和寬度。

預設情況下，屬性值以畫素為單位指定。

<img src="kites.jpg" alt="Flying Kites" width="300" height="300">
<img src="sky.jpg" alt="Cloudy Sky" width="250" height="150">
<img src="balloons.jpg" alt="Hot Air Balloons" width="200" height="200">

注意： 指定影象的兩個 width 和 height 屬性是一個好習慣。如果沒有這些屬性，影象會載入其原始大小，這可能會導致網站佈局失真或閃爍。

HTML 圖片標籤