<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屬性保證那些文字確實為那些看不到影象的人提供了說明資訊，並且在上下文中有意義。對於那些裝飾性的圖片可以使用空的值（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>