HTML：

 

　　1. img标签路径

 

　　2.a标签

 

　　锚点定位，代码如下：

 

　　拨打电话：

 

　　协议限定符

 

　　3.p标签

 

　　成段落展示（独占一行）

 

　　4.form标签

 

　　表单属性：

 

　　action属性：提交的地址

 

　　method 属性：提价的方式，get/post

 

　　name属性：表单名称

 

　　表单元素：

 

　　input标签

 

　　input的type有：text（文本格式）、password（密码）、radio（单选）、checkbox（多选）、submit（提交按钮）

 

　　提示：

 

　　a、label标签可以为input标记，其中label的for对应input的id，如下：

 

　　b、每一项input需包含一个name（数据的键名）

 

　　c、radio和checkbox，可通过设置同一个name，组成一组，如下：

 

　　d、radio和checkbox可以通过设置checked设置成默认选项

 

　　e、placeholder可设置input框的提示文字

 

　　f、disabled 属性规定输入字段是禁用的

 

　　select标签

 

　　下拉列表，通过设置option定义每一项，option可通过设置selected来设置默认，如下：

 

　　textarea标签

 

　　元素定义多行输入字段（文本域），如下：

 

　　CSS：

 

　　class选择器，可以为一个标签添加两个class，代码如下：

 

　　常用通配符，作用所有的标签，代码如下：

 

　　CSS优先级，如下：

 

　　父子选择器，如下

 

　　直接子元素选择器，如下

 

　　分组选择器，如下：

 

　　display

 

　　display:block,块级元素，独占一行，如：div p ul li ol等；

 

　　display:inline,内联元素/行级元素，内容决定所占位置，如：span a em del strong（注意：凡是带有inline的元素，都有文字特性，会带有4个像素的margin，决解办法：margin-left=-4px）；

 

　　display:inline-block,行内块元素，如：img；

 

　　其他

 

　　文本中横线或下划线：text-decoration;

 

　　鼠标移入的效果：cursor:help;

 

　　设置元素的垂直对齐方式：vertical-align

 

　　：before 和 :after可用于左中右三栏布局

 

　　左右布局，代码如下：

 

　　margin塌陷bug，margin-top相较于父元素会出现塌陷问题，可以通过给父元素设置overflow: hidden/position: absolute/float:left/display:inline-block解决

 

　　position

 

　　position：absolute，绝对定位，脱离原来的位置进行定位，以最近的有定位的父级进行定位，如果没有那么相对于文档进行定位；

 

　　position：relative，相对定位，保留原来的位置进行定位/相对自己原来的位置进行定位；

 

　　position：fixed，绝对定位，相对于浏览器窗口进行定位；

 

　　（注：在实际开发中，一般父级使用position：relative定位，子级使用position：absolute定位，这样不会影响其他元素，引起位置错乱）

 

　　float:left

 

　　使用浮动后会对后面的元素（不需要使用浮动的元素）产生浮动流，可以通过clear:both清浮动流；一般情况通过设置父元素的伪元素清除浮动，如下：