一、HTML5

 

　　1.标签

 

　　HTML5本质上只是增加了一些语义化标签

 

　　只兼容高版本（ie9以上）浏览器

 

　　最有用的三个标签：video 视频

 

　　audio 音频

 

　　canvas 画图板，替代flash（操作上比较困难）

 

　　用处不大但很多时候又可以用到的一些标签：

 

　　header　　头部

 

　　footer　　 尾部

 

　　nav　　　 导航

 

　　aside　　 侧边栏

 

　　section　　模块

 

　　2.表单里面新添加的一些html5属性

 

　　<form>

 

　　<input type="email" />      邮箱输入，自带错误提示（无法修改样式）

 

　　<input type="color" />　　　 一个可以选择颜色的调色板

 

　　<input type="date" />　　　　年月日下拉框 （在手机上显示的时候，会有滑动的选择，很好看）

 

　　<input type="month" />   选择月份下拉框

 

　　<input type="week" />   周选择下拉框

 

　　<input type="url" />     URL

 

　　<input type="tel" />     调用手机数字键盘

 

　　<input type="search" />　　搜索（带个叉

 

　　<input type="range" />　　拖拽条

 

　　<input type="number" max="10" min="0" />   有条件范围的数字框

 

　　</form>

 

　　二、css3 （IE9以下不兼容 9部分兼容）

 

　　1、盒子阴影  box-shadow:x   y   blur（模糊度）  spread（内扩充，相当于padding）   color   inset（内阴影）;

 

　　例

 

　　2、文字阴影  text-shadow:x y blur color;

 

　　例

 

　　3、背景透明度  background：rgba（0，0，0，alpha）

 

　　opacity 会把子级也透明，rgba只把背景色透明，所以推荐使用rgba

 

　　opacity:0.1   透明度（ie8以上）

 

　　低版本浏览器写法：filter：alpha（opacity:50）;

 

　　4、背景图大小  background-size : width height;

 

　　使用background-size，要不cover等比缩放，要不写死（会导致图片拉伸，变形），无法同时定义图片的宽高又让其等比缩放。

 

　　5、background:url（），url（）;     多个背景图

 

　　6、圆角　　border-radius  可以使用像素也可以使用百分比

 

　　一个值：四个方向

 

　　两个值：左上右下 右上左下

 

　　三个值：左上 右上左下 右下

 

　　四个值：左上 右上 右下 左下（顺时针）

 

　　7、过渡　　transition:1s 时间    样式（all ）  运动类型  写的值不分顺序

 

　　linear

 

　　8、浏览器前缀

 

　　（transition会涉及到浏览器前缀）

 

　　-webkit- 谷歌浏览器

 

　　-moz- 火狐浏览器

 

　　-ms- IE浏览器

 

　　-o- 欧朋

 

　　9、渐变色

 

　　线性渐变background-image:-webkit-linear-gradient（方向left top,color起始颜色，color结束颜色）;

 

　　重复渐变background-image:-webkit-repeating-linear-gradient（left top,clolr,color）;

 

　　10、文字描边

 

　　-webkit-text-stroke:描边大小 color；

 

　　11、css3动画：

 

　　animation：time时间，name名字，ease类型，infinite重复运动

 

　　@keyframes name{

 

　　to{}

 

　　from{}

 

　　0%{}

 

　　100%{}

 

　　}

 

　　12、倒影

 

　　-webkit-box-reflect:below 10px -webkit-linear-gradient（rgba（0,0,0,0） 50%,rgba（0,0,0,1））

 

　　below向下 above向上 left right

 

　　13、滤镜　　-webkit-filter:blur（0px 模糊度）；

 

　　14、变形

 

　　transform:

 

　　translate（x,y）    移动px

 

　　rotate（）         旋转deg

 

　　skew（x,y）        倾斜deg

 

　　scale（x,y）       放大比例

 

　　transform:transform（x,y） rotate（） skew（x,y） scale（x,y）;

 

　　从后往前执行