詳解HTML/XHTML中img圖片標籤的基本用法_HTML/Xhtml_網頁製作

 圖像標籤用於在網頁中顯示一副圖像。
HTML/XHTML 圖片 標籤
在 XHTML 中，透過 標籤來定義顯示一副圖片。 是一個非成對標籤。

基本文法：

XML/HTML Code複製內容到剪貼簿

1. img src=src=src= 🎜> 

/>

  

標籤 透過 src 屬性來決定影像來源，url 是相對或絕對的影像位址。


影像標籤屬性：

src：圖片來源，必需。指定顯示的圖像來源位址，可以是相對位址或絕對位址。 alt：可替換文本，可省略。用於圖像無法顯示或瀏覽器封鎖了圖片時，顯示出來的替換文字。
title：影像提示文字，可省略。當滑鼠停留到圖片上時，會提示相關文字。 width：圖片顯示的寬度，可省略。單位為像素。
height：圖片顯示的高度，可省略。單位為像素。

文字替換屬性（alt）
圖片標籤的文字替換屬性 alt 雖然不是必要的屬性，但卻是很重要的屬性。當因為某些原因，瀏覽器讀取圖像失敗的時候，將顯示該替代文字以取代原始圖像以提供丟失的相關圖像資訊。此屬性也有助於那些使用純文字瀏覽器的使用者理解網頁內容。
因此，為每個圖像添加一個有意義的 alt 文字替換屬性是個很好的習慣。

標籤使用練習

在 e:html 資料夾下的建立 images 資料夾用於存放映像檔。將下面這張圖片，滑鼠右鍵選擇 “圖片另存為”，將圖片儲存到 images 資料夾下備用。

編輯我們的 XHTML 小範例 1.html ，在 id="main-content" 的 div 標籤內做以下更改：

XML/HTML Code
1. 複製內容到剪貼簿 h3>文章題目文章題目
2. 文章題目文章題目文章題目文章題目文章題目
3. 文章題目文章題目>   p>文章具體內容 p>   p>

src

=
"images/flower_1.jpg"
 

alt

= "花"

 />p>p>p>p > 這樣我們就在網頁中顯示了一個圖片。 指定影像顯示尺寸可以給予 標籤增加 width 或 height 屬性以手動指定影像顯示的尺寸： XML/HTML Code複製內容到剪貼簿

1. <img src="images/flower_1.jpg " alt="flower" width= "350" 身長="270" />

ヒント
通常の状況では、画像サイズ属性は無視され、デフォルトで元の画像サイズが表示されるか、ブラウザによってサイズ表示が調整されます。不適切な画像表示サイズを指定すると、画像が乱れて表示される場合があります。
画像の読み込みにはある程度の時間がかかるため、良好なユーザー アクセス エクスペリエンスを実現するには、画質を確保しながら画像のサイズを削減するように努める必要があります。

詳細な読み方
ピクセル: たとえば、よく言われる画面の解像度は 1024*768 であると考えられます。画面には横に 1024 (ピクセル) のドット、縦に 768 (ピクセル) のドットがあります。単位として使用する場合、通常はデフォルトで pix と表記されます。