<圖片>
HTML <img> 標籤
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <img src="/upload/course/000/000/010/580977768651f670.gif" alt="Smiley face" width="42" height="42"> </body> </html>
##執行實例»#點擊"運行實例" 按鈕查看線上實例#
瀏覽器支援
所有主流瀏覽器都支援 <img> 標籤。
標籤定義並使用說明
<img> 標籤定義 HTML 頁面中的圖片。
<img> 標籤有兩個必要的屬性：src 和 alt。
註解：從技術上講，圖像並不會插入 HTML 頁面中，而是連結到 HTML 頁面上。 <img> 標籤的作用是為被引用的圖像建立佔位符。
提示：透過在 <a> 標籤中嵌套 <img> 標籤，將圖片新增至另一個文件的連結。
HTML 4.01 與 HTML5之間的差異
HTML5 中不支援下列屬性：align、border、hspace、longdesc、vspace。
在 HTML 4.01 中，以下屬性：align、border、hspace、vspace 已被廢棄。
HTML 與 XHTML 之間的差異
在 HTML 中，<img> 標籤沒有結束標籤。
在 XHTML 中，<img> 標籤必須正確地關閉。
屬性
New ：HTML5 中的新屬性。
| 屬性 | 值 | 描述 |
|---|---|---|
| #align | top # bottom # middle # left right | HTML5 不支援。 HTML 4.01 已廢棄。 規定如何依照周圍的文字來排列影像。 |
| alt | text | #規定圖像的替代文字。 |
| border | pixels | #HTML5 不支援。 HTML 4.01 已廢棄。 規定影像周圍的邊框。 |
| crossoriginNew | anonymous use-credentials | 設定影像的跨域屬性 |
| height | pixels | 規定圖片的高度。 |
| hspace | pixels | #HTML5 不支援。 HTML 4.01 已廢棄。 規定影像左側和右側的空白。 |
| ismap | ismap | 將映像規定為伺服器端影像映射。 |
| longdesc | URL | #HTML5 不支援。 HTML 4.01 已廢棄。 指向包含長的圖片描述文件的 URL。 |
| src | URL | #規定顯示圖片的 URL。 |
| usemap | #mapname | #將映像定義為客戶器端映像映射。 |
| vspace | pixels | #HTML5 不支援。 HTML 4.01 已廢棄。 規定影像頂部和底部的空白。 |
| width | pixels | 規定影像的寬度。 |
全域屬性
<img> 標籤支援 HTML 的全域屬性。
事件屬性
<img> 標籤支援 HTML 的事件屬性。
試試看- 實例
從不同的位置插入圖片
本例示範如何將其他資料夾或伺服器的圖片顯示到網頁中。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>插入来自一个文件夹的图片:</p> <img src="/upload/course/000/000/010/5809788beaca7942.gif" alt="Stickman" width="24" height="39"> <p>插入来自一个网站的图片::</p> <img src="/upload/course/000/000/010/58043146a1da1979.jpg" alt="Lamp" width="15" height="15"> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
製作圖像連結
本範例示範如何將圖像作為一個連結使用。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 一个图片链接: <a href="http://www.w3cschool.cc"> <img src="/upload/course/000/000/010/5809791e1eef2805.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0"> </a> </p> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
建立圖像地圖
本範例示範如何建立具有可供點擊區域的圖像地圖。其中的每個區域都是超級連結。
實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>点击太阳或其他行星，注意变化：</p> <img src="/upload/course/000/000/010/580979883b949162.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <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> </body> </html>
運行實例»
點擊"運行實例" 按鈕查看線上實例
相關文章
HTML 教學：HTML 圖片
HTML DOM 參考手冊： Image 物件
