HTML基礎複習（二）圖像

在HTML中，圖像由<img>標籤訂義，是一個空元素

一、src屬性

　　源屬性，便是URL地址。

二、alt屬性

　　替換文本屬性，當圖片加載失敗時，瀏覽器將顯示這個替代性的文本而不是圖像。

三、height/width屬性

　　圖像的高度/寬度，默認單位是像素

　　<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

四、邊框border屬性

　　<img border="0" src="smiley.gif" alt="學習" width="32" height="32">

五、CSS「float」屬性

　　<p><img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一個帶圖片的段落，圖片浮動在這個文本的左邊。</p>

六、定義超連接圖像

　　<a href="http://www.runoob.com/html/html-tutorial.html"><img src="smiley.gif" alt="學習" width="32" height="32"></a>

七、定義地圖圖像（客戶端圖像映射）----有可點擊區域的圖像

　　(1)<img>的屬性「usemap」:能夠引用<map>中的id/name

　　(2)標籤<map>：添加屬性id/name

　　(3)標籤<area>：永遠都嵌套在map元素內

八、注意：

　　在 HTML5 中, 若是 id 屬性在<map> 標籤中指定, 則必須一樣指定 name 屬性。

　　在 XHTML 中，name 屬性已經廢棄，使用 id 屬性替換它。

九、srcset屬性：

　　<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w">

 

　sizes屬性：（加上sizes屬性，會發現，隨着瀏覽器寬度變大，圖片一直保持其初始尺寸）

　　<img src="small.jpg" srcset="small.jpg 300w,middle.gif 500w,big.gif 800w" sizes="(max-width:300px) 300px, (max-width:500px) 500px,800px">

 

十、常見的圖像格式----GIF（圖像交換格式）

　　後綴： GIF 圖像文件都用 .gif （或者 .GIF）做爲文件名後綴，實際上卻有兩個 GIF 版本：原始的 GIF87 和 GIF89a，後者支持不少新特性，包括透明背景、交叉存儲和動畫等

　　特性：可移植性強、無損壓縮、易實現動畫

　　GIF 圖像有三種特殊的技巧：隔行掃描（interlacing）、透明性（transparency）和動畫（animation）。

十一、常見的圖像格式----JPEG

　　後綴：一般由 .jpg （或者 .JPG）文件名來結尾

 

學習資料：《「http://www.w3school.com.cn/media/media_gif.asp」》；

《「http://www.runoob.com/html/html-images.html」》