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