前最具人氣的前端開(kāi)發(fā)技術(shù)框架是什么?移動(dòng)至上時(shí)代的來(lái)臨促使越來(lái)越多的開(kāi)發(fā)者利用HTML 5開(kāi)發(fā)移動(dòng)友好型網(wǎng)站。HTML 5的主要優(yōu)勢(shì)一直在不斷演進(jìn),旨在提供足以與原生技術(shù)相匹配的功能。從雷軍這樣的互聯(lián)網(wǎng)精英人士到菜場(chǎng)股市大媽都深信一點(diǎn):只要站在風(fēng)口,豬也能夠飛起來(lái),那么對(duì)于IT技能領(lǐng)域來(lái)講,2016年這只“豬”當(dāng)之無(wú)愧屬于HTML5開(kāi)發(fā)技術(shù),HTML5從根本上改變了開(kāi)發(fā)商開(kāi)發(fā)web應(yīng)用的方式,從桌面瀏覽器到移動(dòng)應(yīng)用,這種語(yǔ)言和標(biāo)準(zhǔn)都影響并將繼續(xù)影響各種操作平臺(tái)。憑借著面向開(kāi)發(fā)者與最終用戶的強(qiáng)大及新鮮功能,HTML 5已經(jīng)被世界各地網(wǎng)站所廣泛采用。HTML 5適用于所有現(xiàn)代桌面與移動(dòng)瀏覽器,亦可用于移動(dòng)Web應(yīng)用的開(kāi)發(fā)工作。
今天學(xué)院君帶你一圖流看懂HTML 5六大核心優(yōu)勢(shì)。
1.跨平臺(tái):
在多屏年代,開(kāi)發(fā)者的痛苦指數(shù)非常高,人人都期盼HTML5能扮演救星。多套代碼、不同技術(shù)工種、業(yè)務(wù)邏輯同步,這是折磨人的過(guò)程。有點(diǎn)類似個(gè)人電 腦早期世界,那個(gè)時(shí)候的每家電腦都有自己的操作系統(tǒng)和編程語(yǔ)言,開(kāi)發(fā)者疲于做不同版本,其實(shí)DOS的盛行也很大程度是因?yàn)殚_(kāi)發(fā)者實(shí)在沒(méi)精力給其他電腦寫程 序??缙脚_(tái)技術(shù)在早期大多因?yàn)樾阅軉?wèn)題夭折,但中后期硬件能力增強(qiáng)后又會(huì)占據(jù)主流,因?yàn)榭缙脚_(tái)確實(shí)是剛需。你的現(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)使用新的元素。
2.視頻和音頻支持
忘了flash和其它第三方應(yīng)用吧,讓你的視頻和音頻通過(guò)HTML5標(biāo)簽和來(lái)訪問(wèn)資源。正確播放媒體一直都是一個(gè)非常可怕的事情,原生開(kāi)發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩,需要拆分開(kāi)文字、圖片、音頻、視頻,解析對(duì)應(yīng)的URL并分別用不同的方式處理。HTML5在這個(gè)方面完全不受限制,可以完全放在一起進(jìn)行處理。設(shè)計(jì)師要知道,如果新聞?lì)?、微博類、社交類?yīng)用的信息呈現(xiàn)中實(shí)現(xiàn)文字與多媒體混排,而不用專門嵌入webview,將是一件多美好的事情,至少現(xiàn)在原生方式實(shí)現(xiàn)起來(lái)還有困難。在國(guó)外大型社區(qū)網(wǎng)站FACEBOOK、視頻分享網(wǎng)站YOUTUBE、谷歌和微軟等網(wǎng)站,都已經(jīng)使用html5作為默認(rèn)技術(shù),它的優(yōu)點(diǎn)就是省電,流暢和清晰,因?yàn)椴捎昧私y(tǒng)一的國(guó)際標(biāo)準(zhǔn)H.264,國(guó)內(nèi)已經(jīng)出現(xiàn)手機(jī)html5視頻網(wǎng)站。網(wǎng)內(nèi)大火的bilibili也開(kāi)始試水HTML 5播放器。
3. 游戲開(kāi)發(fā)
沒(méi)錯(cuò), 你可以使用HTML5的開(kāi)發(fā)游戲。HTML5提供了一個(gè)非常偉大的,移動(dòng)友好的方式去開(kāi)發(fā)有趣互動(dòng)的游戲。如果你開(kāi)發(fā)Flash游戲,你就會(huì)喜歡上HTML5的游戲開(kāi)發(fā)。手機(jī)頁(yè)游的3D化是大勢(shì)所趨,隨著硬件能力的提升、WebGL標(biāo)準(zhǔn)化的普以及手機(jī)頁(yè)游的逐漸成熟,大量開(kāi)發(fā)者需要?jiǎng)?chuàng)作更加精彩的3D內(nèi)容。白鷺研發(fā)的3D引擎,將助力手機(jī)頁(yè)游(HTML5游戲)產(chǎn)品形態(tài)從2D跨域到3D??梢灶A(yù)見(jiàn),今年手機(jī)頁(yè)游將出現(xiàn)高品質(zhì)的3D內(nèi)容。 隨著超級(jí)APP、瀏覽器等渠道流量的開(kāi)放,以及HTML5游戲品質(zhì)的提升,出現(xiàn)多款千萬(wàn)月流水的爆款已經(jīng)不是懸念。運(yùn)氣不錯(cuò)的話,有望出現(xiàn)1000萬(wàn)利潤(rùn)的產(chǎn)品。對(duì),利潤(rùn),不是流水。
4.網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)
HTML5是web應(yīng)用的未來(lái),不要掉隊(duì)了!HTML5 Web Storage API可以看做是加強(qiáng)版的cookie,不受數(shù)據(jù)大小限制,有更好的彈性以及架構(gòu),可以將數(shù)據(jù)寫入到本機(jī)的ROM中,還可以在關(guān)閉瀏覽器后再次打開(kāi)時(shí)恢復(fù)數(shù)據(jù),以減少網(wǎng)絡(luò)流量。同時(shí),這個(gè)功能算得上是另一個(gè)方向的后臺(tái)“操作記錄”,而不占用任何后臺(tái)資源,減輕設(shè)備硬件壓力,增加運(yùn)行流暢性。在線app支持邊使用邊下載離線緩存,或者不下載離線緩存;而離線app必須是下載完離線緩存才能使用。形象點(diǎn)說(shuō),cookie就是存了電話和菜單,想吃什么要叫外賣,等多長(zhǎng)時(shí)間才能吃到就得看交通情況了;離線緩存就是直接在冰箱里存了食物,想吃就能馬上吃到(當(dāng)然,想吃最新的食物同樣可以打電話預(yù)定)。設(shè)計(jì)師要知道,什么時(shí)候讓用戶下載離線緩存(注意在線和離線app的區(qū)別)。
除此之外值得一提的還有WebVR,WebVR就是通過(guò)HTML5將虛擬現(xiàn)實(shí)場(chǎng)景嵌入到網(wǎng)頁(yè),目前已受到谷歌、Facebook等巨頭的擁護(hù)。Web擴(kuò)展了VR的使用范圍,很多生活化的內(nèi)容納入了VR的創(chuàng)作之中,如實(shí)景旅游,新聞報(bào)道、虛擬購(gòu)物等,其內(nèi)容展示、交互都可以由HTML5引擎輕松創(chuàng)建出來(lái)。去年12月白鷺與暴風(fēng)魔鏡,合作成立國(guó)內(nèi)首個(gè)WebVR實(shí)驗(yàn)室,也是希望用HTML5來(lái)打造低成本、快捷、低門檻的VR游戲、影音體驗(yàn)。
5. 更好的互動(dòng)
我們都喜歡更好的互動(dòng),我們都喜歡對(duì)于用戶有反饋的網(wǎng)站,用戶可以享受互動(dòng)的過(guò)程。輸入,HTML5的畫(huà)圖標(biāo)簽允許你做更多的互動(dòng)和動(dòng)畫(huà),就像我們使用Flash達(dá)到的效果。
6.又見(jiàn)SEO
HTML5有著開(kāi)放的數(shù)據(jù)交換:HTML是以page為單元開(kāi)放代碼的,它無(wú)需專門開(kāi)發(fā)SDK,只要不混淆,就能與其他應(yīng)用交互數(shù)據(jù)。開(kāi)發(fā)者可以讓手機(jī)搜索引擎很容易檢索到自己的數(shù)據(jù), 也更容易通過(guò)跨應(yīng)用協(xié)作來(lái)滿足最終用戶需求。這意味著更容易推廣、更容易爆發(fā):導(dǎo)流入口多:HTML5應(yīng)用導(dǎo)流非常容易,超級(jí)App(如微信朋友圈)、搜索引擎、應(yīng)用市場(chǎng)、瀏覽器,到處都是HTML5的流量入口。而原生App的流量入口只有應(yīng)用市場(chǎng)。聰明的HTML5開(kāi)發(fā)者當(dāng)然會(huì)玩轉(zhuǎn)各種流量入口從而取得更強(qiáng)的優(yōu)勢(shì)。流量大也是一個(gè)重要的點(diǎn),前段時(shí)間微信朋友圈風(fēng)靡一時(shí)《神經(jīng)貓》,這個(gè)游戲如果放到Appstore,絕對(duì)沒(méi)有那么多流量,超級(jí)App帶來(lái)的流量,遠(yuǎn)大于原生應(yīng)用市場(chǎng)。假如微信允許游戲在桌面創(chuàng)建快捷方式、假如游戲后續(xù)升級(jí)解決持續(xù)娛樂(lè)問(wèn)題,未來(lái)不可想象。還值得一提的是導(dǎo)流效率高,除了入口多、流量大,導(dǎo)流效率高也不可忽視,誰(shuí)都知道:頁(yè)游和端游打同樣的廣告,廣告變用戶的轉(zhuǎn)化率,頁(yè)游遠(yuǎn)遠(yuǎn)高于端游。
吹了這么久的HTML 5,一個(gè)重要的問(wèn)題浮現(xiàn)了:你說(shuō)的我都懂,可是開(kāi)發(fā)HTML 5也不容易啊!說(shuō)到這里學(xué)院君必須給大家獻(xiàn)上今天的終極福利,那就是性能最優(yōu)的HTML5,CSS和JavaScript移動(dòng)、Web開(kāi)發(fā)框架,Visual Studio開(kāi)發(fā)人員開(kāi)發(fā)跨平臺(tái)產(chǎn)品的首選工具——DevExtreme。
選擇DevExtreme的四大理由:
1.簡(jiǎn)化移動(dòng)應(yīng)用開(kāi)發(fā)
運(yùn)用DevExtreme Complete Subscription創(chuàng)建高度響應(yīng)式的移動(dòng)應(yīng)用。運(yùn)用強(qiáng)大的HTML、CSS3和JavaScript交付實(shí)現(xiàn)一系列如本地應(yīng)用程序的商業(yè)解決方案,不用學(xué)習(xí)各種語(yǔ)言或框架,你只需要懂得HTML和JavaScript,就可以開(kāi)始進(jìn)行你的跨平臺(tái)開(kāi)發(fā)。
無(wú)論是iPad、iPhone、Android、Windows Phone還是Surface tablet,DevExtreme Complete Subscription可以交付實(shí)現(xiàn)。
支持Apache Cordova (PhoneGap)。這意味著用DevExtreme創(chuàng)建的每個(gè)移動(dòng)app都可以在目標(biāo)設(shè)備上運(yùn)行,并且可以隨時(shí)提交到Apple App Store 或 Google Play Store。
2.完美的數(shù)據(jù)可視化
DevExtreme Complete Subscription為智能手機(jī)和平板電腦封裝了易于使用的HTML JavaScript應(yīng)用程序,包含超過(guò)30種觸摸優(yōu)化的本地UI小工具,可用于任何應(yīng)用程序的單個(gè)頁(yè)面。主要包括以下數(shù)據(jù)可視化工具:
圖表和儀表:DevExtreme Complete Subscription包含高性能的線形圖、面積圖、柱狀圖和財(cái)務(wù)HTML5圖表工具。同時(shí)還有非常漂亮的圓形和線形HTML5儀表工具。
量程選擇器:HTML 5范圍和值的選擇器,帶有Google仿真圖表。
多功能小部件:一個(gè)完整的HTML5多功能小部件,你可以創(chuàng)建與目標(biāo)平臺(tái)最匹配的工具。
自適應(yīng)樣式:DevExtreme Complete Subscription應(yīng)用特定設(shè)備的樣式到所有組件,讓其看起來(lái)有一個(gè)本地外觀,且開(kāi)箱即用。
3.完美集成Visual Studio
DevExtreme Complete Subscription 已經(jīng)為Visual Studio做了一系列的優(yōu)化,熟悉VS的開(kāi)發(fā)人員可以立即著手開(kāi)始創(chuàng)建運(yùn)行于iOS, Android和交互式Web下的apps。
運(yùn)用Visual Studio的項(xiàng)目模板和向?qū)椭泷R上開(kāi)始。完整集成的View Designer和代碼窗口可以構(gòu)建理想的視圖,所有這一切都在Visual Studio中完成。
在Visual Studio內(nèi)使用內(nèi)置的設(shè)備模擬器,或者DXProxy和瀏覽器調(diào)試器調(diào)試你的移動(dòng)應(yīng)用。用DevExpress Courier App在PhoneGap環(huán)境下立即執(zhí)行應(yīng)用,交互一個(gè)本地的、可以立即上市的IOS和Android應(yīng)用包,而不受平臺(tái)SDK或額外服務(wù)器的限制。
4.一種語(yǔ)言、一個(gè)代碼庫(kù)搞定任何app
一個(gè)SDK:DevExtreme Complete Subscription只需通過(guò)一個(gè)SDK就可以交付到所有常用的平臺(tái)上,真正的代碼重用和省心的項(xiàng)目管理。
MVVM:支持Knockout.js,意味著Model View(基于UI開(kāi)發(fā)的ViewModel)將變得前所未有的簡(jiǎn)單。
jQuery:開(kāi)發(fā)者當(dāng)前所掌握的東西全部都可以利用起來(lái),不用擔(dān)心知識(shí)上的限制。
為了更美好的職業(yè)前景,為了升職加薪走上人生巔峰,還不投入慧都學(xué)院君的懷抱!
更多行業(yè)資訊,更新鮮的技術(shù)動(dòng)態(tài),盡在慧都學(xué)院。
TML 5 是最新的超文本標(biāo)記語(yǔ)言 (HTML),它是用于描述網(wǎng)頁(yè)內(nèi)容和外觀的標(biāo)準(zhǔn)編程語(yǔ)言。如今,所有主要瀏覽器(Chrome、Safari、Firefox、Opera 和 IE)都提供 HTML5 支持,這使其成為當(dāng)今使用的最新 HTML 技術(shù)。
下面列出了 HTML5 的一些驚人優(yōu)勢(shì):
1. 跨瀏覽器兼容性
HTML5 易于實(shí)現(xiàn),并且可以與 CSS3 一起使用。今天所有的瀏覽器都支持 HTML5 標(biāo)簽,甚至 IE6 也能理解標(biāo)記 <!doctype html> 并且會(huì)正確地呈現(xiàn)頁(yè)面。
2. 新的 DOCTYPE 聲明:
關(guān)于 HTML 5 最重要的事實(shí)是 - HTML5 易于實(shí)現(xiàn)并且可以與 CSS3 一起使用
HTML5 的 DOCTYPE 聲明非常簡(jiǎn)單:
<! DOCTYPE html>
是的,只有“DOCTYPE”和“html”這兩個(gè)詞,不再有長(zhǎng)行充滿臟標(biāo)簽的不可讀代碼。
3. 帶來(lái)可用性和用戶體驗(yàn)的改進(jìn)
可用性和用戶體驗(yàn)與網(wǎng)站或應(yīng)用程序的設(shè)計(jì)程度有關(guān)。我們都想要更好的動(dòng)態(tài)網(wǎng)站和美觀的應(yīng)用程序與用戶交互并允許用戶享受功能、內(nèi)容等,而不僅僅是看它。HTML5 對(duì) Web 具有多項(xiàng)技術(shù)增強(qiáng)和改進(jìn)功能,并且使用 HTML5 代碼,Web 開(kāi)發(fā)人員可以輕松設(shè)計(jì)更好的應(yīng)用程序和動(dòng)態(tài)網(wǎng)站,從而帶來(lái)更好的用戶體驗(yàn)和可用性。
4. 替代 Flash 和 Silver light
HTML5超越Flash和Silver light而領(lǐng)先只是因?yàn)椴シ?/span>Flash文件和Silver light需要安裝Adobe Flash最新版本或Silver light插件,還需要注意設(shè)備和操作系統(tǒng)的兼容性. HTML 5 并非如此。因此,HTML5 如今在公司中變得越來(lái)越流行,因?yàn)樗峁┝舜罅康膶傩院凸δ?,可幫?Web 開(kāi)發(fā)人員以最少的工作量構(gòu)建漂亮的網(wǎng)站和應(yīng)用程序。
5. 大量用于移動(dòng)應(yīng)用和游戲
HTML5 在移動(dòng)應(yīng)用程序和游戲開(kāi)發(fā)中的適應(yīng)性隨著 HTML5 Web 應(yīng)用程序工具在從用戶界面 (UI)、開(kāi)發(fā)、使用腳本等開(kāi)始的所有情況下為 Web 開(kāi)發(fā)人員提供了更大的靈活性而增加。
HTML5 還能夠處理多媒體內(nèi)容,而無(wú)需安裝插件,我們可以使用該技術(shù)輕松開(kāi)發(fā)交互式游戲。
6. 干凈的標(biāo)記和改進(jìn)的代碼
HTML5 帶有簡(jiǎn)潔的標(biāo)記和簡(jiǎn)潔的代碼,使其比以前的版本更易于訪問(wèn)。HTML 5 允許 Web 開(kāi)發(fā)人員和 Web 設(shè)計(jì)人員使用更簡(jiǎn)潔的代碼并刪除 div 標(biāo)簽并將所有 div 標(biāo)簽替換為新的 HTML 5 元素。
7. 離線瀏覽
HTML5 還提供離線瀏覽功能,這意味著訪問(wèn)者可以在沒(méi)有有效互聯(lián)網(wǎng)連接的情況下加載網(wǎng)頁(yè)上的某些元素。假設(shè)你訪問(wèn)了該站點(diǎn),但不知何故你現(xiàn)在沒(méi)有連接到互聯(lián)網(wǎng),或者互聯(lián)網(wǎng)連接發(fā)生故障。使用 HTML5 離線緩存,我們?nèi)匀豢梢约虞d網(wǎng)站的核心元素,你可以離線查看它們。
8. HTML5 在網(wǎng)站抓取和索引方面對(duì) SEO 友好:
如今,為了在包括谷歌在內(nèi)的不同搜索引擎中獲得并保持最高排名,必須小心優(yōu)化網(wǎng)站和所有必要的 SEO 模塊。HTML 5 帶有各種屬性和模塊,使網(wǎng)絡(luò)爬蟲(chóng)可以輕松搜索你的內(nèi)容并使其正確編入索引,從而提高其在搜索引擎搜索結(jié)果頁(yè)面中的排名。HTML5 的技術(shù)提供了具有廣泛結(jié)構(gòu)元素、語(yǔ)義、表單類型、新屬性和媒體元素的各種功能,使數(shù)字營(yíng)銷專家和開(kāi)發(fā)人員更容易專注于更好的搜索引擎優(yōu)化技術(shù)并推動(dòng)更多的自然搜索流量。
9. 視頻和音頻支持
借助 HTML5 技術(shù),我們不再需要依賴第三方插件來(lái)渲染音頻和視頻。你可以忘記 Flash Player 和其他第三方媒體播放器和插件。你可以使用新的 HTML5 <video> 和 <audio> 標(biāo)簽輕松訪問(wèn)你的視頻和音頻。
以前你必須使用舊的 <embed> 和 <object> 標(biāo)簽并分配大量參數(shù),以顯示視頻可見(jiàn)并正常工作。但是使用 HTML5 的視頻和音頻標(biāo)簽,我們可以將它們視為圖像; <video src=”url”/>。
我們只需要像任何其他 HTML 元素一樣在單行標(biāo)簽中定義高度、寬度和自動(dòng)播放等參數(shù):<video src=”url” width=”800px” height=”500px”autoplay/>。
10. 地理位置支持
在地理定位的幫助下,我們可以輕松地找出我們?cè)谑澜缟系奈恢茫⑤p松地與人們分享這些信息。過(guò)去,如果我們想首先檢測(cè)客戶端設(shè)備的位置,我們必須查看客戶端 IP 地址、你的無(wú)線網(wǎng)絡(luò)連接、手機(jī)的基站和緯度和經(jīng)度。但是對(duì)于 HTML5,已經(jīng)開(kāi)發(fā)了一組 API,它們可以有效地允許客戶端設(shè)備(即你的手機(jī)、IP 甚至你的桌面瀏覽器)使用你的 HTML5 兼容瀏覽器直接可用的 JavaScript 檢索地理定位信息。
HTML5 改進(jìn)并增強(qiáng)了瀏覽體驗(yàn)。那么為什么不為你的網(wǎng)站和移動(dòng)應(yīng)用程序采用 HTML 5 呢?
了解更多
加語(yǔ)義化標(biāo)簽(開(kāi)發(fā)者可以更加優(yōu)雅,瀏覽器也可以更好的理解)
搜索引擎檢索,為什么會(huì)檢索標(biāo)題,不會(huì)檢索“簡(jiǎn)介” ? 這是因?yàn)榻Y(jié)構(gòu)的不同。但是結(jié)構(gòu)每個(gè)人的class命名習(xí)慣都會(huì)不一樣,無(wú)法做到規(guī)范,于是不如出新的標(biāo)簽。
在有一些低版本的瀏覽器中,h5標(biāo)簽不兼容,會(huì)被認(rèn)為是div,并不會(huì)影響我們的功能。也可以在 script 中新加一行代碼 document.createElement("header") ,但是用了多少標(biāo)簽,就要寫多少行的 document.createElement("") ,于是有一個(gè)第三方的插件 html5shiv.js
使用方法:
<!--[if lt IE 9]><script type="text/javascript" src="http://www.ijquery.cn/js/html5shiv.js"></script><![endif]-->
注意:在頁(yè)面中調(diào)用Html5.js文件必須添加在頁(yè)面的head元素內(nèi),因?yàn)镮E瀏覽器必須在元素解析前知道這個(gè)元素,所以這個(gè)js文件不能在頁(yè)面底部調(diào)用。
應(yīng)用程序標(biāo)簽
DataList
progress
屬性
鏈接關(guān)系描述
鏈接到的地方和當(dāng)前文檔的關(guān)系是什么
<a href="01-sementic-tags.html" rel="pre"></a><a href="02-application-tags.html" rel="next"></a>
rel還出現(xiàn)在其他地方,
<link rel="stylesheet" href="css.css">
link本身不會(huì)請(qǐng)求文件,而是rel="stylesheet"才會(huì)請(qǐng)求文件
目前國(guó)內(nèi)不流行
結(jié)構(gòu)數(shù)據(jù)標(biāo)記
<div itemscope itemtype="www.baidu.com"> <div itemprop="主人">主人</div> <div itemprop="小狗">小狗一</div> <div itemprop="小狗">小狗二</div> </div>
可以方便搜索引擎重點(diǎn)抓取
很高級(jí),但是只有g(shù)oogle支持
ARIA
無(wú)障礙富互聯(lián)網(wǎng)應(yīng)用程序
<label for="myinput">請(qǐng)輸入您的名字</label> <input type="text" id="myinput">
為什么上面一定要label for呢?
是為了搜索引擎的理解
自定義屬性
也就是 data-* 之類的屬性,他們沒(méi)有功能性,只是為了保存dom節(jié)點(diǎn)的強(qiáng)相關(guān)的數(shù)據(jù)。
<ul id="list"></ul> <div id="info"></div> <script> var data={ 01:{ name:"張三", age:18 }, 02:{ name:"李四", age:19 }, 03:{ name:"王五", age:20 } }; for (var X in data) { var item=data[X]; var oli=document.createElement("li"); var olist=document.getElementById("list"); oli.appendChild(document.createTextNode(item.name)); olist.appendChild(oli); oli.setAttribute("data-name",item.name); oli.setAttribute("data-age",item.age ); oli.addEventListener("click", function () { var name=this.getAttribute("data-name"); var age=this.getAttribute("data-age"); alert(age+name) }) } </script>
上面的代碼用 setattribue 方法來(lái)定義了自定義屬性,然后用getattribute又獲取到了自定義屬性。js也針對(duì)自定義屬性出了新的api,也就是 dataset['string'] ,使用這個(gè)api可以代替 getAttribute 的方法:
oli.addEventListener("click",function(){ console.log(this.dataset["name"]); })
智能表單
新的表單類型
<input type="date"> <input type="color"> <input type="range">
但是盡量不要在pc端使用,用戶體驗(yàn)較差,不能自定義樣式。主要適配在移動(dòng)端。
虛擬鍵盤適配
<input type="text" name="txt_text" id="txt_text"> <input type="number" name="txt_number" id="txt_number"> <input type="email" name="txt_email" id="txt_email"> <input type="tel" name="txt_tel" id="txt_tel"> <input type="url" name="txt_url" id="txt_url">
上面的代碼在pc端上沒(méi)有用處,主要是用在移動(dòng)端可以根據(jù)不同的input的 type 來(lái)喚出不同的鍵盤。
雖然 input type="email" 看似可以驗(yàn)證表單,但是真是太弱了,只是驗(yàn)證有沒(méi)有 @ ,真的要驗(yàn)證的話,還是要自己寫正則表達(dá)式
頁(yè)面多媒體
音頻
<audio src="A Moment of Reflection.mp3" controls="controls"></audio>
但是默認(rèn)的播放器太丑了,我們一般是自己寫一個(gè)button,然后為這個(gè)button添加一個(gè)事件:
<script> var btn=document.getElementById("btn"); var btn1=document.getElementById("btn1"); var audio=document.getElementsByTagName("audio")[0]; btn.addEventListener("click", function () { audio.play(); }) btn1.addEventListener("click",function (argument) { audio.pause(); }) </script>
視頻
<video src="A Moment of Reflection.mp4" controls="controls"></video>
但是我們一般不是這樣用的,因?yàn)橐曨l有版權(quán),有些瀏覽器只能支持一兩個(gè),我們一般是source:
<video controls="controls"><source src="下午03-網(wǎng)頁(yè)多媒體.web.mp4"><source src="下午03-網(wǎng)頁(yè)多媒體.web.ogg"><p>您的瀏覽器不支持</p></video>
還有一個(gè)插件,是可以幫我們做兼容的,是https://html5media.info/的組件,ie7以上都可以兼容。
以下是多媒體的屬性;
[image_1b2cut34s130mfufars1a6m6va9.png-66.1kB][1]
字幕
兼容性不是很好,現(xiàn)在還沒(méi)有人用
canvas
2d
3d
svg
優(yōu)勢(shì):體積小,質(zhì)量高,效果好,可控程度高。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。