常用的HTML5和CSS3标签及用法（入门篇）

一、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（内阴影）;

　　　　　例 box-shadow:100px 100px 0px 100px #f00; box-shadow:0px 0px 50px 0px #f00 inset;

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

　　　　　例 text-shadow:1px 1px 1px #000; div:hover{ text-shadow:1px 1px 1px #000; }

　　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(); 多个背景图

div{ width:800px; height:600px; background:url(../img/2.jpg) no-repeat,url(../img/2.jpeg) no-repeat center; background-size:200px 200px; border:1px solid red; }

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

　　　　　　一个值：四个方向
　　　　　　两个值：左上右下 右上左下
　　　　　　三个值：左上 右上左下 右下
　　　　　　四个值：左上 右上 右下 左下（顺时针）

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

　　　　　　linear匀速 ease先加后减（缓冲） ease-in加速 ease-out减速

　　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； -webkit-text-stroke:2px red;

　　11、css3动画：

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

　　　　@keyframes name{

　　　　　　to{}

　　　　　　from{}

　　　　　　0%{}

　　　　　　100%{}

　　　　}

1 <style>
2 @keyframes test{
3     to{ left:300px; }
4     from{ left:0; }
5 }
6 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 }
7 </style>

1 <style>
2 @keyframes test{
3     0%{ left:0px; }
4     50%{ top:200px; }
5     100%{ left:300px; }
6 }
7 div{ width:200px; height:200px; background:red; animation:test ease 1s infinite; position:absolute; left:0; top:0 }
8 </style>

　　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);
 从后往前执行

秒客网

常用的HTML5和CSS3标签及用法（入门篇）

相关文章