整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
念：
HTML5 是HTML、XHTML 以及 HTML DOM 的新标准（推荐标准）。
语法：
根据HTML5设计化繁为简的准则，文档类型和字符说明都进行了简化：
<!DOCTYPE html> <meta charset='UTF-8'> .......
HTML5元素
HTML5定义了一组新的语义化标记来描述元素的内容。
header 标记头部区域的内容。 footer 标记脚部区域的内容 section 页面中的一块区域 article 独立的文章内容 aside 相关内容或者引文 nav 导航类 video：定义视频，比如 电影片段或其他视频流 <video src='movie.ogg' controls='controls'>video元素</video> audio：定义音频，比如音乐或其他音频流 <audio src='audio.wav'>audio元素</audio> ...........
HTML5其他功能
HTML5引入了一种用于用于查找页面DOM元素的selectors API。
document.querySelector("#demo")--->返回文档中匹配指定 CSS 选择器的第一个元素。
document.querySelectorAll("#demo")--->返回文档中匹配指定 CSS 选择器的所有元素。
html5文档结构代码
html5 有什么神奇？ 就是进化的一套标准。
我是不是整理的都好初级，不过整理即巩固加回忆，只要是好好学习，那么时间就不是浪费，那么道路就一定是正确的！！加油啊 小果冻de迈阿密！！
我们学习了 HTML 提供的原生拖放(drag & drop)后,是时候想一想这个东西可以用来作什么，可以在什么时候使用，使用的场景等等
场景分析
当我们在注册成功一个账户时，一般网站会让我们上传我们的用户头像，或者在实名认证的时候会涉及到身份证图片上传到等，这时候我们可以使用input提供的file属性进行选择本地文件进行上传。
我们再想一下，当在电脑端的情况下，当用户打开文件选择框时再寻找图片对应的文件夹，再进行选取文件的时候是不是会有点麻烦呢？我们可不可以让用户找到图片文件，直接引入实现上传呢？答案是可以的。
怎么做
经过这些分析后，我们可以尝试使用 HTML5 提供的拖拽，使得目标元素增加读取文件功能，然后使用 ajax 实现图片上传。
谈一谈我们需要使用到的技术:
HTML5 拖拽事件
关于 Drag & Drop 拖拽事件，之前我写过一篇专门介绍的文章，HTML5-拖拽,大家有兴趣的话可以点击链接查看，我在这里就不在多啰嗦了~下面直接出拖拽上传的简要代码示例
var oDragWrap = document.body;
//拖进
oDragWrap.addEventListener(
"dragenter",
function(e) {
e.preventDefault();
},
false
);
//拖离
oDragWrap.addEventListener(
"dragleave",
function(e) {
dragleaveHandler(e);
},
false
);
//拖来拖去 , 一定要注意dragover事件一定要清除默认事件
//不然会无法触发后面的drop事件
oDragWrap.addEventListener(
"dragover",
function(e) {
e.preventDefault();
},
false
);
//扔
oDragWrap.addEventListener(
"drop",
function(e) {
dropHandler(e);
},
false
);
var dropHandler = function(e) {
//将本地图片拖拽到页面中后要进行的处理都在这
};
获取文件数据 HTML5 File API
File API 中的 FileReader 接口，作为 File API 的一部分，FileReader 专门用来读取文件。我们在这里主要介绍一些 File API 中的 FileList 接口，它主要通过两个途径获取本地文件列表，一是<input type="file"/>的表单形式，另一种则是e.dataTransfer.files拖拽事件传递的文件信息。
var fileList = e.dataTransfer.files;
使用 files 方法将会获取到拖拽文件的数组形式的数据，每个文件占用一个数组的索引，如果索引不存在文件数据，将返回 Null。可以通过length属性获取文件的数量。
var fileNum = fileList.length;
拖拽上传需要注意的是需要判断两个条件
// 检测是否是拖拽文件到页面的操作
if (fileList.length === 0) {
return;
}
// 检测文件是不是图片
if (fileList[0].type.indexOf("image") === -1) {
return;
}
下面我们看看结合之前的拖拽事件，来实现拖拽图片并在页面中预览
var dropHandler = function(e) {
e.preventDefault(); //获取文件列表
var fileList = e.dataTransfer.files;
//检测是否是拖拽文件到页面的操作
if (fileList.length == 0) {
return;
}
//检测文件是不是图片
if (fileList[0].type.indexOf("image") === -1) {
return;
}
//实例化file reader对象
var reader = new FileReader();
var img = document.createElement("img");
reader.onload = function(e) {
img.src = this.result;
oDragWrap.appendChild(img);
};
reader.readAsDataURL(fileList[0]);
};
当完成以上操作后，相信你可以成功的完成了拖拽图片预览的操作。当你查看 img 标签时会发现，img的src属性是一个超长的文件二进制数据，当你需要很多这种的img元素时，建议将展示区域脱离文档流，让其绝对定位减少页面的 reflow
AJAX 上传图片
既然已经获取到拖拽到web页面中的图片数据了，下一步就是将其发送到服务器端。
总结
video 元素的三种视频格式：
video 元素的属性：
video 元素的方法：
audio元素的三种音频格式：
audio元素的属性：
audio元素的方法：
什么是 Canvas？
<canvas id="myCanvas" width="200" height="100"></canvas>
Canvas在HTML5 中的新属性有：
getElementById()：可返回对拥有指定 ID 的第一个对象的引用；
getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；
beginPath()：开始一条路径，或重置当前的路径；
moveTo()：把路径移动到画布中的指定点，不创建线条。
lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；
closePath()：创建从当前点到开始点的路径；
strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；
stroke()：会实际地绘制出路径；
fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；
fill()：填充当前的图像（路径），默认颜色是黑色；
//空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();
//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();
演示图
图1
arc()：创建弧或曲线（用于创建圆或部分圆）；
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas")
var ctx=can.getContext("2d"); //创建context对象
ctx.beginPath();//标志开始一个路径
ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
ctx.stroke()
</script>
演示图
图2
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.fillStyle="#deffff";
ctx.fill();
ctx.strokeStyle="red"
ctx.stroke();
</script>
演示图
图3
strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas"); //获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
ctx.strokeStyle="blue"; //设置线条颜色
ctx.strokeRect(100,100,100,100); //线条画矩形
</script>
演示图
图4
fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d'); //获得笔刷
ctx.strokeStyle="blue"; //设置线条颜色
ctx.fillStyle="#ddedee"; //填充矩形
ctx.fillRect(100,100,100,100);
ctx.strokeRect(100,100,100,100);//线条画矩形
</script>
演示图
图5
*请认真填写需求信息，我们会在24小时内与您取得联系。
