第一章：Web标准
1.内容、结构、表现和行为
内容是网页原材料，如文本，图像，视频等。结构是XHTML的标记集合。
表现即外观，用CSS来设置。行为是对浏览者动作的反应，用JavaScript来编写。
好的网页必须做到这4者的严格分离。
2.XHMTL
XHTML是将HTML作为XML进行了一次重新表达，可以自定义标签，加强了扩展性。
标准XHMTL的编码要求：
- 声明DOCTYPE，Strict、Transitional、Frameset.
- 声明XML命名空间
- 声明内容类型
- 关闭每个标签，无论是封闭标签还是非封闭标签
- 标签正确嵌套
- 行内标签不能包含块级标签
- 标签全部小写
- 属性必须有值，并且值必须加引号
- 用实体编码来表示特殊符号，如<表示<
3.title标签
title标签对于搜索引擎来说占有相当大的权重，所以要设置好这个标签
4.块级元素和行内元素
块级元素无需换行符，自动在页面上堆叠起来，在默认情况下会预先设置一些外边距。行内元素则没有这些外边距，它们会肩并肩的横向排布在页面上，知道页面空间不足换行。
常见XHTML标签及属性：
http://www.elizabethcastro.com/html/extras/xhtml_ref.html
第二章 CSS的工作原理
1.三种方式
- 内联样式：直接写在元素属性中，尽量避免。
- 嵌入样式：写在页面头中，通常也只用于特殊情况
- 链接样式：样式放在单独的文档中，然后将它链接到多个页面。真正做到了结构与表现分离。<link href=”my_css_sheet.css” media=”screen” rel=”stylesheet” type=”text/css” />
2.CSS规则
CSS要求绝对精确，省略一个分号或者多一个冒号都会导致浏览器忽略整条规则！！
基本：p {color:red; font-size:12px;}
多个：h1, h2, h3 {color:blue;}
后代：div p span { }
子选择符：p > em { }
类：.myclass { }
上下文中的类：p.myclass { } p.myclass span { }
注意：一个标签可以应用多个类。
ID:#myid { }
注意：一般来说，应该有节制的使用ID和类，正确的用法是把它们添加到包含标签主要部分的div中，然后再使用以相应的ID和类名开头的上下文选择符来访问位于该ID种的标签。
通配： p * { }
相邻同辈：h1 + p { }
属性：img[title] { }, img[title=”hello”] { }。img[title|=”hello”] { }
其中第三条匹配title以hello开头的img
但是IE6和IE7都不支持属性选择符
伪类：伪类是指同样也是类，但并没有实际添加到标签中的类，通过伪类可以在某种事件发生时，将规则应用到标签上。
锚链接的四种伪类 a：link, a:visited, a:hover, a:active
IE6只支持链接（a）的这四种伪类，IE7虽然支持任何元素上的悬停行为，但DOCTYPE必须是严格型。FF等则支持所有伪类。
其他有用的伪类： p:first-child(last-child),第一个（最后一个）p元素
input：focus获取焦点
伪元素：伪元素可以在文档中添加额外标记（事实上并没有）。
p：first-letter {font-size:300%; float:left;}段落开头首字放大效果
x:first-line，x元素第一行
x:before和x:after，能够在元素前后添加指定文本，如：h1.age:before {content:”Age: ”}
注意：不要依赖伪类和伪元素生成网站的关键内容，以为IE6和IE7不能很好的支持它们
3.继承
CSS拥有强大的继承机制，利用继承可以减少实现必要效果的CSS代码。有些属性可以被继承，比如文本属性，但是有些属性不能被继承，主要是盒元素的定位和显示。
此外，当使用百分比和em等相对尺寸时，需要注意。当一个标签的文本大小设置为80%，其后代标签文本大小也是80%，则后代标签的实际大小事64%。
4.层叠机制
3条重要规则
- 包含ID的选择符覆盖包含类的选择符，包含类的选择符覆盖只包含标签的选择符
- 内联样式覆盖嵌入样式，嵌入样式覆盖链接样式。但是当选择符更有针对性时，优先使用，即规则1优先于规则2
- 无论如何，定义的样式覆盖继承的样式
一个大概的规则：看哪条规则更加明确，更有针对性！！
5.数字值
数字值用于定义各种元素的长度，分两种类型：绝对值和相对值
绝对值推荐使用px，相对值则推荐使用%和em。其中使用em来指定字体大小，1em等于浏览器中设置的字体大小，通常为16px
第三章 字体和文本样式
1.字体属性：
font-family，可以指定多个值，按先后顺序使用。
font-size，用em设置，注意标记嵌套时的继承
font-style,设置是不是显示斜体
font-weight，设置字体粗细
font-variant，只接受small-caps，所有字母转换成小型大写字母（少用）
字体属性的简写方式：
可以将上述的属性都写在一个地方，如 p {font: bold italic small-caps .75em verdana, arial, sans-serif;}
规则：
- 始终要声明font-size和font-family
- 顺序：首先是weight，style，variant（这3个任意），然后size，最后family
2.文本属性
文本会被包含在一个细长的盒子中，而且通常会跨越多行，作者称之为“蛇”形文本。
text-indent:这个属性用来设置文本盒子相对于包含元素的开始位置，值可以为正值或者负值
letter-spacing:字母间距
word-spacing：单词间距
text-decoraction:underline，overline，linethrough，blink，一般用于链接。
text-align：对齐方式，left，right，center，justify，不一定用于文本元素，也可以对齐图像等其他
line-height：行间距，值为数学值，不需要单位
text-transform：uppercase，lowercase，capitalize，none，大小写，或者首字母大写
https://blog.51cto.com/heartofrong/396501
