整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
段时间参加了新媒体排行榜和MAKA 联合做的一个活动，有幸获赠据说价值6万的MAKA 旗舰版一套，也因此有了第一个自己制作的 HTML5页面。
记得之前也曾经用一些HTML5制作工具，但是因为相对较为复杂的操作和没有合适的模板而放弃了，对于设计小白如我来说，能够在既定的模板上进行修改已经是极限了。
试用 MAKA 之后，感觉操作比较简单，而且模板库比较丰富，或许是机缘巧合，刚好有一个模板特别适合我之前写的文章——《2014过去了，我们很怀念它》。
作为旗舰版用户，除了基本的功能之外，还可以享受独立服务器、更多免费模板、素材和动态特效模板。不过，我最喜欢的，是 MAKA 提供的专属尾页。
所谓专属尾页，有点像是之前在 WordPress 写独立博客时候时的相关文章插件，可以在页尾以图文的形式展示你过去的一些精彩文章。
这样做的好处显而易见，如果你制作的 HTML5页面借助微信朋友圈得到广泛的传播，那么用户就可以直接通过这些链接进去阅读和关注你的公众号。
讨厌 FLASH 的乔布斯在某种程度上普及了HTML5技术，Facebook押注HTML5上，却受到不小的打击，导致在后来一段时间里，唱衰HTML5的言论成为媒体的一种幸灾乐祸的态度，人人避而不谈。
然而，微信通过公众号的形式，以游戏、营销重新焕发出HTML5的青春，而MAKA 等第三方 HTML5制作工具又让普通用户制作 HTML5页面变得简便。尽管现在我们还不知道HTML5应用将来是否真的能够完全替代原生APP，但， 至少，它给我们带来了更方便更精彩的选择。
望月是 WeMedia 联盟成员，阅读原文是我制作的第一个 HTML5页面，献给这些年，我们一起度过的时光。
者：明明如月
审校：蓝色漂流瓶
本文为你提供一篇HTML5基本布局模板示例。你可以直接拷贝，粘贴到你的HTML文件中并对其进行修改。
好，说实话，这个本是为我自己准备的html5布局模板，但是你可以拿来用。
虽然本文比较简单（喷子止步），但是还是一个不错的模板，可以存起来，或者参考一下人家的结构。
代码如下：
图片格式
图片格式
英文源：http://www.codeshare.co.uk/blog/basic-html5-template-layout-example/
在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称，但是当包含一个 file-upload 元素的表单被提交的时候，浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
当用户选择或编辑一个文件名，file-upload 元素触发 onchange 事件句柄。
看个简单例子：
[html]view plaincopy
<!--?oscar999??-->??<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????<script>????function??handleFiles(files)????{??????if(files.length)??????{?????????var?file?=?files[0];?????????var?reader?=?new?FileReader();?????????reader.onload?=?function()?????????{?????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????};?????????reader.readAsText(file);??????}????}????</script>????</head>????<body>????<input?type="file"?id="file"?onchange="handleFiles(this.files)"/>????<div?id="filecontent"></div>????</body>??</html>??这里读取一个文件， 显示在div 中。
(在IE8 中 无效， this.files 无法读取文件。这个属于HTML5 的特性)
当选择了一个文件时，就会把包含这个文件的列表（一个FileList对象）作为参数传给handleFiles()函数了。这个FileList对象类似一个数组，可以知道文件的数目，而它的元素就是File对象了。从这个File对象可以获取name、size、lastModifiedDate和type等属性。把这个File对象传给FileReader对象的读取方法，就能读取文件了。
Html5 支持的File 的操作不仅仅是文件的选择，
在HTML5 之前需要使用 Applet 和 SilverLight 才能达到的文件拖拽功能，在HTML5 中也能轻松的实现，
看代码：
[html]view plaincopy
<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??<html>????<head>????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8">????<meta?name="author"?content="oscar999">????<title></title>????</head>????<body>??????<div?id="dropbox">?Drop?Here?</div>??????<div?id="filecontent"></div>??????<script>????????var?dropbox?=?document.getElementById("dropbox");??????????dropbox.addEventListener("dragenter",?dragenter,?false);??????????dropbox.addEventListener("dragover",?dragover,?false);??????????dropbox.addEventListener("drop",?drop,?false);?????????function?dragenter(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}????????function?dragover(e)?{????????????e.stopPropagation();????????????e.preventDefault();????????}??????function?drop(e)?{????????????e.stopPropagation();????????????e.preventDefault();?????????????var?dt?=?e.dataTransfer;????????????var?files?=?dt.files;??????????if(files.length)??????????{?????????????var?file?=?files[0];?????????????var?reader?=?new?FileReader();?????????????reader.onload?=?function()?????????????{?????????????????document.getElementById("filecontent").innerHTML?=?this.result;?????????????};?????????????reader.readAsText(file);??????????}??????}???????</script>????</body>??</html>??这里通过事件对象的 dataTransfer 可以得到文件。
在第一个例子中， 我们使用 FileReader类来读取文件的内容，
在 W3C 草案中，File 对象只包含文件名，文件类型等只读属性;FileReader用于内容读取和监控读取状态。
（在firefox 中， 可以直接使用 var fileBinary=file.getAsBinary(); 读取文件的二进制源码）
FileReader提供的方法包括：
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下，举一个 使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。
[html]view plaincopy
function?handleFiles(files){??????for?(var?i?=?0;?i?<?files.length;?i++)?{??????????var?file?=?files[i];??????????var?imageType?=?/image.*/;??????????if?(!file.type.match(imageType))?{??????????????continue;??????????}??????????var?img?=?document.createElement("img");??????????img.classList.add("obj");??????????img.file?=?file;??????????preview.appendChild(img);??????????var?reader?=?new?FileReader();??????????reader.onload?=?(function(aImg){??????????????return?function(e){??????????????????aImg.src?=?e.target.result;??????????????};??????????})(img);??????????reader.readAsDataURL(file);??????}??}??在一般的HTML 中，使用方式是把file input 放在form 中， 以POST 方式把文件传递到后端。
在 HTML5 中， 也可以通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码，然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。
[javascript]view plaincopy
var?xhr?=?new?XMLHttpRequest();??xhr.open("POST",?"url");??xhr.overrideMimeType('text/plain;?charset=x-user-defined-binary');??<pre?code_snippet_id="422893"?snippet_file_name="blog_20140709_4_2106578"?class="sh_javascript?sh_sourceCode"?name="code">xhr<span?class="sh_symbol">.</span><span?class="sh_function">sendAsBinary</span><span?class="sh_symbol">(</span>binaryString<span?class="sh_symbol">);</span></pre><br> ?*请认真填写需求信息，我们会在24小时内与您取得联系。
