HTML5被看做是Web開(kāi)發(fā)者創(chuàng)建流行web應(yīng)用的利器,增加了對(duì)視頻和Canvas 2D的支持。用HTML5的優(yōu)點(diǎn)主要在于,這個(gè)技術(shù)可以進(jìn)行跨平臺(tái)的使用。比如你開(kāi)發(fā)了一款HTML5的游戲,你可以很輕易地移植到UC的開(kāi)放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái),甚至可以通過(guò)封裝的技術(shù)發(fā)放到App Store或Google Play上,所以它的跨平臺(tái)性非常強(qiáng)大,這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。今天,我將為大家推薦幾個(gè)主流的HTML5開(kāi)發(fā)工具。
10多年專注成都網(wǎng)站制作,企業(yè)網(wǎng)站制作,個(gè)人網(wǎng)站制作服務(wù),為大家分享網(wǎng)站制作知識(shí)、方案,網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁(yè)制作,對(duì)成都服務(wù)器租用等多個(gè)行業(yè),擁有豐富的網(wǎng)站推廣經(jīng)驗(yàn)。
1、Sublime Text
Sublime Text是一個(gè)跨平臺(tái)的代碼編輯器,同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng),也是HTML的文本編輯器。
Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能,主要功能包括:拼寫(xiě)檢查、書(shū)簽、完整的 Python API 、Goto 功能、即時(shí)項(xiàng)目切換、多選擇、多窗口等等。
2、Dreamweaver cc
Dreamweaver是集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)頁(yè)編輯器,擁有可視化編輯界面,支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫(xiě)和修改網(wǎng)頁(yè),初學(xué)HTML5的人可以無(wú)需編寫(xiě)任何代碼就能快速創(chuàng)建Web頁(yè)面。
3、Adobe Edge
Adobe Edge是一款新型網(wǎng)頁(yè)互動(dòng)工具,允許設(shè)計(jì)師通過(guò)HTML5、CSS和Java制作網(wǎng)頁(yè)動(dòng)畫(huà)。Edge的一個(gè)重要功能是Web工具包界面,方便確保頁(yè)面在不同瀏覽器中的架構(gòu)一致性。
4、WebStorm
WebStorm是一款Java開(kāi)發(fā)工具,WebStorm具有的優(yōu)勢(shì)是:智能的代碼補(bǔ)全、代碼格式化、html提示、聯(lián)想查詢、代碼重構(gòu)、代碼檢查和快速修復(fù)、代碼調(diào)試、代碼結(jié)構(gòu)瀏覽、代碼折疊、包裹或者去掉外圍代碼。
5、HBuilder
HBuilder,即Html Builder的縮寫(xiě),Builder是建造者的意思。HBuilder是一個(gè)極客工具,追求無(wú)鼠標(biāo)的極速操作,不管是敲代碼的快捷設(shè)定,還是操作功能的快捷設(shè)定,都融入了效率第一的設(shè)計(jì)思想。
6、visual studio code
一個(gè)運(yùn)行于Mac OS X、Windows和 Linux 之上的,針對(duì)于編寫(xiě)現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器。該編輯器也集成了所有一款現(xiàn)代編輯器所應(yīng)該具備的特性,包括語(yǔ)法高亮,可定制的熱鍵綁定,括號(hào)匹配以及代碼片段收集。
7. DevExtreme
DevExtreme Complete Subion是性能比較好的的HTML5、CSS和Java移動(dòng)開(kāi)發(fā)框架,可以直接在Visual Studio集成開(kāi)發(fā)環(huán)境,構(gòu)建iOS、Android、Tizen和Windows Phone 8應(yīng)用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個(gè)原生UI組件,并且提供源代碼。目前,DevExtreme支持VS2010/2012/2013集成開(kāi)發(fā)環(huán)境,兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動(dòng)平臺(tái),是Visual Studio開(kāi)發(fā)人員開(kāi)發(fā)跨平臺(tái)移動(dòng)產(chǎn)品的首選工具。
8. Sencha Architect
在開(kāi)發(fā)移動(dòng)和桌面應(yīng)用的工具中,Sencha的定位是HTML5可視化應(yīng)用開(kāi)發(fā)。開(kāi)發(fā)團(tuán)隊(duì)可以在一個(gè)單一集成的環(huán)境中完成應(yīng)用的設(shè)計(jì)、開(kāi)發(fā)和部署。開(kāi)發(fā)者還可以開(kāi)發(fā)Sencha Touch2和Ext JS4 Java應(yīng)用,并實(shí)時(shí)預(yù)覽。
開(kāi)發(fā)工具的選擇,可以說(shuō)是開(kāi)發(fā)者社區(qū)中一個(gè)經(jīng)久不衰的話題,現(xiàn)今編輯器的數(shù)量數(shù)不勝數(shù),vim、sublime Text,Emacs,Atom等等,那么對(duì)于一個(gè)開(kāi)發(fā)者而言,挑選一個(gè)合適的編輯器是可以有效的提高編程效率;那么以上是我為大家推薦的幾款開(kāi)發(fā)工具啦,大家可根據(jù)自己的喜好選擇哦!
HTML的全稱是超文本標(biāo)記語(yǔ)言,是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽,可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式,將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。HTML是由HTML命令組成的描述性文本,可以解釋文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等。Html是一種用來(lái)描述網(wǎng)頁(yè)的語(yǔ)言。它被稱為超文本標(biāo)記語(yǔ)言,它是一種標(biāo)記語(yǔ)言。它包括一系列標(biāo)簽,可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式,將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。
很好用啊。下面列舉一下優(yōu)點(diǎn)吧:
第一大原因: 它是未來(lái),開(kāi)始用吧!
最大的原因今天你就開(kāi)始使用HTML5是因?yàn)樗俏磥?lái),不要掉隊(duì)了!HTML5不會(huì)往每個(gè)方向發(fā)展,但是更多的元素已經(jīng)被很多公司采用,并且開(kāi)始著手開(kāi)發(fā)。HTML5其實(shí)更像HTML,它不是一個(gè)新的技術(shù)需要你重新學(xué)習(xí)!如果你開(kāi)發(fā)XHTML strict的話你現(xiàn)在就已經(jīng)在開(kāi)發(fā)HTML5了。為什么不更完整的享受HTML5的功能呢?
你實(shí)際上沒(méi)有任何借口不接受HTML5。事實(shí)上我唯一一個(gè)原因使用HTML5是因?yàn)樗鼤?shū)寫(xiě)代碼簡(jiǎn)單清晰。其它的特性其實(shí)我也沒(méi)有真正使用。你可以考慮現(xiàn)在開(kāi)始使用HTML5書(shū)寫(xiě)代碼,它能幫助你改變書(shū)寫(xiě)代碼的方式及其設(shè)計(jì)方式。開(kāi)始用HTML5代碼編寫(xiě)web應(yīng)用吧,說(shuō)不定下一個(gè)移動(dòng)應(yīng)用或者游戲應(yīng)用就是用HTML5開(kāi)發(fā)的!
第二大原因: 移動(dòng),移動(dòng)還是移動(dòng)
你可以稱之為“直覺(jué)”,但是我認(rèn)為移動(dòng)技術(shù)將會(huì)變得更加的流行。我知道,這里有些非常瘋狂的猜測(cè),有些可能你也想到了– Mobile是一個(gè)時(shí)尚!移動(dòng)設(shè)備將占領(lǐng)世界。更多的接受移動(dòng)設(shè)備將會(huì)增長(zhǎng)的非常迅速。這意味著更多的用戶會(huì)選擇使用移動(dòng)設(shè)備訪問(wèn)網(wǎng)站或者web應(yīng)用。HTML5是最移動(dòng)化的開(kāi)發(fā)工具。隨著Adobe宣布放棄移動(dòng)flash開(kāi)發(fā),你將會(huì)考慮使用HTML5來(lái)開(kāi)發(fā)webp應(yīng)用。當(dāng)手機(jī)瀏覽器完全支持HTML5那么開(kāi)發(fā)移動(dòng)項(xiàng)目將會(huì)和設(shè)計(jì)更小的觸摸顯示一樣簡(jiǎn)單。這里有很多的meta標(biāo)簽允許你優(yōu)化移動(dòng):viewport: 允許你定義viewport寬度和縮放設(shè)置;全屏瀏覽器: ISO指定的數(shù)值允許Apple設(shè)備全屏模式顯示;Home screen icons: 就像桌面收藏,這些圖標(biāo)可以用來(lái)添加收藏到IOS和Android移動(dòng)設(shè)備的首頁(yè)。
第三大原因:遺留及其跨瀏覽器支持
你的現(xiàn)代流行瀏覽器都支持HTML5(Chrome,F(xiàn)irefox,Safari,IE9和Opera),并且創(chuàng)建了HTML5 doctype這樣所有的瀏覽器,即使非常老非常令人厭惡瀏覽器像IE6都可以使用。但是因?yàn)槔系臑g覽器能夠識(shí)別doctype并不意味它可以處理HTML5標(biāo)簽和功能。幸運(yùn)的是,HTML5已經(jīng)使得開(kāi)發(fā)更加簡(jiǎn)單了,更多支持更多瀏覽器,這樣老的IE瀏覽器可以通過(guò)添加javascript代碼來(lái)使用新的元素:
!--[iflt IE 9] script src=""/script![endif]--
第四大原因:游戲開(kāi)發(fā)
沒(méi)錯(cuò), 你可以使用HTML5的canvas開(kāi)發(fā)游戲。HTML5提供了一個(gè)非常偉大的,移動(dòng)友好的方式去開(kāi)發(fā)有趣互動(dòng)的游戲。如果你開(kāi)發(fā)Flash游戲,你就會(huì)喜歡上HTML5的游戲開(kāi)發(fā)。
Script-tutorials目前提供了4個(gè)不部分的HTML5游戲開(kāi)發(fā)教程,這里看看他們開(kāi)發(fā)的有趣游戲:
HTML5 Gaming Development Lesson One
HTML5 Gaming Development Lesson Two
HTML5 Gaming Development Lesson Three
HTML5 Gaming Development Lesson Four
第五大原因:更好的互動(dòng)
我們都喜歡更好的互動(dòng),我們都喜歡對(duì)于用戶有反饋的動(dòng)態(tài)網(wǎng)站,用戶可以享受互動(dòng)的過(guò)程。輸入canvas,HTML5的畫(huà)圖標(biāo)簽允許你做更多的互動(dòng)和動(dòng)畫(huà),就像我們使用Flash達(dá)到的效果。
除了canvas,HTML5同樣也擁有很多API允許你創(chuàng)建更加好的用戶體驗(yàn)并且更加動(dòng)態(tài)的web應(yīng)用程序。 這里有一個(gè)列表:
Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback
第六大原因:更聰明的存儲(chǔ)
HTML5中最酷的特性就是本地存儲(chǔ)。有一點(diǎn)像比較老的技術(shù)cookie和客戶端數(shù)據(jù)庫(kù)的融合。它比cooke更好用因?yàn)橹С侄鄠€(gè)windows存儲(chǔ),它擁有更好的安全和性能,即使瀏覽器關(guān)閉后也可以保存。
因?yàn)樗莻€(gè)客戶端的數(shù)據(jù)庫(kù),你不用擔(dān)心用戶刪除任何cookie,并且所有主流瀏覽器都支持。
本地存儲(chǔ)對(duì)于很多情況來(lái)說(shuō)都不錯(cuò),它是HTML5工具中一個(gè)不需要第三方插件實(shí)現(xiàn)的。能夠保存數(shù)據(jù)到用戶的瀏覽器中意味你可以簡(jiǎn)單的創(chuàng)建一些應(yīng)用特性例如:保存用戶信息,緩存數(shù)據(jù),加載用戶上一次的應(yīng)用狀態(tài)。
第七大原因:更清晰的代碼
如果你對(duì)于簡(jiǎn)答,優(yōu)雅,容易閱讀的代碼有所偏好的話,HTML5絕對(duì)是一個(gè)為你量身定做的東西。HTML5允許你寫(xiě)出簡(jiǎn)單清晰富于描述的代碼。符合語(yǔ)義學(xué)的代碼允許你分開(kāi)樣式和內(nèi)容。看看這個(gè)典型的簡(jiǎn)單擁有導(dǎo)航的heaer代碼:div id="header"h1Header Text/h1 div id="nav" ul liahref="#"Link/a/li liahref="#"Link/a/li liahref="#"Link/a/li /ul/div/div是不是很簡(jiǎn)單?但是使用HTML5后會(huì)使得代碼更加簡(jiǎn)單并且富有含義:header h1Header Text/h1 nav ul liahref="#"Link/a/li liahref="#"Link/a/li liahref="#"Link/a/li /ul/nav/header
使用HTML5你可以通過(guò)使用語(yǔ)義學(xué)的HTML header標(biāo)簽描述內(nèi)容來(lái)最后解決你的div及其class定義問(wèn)題。 以前你需要大量的使用div來(lái)定義每一個(gè)頁(yè)面內(nèi)容區(qū)域,但是使用新的section,article,header,footer,aside和nav標(biāo)簽,需要你讓你的代碼更加清晰易于閱讀。
第八大原因:Doctype
沒(méi)錯(cuò),就是doctype,沒(méi)有更多內(nèi)容了。是不是非常簡(jiǎn)答?不需要拷貝粘貼一堆無(wú)法理解的代碼,也沒(méi)有多余的head標(biāo)簽。最大的好消息在于,除了簡(jiǎn)單,它能在每一個(gè)瀏覽器中正常工作即使是名聲狼藉的IE6。
第九大原因:視頻和音頻支持
忘了flash和其它第三方應(yīng)用吧,讓你的視頻和音頻通過(guò)HTML5標(biāo)簽video和audio來(lái)訪問(wèn)資源。正確播放媒體一直都是一個(gè)非常可怕的事情,你需要使用embed和object標(biāo)簽,并且為了它們能正確播放必須賦予一大堆的參數(shù)。你的媒體標(biāo)簽將會(huì)非常復(fù)雜,大堆得令人迷惑的代碼。而且HTML5視頻和音頻標(biāo)簽基本將他們視為圖片:video src=”"/。但是其它參數(shù)例如寬度和高度或者自動(dòng)播放呢?不必?fù)?dān)心,只需要像其它HTML標(biāo)簽一樣定義:video src=”url”width=”640px” height=”380px” autoplay/。
實(shí)際上這個(gè)過(guò)程非常簡(jiǎn)單,然而我們的老瀏覽器可能并不喜歡我們的HTML5,你需要添加更多代碼來(lái)讓他們正確工作。但是這個(gè)代碼還是比embed和object來(lái)的簡(jiǎn)單的多。
第十大原因:易用性
倆個(gè)原因使得使用HTML5創(chuàng)建網(wǎng)站更加簡(jiǎn)單:語(yǔ)義上及其ARIA。新的HTML標(biāo)簽像header, footer,nav,section, aside等等,使得閱讀者更加容易去訪問(wèn)內(nèi)容。在以前,即使你定義了class或者ID你的閱讀者也沒(méi)有辦法去了解給出的一個(gè)div究竟是什么。使用新的語(yǔ)義學(xué)的定義標(biāo)簽,你可以更好的了解HTML文檔,并且創(chuàng)建一個(gè)更好的使用體驗(yàn)。
ARIA是一個(gè)W3C的標(biāo)準(zhǔn)主要用來(lái)對(duì)HTML文章中的元素指定“角色“,通過(guò)角色屬性來(lái)創(chuàng)建重要的頁(yè)面地形例如,header,footer,navigation或者aritcle很有必要。這一點(diǎn)曾經(jīng)被忽略掉了并且沒(méi)有被廣泛使用,因?yàn)槭聦?shí)上并不驗(yàn)證。然而,HTML5將會(huì)驗(yàn)證這樣屬性。同時(shí),HTML5將會(huì)內(nèi)建這些角色并且無(wú)法不覆蓋。
第一、【Google Web Toolkit】是現(xiàn)在大家還不熟悉的工具之一,主要用于開(kāi)發(fā)瀏覽器應(yīng)用的一個(gè)工具,不過(guò)庫(kù)中支持很多【HTML5】的功能,包括對(duì)客戶端,或者是web存儲(chǔ)的支持,都可以實(shí)現(xiàn)。
第二、還有一種是【JetBrains WebStorm】工具,需要?jiǎng)?chuàng)建HTML文檔時(shí)可獲得對(duì)【HTML5】文件的支持,現(xiàn)在的運(yùn)用很多,比如砍伐者鍵入,使用者可以在【chrome】瀏覽器中及時(shí)的預(yù)覽【HTML】的文檔很方便。
第三、微軟的【Visual Studio 2010 SP1】中提供了IntelliSense這個(gè)項(xiàng)目,也就是說(shuō)追加了針對(duì)【HTML5】的一些元素,總體使用起來(lái)還是比較好的,但是我們要結(jié)合【ddhu】的一些實(shí)用工具。
第四、【Dojo Foundation Maqetta】是一個(gè)不錯(cuò)的選擇,這款是工具是來(lái)自于【IBM】項(xiàng)目之一,【Dojo Foundation Maqetta】是為桌面和移動(dòng)設(shè)備開(kāi)發(fā)HTML5應(yīng)用的開(kāi)源工具,瀏覽器即可使用。
第五、當(dāng)然還有【Sencha Touch2】是移動(dòng)應(yīng)用框架的一種,可以當(dāng)做一個(gè)重要【Sencha】的HTML5平臺(tái),使用者可以用它開(kāi)發(fā)面向【iOS】進(jìn)行制作和使用,也可以【Android】和【Blackberry、Kindle Fire】使用。
第六、現(xiàn)在我們繼續(xù)介紹【Sencha】,這款工具的主要定位是【HTML5】的可視化開(kāi)發(fā)研究,一般來(lái)說(shuō)開(kāi)發(fā)團(tuán)隊(duì)可以在一個(gè)任務(wù),然后做一個(gè)集成的環(huán)境,然后在這個(gè)環(huán)境中完成應(yīng)用的設(shè)計(jì)和開(kāi)發(fā),以及需要的部署。
第七、我們來(lái)介紹一下【Adobe ColdFusion 】,這款工具主要是用來(lái)開(kāi)發(fā)企業(yè)【W(wǎng)eb】程序的一個(gè)技術(shù),通過(guò)【W(wǎng)ebsockets】和互動(dòng)表單以及視頻等來(lái)做出【HTML5】技術(shù),創(chuàng)建一種用戶體驗(yàn)。
第八、最后【Adobe Dreamweaver CS6】作為一個(gè)【W(wǎng)eb】端口的一種設(shè)計(jì)軟件,這款工具提供了對(duì)【HTML】網(wǎng)站和移動(dòng)程序的可視化編輯界面,整體來(lái)說(shuō)使用也是比較的方便。
網(wǎng)站標(biāo)題:html5軟件,html5用什么軟件
文章源于:http://www.chinadenli.net/article36/dscoesg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站建設(shè)、App設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、域名注冊(cè)、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)