html5有哪些優(yōu)點(diǎn)和缺點(diǎn)

優(yōu)點(diǎn)：a、網(wǎng)絡(luò)標(biāo)準(zhǔn)統(tǒng)一、HTML5本身是由W3C推薦出來(lái)的。

b、多設(shè)備、跨平臺(tái)

c、即時(shí)更新，提高可用性和改進(jìn)用戶(hù)的友好體驗(yàn)；

d、有幾個(gè)新的標(biāo)簽，這將有助于開(kāi)發(fā)人員定義重要的內(nèi)容；

e、可以給站點(diǎn)帶來(lái)更多的多媒體元素(視頻和音頻)，可以很好的替代Flash和Silverlight；

f、涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；

缺點(diǎn)： a、安全：像之前Firefox4的web socket和透明代理的實(shí)現(xiàn)存在嚴(yán)重的安全問(wèn)題，同時(shí)web storage、web socket 這樣的功能很容易被黑客利用，來(lái)盜取用戶(hù)的信息和資料。

b、完善性：許多特性各瀏覽器的支持程度也不一樣。

c、技術(shù)門(mén)檻: html5簡(jiǎn)化開(kāi)發(fā)者工作的同時(shí)代表了有許多新的屬性和API需要開(kāi)發(fā)者學(xué)習(xí),想web worker、web socket、web storage等新特性要求對(duì)于后臺(tái)的技術(shù)需要有一定的了解,甚至需要深入了解其后面原理和邏輯,而canvas要求視覺(jué)和圖像算法的一些知識(shí),傳統(tǒng)的前端開(kāi)發(fā)者需要掌握更多算法、視覺(jué)、 后臺(tái)甚至瀏覽器原理的知識(shí),機(jī)遇的同時(shí)也是巨大的挑戰(zhàn)

d、性能：某些平臺(tái)上的引擎問(wèn)題導(dǎo)致html5性能低下,同時(shí)在不加入GPU（圖形處理器）加速的情況下,html5處理復(fù)雜音視頻, 動(dòng)畫(huà)的性能不盡如人意。

e、瀏覽器兼容性：最大缺點(diǎn)，IE9以下瀏覽器幾乎全軍覆沒(méi)。

html5 先進(jìn)先出算法的實(shí)現(xiàn)

script?type="text/javascript"

?var?d="232152453252";

?var?c=3;

?function?FIFO?(d,c)?{

?

?var?b=0;//缺頁(yè)次數(shù)

?var?m=new?Array(c);

?var?x;

?while(d){

?i=d.substring(0,1);

?d=d.substring(1);

?l=false;

?out:

?for(j=0;jm.length;j++){

?l=true;

?if(i==m[j]){

?l=false;

?break?out;

?console.log(j);

?}

?}

?if(l){

?m.push(i);

?m.shift();

?b++;

?}

?

?console.log(i,m);

?}

?console.log(b);

?}

FIFO(d,c);

/script

如何實(shí)現(xiàn)HTML5文件斷點(diǎn)續(xù)傳

實(shí)現(xiàn)HTML5文件斷點(diǎn)續(xù)傳

一、實(shí)現(xiàn)文件多選

HTML5的input新增了"multiple"屬性，該屬性可接受多個(gè)值的文件上傳字段

input type="file" multiple="multiple" name="file" id="file"

添加了該屬性用戶(hù)就可以在彈出的對(duì)話框中一次性選擇多個(gè)文件了

二、實(shí)現(xiàn)文件從計(jì)算機(jī)拖拽到網(wǎng)頁(yè)以及添加文件隊(duì)列功能

這里我們用 dragover 和 drop 兩個(gè)事件來(lái)管理文件拖拽的功能

其中 dragover 用來(lái)處理在指定的元素上移動(dòng)時(shí)的事件，這里我們通過(guò)給body綁定dragover時(shí)間來(lái)處理頁(yè)面中拖動(dòng)文件的事件

document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

用 drop 事件來(lái)處理鼠標(biāo)松開(kāi)時(shí)候的事件，此時(shí)應(yīng)該將用戶(hù)拖動(dòng)過(guò)來(lái)的文件加入到上傳隊(duì)列中，以供后續(xù)的處理

