img标签注意事项

今天看了《Head First HTML与 CSS》，关于img标签。知道了一些之前未注意过的内容，故写这篇文章来记录。

在WEB中，有三种图像的格式最常用，其特性分别为：

• JPEG：1.适用于照片和复杂图像。2.有损格式。3.不支持透明度。4.文件比较小。5.颜色种类多。

• PNG：1.适用于照片和logo等单色线条构成的图像。2.无损格式。3.支持透明度，且无锯齿。4.相同质量的图片，PNG比GIF小。6.有三种大小选择，分别为PNG-24(支持数百万种)，PNG-16(支持数千种)，PNG-8(支持24种)。

• GIF：1.适用于logo等单色线条构成的图像和动图。2.无损格式。3.支持透明度，但有锯齿。4.文件比较大。6.颜色种类少。

在写img标签时，应该注意以下几点：

• img标签时内联元素，也是空元素，图片并不是img的内容，是单独存在的，并且html页面是纯文本的。
• 为了符合工业html标准，必须加上alt属性。
• 浏览器是加载完html页面后，按序地请求图片资源。
• 浏览器可以通过width和height建立页面布局，但推荐提前就裁剪好图片，否则还是会下载完整的大图像。
• 图像宽度要小于800px。
• 图像用作链接时，要放在a标签内。

在做图时，如果选中Transparency（透明度），会出现白色光晕，是因为图片编辑应用会创建一个matte(蒙版)，默认为白色的背景，这里可自由选择背景颜色。