《Head First HTML与CSS》读书笔记

img 图像

JPEG 有损，适合复杂图像
PNG “无损”，指不会丢掉信息，但会压缩文件大小，适合单色图像或者logo等小图像。PNG-24支持数百万种颜色，PNG-16支持数千种，PNG-8支持256种颜色
GIF “无损”，同上，类似PNG，唯一支持动画并得到广泛支持的图片格式。

alt是


**如果把一个透明的图像放在Web页面中，则要确保这个图像的蒙版颜色与Web页面的背景色一直。**
**透明图像可以使用PNG或者GIF格式。**

图像可以用在指向其他Web页面的链接，要由图像创建一个链接，可以使用```img```元素作为```a```元素的内容，将链接放在```a```原色的href属性中。

### HTML 版本

在使用标准HTML时，无需指定版本号，在HTML5以后都向后兼容，所以只需 ```<!doctype html>

具体内容看《Head First HTML5 Programming》

W3C 验证工具

用于验证html所有标记是否都合法

使用meta指定字符编码

charset

要放在head元素中，title上面


### Web规范

一定要在head元素中包含title元素

alt是img元素中的必要属性


### font-family 

可以列出各种可能用到的字体，因为windows 或 mac平台可能有不同字体区别，A有B没有等等情况。


### woff（Web开放字体格式）

还可以选择在服务器上托管字体

1. 找到一个免费授权的字体
2. 确保有所需字体的所有格式  比如.ttf/ .otf / .eot / .svg / .woff
3. 把你的字体放在Web上  一般除了放置.woff还需要放置.ttf作为备选，一些老的浏览器/移动设备等不支持.woff
4. 在CSS中增加 font-face属性


### 调整字体大小

font-size : 150%、1.2em  设置百分数/小数点时，相对的是父元素的字体大小，这里的em是字体大小比例的结尾，跟```<em>

元素没任何关系。

同样也可以设置small，x-small，medium等等

改变字体风格

比如font-style: italic; 斜体风格

Web颜色成色原理

三基色：红绿蓝三种颜色配比而成

background-color: rgb(80%， 40%， 0%);
background-color: rgb(204， 102， 0);
background-color: #cc6600;

文本装饰

text-decoration : line-through; //中划线

总结

第九章与元素亲密接触

盒模型

CSS将每个元素看成一个盒子，可以对这个盒子设置内外边距，边框等等参数。

class 对应 .
id 对应 #

最后链接的css覆盖前面相同属性的css

样式表不仅可以用在浏览器

media 可以指定用样式表的设备
<link href=“lounge-mobile.css” rel=“stylesheet” media=“screen” and (max-device-width: 480px)”>
指定带屏幕的设备，且屏幕宽度不超过480像素

媒体查询

通过@media 规则来查询相应符合条件的设备才能运用以下规则

IE8之前版本不支持媒体查询

字体规则

如果font-family中有字体名中包含空格，要加上引号，比如 “Times New Roman”

总结

第10章高级Web建设

<div>让元素逻辑分区。在页面中要使用<div>，但不要滥用。如果这样做有助于你将页面分解为逻辑区，从而保证结构清晰并便于指定样式，那么可以增加更多的结构。如果只是为了在页面中创建大量结构而增加<div>，就只会让页面复杂，而没有任何实际好处。

padding : 0px（上）, 20px（右）, 30px(下), 10px（左）

<span>元素采用类似的方式建立内联内容的逻辑分组。

第11章摆放元素

使用流

流实际上就是浏览器在页面上摆放HTML元素所用的方法。

内联元素

内联元素在水平方向上会相互挨着，总体上会从左上方流向右下方。

浏览器并排放置两个内联元素时……

float属性尽可能地向左或向右（根据float的值）浮动一个元素，然后在它下面所有内容会绕流这个元素（所谓绕流，就是像流体一样绕着这个元素流动）

如何浮动元素

使用float属性必须设置width
2

第12章现代HTML

重新考虑HTML结构

移动端浏览器设备都支持HTML5, IE8及更糟版本，safaric3及更早版本

第13章表格与更多列表

用 <table> 代表表格，<tr>是第一行，<th>元素是表头，<td>构成单元行的每一行

小结

第14章 HTML表单

<form>元素如何工作？

《Head First HTML与CSS》 读书笔记