日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當(dāng)前位置: 首頁 > 前端技术 > HTML >内容正文

HTML

10件开发者和老板都要知道的HTML5的那些事

發(fā)布時(shí)間:2025/6/17 HTML 51 豆豆
生活随笔 收集整理的這篇文章主要介紹了 10件开发者和老板都要知道的HTML5的那些事 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
????????1.?HTML5?標(biāo)簽沒什么大不了的. ? ???????理解這句話你需要先了解HTML 5。它僅僅是一個(gè)html4.01的一個(gè)升級(jí)版本?或者是它是完全不同的新版本(無處不在的大肆宣傳可能會(huì)讓你有這種感覺)?答案是兩種理解都有部分正確。HTML 5包括許多簡(jiǎn)化和附加的網(wǎng)頁標(biāo)記,所以稱它為升級(jí)版本也是公平的(雖然也有一些大的補(bǔ)充標(biāo)簽,如視頻<video>和畫布< canvas>)。但是,HTML 5也可以被認(rèn)為是一個(gè)技術(shù)組合,包括一整套和HTML 5標(biāo)簽交互的API。還有CSS 3,為HTML 5帶來了一些強(qiáng)大的新風(fēng)格和動(dòng)畫效果。 ? ???????如果你已經(jīng)很熟悉html 4,那大多數(shù)新的標(biāo)簽會(huì)很容易使用。 ? ???????2. HTML 5的力量源泉是JavaScript. ? ???????雖然我們都聽到的總是“HTML 5″, 但真正的無名英雄是JavaScript和一套新的API。這些API包括獲取地理位置(Geolocation),圖形繪制(a drawable canvas),個(gè)性化的視頻體驗(yàn)(custom video experiences),拖放,大量的本地存儲(chǔ)(local storage),甚至多線程(更像是當(dāng)前的應(yīng)用程序)。這只是已經(jīng)命名的一些API而已。 ? ???????過去幾年,Javascript的名聲可不好,其實(shí)它是一個(gè)復(fù)雜和強(qiáng)大的語言。現(xiàn)在,它也是一個(gè)快速的語言,在過去十年里,速度得到近似100倍的改善(還會(huì)得到更多的改善)。當(dāng)然,它仍然有它的內(nèi)傷,但通過了解它們就可以有避免的方法。如果你知道他們。它也很容易入門。 ? ???????所以,如果你想運(yùn)用HTML 5,你就要JavaScript。 ? ???????3. 標(biāo)準(zhǔn)來自哪里并不重要(It’s not which standards document an API comes from that is important). ? ???????當(dāng)我們寫”Head First?HTML5?Programming”時(shí),常聽到”Geolocation并不是HTML5正式規(guī)格的一部分!” 是的. 但它是W3C的正式標(biāo)準(zhǔn)之一,而且事實(shí)上這并不重要。重要的是多少現(xiàn)在的瀏覽器已經(jīng)支持Geolocation 了?我們更在意這個(gè)。 ? ???????當(dāng)然,這里有一個(gè)時(shí)間的問題。但當(dāng)我們寫代碼時(shí),重要的是“用戶需要它嗎?(Will it be there for my users)“ ? ???????4. 怎么知道該不該上HTML5了(How to know if you should embrace HTML5 now). ? ???????如果你的用戶使用移動(dòng)設(shè)備,你就應(yīng)該考慮使用HTML 5。HTML 5瀏覽器是在大量的智能手機(jī)和平板上很普遍了。如果你的用戶主要在桌面電腦上使用,你也應(yīng)該去好好研究一下HTML 5。但是如果他們使用的是舊版本的瀏覽器,那就需認(rèn)真評(píng)估一下了。 ? ???????無論何時(shí),你想要了解瀏覽對(duì)HTML 5支持的情況,都可以借助下面這些很棒的資源來了解。包括: ?
  • http://caniuse.com/.
  • http://www.findmebyip.com/.
  • http://html5test.com/.
  • Wikipedia’s?Comparison of Web Browsers?page and?Comparison of Layout Engines?page.
  • WHATWG’s?Implementations in Web Browsers?wiki page.
