图片网页html css,HTML/CSS:Web常用图片类型
1.基础知识
(1)浏览器是如何处理图像的?
在HTML中,我们通过标签将图片链接到html文件中。当浏览器读取html的标签时,在显现图片之前,会先获取这个图像(从服务器获取、从本地获取),然后再显现。
(2)标签
标签的语法很简单,详见:HTML_图像
主要有两个属性:src与alt。还有width,height。
src与我以前的博文HTML/CSS浅谈标签及其应用中的href属性相似,也是要区分相对路径、绝对路径、url。所以在此处就不再重复src这一属性了。
而alt,在HTML5的规范中,为必要属性。即是所有标签都必须加上的属性。这一属性主要有两个作用:
i.当图片加载失败时,显示alt中的文本信息;
ii.为视力障碍者提供便利。浏览器会以语言的方式表达alt的键值,以帮助视力障碍者更了解图片的内容。
注意:对于width与height,不建议用这两个属性进行图片大小修改,这两个属性的键值应该是图片的实际宽度与高度,用于告知浏览器需要预留的空间大小。推荐用photoshop进行修改,在后面会讲述。
(3)web常用的图片类型:JEPG,PNG,GIF
JEPG:(缩写jpg)最适合保存照片和其他复杂图像。
GIF或PNG:最适合保存logo和其他包含单色,线条或文本的简单图形。GIF与PNG图像格式允许建立一个有透明背景的图像。
JEPG:
i.最适合连续色调图像;
ii.可以表示包含多达1600万种不同颜色的图像;
iii.这是一种”有损”的格式,因为缩小文件大小是会丢掉图像的一些信息。
iiii.不支持透明度;
iiiii.文件比较小,以便Web页面更高效地显示;
iiiiii.不支持动画。
PNG:
i.PNG最适合单色图像和线条构成的图像(如logo,剪贴画和图像中的小文本);
ii.PNG可以表示包含上百万种不同颜色的图像。PNG有三种:PNG-8,PNG-24,PNG-32,取决于你需要表示多少种颜色。
iii.PNG会压缩文件来缩小文件大小,不过不会丢掉信息,所以这是一种”无损”格式;
iiii.允许将颜色设置为“透明”,使图像下面的东西可以显示出来;
iiiii.与相应的JPEG文件相比,PNG文件更大一些,不过取决于使用的颜色数,可能比相应的GIF文件小,也可能更大。
GIF:
i.类似于PNG,GIF最适合单色图像和线条构成的图像;
ii.GIF可以表示最多256种不同颜色的图像;
iii.GIF也是一种”无损”的格式;
iiii.GIF也支持透明度,不过只允许一种颜色设置为“透明”;
iiiii.GIF文件往往比相应的JEPG文件大;
iiiiii.支持动画。
2.Web图片的编辑(photoshop)
操作工具:
图片编辑:(点击File/Export/Save for Web)
呈现的界面:(出现了对图片处理的工具栏)
下面分别是JEPG、PNG,GIF的工具栏界面:
i.JPEG
首先,呈现在网页上的照片宽度要小于800像素;
其次,图片的质量最好选择Medium;
然后,quality指的是图片的质量,Medium默认是30。
ii.PNG与GIF
首先,color指图片最多支持的颜色数;
其次,Transparency指的是是否以透明背景保存;
然后,Matte指的是蒙板,用于避免文本周围出现光晕。可以将蒙板设置成背景的颜色,能够起到柔化文本边缘的作用。
PNG:
GIF:
以上内容皆为本人观点,欢迎大家提出批评和指导,我们一起探讨!
图片网页html css,HTML/CSS:Web常用图片类型相关推荐
- html文本与图片,网页设计与制作2-HTML文本与图片.ppt
网页设计与制作 2 HTML-文本与图片 3.1.1 HTML基础 HTML是一种网页编辑语言 HyperText Mark-up Language 是标示语言 不是程序语言例如C,JAVA 现行版本 ...
- web网页设计——体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码
web网页设计--体育气步枪射击主题(5页面)带图片轮播特效(HTML+CSS) ~学生网页设计作业源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手 ...
- 网页设计必备工具 firefox Web Developer插件 CSS工具组教程
该插件在火狐浏览器中安装.Web Developer 插件强大的功能超乎你的想象,用于CSS网页布局开发调试只是它强大功能的一部分,对于网络程序的开发也提供了非常强大的辅助设计功能,我们不将它完全的展 ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
手机web--自适应网页设计(html/css控制) - 51CTO.COM 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头 ...
- css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
- css 设置表格右边有图片_我写CSS常用的方法
在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边距折叠 ...
- web网页打印设计的CSS样式
大多数Web设计师对打印控制还不是很熟悉,而不是打印机.在现实世界中,很多人依赖从网站上打印网页来参考: 为打印机而不是屏幕设计的样式 1 2 3 4 5 /* 样式将只应用于打印 */ @media ...
- web前端网页美化重器-------css
1,什么是css? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言 ...
- HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)~个人设计web前端大作业...
HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS) ~个人设计web前端大作业 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
最新文章
- 微服务治理实践 | 金丝雀发布
- 通过源码分析MyBatis的缓存
- python常用输入输出の方法
- 诗与远方:无题(七十六)
- resultMap与resultType、parameterMap与 parameterType的区别
- HashMap转JavaBean
- SQL计算两个日期之间的工作天数
- Python中字符串String去除出换行符(\n,\r)和空格的问题
- php web表格导出,javascript将web表格导出成excel
- Nginx+Tomcat代理环境下JS无法完全加载问题
- redmi_flash刷机之刷入第三方rec(recovery)TWRP_(2021.9.20实践)_以老旧机型redmi4x为例..待上传
- xsmax进入dfu模式_没有home键的iPhone XS怎么进入恢复模式?我教你
- Xshell如何设置快捷复制、粘贴热键
- ADS1115使用及其驱动电路
- linux运维 对比 网络_网络工程师和Linux运维工程师存在哪些差异
- Jenkins节点添加采用agent出错解决方案-not reachable
- php 汉字、字母验证码 例子
- 字符串的练习 统计字符串中大写,小写,数字的个数 29
- Linux SD卡/SDIO驱动开发0-基本知识
- SSM分布式项目之淘淘商城-第一天(IDEA)
热门文章
- deepin恢复出厂_Deepin折腾笔记 v6.6 第一章
- Win11安装Mysql提示安装MSVCR120.dll缺失
- Kylin 在小米大数据中的应用
- 皮尔逊相关度系数java算法实现及原理分析
- WMS、MES与ERP的集成案例分享(连载二:ERP与WMS、MES集成)
- 拍摄360全景照片多少钱?全景图片用什么软件看?
- win10壁纸不能幻灯片放映_win10怎么设置幻灯片播放式背景桌面?windows10设置幻灯片播放式背景桌面图文教程...
- 蓝牙模块HC05主从配置与连接
- QT无边框窗体改变大小 很顺畅
- LoadRunner教程09:LR自动关联