整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
段時間參加了新媒體排行榜和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小時內與您取得聯系。
