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

[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>