今天看了《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(蒙版),默认为白色的背景,这里可自由选择背景颜色。