（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程：
1.服务器获取文件，显示出文本结构，以及预留默认的大小给<img>（如果该<img>有width-1值和height-1值，则根据这个值提前设好页面——也就是留下一个符合该值的图片位置）；
2.获取一个图像的所有信息，包括内容、大小、及其分辨率：width-2值和height-2值(如果获取图像信息失败，则每个浏览器有每个浏览器的不同处理办法，比如加载一个破损的图片示意——但无论是什么浏览器，此时如果<img>中有alt值，则加载该值替代图片,然后对这个图像的加载操作终止)。
3.把图片按width-2、height-2的值加载到页面相应位置（如果提前设了值，就按width-1、height-1加载该图片到相应位置）；
4.如果页面布局符合图片分辨率，直接加载。否则改变页面布局使其符合图片分辨率，再加载。
5.重复2、3、4，直到全部加载完毕。
一般浏览器会同时请求多个图像，网速快的我们是看不到那种“一个图一个图地出现”的情况的（网速慢的时候，我们会看到又一个加载中的黑色框框，那就是为图片预留的位置，由width和height决定其大小）；有时候我们会看到一些页面是没这种框框的，这回导致用户看文字的时候突然加载上一个图片后文字被挤下去了，体验很不好，这种就是没写width和height的了。
不管你有没有在代码中说明图像有多大（用width、height），浏览器在获取图像的时候就需要获取图像的大小了，之后再根据你设的width、height来调整图片大小放入页面，此时页面布局如果不符合就要重设，符合就直接放（这也是为什么建议图片放缩略图，然后再设置一个指向该图片的高清图片链接的原因——这样可以既让用户更快看到图像（虽然质量差点），又可以给用户选择看高清图的方式（想看就点改图片的高清链接，通常是链接就是缩略图本身））。
2.JPEG、PNG、GIF
JPEG：
1.适合连续色调图像——因为可以表达多达1600万种不同颜色的图像。
2.不适合有透明需求的图像——因为不支持透明度。
3.不适合需要高画质的情况——因为这是一种“有损”格式，这种有损压缩会使图像数据质量下降，并且在编辑和重新保存JPG格式图像时，这种下降损失会累积。
4.适合Web页面的普通图片——因为文件小，可以高效显示。
5.不适合动画——因为不支持动画。
PNG
1.适合单色图像、logo、图像里的小文本、线条构成的图像——原因不知道，下面GIF的第一点也有这个问题，其中一点可能是因为可以表达的颜色只有上百万种。按需求的颜色种类多与少又可分为：PNG-8、PNG-24和PNG-32。
2.适合有透明需求的图像——允许图像设置为透明（以此使图像下面的东西可以显示出来），且可以同时有多种透明颜色。
3.适合高清的情况——其会压缩文件来缩小大小，但却是一种无损的压缩。
4.适合Web页面的logo、单色图等（详见1）——表现的效果在某些图片上强于JPEG。
4.不适合动画——因为不支持动画。
GIF
1.适合单色图像、logo、图像里的小文本、线条构成的图像——看起来和PNG一样，但是其能表示的颜色最多只有256种。
2.适合部分需求透明的图像——只允许设置一种颜色为透明。
3.适合高清的情况——也是一种无损的压缩。
4.适合Web页面的logo、单色图等（详见1）——表现的效果在某些图片上强于JPEG。
5.适合动画——因为支持动画。
JPEG是最小的，PNG的大小根据颜色数的多少有时大于GIF，有时小于GIF。
总结：
1.以文件小为目标时：
1.当表达的颜色很多时（超过几百万），用JPEG。
2.当表达的颜色不是很多时（百万左右）——需要透明，用PNG。
——不需要透明，用JPEG。
3.当表达的颜色很少时（比如单色图、logo、几何图形等颜色只需要几种、十几种、上百种即可的图）：
——不需要透明——需要高画质——Photoshop测试PNG和GIF哪个加载时间短用哪个。
——不需要高画质，用JPEG
——需要透明——需要很多颜色透明，用PNG。
——只需要一种颜色透明，Photoshop测试PNG和GIF哪个加载时间短用哪个。
4.当需要动画时——GIF。
2.以表达效果为目标：
1.单色图、logo、线条图用PNG。
2.动画用GIF。
3.多色图用JPEG。
3.均衡的考虑时：
利用photoshop测试各种格式下的加载时间，然后根据需求优先级决定。
3.关于logo等图片的透明度和ps中的蒙版、杂边。
“因为我允许将多种颜色设为透明，所以透明区的边缘是平滑的”这句话是什么意思呢？我的理解是，边缘是否平滑和可变透明的颜色多少有关，于是百度了一下，找到了这篇文章：关于gif图片（或png8）杂边锯齿的问题，这篇文章中很好的回答了透明颜色的多少与边缘是否平滑有关、以及与ps中的蒙版（或者说杂色）的关系——因为边缘平滑过渡的效果就是依靠透明颜色来实现的。在文字或图片周围用接近背景（指图片或文字要放的区域的背景）的半透明颜色填充，从而达到整体视觉的颜色平滑过度。由于GIF是只允许一种颜色设为透明，所以如果你的边缘过度效果是通过多种透明色在ps中构造的，却保存成只允许一种透明色的格式，多余的透明色就会被保存成白色，就照成了整体视觉上的杂边锯齿。从这点看，GIF的表达效果是逊于PNG的。（这是自己简化后的解释，详细的就在上面提到的文章里。）
为什么不直接设置图像的背景色为某种颜色，让其与web页面的颜色一致，而要大费周章用ps的蒙版（杂色）去修改图片的锯齿问题呢？
可以这么做，但有一个缺点：如果web页面还有其它东西要透过logo的透明背景显示出来，你设为单色就看不到了（比如有字，你用绿色就把那一块都变成绿色了，不管是什么色的字都看不到了。）
4.<img>的作用是，浏览器显示页面时，图像会取代该元素——由于HTML页面是纯文本，所以图像绝对无法直接作为页面的一部分，它是单独存在的。这种“替换”的效果，到后面与一种被称为替换元素的称呼有关联，以后再说。
5.<img>的width、height属性看上去像是用来表现效果？
这取决于你如何使用这些属性。如果你把图像宽度和高度设置为正确的尺寸，那么她只是提供了信息——如果你是用来让浏览器提前布局，那就是表现了（详见本文的1）。
6.《Head First HTML与CSS》的排版有点问题，比如P200页的Internet Explorer这两个单词之间的距离太大了...一开始我还以为有什么特别意思。
基于标准的HTML5
1.建立“工业标准”级别的HTML，会使页面加载更快、更好的结合CSS（CSS能更好的工作意味着在不同的浏览器中显示的差异会更小）、能随着标准发展稳步走向未来：
如果能确保我们的页面与最新标准保持一致，在标准发展的过程中我们就不用做那么多修改；
有太多不同的浏览器以及浏览器版本，所以如果HTML中有错误，我们的页面在不同浏览器上显示时肯定会不一样。用CSS为HTML增加表现效果时，如果HTML有问题，则这些差别甚至会更严重。
2.对于HTML5来说，语言的新版本确实会带来成长的烦恼，因为所有人都得跟上最新的标准。不过HTML5有所简化，你能更容易地告诉我你在使用哪个版本的HTML。HTML5还明确指出了Web页面中可能出现的很多错误，所以浏览器能更一致地处理这些错误，就不会出现这种尴尬的情况：你的页面在一个浏览器上看起来很棒，但在另一个浏览器上可就不怎么样了。
3.<a>这是一个正常的HTML元素，而<!..>多了一个感叹号，说明了这是个与众不同的东西，不是元素了，比如注释的<!--.....-->和<!doctype html>
4.<meta>中声明的utf-8和保存文件时选的utf-8是不一样的作用，详见（1）《Head First HTML与CSS》学习笔记---HTML基本概念的“HTML的基本概念”的5.
5.HTML5与HTML4.01相比有哪些大的改进？
1.提供了一些新元素和属性，可以帮你编写更好、更酷（比如<video>）的页面。
2.有很多新特性，允许开发人员用HTML5创建web应用，而不止于之前的静态页面。
3.规范性更强，更健壮了。现在的规范会记录开发人员常犯的错误，还会帮助浏览器了解如何处理这些错误。
（2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记（5）- 与浏览者交互，表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签（3）
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签（1）
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- 3 微信开发本地代理环境的搭建--实现将内网ip映射到外网
微信公众号的开发,要搭建网站,并且随时都有可能修改网站内容进行调试,这就需要临时外网能返回本地开发环境搭建的项目进行测试,即内网映射到公网,但是好多开发者没有自己的域名和服务器,这里我们先来搭建一个本 ...
- 【iOS系列】-iOS中内存管理
iOS中创建对象的步骤: 1,分配内存空间,存储对象 2,初始化成员变量 3,返回对象的指针地址 第一:非ARC机制: 1,对象在创建完成的同时,内部会自动创建一个引用计数器,是系统用来判断是否回收对 ...
- Struts2自定义过滤器的小例子-入门篇
创建web项目 实现的效果! 用户点击页面不同的链接,后台调用不同的代码! 创建两个类实现共同的接口! public interface Action { String execute(); } ...
- fscanf（）函数详解【转】
本文转载自:http://blog.csdn.net/liangxanhai/article/details/8026496 以前解析有规律的文件的时候要么用正则表达式,要么就是傻傻的自己写程序来解析 ...
- URAL1099 Work Scheduling —— 一般图匹配带花树
题目链接:https://vjudge.net/problem/URAL-1099 1099. Work Scheduling Time limit: 0.5 secondMemory limit: ...
- 并不对劲的uoj276. [清华集训2016]汽水
想要很对劲的讲解,请点击这里 题目大意 有一棵\(n\)(\(n\leq 50000\))个节点的树,有边权 求一条路径使该路径的边权平均值最接近给出的一个数\(k\) 输出边权平均值下取整的整数部分 ...
- AutoIT: 对文件系统的菜单进行操作，有专门的语句WinMenuSelectItem
对文件系统的菜单进行操作,有专门的语句WinMenuSelectItem: Run("notepad.exe") WinWaitActive("[CLASS:Notepa ...
- IJ：IntelliJ IDEA安装
ylbtech-IJ:IntelliJ IDEA安装 响应速度快 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 2. 接受协议,激活IJ返回顶部 1. 2. 3. 4. 5. 6.0. 6. ...
- 【189】◀▶ PowerShell 系统学习
参考网站如下: PowerShell 中文博客 PowerShell 博客——叹为观止 Mater-PowerShell 通过 PowerShell 编写脚本 Power ...
- 使用java发送HTTP请求
public class Test { public static void main(String[] args) { BufferedReader in = null; String result ...