[HeadFrist-HTMLCSS學習筆記]第五章認識媒體：給網頁添加圖像

幹貨

• JPEG、PNG、GIF有何不同
  • JPEG適合連續色調圖像，如照片；不支持透明度；不支持動畫；有損格式
  • PNG適合單色圖像和線條構成的圖像，如logo，剪貼畫等；無損格式；可選擇文件大小；可透明和需要多種顏色
  • GIF是最早的Web圖像格式，適合單色圖像和線條構成的圖像;支持動畫
• <img>元素
  • <img src="XX.gif">,src屬性制定了圖像的位置
  • 內聯元素
• 指向其他網站上的圖像,通常使用該圖像的URL（相對路徑）
  • <img src="http://www.XX.jpg">
• 屬性
  • 使用<img>元素的alt屬性提供圖片信息
    • <img src="XXX.png" alt="The typical new pencil can sraw a line 35 miles long.">
    • 如果瀏覽器無法讀到圖像，則顯示圖片信息
  • 使用width和height屬性調整圖像大小
    • <img src="XX.gif" width="48" height="100">
    • 但最好提前對圖片的像素進行修改

• 使用縮略圖，改變像素

• 每個縮略圖對應一個鏈接，點擊縮略圖，顯示包含大圖像的新頁面
  • <a>
    +圖片+</a>

[HeadFrist-HTMLCSS學習筆記]第五章認識媒體：給網頁添加圖像