JPG圖片
GIF圖片
PNG圖片
例
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html> 試一試» 始終指定的圖像的寬度和高度。 如果沒有指定寬度和高度，頁面閃爍的圖像加載時間。
HTML語法圖片
在HTML中，圖像與定義<img>標記。
所述<img> tag是空的，它僅包含屬性，並且不具有關閉標籤。
在src屬性指定的URL (web address)的圖像：
<img src=" url " alt=" some_text ">該alt屬性
的alt屬性指定的圖像的替代文本，如果不能被顯示的圖像。
的alt屬性提供了一種用於圖像替代信息，如果由於某種原因，一個用戶不能觀看它（因為較慢的連接，在一個錯誤src屬性，或者如果用戶使用屏幕閱讀器）。
如果瀏覽器無法找到一個圖像，它會顯示alt文本：
該alt屬性是必需的。 一個網頁不能沒有它正確驗證。
HTML屏幕閱讀軟件
屏幕閱讀器是一種軟件程序，可以讀出什麼是顯示在屏幕上。
屏幕閱讀器是人誰是盲人，視障或學習障礙有用。
屏幕閱讀器可以讀取alt屬性。
圖像尺寸 - 寬度和高度
您可以使用style屬性來指定圖像的寬度和高度。
的值以像素為單位指定(use px after the value) ：
另外，您也可以使用width和height屬性。 在這裡，值在默認情況下，像素規定：
寬度和高度或風格？
無論是寬度，高度和樣式屬性是最新的HTML5標準有效。
我們建議您使用的style屬性。 它可以防止樣式表從變化的圖像的原始尺寸：
例
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html> 試一試» 在另一個文件夾圖片
如果沒有指定，瀏覽器希望找到圖像中的同一文件夾中的網頁。
然而，常見的是存儲在一個子文件夾的圖像。 然後，您必須包括文件夾名稱src屬性：
另一個服務器上的圖像
有些網站的圖像存儲圖像的服務器上。
其實，你可以從世界上任何網址訪問圖片：
動畫圖片
該GIF標準允許動畫圖像：
請注意，插入動畫圖像的語法沒有來自非動畫圖像不同。
使用圖像作為鏈接
使用圖像作為連結，只要巢<img>的內部標籤<a>標籤：
例
<a href="default.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a> 試一試» 添加"border:0;" 防止IE9 (and earlier)從圖像周圍顯示邊框。
圖片浮動
使用CSS的float屬性，讓圖像浮動。
圖像可以漂浮到右邊或文本的左邊：
例
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.
</p> 試一試» 影像地圖
使用<map>標籤來定義圖像映射。 圖像映射是可點擊區域的圖像。
該name的屬性<map>標籤與相關聯的<img>的屬性USEMAP並創建圖像和地圖之間的關係。
所述<map>標籤包含了一些<area>標記，它定義在圖像映射的可點擊區域：
例
<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map> 試一試» 章節總結
- 使用HTML <img>元素來定義的圖像
- 使用HTML src屬性來定義圖像的URL
- 使用HTML alt屬性來定義的替代文本的圖像，如果它不能被顯示
- 使用HTML width和height屬性來定義所述圖像的大小
- 使用的CSS width和height屬性來定義圖像的大小(alternatively)
- 使用CSS的float屬性讓圖像浮動
- 使用HTML <map>元素來定義圖像映射
- 使用HTML <area>元件在圖像地圖來定義可點擊區域
- 使用HTML <img>的元素usemap屬性指向一個圖像映射
加載圖像需要時間。 大圖片就可以在網頁慢下來。 請謹慎使用圖像。
測試自己與練習！
HTML圖像標籤
| 標籤 | 描述 |
|---|---|
| <img> | 定義圖像 |
| <map> | 定義圖像映射 |
| <area> | 定義圖像地圖內的可點擊區域 |