Day12- H5新增

回顾

3d转换
	位移
		transform:translateZ();
		transform:translate3d(x,y,z);
	旋转
		transform:rotateX();
		transform:rotate3d(x,y,z,30deg);
	缩放
		transform:scaleZ();
		transform:scale3d(x,y,z);
	景深perspective
	***子元素保留3d转换位置transform-style:preserve-3d;
	元素背面不可见backface-visibility:hidden;
动画
	@keyframes 动画名称{
		from{
			background:red;
			width:300px;
		}
		to{
			
		}
	}
	animation:动画名称  执行时间  速度效果  延迟时间  执行次数  是否反向;
	动画暂停animation-play-state:paused;
	animation-fill-mode:backwards;

***H5新增的语义标签

+ section元素 表示页面中的一个区块
	一般可以代表页眉、页脚或页面中的某一块,一般会包含一个标题
+ article元素 表示一块与上下文无关的独立的内容
	定义独立于文档且有意义的来自外部的内容，比如：一些投稿文章、新闻记者的文章，或者是摘自其它博客、论坛的信息等。
+ aside元素 在article之外的，与article内容相关的辅助信息 
	一般用作侧边栏信息
+ header元素 表示页面中一个内容区块或整个页面的标题
	一般用作页面头部
+ footer元素 表示页面中一个内容区块或整个页面的脚注
	一般用作页面底部
+ nav元素 表示页面中导航链接部分
	nav可以直接包裹li标签
+ figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
	<figure>
		<figcaption></figcaption>
	</figure>
+ main元素 表示页面中的主要的内容(ie不兼容)
+ hgroup标题的一个分组

+ mark定义高亮显示的文本(span)
+ time时间
+ dialog标记定义一个对话框(会话框)
+ embed 标记定义外部的可交互的内容或插件 比如flash 

***视频和音频

视频<video src="" width="" height=""></video>
音频<audio src=""></audio>
	controls属性：向用户显示控件，比如播放按钮。控件可能不一样
	autoplay属性：自动播放。谷歌屏蔽了该功能
	loop属性：重复播放属性。
	muted属性：静音属性。
	poster属性：规定视频正在加载时显示的图像，直到用户点击播放按钮(音频用不了)
<source></source>定义媒介资源,写在video里面
规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择
<video>
	<source src="myvideo.mp4" type="video/mp4"></source>
	<source src="myvideo.ogg" type="video/ogg"></source>
	<source src="myvideo.webm" type="video/webm"></source>
</video>
video支持的格式：mp4.ogg.webm(每个浏览器兼容性不同)
audio支持的格式：mp3.ogg

H5新增的表单元素

<input type=""/>
	Type=“email” 限制用户必须输入邮箱类型
	Type=“url” 地址类型
	Type=“range” 滑动条
	Type=“number”数字类型
	Type=“search” 搜索意义的表单
	Type=“color” 颜色选择的表单
	以下有兼容问题：
	Type=“time” 时间类型
	Type=“month” 月类型
	Type=“week” 周类型
	Type=“datetime-local” 选取本地时间
	Type=“date” 日期
<output></output>接收两个控件计算的值

H5新增属性

1.list属性
	<input type="url" list="url-lists"/>
	<datalist id="url-lists">
		<option value="http://www.baidu.com" label="百度"/>
		<option value="http://www.google.com" label="谷歌" />
		<option value="http://www.jd.com" label="京东" />
	</datalist>
2.placeholder 提示文本
3.autofocus
	页面中某一个控件自动获取焦点
4.required 必须填写
5.pattern 正则
	<input type="text" pattern="[0-9][A-Z]{3}"/>
6.min,max,step
	min最小值
	max最大值
	step步长
	<input type="number" min="0" max="100" step="5"/>
7.multiple多选
8.novalidate取消验证
9.autocomplete自动完成
	<form action="demo_form.asp" method="get" autocomplete="on">
	  First name:<input type="text" name="fname" /><br />
	  Last name: <input type="text" name="lname" /><br />
	  E-mail: <input type="email" name="email" autocomplete="off" /><br />
	  <input type="submit" />
	</form>