2018/1/20HTML打卡

今天进行《Head First Html 与 CSS》一书第五章的学习。

这章主要是<img>元素的使用介绍。

<img src="images/drinks.gif">

<img>元素是一个内联元素。它不会在前面或后面插入换行。

<img>元素还是一个void元素。

src：是img元素的一个属性，指定了在web页面上显示的图像文件的位置。使用相对路径包含自己网站的图像，或者使用URL包含其他网站的图像。

知识点总结：

1.如果Web页面上有多个大图像，则可以通过创建图像的缩略图使Web页面更可用，下载也更快，缩略图是一些小图像（大图像的缩略版本），用户单击这些缩略图时可以看到原来的大图像。

2.<img>元素的alt属性是对图像的一个有意义的描述。在一些浏览器中，如果无法找到图像，就会显示这个描述，另外屏幕阅读器会使用这个属性为有视力障碍的人阅读描述图像。

3.图像宽度要小于800像素，这是Web页面中关于照片大小的一个好经验。过大的图片需要用图像编辑器调整。对于浏览器来说太大的图像会使Web页面很难使用，而且下载和显示都很慢。

4.JPEG、PNG和GIF是Web浏览器广泛支持的3种图像格式。

  JPEG格式最适合保存照片和其他复杂图像。可以按不同质量压缩，很好地权衡图像质量和文件大小、来满足设计者的需要。

  GIF或PNG格式最适合保存logo和其他包含单色、线条或文本的简单图形，两者允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中，图像后面的东西（如页面背景色）就会透过图像的透明部分显示出来。

GIF和PNG是无损格式，JPEG是有损格式，这说明相比于JPEG文件，这些格式的文件往往更大。

PNG可以提供更好的透明度控制，而且不像GIF只支持256种颜色，PNG可以支持更多的颜色。PNG有3种不同的大小选择 ：PNG-24(支持数百万种颜色)、PNG-16（支持数千种颜色）、以及PNG-8（支持256种颜色）、可以根据需要来选择。

5.图像可以用作指向其他Web页面的链接。由图像创建一个链接，可以使用<img>元素作为<a>元素中内容，将链接放在<a>元素

的href属性中。

练习：

页面截图

代码截图:

 参考用书《Head First Html 与 CSS》