有关HTML、CSS和HTML5的细碎知识点

细碎知识点2：链接: link.
1. 为什么JPEG(JPG)照片要比GIF或PNG照片好，或者为什么GIF或PNG的logo要优于JPEG的logo？
“优于”通常是结合图像质量和文件大小而言的。JPEG照片一般比相同质量的PNG或GIF照片要小，而PNG或GIF的logo通常看起来比JPEG格式效果更好，而且文件也可能更小。
JPEG(JPG)适合用于保存照片和其他复杂图像。
GIF或PNG适合用于保存logo和其他包含单色、线条或者文本简单的图形。

2. 如何选择GIF和PNG？
PNG是最新的图像格式，它既可以支持照片也能很好的支持logo，还提供了比GIF更高级的透明性，目前所有的主流浏览器都支持PNG。
PNG的压缩要稍稍优于GIF，所以对于一个颜色数相同的图像PNG文件可能更小一些，同时如果颜色总数多于256种并且也不能选择JPEG的时候就只能选PNG格式。
如果需要动画，就只能选择GIF，因为GIF是唯一一个支持动画并得到广泛支持的格式。

3. 相关默认大小（与浏览器相关，以下为大部分情况中）
body默认的字体大小：16像素；
< h1 >是默认体文本字体大小的200%；
< h2 >是150%；
< h3 >是120%；
< h4 >是100%；
< h5 >是90%；
< h6 >是60%；
其中< h4 >字体大小与body字体 大小相同。

4. 字体倾斜
font-style:italic;（斜体风格）
font-style:oblique;（倾斜文本）

5. img和background-image的区别
background-image：用于设置一个元素的背景图像，并不是用来在页面中放置元素和图像的，使用的理由是为了让元素更加具有吸引力，但是可能不具有任何意义只是为了更加美观。
img：用于包含一个图像，它在页面中可能有更为重要的作用，如照片或logo。

6. background-repeat（背景图像重复）
background-repeat:repeat;（设置图像在水平和垂直方向上重复，默认样式）
background-repeat:no-repeat;（不重复，只显示一次）
background-repeat:repeat-x;（在水平方向上重复）
background-repeat:repeat-y;（在垂直方向上重复）
background-repeat:inherit;（按父元素的设置来处理）

7. text-align和vertical-align
text-align：会对块元素中的所有内联内容对齐，并且这个属性只能用在块元素上 。
text-align:center;（居中）
text-align:left;（居左）
text-align:right;（居右）
text-align: justify;（可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘。）

vertical-align：设置元素的垂直对齐方式，定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
vertical-align:baseline;（ 默认。元素放置在父元素的基线上。）
vertical-align:sub;（垂直对齐文本的下标。）
vertical-align:super;（垂直对齐文本的上标）
vertical-align:top;（把元素的顶端与行中最高元素的顶端对齐）
vertical-align:text-top;（把元素的顶端与父元素字体的顶端对齐）
vertical-align:middle;（把此元素放置在父元素的中部。）
vertical-align:bottom;（把元素的顶端与行中最低的元素的顶端对齐。）
vertical-align:text-bottom;（把元素的底端与父元素字体的底端对齐。）
vertical-align:length;
vertical-align:%;（使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。）
vertical-align:inherit;（从父元素继承 vertical-align 属性的值。）

8. line-height（行高）
line-height:1;（表示使用该样式的元素的行高是自己元素本身大小的1倍，推荐使用）
line-height:1em;(表示使用该样式的元素的行高是父元素大小的1倍，使用%同理）

9. text-transform改变英文中字母的大小写