（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.规范性更强，更健壮了。现在的规范会记录开发人员常犯的错误，还会帮助浏览器了解如何处理这些错误。
