<img>標簽
如何插入圖像：
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">
標簽定義及使用說明
<img> 標簽定義 HTML 頁面中的圖像。
<img> 標簽有兩個必需的屬性：src 和 alt。
註釋：從技術上講，圖像並不會插入 HTML 頁面中，而是鏈接到 HTML 頁面上。<img> 標簽的作用是為被引用的圖像創建占位符。
提示：通過在 <a> 標簽中嵌套 <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 | 規定圖像的寬度。 |
從不同的位置插入圖片
<body> <p>插入來自一個文件夾的圖片:</p> <img src="stickman-1.gif" alt="Stickman" width="24" height="39"> <p>插入來自一個網站的圖片::</p> <img src="lamp-4.gif" alt="Lamp" width="15" height="15"> </body>
制作圖像鏈接
<body> <p> 一個圖片鏈接: <a href="http://www.w3cschool.cc"> <img src="smiley-2.gif" alt="Go to W3CSchool.cc!" width="42" height="42" border="0"> </a> </p> </body>
創建圖像地圖
<body> ? <p>點擊太陽或其他行星，註意變化：</p> ? <img src="planets.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>
總結;
alt 與 title 屬性區別：
圖片中的 alt 屬性是在圖片不能正常顯示時出現的文本提示。
圖片中的 title 屬性是在鼠標在移動到元素上的文本提示。
1、alt 屬性的特點
A、alt屬性（註意是“屬性”而不是“標簽”）包括替換說明，對於圖像和圖像熱點是必須的。它只能用在img、area和input元素中（包括applet元素）。對於input元素，alt屬性意在用來替換提交按鈕的圖片。比如：
<input type="image" src="image.gif" alt="Submit" />
B、alt屬性保證那些文字確實為那些看不到圖像的人提供了說明信息，並且在上下文中有意義。對於那些裝飾性的圖片可以使用空的值（，引號中間沒有空格），而不是使用不相關的替換文字比如 “blue bullet”。
C、Alt屬性值得長度必須少於100個英文字符或者用戶必須保證替換文字盡可能的短。
2、title 屬性的特點
A、title屬性為設置該屬性的元素提供建議性的信息，即提供非本質的額外信息，大部分的可視化瀏覽器在鼠標懸浮在特定元素上時顯示title文字為提示信息（tool tip），然而這又由制造商來決定如何渲染title文字。一些瀏覽器會將title文字顯示在狀態欄裏。比如早期版本的Safari瀏覽器。
B、title屬性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。但是並不是必須的。
C、title屬性有一個很好的用途，即為鏈接添加描述性文字，特別是當連接本身並不是十分清楚的表達了鏈接的目的。這樣就使得訪問者知道那些鏈接將會帶他們到什麽地方，他們就不會加載一個可能完全不感興趣的頁面。另外一個潛在的應用就是為圖像提供額外的說明信息，比如日期或者其他非本質的信息。
D、title屬性值可以比alt屬性值設置的更長。不過要註意的是，有些瀏覽器會截斷過長的文字（比如工具提示或其他）。比如Mozilla核心的瀏覽器只能顯示最先的60個字符。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試alt屬性和title屬性</title> </head> <body> <p>一個圖像: <img src="smiley.gif" alt="Smiley face" width="32" height="32"><br/> 一個圖像: <img src="smiley.gif" title="Smiley face" width="32" height="32"></p> </body> </html>
<img>標簽