<HeadFirst_HTML与CSS> O’REILLY_Chap.5_认识媒体

本博客的FollowMeReading系列初衷是在线的读书笔记. 为方便后期查阅, 故写成博客形式, 使用关键字查询便可以快读的找到相关的内容.

FollowMeReading系列所选的书籍一般选自O’REILLY或Apress出版社, 尽量保证笔记内容的权威性.

FollowMeReading系列的博客标题格式为: <书名> 出版社章节数章节名, 方便大家在纸质版书籍中查找.

FollowMeReading系列博文中的内容大部分是原文, 非原文部分前面将有’博主’字样提醒.

感谢<HeadFirst_HTML与CSS>作者 Eric Freeman & Elisabeth Robson
感谢<HeadFirst_HTML与CSS>翻译 徐阳 丁小峰

本博客由@scott编写. 若转载此文章, 请注明出处和作者

正文

原文

BULLTE POINTS(要点):

• 使用 <img> 元素在Web页面中放置图像.

• 浏览器对 <img> 元素的处理与其他HTML元素稍有不同. 读取HTML页面之后, 浏览器会从Web服务器获取各个图像并显示.

• 如果Web页面上有多个大图像, 则可以创建图像的缩略图使你的Web页面更可用, 下载也更快, 缩略图是一些小图像(大图像的缩小版本), 用户点击这些缩略图的时可以看到原来的大图像.

• <img> 元素是一个内联元素, 这说明浏览器不会在图像前后插入一个换行.

• 要利用 <src> 属性指定图像文件的位置. 可以在 <src> 属性中使用相对路径包含你自己的网站中的图像, 或者可以使用URL包含其他网站的图像.

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

• 图像宽度要小于800像素, 这是Web页面中关于照片大小的一个好经验. 数码相机拍摄的大多数照片都太大, 不能很好地放在Web页面中, 所以需要调整它们的大小.

• 有很多照片编辑应用, Photoshop Elementsis就是其中之一, 可以用来调整图像的大小. 还可以使用很多免费的联机工具调整图像大小.

• 对于浏览器来说太大的图像会使Web页面很难使用, 而且下载和显示都很慢.

• JPEG, PNG和GIF是Web浏览器广泛支持的3中图像格式.

• JPEG格式最适合保存照片和其他复杂图像.

• GIF或PNG格式最适合保存logo和其他包含单色, 线条和文本的简单图形.

• JPEG图像可以按不同质量压缩, 所以可以很好的权衡图像质量和文件大小, 来满足你的需求.

• GIF和PNG图像格式允许建立一个有透明背景的图像. 如果把一个有透明背景的图像放在一个Web页面中, 图像后面的东西(如页面的背景色)就会透过图像的透明部分显示出来.

• GIF和PNG是无损格式, 这说明相比于JPEG文件, 这些格式的文件往往更大.

• PNG可以提供比GIF更好的透明度控制, 而且不像GIF只支持256种颜色, PNG可以支持更多颜色.

• PNG有3种不同的大小选择: PNG-24(支持数百万种颜色), PNG-16(支持数千种颜色), 以及PNG-8(支持256种颜色), 可以根据需要来选择.

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