一、html结构：
主要包括3部分：doctype、head、body
1）doctype:文档类型,XHTML1.0提供了3中DTD供可供选择
- 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML
1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如
，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
2）head:包括meta charset和title,也能包括css。
3）body:各种div及html标签。
二、div布局
1、布局原则：从上到下、从左到右、从外到里
2、盒模型：块状元素div看成盒子。
1）盒子有自己的宽width和高height;
2)盒子与盒子之间的距离称为外边距margin：
margin后面可以跟1~4个值，按照上、右、下、左的顺序为四个方向分配值，没有分配到的取对边的值。
普通元素及父子元素在竖直方向上存在margin重叠现象，即相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值；关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。
3）盒子的厚度称为边框border。border的3要素：宽 形状 颜色。
border的3要素可单独定义，也可以和4个方向按需要结合。
4）盒子与内部内容的距离称为padding：定义方式同margin。
3、普通div无论宽度是多少都独占一行，要实现2个div并排显示，就要用浮动float，如float:left/right;
浮动元素后面再来一个普通元素，那这个元素会跑到浮动元素的下面，所以要使它正常显示，要清除浮动clear，如clear:left/right/both;
三、css效果
1、选择器
常用的有id选择器、类选择器、标签选择器、派生选择器
第一 id选择器 #xxx
第二 class选择器 .xxx
第三 标签选择器 div p body 等
第四 派生选择器 div p{} .a .b{} 等 表示所有空格后面的选择器生效
第五 子代选择器 div > p 只有大于号后面的选择器生效 不继承下去了
第六 群组选择 div,p,a{} 记住 是逗号 不是小数点，表示div p a标签都生效
第七 伪类选择器 比如 a:link 让鼠标放上去的时候生效
第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效
第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效
第十 属性选择器 比如 p[title=‘aa’] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
2、控制效果
1）段落控制：text-indent:首行缩进
text-align:水平文字方向
text-decoration:文本装饰线
letter-spacing:字符间距
text-transform:字母大小写转换
2）文本控制：color:颜色
font-style:字体样式
font-weight:字体粗细
font-size:字体大小
line-height:行高
font-family:字体
3）背景控制：background-color:背景色
background-image:背景图片
background-repeat:背景图重复
background-attachment:背景图粘贴方式
background-position:背景图位置
背景色和背景图同时设置时，优先显示背景图，同时设置为了当背景图被删除或缓冲慢时，设置一个与背景图色调相近的背景色，使网站的视觉效果不会反差太大。
当背景图比元素还大时，就需要调background-positin来实现。
4）css引入方式
①页内style标签即在head部分加入style标签：
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>
②外部css文件,在head部分加入link：
<link rel="stylesheet"type="text/css" href="xxx.css"/>
③行内style标签,直接在页面的标签里加style属性：
<div style="border:1px redsolid;">测试信息</div>
④import导入即在head部分加入@import：
<style type="text/css">
@import url(xxx.css);
</style>
也可以在外部CSS中导入import ，毕竟放在外部CSS顶部样式效果才能生效。
5）初始化
因为各浏览器对于元素有默认css参数，而且可能不一致，那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。
四、html标签
分为2大类：无语义标签和有语义标签。
之前学过的div和span都是无语义标签，div是布局分块的块状元素，span是选择文字用的内联元素。
有语义标签，每个标签的名字就能看出它的作用，有标题h1~h6，段落p,图片img，视频embed，超链接和锚点a，无序列表ul,有序列表ol，表格table。