HTML
1.html页面格式
<!DOCTYPE HTML>
! ：声明，注意的意思
DOC :document 文档
TYPE:类型
<meta charset ="utf-8">
代码编码格式
utf-8 国际标准
gb2312 中文简体标准
<base target="_blank"/>(写在title标签下)
定义页面中所以链接打开的方式
html的元素分为：块级和行内元素；
1.块元素的宽是跟着父级走的；
CSS样式
1.padding(内边距):top right bottom left;
注意：内边距相当于给一个盒子加了填充厚度会影响盒子大小。如不要盒子大小发生改变，盒子相应的宽高需要减掉。
2.margin(外边距):top right botton left;
注意--尽量不使用margin，可以使用父级的外边距替代margin
问题：
1.上下外边距会叠压;
2.父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距);
<img alt=""/>
1.img标签中的alt是填写图片的名称，当图片挂掉，显示不出图片时，会显示出alt中的名称。同时便于搜索，搜索引擎会读alt中的信息;
<a href="http://www.baidu.com" target="_blank"></a>（链接）
1. target属性(链接打开方式)：
a.'_blank',新标签方式打开链接;
b.'_self',在当前页面打开链接;
2.herf属性：
a.输入为网页地址时，是链接的作用；
b.输入为文件路径时，是下载的作用；
c.输入为某个标签的id时，是锚点的作用；
<strong>强调(页面展示为粗体)<strong>
<em>强调(页面展示为斜体)</em>
<span>区分样式</span>
<ol>有序列表
<li>列表项</li>
<li>列表项</li>
</ol>
<ul>无序列表
<li>列表项</li>
<li>列表项</li>
</ul>
<dl>定义列表 (自带标题的标签)
<dt>定义列表标题</dt>
<dd>定义列表项</dd>
<dd>定义列表项</dd>
</dl>
选择符
1.id选择符；
2.class选择符(可以重复使用)；
3.类型选择符(如，div,img...标签)；
4.包含选择符(如，div下的p----div p{})；
5.' * ' 通配符，页面上所以元素选择(一般没有用)；
选择符优先级
同级样式情况下，默认后者覆盖前者；
样式优先级
类型选择符(1)<class(10)<id(100)<style第二章样式(1000)
伪类
伪类用于向被选中元素添加特殊的效果(元素在特定情况下才具备的)
<a标签的四个伪类>(顺序如下，不可换)
1.link 未访问(默认)
a:link{text-decoration:none;(去掉下划线)}
2.visited 访问过后(点击过后)
a:visited{color:black;}
3.hover 鼠标悬停(鼠标划过)
a:hover{color:red;text-decoration:underline;(加上下划钱)}
4.active 链接激活(鼠标按下)
a:active{color:yellow;}
/*******after伪类(在元素后追加内容)*********/
例:p{content:"里面添加需要加的内容";后面可以加需要添加的各种样式;}
IE6不支持a以外其它任何标签的伪类；
IE6,7下不支付after伪类；
IE6以上的浏览器支持所有标签的hover伪类；
***********默认样式重置(css reset)************
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
margin:0;
font-size:12px;
/*font-family:字体*/}
ol,ul{list-style:none;padding:0;margin:0;}
a{text-decoration:none;}
img{border:none;/*有兼容问题会有边框*/}
内联，内嵌，行内属性标签：
1.默认同行可以继续跟同类型标签；
2.内容撑开宽度；
3.不支持宽度；
4.不支持上下的margin和padding；
5.代码换行被解析；
块的特征
1.默认独占一行；
2.没有宽度时，默认撑满一排；
3.支持所有css命令
/*display:block;显示为块*/
/*display:inline;显示为内联*/
cursor 指针样式(规定要显示的光标的类型)：
cursor:pointer(手型) | text(文本线) | move...
光标类型可以是图片:
cursor:url(hand.cur),pointer;
url中的图片类型，最好是cur,通用类型，好处是无兼容性；
参数pointer：如果url中的图片没有成功显示，会自动使用后面的这个参数。
<img src="图片路径" alt=""/>：
/*
图片标签:属于inline-block--一行内的块，支持宽高。
当遇到，即想支持宽高，又想支持一排显示；这时使用inline-block；
inline-block特性：
1.块在一行显示；
2.行内元素属性会支持宽高；
3.没有宽度的时候内容撑开宽度；
问题：
1.代码换行被解析；
2.ie6 ie7不支持块属性标签的inline-block;
*/
浮动--特点(left/right/none)：
元素加了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止；
1.块元素在同一行显示；
2.行内元素属性会支持宽高；
3.没有宽度的时候内容撑开宽度；
4.ie6,7支持；
5.脱离文档流；
6.提升层级半层；
**文档流**：是文档中可显示对象 在排列时所占用的位置；
清浮动
1.给父级也加浮动;
2.给父级加display:inline-block;
3.在浮动元素下加<div class="clear"></div>
.clear{height:0;font-size:0;clear:both;}
4.在浮动元素下加<br clear="all"/>(这种不符合W3C标准);
5.clear(left/right/both(元素两边不能有浮动元素)/none):元素的某个方向不能有浮动元素;
/*****注意******/
**在IE6，7下，元素浮动要并在同一行的元素，都要加浮动。
浮动在IE6,7下的兼容问题：
1.IE6下的双边距BUG：在IE6下，块元素有浮动和横向的margin，横向的margin值会被放大成两倍。
解决办法：加display:inline;转成行内元素，问题解决；
2.IE6，7下li下几px的间隙问题：在ie6，7下li本身没有浮动，但是内容浮动了li下就会多出来几px间隙。
解决办法:
(1)给li加浮动（比较麻烦，还在给ul清浮动）
(2)给li加vertical-align:top/middle/bottom...(垂直对齐方式，用的时候，需要给两个元素都加，不能只给一个加)
vertical-align：还可以用来清理图片下的间隙问题；
IE6问题
***在IE6下高度小于19px的元素，高度会被当做19px来处理***
/***在IE6,7下浮动元素的父级有宽度就不用清浮动***/
解决办法:
1.font-size:0;(只能处理到2px的高度)
2.最常用的方法：加overflow:hidden;