? ???????當(dāng)然,你也要盡量在各個(gè)瀏覽器上測(cè)試一下你的應(yīng)用程序或網(wǎng)頁。 ? ???????5. 進(jìn)退自如: 優(yōu)雅降級(jí)和功能檢查(graceful degradation and feature detection). ? ???????通過JavaScript有許多方法可以用來檢測(cè)HTML5的支持能力。通過創(chuàng)建一個(gè)對(duì)象,通過檢查屬性,通過使用自定義方法如<video>的canPlayType方法,這些都可以。 ? ???????不用說,如果用戶的瀏覽器不支持新特性,你需要提供備用方案。(比如,使用圖片或flash來代替HTML5的video和canva, 或者顯示一段信息告訴用戶為什么沒看到預(yù)期的效果。). 有沒有更好的方法呢? ? ???????有的. ?Modernizr JavaScript library?是一個(gè)開源庫,可以很方便的檢查HTML5和CSS3的支持情況,并加載相似的資源, 如不同的JavaScript腳本, CSS文件, 圖片等等,取決于支持的程度. ? ???????6. <video>標(biāo)簽很簡(jiǎn)單; 可是編碼呢? ? ???????通過增加一個(gè)<video>元素到您的網(wǎng)頁,就可以輕松地在網(wǎng)頁上播放視頻,并且不需要其它插件。但說到視頻格式,不幸的是,支持的協(xié)議很少。今天,支持三個(gè)不同的格式:WebM,MP4,以及Ogg,而至于是哪一個(gè),和取決于你使用的瀏覽器。如果你的用戶集中在某個(gè)平臺(tái),相對(duì)比較容易。比如,針對(duì)iPad用戶,你只需要提供MP4格式就可以了。如果你想支持所有流行的瀏覽器,那么你就要提供所有三種格式的內(nèi)容。 ? ???????怎么做?你可以使用<video>和<source>同時(shí)提供三種視頻文件。如果都不支持,你當(dāng)然還要提供一個(gè)備案。 ? ???????所以,將視頻放到網(wǎng)頁很容易了,但如何讓用戶得到可以真正播放的視頻仍然有些麻煩。 ? ???????7. <canvas>標(biāo)簽并不只是為了繪圖. ? ???????<canvas>為HTML添加了一個(gè)二維的繪圖區(qū)域。乍一看,<canvas>適于創(chuàng)建一個(gè)簡(jiǎn)單的繪圖程序,可以使用線,弧,和矩形。 ? ???????事實(shí)上,如果看一下演示<canvas>的網(wǎng)站,你會(huì)看到它被用于任何基礎(chǔ)繪圖、交互式繪圖應(yīng)用、制作動(dòng)畫、游戲,甚至渲染三維場(chǎng)景。 ? ???????一個(gè)有趣的應(yīng)用是視頻處理。你可以從player取得幀數(shù)據(jù)(frame data)并加以處理,而后寫入到一個(gè)<canvas>上顯示出來。同樣的,你可以在游戲中使用一個(gè)canvas提供圖像的雙緩沖。 ? ???????所以,不要小瞧了<canvas>,它是HTML 5一個(gè)強(qiáng)大的新功能,可以用于各種圖形應(yīng)用, 在現(xiàn)代的瀏覽器中的JavaScrip的性能提升也足以應(yīng)付圖像和視頻處理需求。 ? ???????8. CSS3支持通常由JavaScript提供的動(dòng)畫效果. ? ???????通過CSS3,我們可以輕松實(shí)現(xiàn)以前只能通過JavaScript實(shí)現(xiàn)的網(wǎng)頁效果。 ? ???????例如,當(dāng)鼠標(biāo)劃過時(shí),需要組件可以淡入淡出,以前必須寫復(fù)雜的JavaScript代碼或者使用一個(gè)UI庫(jQuery,scriptaculous)。而通過CSS3,你就不再需要寫代碼了。 ? ???????Transition(過渡) 和 transform(轉(zhuǎn)換) 是CSS3中的新特性,你能通過它們創(chuàng)造有趣的效果和動(dòng)畫。比如你可以使用元件不透明性(opacity)的過渡(transition)實(shí)現(xiàn)淡化的效果。還可以通過轉(zhuǎn)換(transform)函數(shù)實(shí)現(xiàn)多個(gè)元件的旋轉(zhuǎn)和縮放。組合起來就可以創(chuàng)造出很酷的動(dòng)畫效果。 ? ???????9. JSON主導(dǎo)新的內(nèi)容格式. ? ???????2004年XML就努力統(tǒng)治世界,然而到現(xiàn)在還沒有達(dá)成。 ? ???????目前很多開發(fā)商正使用JSON取代XML。JSON可以使用與代碼相同的格式和序列化(serialized)的對(duì)象。當(dāng)?shù)玫竭h(yuǎn)程的JSON數(shù)據(jù),可以從瀏覽器本身得到快速的解析。每一個(gè)瀏覽器都內(nèi)置了JSON的對(duì)象和兩個(gè)方法:stringify (字串化):用來從一個(gè)對(duì)象生成JSON數(shù)據(jù)字串,parser(解析): 用來從字串創(chuàng)建一個(gè)對(duì)象。 ? ???????今天JSON被廣泛應(yīng)用在網(wǎng)絡(luò)服務(wù)應(yīng)用程序,如FaceBook和Twitter。而且,由于XHR有跨域的限制,許多網(wǎng)絡(luò)服務(wù)的都實(shí)現(xiàn)了JSONP(JSON with Padding)。它本身是一個(gè)簡(jiǎn)單的概念,但非常實(shí)用。 ? ???????10. XHTML已死,卻又永生(XHTML is dead, long live XHTML). ? ???????隨著XHTML 2的逝去和HTML 5的崛起,XHTML早已失去了網(wǎng)絡(luò)語言的領(lǐng)先地位。但并不意味著你不能使用XHTML,事實(shí)上,我們叫它XHTML5。 ? ???????記住,XHTML和HTML之間的差異是XHTML使用嚴(yán)格的語法。受益的是它是可擴(kuò)展的(因?yàn)樗荴ML), 缺點(diǎn)是XHTML過于嚴(yán)格,發(fā)揮的沒有其他語言那么好(如CSS和JavaScript), 也并不是為構(gòu)建Web應(yīng)用而設(shè)計(jì)的。 ? ???????所以,現(xiàn)在寫XHTML5,添加命名空間(namespace)和使用規(guī)范的語法就可以了。 ? ? ? 本文轉(zhuǎn)自HTML5中國網(wǎng)站:http://www.html5cn.org/article-3127-1.html

轉(zhuǎn)載于:https://www.cnblogs.com/html5cn/articles/2616772.html

總結(jié)

以上是生活随笔為你收集整理的10件开发者和老板都要知道的HTML5的那些事的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔推薦給好友。