Head First HTML & CSS chapter 4 ,5 :连接起来,为你的页面加图像

1、图像三种格式 JPEG, PNG, GIF 对比及各自优势:


JPEG,  其简写格式为 jpg, 最适合保存复制的图片信息,可以表示多达1600万种不同的颜色图像,这是一种有损格式,因为缩小文件大小会丢掉信息,不支持透明,不支持动画,文件较小,便于web页面高效显示。


PNG, 最合适单色图像和线条构成的图像,例如 logo 、剪贴画。 无损格式,支持透明,支持百万中颜色,png有三种:png-8 png-24  png-32 , 不支持动画


GIF  最合适单色图像和线条构成的图像,例如 logo 、剪贴画,无损格式,支持透明,最多支持256种颜色支持动画。


2、a 标签:

Head First HTML & CSS chapter 4 ,5 :连接起来,为你的页面加图像_第1张图片


a 标签中属性值href ,若是访问资源在同一个站点则使用相对地址,若访问资源不在一个站点则使用绝对地址。上述图片中使用的相对地址,需要注意的地方,在index.html 后

有#Coffee,这里是添加了访问该网页时定位的location,一般是该元素的id值。


a 标签中属性值title, 是鼠标悬停在该链接时的提示信息,该信息一般为跳转网页的title值


a 标签中属性值target, 其值是_blank,表示跳转的页面是以新创建的窗口打开,原来的页面不会被覆盖


3、img 标签


Head First HTML & CSS chapter 4 ,5 :连接起来,为你的页面加图像_第2张图片


img 是inline 元素,可以作为a标签的内容。


img属性src 是图片地址,若在同一网站上则用相对地址,若不同则使用绝对地址。


img属性alt 是若图片信息加载失败的提示信息。


4、 代码:

https://github.com/tamir2017/starbuzz/tree/master/starbuzz/chapter4

https://github.com/tamir2017/starbuzz/tree/master/starbuzz/chapter5


你可能感兴趣的:(html,css)