document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

// dataTransfer.files屬性可以獲取到所有拖動(dòng)選擇的文件，通過(guò)遍歷可以讀取到所有文件的信息。

// 遍歷每個(gè)文件可以獲取到文件的 name、size、type、lastModifiedDate等關(guān)鍵信息

var files = evt.dataTransfer.files;

// addfile 方法 用來(lái)添加上傳文件隊(duì)列，在input的change事件中也需要調(diào)用

// 該方法首先檢查有無(wú)文件正在上傳中，如果有就將后續(xù)加入的文件放到上傳隊(duì)列中，如果沒(méi)有文件正在上傳就直接執(zhí)行上傳命令

addfile(files);

}

三、文件續(xù)傳原理

目前比較常用的斷點(diǎn)續(xù)傳的方法有兩種，一種是通過(guò)websocket接口進(jìn)行文件上傳，另一種是通過(guò)ajax，兩種方法各有千秋，雖然websocket聽(tīng)起來(lái)比較高端些~ 但是除了用了不同的協(xié)議外其他的算法基本上都是很相似的，并且服務(wù)端要開(kāi)啟ws接口，這里用相對(duì)方便的ajax來(lái)說(shuō)明斷點(diǎn)上傳的思路。

說(shuō)來(lái)說(shuō)去，斷點(diǎn)續(xù)傳最核心的內(nèi)容就是把文件“切片”然后再一片一片的傳給服務(wù)器，但是這看似簡(jiǎn)單的上傳過(guò)程卻有著無(wú)數(shù)的坑。

首先是文件的識(shí)別，一個(gè)文件被分成了若干份之后如何告訴服務(wù)器你切了多少塊，以及最終服務(wù)器應(yīng)該如何把你上傳上去的文件進(jìn)行合并，這都是要考慮的。

因此在文件開(kāi)始上傳之前，我們和服務(wù)器要有一個(gè)“握手”的過(guò)程，告訴服務(wù)器文件信息，然后和服務(wù)器約定切片的大小，當(dāng)和服務(wù)器達(dá)成共識(shí)之后就可以開(kāi)始后續(xù)的文件傳輸了。

前臺(tái)要把每一塊的文件傳給后臺(tái)，成功之后前端和后端都要標(biāo)識(shí)一下，以便后續(xù)的斷點(diǎn)。

當(dāng)文件傳輸中斷之后用戶(hù)再次選擇文件就可以通過(guò)標(biāo)識(shí)來(lái)判斷文件是否已經(jīng)上傳了一部分，如果是的話，那么我們可以接著上次的進(jìn)度繼續(xù)傳文件，以達(dá)到續(xù)傳的功能。

四、文件的前端切片

有了HTML5 的 File api之后切割文件比想想的要簡(jiǎn)單的多的多。

只要用slice 方法就可以了

var packet = file.slice(start, end);

參數(shù)start是開(kāi)始切片的位置，end是切片結(jié)束的位置 單位都是字節(jié)。通過(guò)控制start和end 就可以是實(shí)現(xiàn)文件的分塊

如

file.slice(0,1000);

file.slice(1000,2000);

file.slice(2000,3000);

// ......

五、文件片段的上傳

上一部我們通過(guò)slice方法把文件分成了若干塊，接下來(lái)要做的事情就是把這些碎片傳到服務(wù)器上。

這里我們用ajax的post請(qǐng)求來(lái)實(shí)現(xiàn)

textpop-up

var xhr = new XMLHttpRequest();

var url = xxx // 文件上傳的地址 可以包括文件的參數(shù) 如文件名稱(chēng) 分塊數(shù)等以便后臺(tái)處理

xhr.open('POST', url, true);

xhr.onload = function (e){

// 判斷文件是否上傳成功，如果成功繼續(xù)上傳下一塊，如果失敗重試該快

}

xhr.upload.onprogress = function(e){

// 選用 如果文件分塊大小較大 可以通過(guò)該方法判斷單片文件具體的上傳進(jìn)度

// e.loaded 該片文件上傳了多少

// e.totalSize 該片文件的總共大小

}

xhr.send(packet);

