回顾
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>