HTML5和CSS3的一些新變化

2020-03-24 16:23:45

字體：大中小

供稿：網(wǎng)友

互聯(lián)網(wǎng)的發(fā)展總是在不斷地催生新技術(shù)的產(chǎn)生，而HTML5和CSS3是最近一直被討論的熱門話題，對于每個互聯(lián)網(wǎng)開發(fā)者尤其是前端開發(fā)者而言，都充滿了好奇與渴望。那么HTML5和CSS3究竟有哪些讓我們眼前一亮的東西呢？我在WebRebuild北京交流會和珍珠奶茶幫上給大家分享了《揭秘 HTML5和CSS3》，PPT在這里：
http://docs.google.com/present/view?id=dhpdbrp_51hf88z8g8HTML5HTML 5草案的前身名為Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團隊。在2008年1月22日，第一份正式草案發(fā)布。 HTML 5是近十年來Web開發(fā)標準最巨大的飛躍。和以前的版本不同，HTML 5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個成熟的應用平臺，在HTML 5平臺上，視頻，音頻，圖象，動畫，以及同電腦的交互都被標準化。那么我們來看一下HTML5的技術(shù)概覽有哪些：HTML5新增和移除的元素HTML5新增了很多多媒體和交互性元素如video, audio，在HTML4當中如果要嵌入一個視頻或是音頻的話需要引入一大段的代碼，還有兼容各個瀏覽器，而HTML5只需要通過引入一個標簽就可以，就像img標簽一樣方便。在頁面布局和內(nèi)容實現(xiàn)方面HTML5新增了很多結(jié)構(gòu)化標簽元素以及塊級及語義元素，如果你要用HTML表示一個文件的上傳進度條，在 HTML5中你可以用progress這個元素來表示，它有一個html' target='_blank'>value屬性描述了已經(jīng)完成了多少任務(wù)，還有一個屬性max描述了這個任務(wù)一共需要多少，還可以通過DOM接口得到這個進度條的position屬性(只讀)，也就是任務(wù)完成的百分比。Youtube在HTML5技術(shù)上已經(jīng)做了一個嘗試，http://www.youtube.com/html5(需要翻墻) 是用HTML5做的一個DEMO，從整個頁面源代碼來看，非常簡潔。當然HTML5也對一些元素新增了一些屬性，如input和textarea的placeholder屬性，相當于輸入框的輸入提示，script有一個async屬性會影響腳本的加載和執(zhí)行。對于所有的HTML共有的屬性我們通常把它稱作是全局屬性，如class, id, tabindex, title，HTML5也新增了一些全局屬性，如contenteditable, contextmenu, hidden等屬性。HTML5還增加了對于微數(shù)據(jù)的支持，如HTML5新增的item, itempro, subject等屬性。當然HTML5也移除了一些表示頁面展現(xiàn)的元素，如font, center, strike等，這些本應該是CSS來做的，所以還是很好理解的，也移除了一些影響網(wǎng)站可訪問性的元素如frame, frameset, noframe以及一些不常用的元素如acronym，而采用abbr來表示縮寫。HTML5還移除了一些影響客戶端兼容性的HTML熟悉，如link的rev屬性，td的scope屬性；HTML5也移除了一些表示頁面展現(xiàn)的屬性如一些元素的align,bgcolor屬性。HTML5對表單的支持HTML5 提供了強大的控件類型如url, email, date, tel等，強大的約束屬性，如required表示必填，文件上傳的accept屬性，以及一些表單重復元素模型的支持，HTML5在提交表單的時候還可以設(shè)置提交的方式為XML提交方式，這樣服務(wù)器端接收到的數(shù)據(jù)將是XML格式，HTML5的表單被定義為 Web Forms 2.0 ，目前opera9.5+對Web Forms 2.0的支持較為完美。點此查看Web Forms 2.0 DEMO，需要Opera9.5+HTML5 DOM變化HTML5在DOM LEVEL 2 HTML方面很多都是繼承自HTMLDocument的接口，當然HTML5在DOM上也有一些值得注意的新成員，如：支持 getElementsByClassName，可以根據(jù)class類名選擇元素，getSelection()將會返回當前選中的對象，在選擇器上面有兩個方法querySelector和querySelectorAll可以根據(jù) css選擇符來獲取要查詢的元素，相當于YUI3中的Y.one和Y.all。HTML5的Javascript APIsHTML5在Javascript上面新增了哪些API呢？ Video/Audio: HTML5為Video和Audio提供了API來讓開發(fā)者控制他們自己的用戶界面，如可以播放或暫停媒體內(nèi)容。 Canvas: Canvas是一個新的HTML元素，這個元素可以被Script語言(通常是JavaScript)用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那么簡單的)動畫。Canvas是一個神奇的東西，它給我的第一感覺就像是在用Photoshop一樣，它的每一個方法跟Photoshop 是那么地相似，通過canvas.getContext( 2d )就可以得到這個canvas的API，你可以通過fillStyle設(shè)置其填充顏色或是通過strokeStyle設(shè)置其描邊顏色，甚至它畫路徑的操作跟Photoshop的鋼筆操作更是不謀而合。Canvas在很多網(wǎng)站都已經(jīng)有應用，如Firefox的實時下載狀態(tài)統(tǒng)計，甚至還可以用canvas來編寫Web Game。 Drag Drop: 在指示設(shè)備的視覺媒體中， Drag 的操作就是鼠標按下(mousedown)并伴隨著鼠標移動(mousemove)的事件，而 Drop 則是鼠標釋放時觸發(fā)的事件。在Drag Drop里定義了DataEvent和DataTransfer接口，同時當拖拽操作發(fā)生時會觸發(fā)如 dragstart, dragenter, dragleave, drop, dragend等事件。 Web Workers: 讓Javascript多線程，可以在后臺做很多工作而不會阻斷當前的瀏覽器操作。 Geolocation: 地理位置定位，運行navigator.geolocation.getCurrentPosition(success,error)這個方法時瀏覽器會提示是否要共享你的地理位置，如果選擇共享，則會回調(diào)success函數(shù)，success函數(shù)有一個參數(shù)是position對象，這個position對象有一個coords對象，coords對象包含了很多地理位置信息如latitude(維度)和longitude(經(jīng)度)，這樣就可以知道你的具體位置了，這個功能在一些手機如Iphone上已經(jīng)有廣泛的應用了。 Application Cache: 這是HTML5對于離線應用的支持，通過在html元素上加一個屬性manifest，瀏覽器會提示你是否要將數(shù)據(jù)緩存到客戶端，如果用戶選擇了允許，則會按照指定的manifest文件列表緩存需要的文件，當你的網(wǎng)絡(luò)不可用時，你還是可以使用這個應用的。對于離線應用，Google也開發(fā)了Google Gears瀏覽器擴展，不過最后Google轉(zhuǎn)投HTML5可能也是看到了HTML5存儲和離線應用的這種優(yōu)勢。 Storage: Webkit已經(jīng)實現(xiàn)了database storage，你可以像后端操作數(shù)據(jù)庫一樣查詢數(shù)據(jù)并執(zhí)行一些操作。還有一種存儲是鍵值對存儲，如sessionStorage和localStorage，可以通過setItem和getItem來存儲與獲取值，相對于Cookie的存儲來說，存儲的容量要大很多。 X-Document Messaging: 瀏覽器因為安全和隱私的原因，阻止了不同域之間文檔的通信，雖然這是一個安全限制，但是對于那些沒有危害的不同域的文檔通信帶來了很多問題，但是HTML5可以實現(xiàn)這種跨文檔通信，讓我們可以不用管源域是來自哪里，同時可以防止腳本攻擊。 HTML5讓你心動了嗎？那么HTML5什么時候會成為標準呢？據(jù)說要等到2022年，這有一個很有意思的網(wǎng)站http://ishtml5readyyet.com/告訴你還有多少天HTML5會真正到來。點擊查看HTML5 DEMO，需要Firefox3.5+/Safari4.0+html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：如何學習DIV+CSS(Web標準)制作網(wǎng)頁

下一篇：CSS關(guān)于box（盒模式）的一系列問題