HTML5開(kāi)發(fā)需要學(xué)習(xí)哪些內(nèi)容

關(guān)于Web前端學(xué)習(xí)的必經(jīng)階段。正在從事Web前端學(xué)習(xí)的小伙伴們來(lái)和小伙伴們一起看一看吧。希望能夠?qū)Υ蠹矣兴鶐椭?/p>

第一階段：

● HTML+CSS:

HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開(kāi)發(fā)、

● JavaScript基礎(chǔ)：

Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見(jiàn)DOM樹(shù)操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。

● JS基本特效：

常見(jiàn)特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。

● JS高級(jí)特征：

正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、

● JQuery：基礎(chǔ)使用

懸著器、DOM操作、特效和動(dòng)畫(huà)、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：HTML5和移動(dòng)Web開(kāi)發(fā)

● HTML5：

HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲(chǔ)、SVG、Web Socket、Canvas.

● CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動(dòng)畫(huà)、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。

● Bootstrap:

響應(yīng)式概念、媒體查詢(xún)、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。

● 移動(dòng)Web開(kāi)發(fā)：

跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見(jiàn)JS效果制作、Zepto.js、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。

第三階段：HTTP服務(wù)和AJAX編程

● WEB服務(wù)器基礎(chǔ)：

服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。

● PHP基礎(chǔ)：

PHP基礎(chǔ)語(yǔ)法、使用PHP處理簡(jiǎn)單的GET或者POST請(qǐng)求、

● AJAX上篇：

Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問(wèn)題、XML介紹和使用。

● AJAX下篇：

JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)瀑布流案例額。

第四階段：面向?qū)ο筮M(jìn)階

● 面向?qū)ο蠼K極篇：

從內(nèi)存角度到理解JS面向?qū)ο?、基本?lèi)型、復(fù)雜類(lèi)型、原型鏈、ES6中的面向?qū)ο?、屬性讀寫(xiě)權(quán)限、設(shè)置器、訪問(wèn)器。

● 面向?qū)ο笕筇卣鳎?/p>

繼承性、多態(tài)性、封裝性、接口。

● 設(shè)計(jì)模式：

面向?qū)ο缶幊趟季S、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段：封裝一個(gè)屬于自己的框架

● 框架封裝基礎(chǔ)：

事件流、冒泡、捕獲、事件對(duì)象、事件框架、選擇框架。

● 框架封裝中級(jí)：

運(yùn)動(dòng)原理、單物體運(yùn)動(dòng)框架、多物體運(yùn)動(dòng)框架、運(yùn)動(dòng)框架面向?qū)ο蠓庋b。

● 框架封裝高級(jí)和補(bǔ)充：

JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。

第六階段：模塊化組件開(kāi)發(fā)

● 面向組件編程：

面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開(kāi)發(fā)網(wǎng)站應(yīng)用程序。

● 面向模塊編程：

AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：主流的流行框架

● Web開(kāi)發(fā)工作流：

GIT/SVN、Yeoman腳手架、NPM/Bower依賴(lài)管理工具、Grunt/Gulp/Webpack。

● MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

● 常用庫(kù)：

React.js、Vue.js、Zepto.js。

第八階段：HTML5原生移動(dòng)應(yīng)用開(kāi)發(fā)

● Cordova：

WebApp/NativeApp/HybirdApp簡(jiǎn)介、Cordova簡(jiǎn)介、與PhoneGap之間的關(guān)系、開(kāi)發(fā)環(huán)境搭建、Cordova實(shí)戰(zhàn)(創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布)。

● Ionic：

Ionic簡(jiǎn)介和同類(lèi)對(duì)比、模板項(xiàng)目解析、常見(jiàn)組件及使用、結(jié)合Angular構(gòu)建APP、常見(jiàn)效果(下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項(xiàng)卡)。

● React Native：

React Native簡(jiǎn)介、React Native環(huán)境配置、創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。

● HTML5+：

HTML5+中國(guó)產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開(kāi)發(fā)工具、MUI框架、H5+開(kāi)發(fā)和部署。

第九階段： Node.js全棧開(kāi)發(fā)

● 快速入門(mén)：

Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺(tái)程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開(kāi)發(fā)流程，調(diào)試，測(cè)試。

