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  -------------------- 文章标签

<nav></nav>              <!-- 他们是 块级 标签 -->
<aside></aside>
<article></article>
<footer></footer>

2、新增的表单元标签：

<p>新的表单元素</p>
				<form action="" method="">
					邮箱:<input type="email" name="email"><br/>
					日期:<input type="date" name="date"><br/>
					时间:<input type="time" name="time" ><br/>
					日期时间:<input type="datetime-local" name="datatime"><br/>
					颜色:<input type="color" name="pickcolor"><br/>
					网址:<input type="url" name="url"><br/>
					数字:<input type="number" name="number" min="20" max="30"><br/>
					滚动条:<input type="range" name="range" min="20" max="30" >
					<input type="submit" name=""><br/>
					
				</form>
				视频标签:
				<!-- poster 未播放时显示图片  loop 循环播放 controls 控制按钮 autoplay 自动播放-->
				<video src="./movie/1.mp4" controls="controls" loop="loop" autoplay='autoplay' poster="./images/noplay.jpg"></video>
				音频标签:
				<audio src=""></audio>

二、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) 旋转角度  */