前端之旅：《Head First HTML & CSS》5、6章

July 10 2016

其实回头看前几天的学习内容比较杂乱，导致耗费了一些不必要的精力，其实现在最应该做的是先系统的看点书，但由于我还有点前端基础，而且早上不想看书的特点，估计后面还是会学习网上的课程，下午和晚上的时间用于看书和写博客。
下面只有今天学习《Head First HTML & CSS》第5、6章的笔记

第5章. 为你的页面增加图像

JPEG、PNG和GIF的对比

JPEG	PNG	GIF
适合连续色调图像，如照片	适合单色图像和线条构成的图像	和PNG类似，适合于单色图像和线条构成的图像
可以表示包含多达千万种不同颜色的图像	可以表示包含上百万种不同颜色的图像，PNG有3种：PNG-8、PNG-24、PNG-32	GIF可以表示最多256种不同颜色的图像
“有损”压缩	“无损”压缩	也是一种“无损”压缩格式
不支持透明度	支持透明度	支持透明度，不过只允许一种颜色设置为透明
文件比较小，以便Web页面更高效的显示	与相应JPEG相比，PNG文件更大一些，和GIF相比则取决于使用的颜色数	GIF通常比相应JPEG文件大
不支持动画	支持动画(只有firefox)	支持动画

`<img>` 的其他知识点

浏览器通常会同时获取多个图像
如果在<img>中提供了width和height，浏览器在显示图像之前就开始建立页面布局，否则浏览器在布局后才知道图像大小，则会重新调整页面布局。
<img>提供的width和height并不影响下载图像的大小，图像仍然按照原始尺寸大小下载下来，并通过width和height在页面上缩放，并不是会下载更小尺寸的图片。
浏览器是在下载了html文件并开始显示页面后才下载图像，所以事先它并不知道图像大小。
<img>是内联元素。
蒙版是图形编辑工具用颜色来柔化文本边缘的功能

第6章. 标准及其他

DOCTYPE 类型

文档类型定义（doctype）用来告诉浏览器使用的HTML版本

html4.01 doctype:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org//TR/html4/strict.dtd">

xhtml doctype:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org//TR/xhtml11/DTD/xhtml11.dtd">

html5 doctype
1
<!DOCTYPE html>
当浏览器看到这个doctype时，它就认为你在使用标准的HTML，不再考虑版本号，也不考虑标准在什么位置。

HTML5相比HTML4.01的改进

HTML5提供了更多的元素和属性
它有很多新特性，允许Web开发人员用HTML5创建Web应用
HTML5规范比以前的版本健壮得多

其他知识点

html标准将变成一个活的标准，不再有6、7、8等版本，这就意味着它会根据需要继续发展和变化，不再需要固定的版本号。
html标准具有向后兼容性(backwards compatibility)，意味着我们可以向html增加新的内容，浏览器在支持新的内容的同时，也会支持原来的内容。
w3c html验证工具：http://validator.w3.org
html5中通过meta指定字符编码<meta charset="utf-8">，相比之前<meta http-equiv="Content-Type" content="text/html;charset=utf-8">方式要简单很多
html文件编码要和页面指定的编码一致。