1.Html和CSS的关系
（1）HTML是网页内容的载体。
（2）CSS样式是表现。就像网页的外衣。
（3）JavaScript是用来实现网页上的特效效果。
2.标签的语法
（1） 标签由英文尖括号<和>括起来，如<html>就是一个标签。
（2）html中的标签一般都是成对出现的，分开始标签和结束标签。结束标签比开始标签多了一个/。
（3）标签与标签之间是可以嵌套的，但先后顺序必须保持一致。
（4）HTML标签不区分大小写，<h1>和<H1>是一样的，但建议小写。
3.html文件基本结构
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标题</title>
</head>
<body>
正文
</body>
</html>
4.html注释
<!--注释文字-->
5.html标签语义化
标签语义化：在网页中合理使用标签，如文章标题使用标题标签，段落使用段落标签。
标签语义化的好处：①更容易被搜索引擎收录。②更容易让屏幕阅读器读出网页内容。
6.css语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
7.css注释
/*注释内容*/
8.css样式引用
css样式引用包括：内联式、嵌入式、外部式。
优先级：内联式>嵌入式>外部式。（条件：相同权值）
9.css选择器
CSS的选择器按大类可以分为三类，即id选择器、class选择器、标签选择器。
用法如下：
#id名 { 属性名:属性值; }
.class名 { 属性名:属性值; }
标签名 { 属性名:属性值; }
其中，他们之间又可以以不同的方式进行组合，如下：
后代选择器: 父代名 后代名 { 属性名:属性值; }
子代选择器: 父代名>子代名 { 属性名:属性值; }
群组选择器: #name1, .name2, #name div { 属性名:属性值; }
伪类选择器: name:伪类
通用(通配符)选择器: * { 属性名: 属性值; }
10.css的权值
权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
11.css布局模型
CSS包含3种布局模型：①流动模型（Flow）②浮动模型 (Float)③层模型（Layer）
层模型有三种形式：
①绝对定位(position: absolute)
②相对定位(position: relative)
③固定定位(position: fixed)
固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。
12.水平居中设置
a.水平居中设置-行内元素
如果被设置元素为文本、图片等行内元素时，水平居中可以通过给父元素设置 text-align:center 来实现。
b.水平居中设置-定宽块状元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
定宽块状元素可以通过设置“左右margin”值为“auto”来实现居中。
c.水平居中总结-不定宽块状元素
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
方法（一）
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
方法（二）
改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果。
这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法（三）
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
13.垂直居中设置
a.垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
b.垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
（方法一）
插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
14.隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
（1）position : absolute
（2）float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。