[Back To Basic] HTML5 - Image

Image

• <Image>是空元素(empty element)
• 沒有結尾標籤
• 圖片來源用屬性(attribute) src 指定
• 屬性(attribute) src可指定相對位置、絕對位置、其他Server提供的圖片，也支援.gif
• 屬性(attribute) alt 提供替代文字，使用情境以下兩種
• 圖片無法顯示時，顯示alt
• 視障使用者瀏覽頁面時
• 屬性(attribute) alt 是必要的
• 強烈建議，一定要指定圖片的寬度和高度，避免載入時頁面閃爍，造成使用者體驗不佳
• 指定方式建議使用css控制，因為用屬性(attribute) width 和 height，都會被css覆蓋

綜合以上原則，寫法如下: 

<img src="imageName.gif" alt="This is an image" style="width:48px;height:48px;">

*.寬度和高度，可以指定img id或class後用外部的css檔案控制，對整個網頁可維護性會較好

Image Maps

image map是圖片延伸的功能，若想要在圖片上框選特定的區塊做一些互動可以使用此功能

Picture

<picture></picture> 搭配<source></source>，直接提供適應各種螢幕解析度圖片的解決方案

source code: https://github.com/ShawnTseng/HTML5-practice/commit/7df18342e958e8b38313dfd278e824d36b9ab897