html5与css5常用的新属性和标签

        详细查询地址：html5 ： http://www.w3school.com.cn/tags/index.asp

                                 css3：http://www.w3school.com.cn/cssref/index.asp

一、html5新属性和标签：

1、新增常用的盒子标签：

     nav  ------------------ 导航标签

     aside ----------------- 侧边栏 标签

    footer --------------------- 底部

    article  -------------------- 文章标签

2、新增的表单元标签：

新的表单元素
				

					邮箱:

					日期:

					时间:

					日期时间:

					颜色:

					网址:

					数字:

					滚动条:
					

					
				
				视频标签:
				
				
				音频标签:
				

二、css3 新增属性：

1、盒子设置圆角属性：border-radius：

.top1{
			width:200px;
			height: 200px;
                        border-radius: 10px;                /*圆角的半径，当半径较大时盒子会变成圆形 */
}

2、阴影：box-shadow：

    （1）盒子阴影：

.top1{width:200px;height: 200px;
    box-shadow: 3px 3px 10px yellow;}   /*参数:x轴点 y轴点 宽度 颜色*/ 

     （2）文字阴影：

.top1{width:200px;height: 200px;
    text-shadow: -5px 5px 1px #FF0000;}   /*参数:x轴 y轴 宽度 颜色*/ 

3、多张背景图片和背景图片的位置（内容 或 padding部分 或 border部分）

              查看内容：http://www.w3school.com.cn/cssref/pr_background-clip.asp

.top1{width:200px;height: 200px;               
background-image:url("./images/bg_flower.gif"),url("./images/bg_flower_2.gif");  /*同时设置多幅背景*/
padding: 30px;
border: 20px solid transparent;    /* transparent 透明 */
/*设置背景图放置的位置*/
background-clip: border-box;
}  

 4、div中文字强制换行：

.top1{width:200px;height: 200px;
    word-wrap: break-word;
}

5、过渡效果：

           目的：设置标签变化的各种状态值。

              过渡 transition： http://www.w3school.com.cn/cssref/pr_transition.asp

.text{transition: width 2s ease,height 2s,background 3s;
		}

6、动画：@keyframes

         动画：http://www.w3school.com.cn/cssref/index.asp#animation

@keyframes huaji_move{
			0% {
				/*width:100px;
				height: 100px;*/
				top:0px;
				left:0px;
				transform: rotate(0deg);  /*transform 转换   rotate(30deg) 旋转角度  */   
			}
			25%{
				/*width:200px;
				height: 200px;*/
				top:80%;
				left:0%;
				transform: rotate(3600deg);
				
			}
			50%{
				top:80%;
				left:90%;
				transform: rotate(-3600deg);
			}
			75%{
				top:0px;
				left: 90%;
				transform: rotate(0deg);
			}
			100%{
				top:0px;
				left:0px;
			}
		}
		.animat{
			background: url("./images/huaji.jpg");
			width:100px;
			height: 100px;
			background-size:100% 100%;
			border-radius: 50px;
			position:absolute;
			top:0px;
			left:0px;
			animation:huaji_move 10s ease;
			animation-iteration-count:infinite;
			/*float:left;*/
		}

7、转换 --- ransform：

        转换：http://www.w3school.com.cn/cssref/pr_transform.asp

transform: rotate(0deg);  /*transform 转换   rotate(30deg) 旋转角度  */