HTML5
-
视频
当前，video 元素支持三种视频格式：
Ogg, MPEG4, WebM
eg.
<video src="movie.ogg" controls="controls">
</video>
<video>
与
</video>
之间插入的内容是供不支持 video 元素的浏览器显示的.
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
eg.
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video>
标签：http://www.w3school.com.cn/tags/tag_video.asp
-
音频
当前，audio 元素支持三种音频格式：
Ogg Vorbis， MP3， Wav
eg.
<audio src="song.ogg" controls="controls">
</audio>
<audio>
与
</audio
> 之间插入的内容是供不支持 audio 元素的浏览器显示的
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
eg.
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio>
标签：http://www.w3school.com.cn/tags/tag_audio.asp
- 拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
然后，规定当元素被拖动时，会发生什么。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。
ondragover 事件规定在何处放置被拖动的数据。
进行放置 - ondrop
- 画布Canvas
创建 Canvas 元素
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
JavaScript 使用 id 来寻找 canvas 元素：
var c=document.getElementById("myCanvas");
然后，创建 context 对象：
var cxt=c.getContext("2d");
<canvas>
标签：http://www.w3school.com.cn/tags/tag_canvas.asp
- 地理定位
使用 getCurrentPosition() 方法来获得用户的位置。
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数
如需在地图中显示结果，需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图
- Web 存储
HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
- Input 类型
email,url,number,range,Date Pickers（日期选择器）,search
- 表单元素
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的
option 元素永远都要设置 value 属性。
keygen 元素的作用是提供一种验证用户的可靠方法。
output 元素用于不同类型的输出，比如计算或脚本输出
CSS3
- 边框
border-radius 属性用于创建圆角边框。
border-radius:25px;
box-shadow 用于向方框添加阴影。
box-shadow: 10px 10px 5px #888888;
border-image 属性，可以使用图片来创建边框。
border-image:url(border.png) 30 30 round;
- 背景
background-size 属性规定背景图片的尺寸。
background-size:63px 100px;
background-origin 属性规定背景图片的定位区域。
background-origin:content-box;
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
CSS3 允许为元素使用多个背景图像。
-
文本效果
text-shadow 可向文本应用阴影。
text-shadow: 5px 5px 5px #FF0000;
（水平阴影、垂直阴影、模糊距离，以及阴影的颜色）
word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。
p {word-wrap:break-word;}
- 字体
@font-face 规则可用来定义自己的字体。
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
-
2D 转换
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
eg.值
translate(50px,100px)
把元素从左侧移动 50 像素，从顶端移动 100 像素。
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
transform: rotate(30deg);
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数.
transform: scale(2,4);
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数.
transform: skew(30deg,20deg);
matrix() 方法把所有 2D 转换方法组合在一起。需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
-
3D 转换
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
transform: rotateX(120deg);
transform: rotateY(130deg);
- 过渡
从一种样式逐渐改变为另一种的效果。
应用于宽度属性的过渡效果。
div
{
width:px;
height:px;
background:yellow;
transition:width s;
-moz-transition:width s; /* Firefox 4 */
-webkit-transition:width s; /* Safari and Chrome */
-o-transition:width s; /* Opera */
}
div:hover
{
width:px;
}
- 动画
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
div
{
width:px;
height:px;
background:red;
animation:myfirst s;
-moz-animation:myfirst s; /* Firefox */
-webkit-animation:myfirst s; /* Safari and Chrome */
-o-animation:myfirst s; /* Opera */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
animation属性是一个简写属性，用于设置六个动画属性：
animation-name规定需要绑定到选择器的 keyframe 名称
animation-duration规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画
- 多列
column-count 属性规定元素应该被分隔的列数。
column-count:3;
column-gap 属性规定列之间的间隔。
column-gap:40px;
column-rule 属性设置列之间的宽度、样式和颜色规则。
column-rule:3px outset #ff0000;
-
用户界面
resize 属性规定是否可由用户调整元素尺寸。
resize:both;
box-sizing:border-box;
border:2px solid black; outline:2px solid red; outline-offset:15px;
![【CSS3】设置超链接样式超链接样式[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)