html5新手入门---来自于对www.w3cschool.com的总结。

在html5中对音频和视频的处理比以前更加简单。
<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
上面这段代码实现的事音频的播放。其中每一个src包含不同的音频格式。
在不同的浏览器上，浏览器只会播放自己认识的第一个音频。
controls提供播放音频的所有控件
----------------------------------------------------------
<video id="video1" width="420" style="margin-top:15px;">
    <source src="/example/html5/mov_bbb.mp4" type="video/mp4" />
    <source src="/example/html5/mov_bbb.ogg" type="video/ogg" />
    Your browser does not support HTML5 video.
  </video>
视频和音频的属性很多相似之处
----------------------------------------------------------
为了能够拖动，<img draggable="true" />draggable必须设置为true
这里的一个简单的范例为：
function allowDrop(ev)
{
ev.preventDefault();//?调用 preventDefault() 来避免浏览器对数据的默认处理
}

function drag(ev)//拖动
{
ev.dataTransfer.setData("Text",ev.target.id);
}
/在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")/
function drop(ev)//释放
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
//这里的两个事件：ondragstart=,ondragover=,这里为目的地，中间还有一个
//方法ondrop=,为准备释放。但是这种方式属于非精确的释放。
------------------------------------------------------------
画布canvas的用法
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
这里获取画布对象后，创建一个具有平面效果的context,可以通过自定义创建其图形的样式
fillStyle为填充样式，fillRect为矩形样式，rect=rectangle
在canvas中绘制直线：
cxt.moveto,开始，从cxt.lineto进行绘制，以cxt.stroke结束，这三个方法都需要加带坐标位置
cxt.fillStyle="#FF0000";
cxt.beginPath();//绘制开始
cxt.arc(70,18,15,0,Math.PI*2,true);//这个表示从70，18的坐标开始，半径为15，从0开始绘制一直到math.pi*2,true表示持续绘制
cxt.closePath();//绘制介绍
cxt.fill();//填充
这个产生的是一个圆：
--------------------------------------------------------------
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
画布上的渐变效果，Linear为一个方向的渐变，这里表示一个渐变区域
addColorStop表示从第一个结点开始的颜色，1表示第一段渐变终点，个人推算，如果有一个2，那么产生第二段渐变区域
------------------------------------------------------------------
svg可伸缩矢量图形，

_-----------------------------------------------------------------
在html5中<input type="number" name="points" min="0" max="10" step="3" value="6" />
可以直接进行输入验证，但书局限于数字step表示跳跃的数目。这里要求为3的倍数为合法数字
这里类型type="number"也说明只能输入数字
如果type="email"那么他只接受符合规则的邮箱在这里设置autoComplete="off"就是当出现问题时，这里自动关闭
type="range"表示获取某一个范围内的数据，并且其增长的数量可以通过上下左右键处理
type="file" multiple="multiple"表示可以选择多文件
type="search" 他有一个属性是placeholder=""
type="text"他有一个属性是
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
 <option label="W3School" value="http://www.w3school.com.cn" />
 <option label="Google" value="http://www.google.com" />
 <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
这样主要实现同步操作
autofocus主要做的是进行焦点定位，这一步的主要价值在于提示用户接下来要进行的操作
--------------------------------------------------------------------
在html5种可以强制要求不进行表单验证：form有一个熟悉为novalidate，就是不需要验证的意思