【阅读】《Head First HTML 与 CSS》第五章——为你的页面增加图像
来源:互联网 发布:sql server安装教程 编辑:程序博客网 时间:2024/05/09 19:13
网页中的图像主要是jpg、gif、png这三种
(问一下:这个表格怎么修改行宽?)
BULLET POINTS
- 使用<img>元素在Web页面中放置图像
- 浏览器对<img>元素的处理与其他HTML元素稍有不同。读取HTML页面之后,浏览器会从Web服务器获取各个图像并显示。
- 如果Web页面上有多个大图像,则可以通过创建图像的缩略图使你的Web页面更可用,下载也更快,缩略图是一些小图像(大图的缩小版本),用户单击这些缩略图时可以看到原来的大图像
- <img>元素是一个内联元素,这说明浏览器不会再图像前后插一个换行
- 要利用src属性指定图像文件的位置。可以在src属性中使用相对路径包含你自己的网站中的图像,或者可以使用URL包含其他网站的图像
- <img>元素的alt属性是对图像的一个有意义的描述。在一些浏览中,如果无法找到图像,就会显示这个描述,另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像
- 图像宽度要小于800像素,这是web页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大,不能很好地放在web页面中所以需要调整们的大小
- 有很多图片编辑应用Photoshop等,可以用来调整图像的大小。还可以使用很多免费的联机工具调整图像的大小
- 对于浏览器来说太大的图像会使web页面很难使用,而且下载和显示都很慢
- JPEG、PNG、GIF是web浏览器广泛支持的3种图像形式
- JPEG格式最适合保存照片和其他复杂的图像
- GIF和PNG适合保存logo和其他包含单色、线条或文本的简单图形
- JPEG图像可以按不同的质量压缩,所以可以很好地权衡图像质量和文件大小,来满足你的需要
- GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个web页面中,图象后面的东西(如页面的背景色 就会透过图像的透明部分显示出来)
- GIF和PNG是无损格式,这说明相比于JPEG文件,这些格式的文件往往更大
- PNG可以提供比GIF更好的透明度控制,而且不像GIF只支持256种颜色,PNG可以支持更多颜色
- PNG有三种不同大小的选择:PNG-24(支持数百万种颜色)、PNG-16(支持数千种颜色),以及PNG-8(支持256种颜色),可以根据需要选择
- 在Photoshop中的“save for web”对话框中的matte(蒙版,我还没有找到)颜色菜单来选择适合的颜色,柔化PNG或GIF图像的边缘
- 图像可以用做指向其他web页面的链接。要由图像创建一个链接,可以使用<img>元素作为<a>元素的内容,将链接放在<a>元素的href属性中。
0 0
- 【阅读】《Head First HTML 与 CSS》第五章——为你的页面增加图像
- 【阅读】《Head First HTML 与 CSS》第八章——增加字体和颜色样式
- 【阅读】《head first HTML与CSS》——前言
- 【阅读】《Head First HTML 与 CSS》第七章——CSS入门
- 第五章——认识媒体:为你的页面增加图像
- 【阅读】《Head First HTML 与 CSS》第十章——div与span
- 【阅读】《Head First HTML 与 CSS》第十一章——布局与定位
- 【阅读】《Head First HTML 与 CSS》第十三章——表格与更多列表
- 【阅读】《Head First HTML 与 CSS》 第二章——深入了解超文本
- 【阅读】《Head First HTML 与 CSS》第三章——构建模块
- 【阅读】《Head First HTML 与 CSS》第四章——连接起来
- 【阅读】《Head First HTML 与 CSS》第六章——标准与其他
- 【阅读】《Head First HTML 与 CSS》第九章——盒模型
- 【阅读】《Head First HTML 与 CSS》第12章——HTML5标记
- 【阅读】《Head First HTML 与 CSS》第14章——实现交互
- 【阅读】《head first jquery》第八章——jquery与ajax(让你的页面悄悄的刷新吧)
- 【阅读】《Head First HTML 与 CSS》第一章——认识HTML
- 【阅读】《Head First Javascript》第五章——循环
- vs2013加载头文件注释
- 常用命令+快捷键
- 史上最简单win下搭建android+cocos2d环境(包括ndk9)
- C#的dictionary使用总结
- 等号重构(operator=)函数中应该注意的问题
- 【阅读】《Head First HTML 与 CSS》第五章——为你的页面增加图像
- Android中不用图片资源也能做出好看的界面
- WordPress提速优化篇:清理HEAD头部多余脚本
- 顶点间最短路径求解
- DP计算最大和HDU1003
- 用了牡蛎王,老公满血复活又坚挺起来了
- Mac使用Macports安装软件
- 用了牡蛎王,老公满血复活又坚挺起来了
- outlook 关闭时最小化到任务栏的完美解决方法