● 核心模塊和對(duì)象：

全局對(duì)象global，process，console，util、事件驅(qū)動(dòng)，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶(hù)端、Socket.IO。

● Web開(kāi)發(fā)基礎(chǔ)：

HTTP協(xié)議，請(qǐng)求響應(yīng)處理過(guò)程、關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、非關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、原生的Node.js開(kāi)發(fā)Web應(yīng)用程序、Web開(kāi)發(fā)工作流、Node.js開(kāi)發(fā)Blog案例。

● 快速開(kāi)發(fā)框架：

Express簡(jiǎn)介+MVC簡(jiǎn)介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見(jiàn)MVC框架。

● Node.js開(kāi)發(fā)電子商務(wù)實(shí)戰(zhàn)：

需求與設(shè)計(jì)、賬戶(hù)模塊注冊(cè)登錄、會(huì)員中心模塊、前臺(tái)展示模塊、購(gòu)物車(chē)，訂單結(jié)算、在線客服即時(shí)通訊模塊。

html5好學(xué)嗎？

HTML5入門(mén)門(mén)檻低體現(xiàn)在HTML和CSS上，前者只是結(jié)構(gòu)標(biāo)簽，后者是樣式配置，入門(mén)是非常簡(jiǎn)單的只是需要一些時(shí)間。

HTML5相對(duì)于后臺(tái)和開(kāi)發(fā)而言比較簡(jiǎn)單。所見(jiàn)即所得，不需要太多的算法與邏輯。

HTML5的學(xué)習(xí)路線分享給你：

1、HTML5+CSS3+JQ的學(xué)習(xí)

真正的了解HTML5的新特性，CSS3的新屬性，我們換句話說(shuō)HTML5就是一個(gè)全新的JavaScript，就是我上面說(shuō)的，如果你JS學(xué)的不好，HTML5很難，本來(lái)他們就是配合在一起的東西，JQ是JS的框架，相對(duì)不是很難，但是學(xué)習(xí)方法很重要。

2、HTML+CSS+JS

在第一階段中，我們要學(xué)習(xí)最基礎(chǔ)的靜態(tài)布局，HTML+CSS很好搞定，這里特別提出一定要下功夫攻破JS，因?yàn)镴S是最難的，也是前端開(kāi)發(fā)者的工資標(biāo)準(zhǔn)，見(jiàn)過(guò)很多人學(xué)不懂JS，要跟著大量的案例進(jìn)行學(xué)習(xí)，學(xué)習(xí)方法也是非常的重要。

3、前端的一些主流框架的學(xué)習(xí)

現(xiàn)在公司都是必須用框架的，這些我們必須要掌握，但是有些框架的難度還是很大的，因?yàn)槎几鶭S有關(guān)系，這個(gè)腳本語(yǔ)言，基本會(huì)伴隨我們前端開(kāi)發(fā)者的一生，只要你還在做前端，一定缺少不了前端的JS，說(shuō)白了我們做前端就是特效，就是需要JS，所以一定要學(xué)好JS，一個(gè)好的學(xué)習(xí)方法非常重要。

學(xué)html5是不是要看懂代碼？

學(xué)習(xí)html5是不需要任何基礎(chǔ)的，因?yàn)閔tml5屬于網(wǎng)頁(yè)前端語(yǔ)言，沒(méi)有算法，沒(méi)有邏輯性，學(xué)習(xí)起來(lái)非常簡(jiǎn)單，只要你對(duì)html5開(kāi)發(fā)感興趣，完全不用擔(dān)心基礎(chǔ)的問(wèn)題。建議，如果你在學(xué)習(xí)html5之前，最后先學(xué)習(xí)一下html4，因?yàn)閔tml5很多語(yǔ)法，以及標(biāo)簽與html4一樣，html5繼承了html4一些技術(shù)特點(diǎn)，所以，建議你先學(xué)習(xí)html4，然后在學(xué)習(xí)html5，這樣的學(xué)習(xí)效果會(huì)更加好。

最后，我想說(shuō)html5是完全可以自學(xué)的，網(wǎng)上的教程很多，文檔類(lèi)的、視頻類(lèi)的等等。