一、什麼是HTML 在瞭解html5之前,首先要說一下html語言,儘管是更新後的5,但很多的地方還是保留了html的優勢。 HTML是HyperText Markup Language超級文本標記語言的縮寫,是標準通用標記語言下的一個應用,也是一種規範,一種標準,它通過標記符號來標記要顯示的網頁中 ...
一、什麼是HTML
在瞭解html5之前,首先要說一下html語言,儘管是更新後的5,但很多的地方還是保留了html的優勢。
HTML有以下特點 :
1、簡易性:超級文本標記語言版本升級採用超集方式,從而更加靈活方便。2、可擴展性:超級文本標記語言的廣泛應用帶來了加強功能,增加標識符等要求,超級文本標記語言採取子類元素的方式,為系統擴展帶來保證。 3、平臺無關性:雖然個人電腦大行其道,但使用MAC等其他機器的大有人在,超級文本標記語言可以使用在廣泛的平臺上,這也是萬維網(WWW)盛行的另一個原因。 4、通用性:另外,HTML是網路的通用語言,一種簡單、通用的全置標記語言。它允許網頁製作人建立文本與圖片相結合的複雜頁面,這些頁面可以被網上任何其他人瀏覽到,無論使用的是什麼類型的電腦或瀏覽器。
二、什麼是HTML5
HTML5是HTML(超文本標記語言)的第五次更新的產品,這是一種解釋型的語言,文件的擴展名的尾碼為.htm或者.html的形式,這是眾多廠商聯合開發出來的產品,據說W3C將會在2022年推出標準版。雖然現在仍處於不斷的完善中,但新增的新特性,新功能,不僅能節約Web開發者的時間和周期,還能提升用戶的體驗,更好的為開發者服務。
在HTML的時代,滿屏的都是div元素,結構混亂,不易閱讀,代碼臃腫。在HTML5中,新增了許多語義化的佈局標簽,比如nav,header,footer,article等,使佈局的網頁結構清晰明瞭。還新增了音頻,視頻,圖像,繪圖,動畫等功能,在以前,這些都是要用flash才能完成的。使用HTML5新增的功能能做出許多酷炫的效果。
三、HTML5特性
1、語義特性(Class:Semantic)
HTML5賦予網頁更好的意義和結構。更加豐富的標簽將隨著對RDFa的,微數據與微格式等方面的支持,構建對程式、對用戶都更有價值的數據驅動的Web。2、本地存儲特性(Class: OFFLINE & STORAGE)
基於HTML5開發的網頁APP擁有更短的啟動時間,更快的聯網速度,這些全得益於HTML5 APP Cache,以及本地存儲功能。Indexed DB(html5本地存儲最重要的技術之一)和API說明文檔。3、設備相容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來,HTML5為網頁應用開發者們提供了更多功能上的優化選擇,帶來了更多體驗功能的優勢。HTML5提供了前所未有的數據與應用接入開放介面。使外部應用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯。4、連接特性(Class: CONNECTIVITY)
更有效的連接工作效率,使得基於頁面的實時聊天,更快速的網頁游戲體驗,更優化的線上交流得到了實現。HTML5擁有更有效的伺服器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現伺服器將數據“推送”到客戶端的功能。5、網頁多媒體特性(Class: MULTIMEDIA)
支持網頁端的Audio、Video等多媒體功能, 與網站自帶的APPS,攝像頭,影音功能相得益彰。6、三維、圖形及特效特性(Class: 3D, Graphics & Effects)
基於SVG、Canvas、WebGL及CSS3的3D功能,用戶會驚嘆於在瀏覽器中,所呈現的驚人視覺效果。7、性能與集成特性(Class: Performance & Integration)
沒有用戶會永遠等待你的Loading——HTML5會通過XMLHttpRequest2等技術,解決以前的跨域等問題,幫助您的Web應用和網站在多樣化的環境中更快速的工作。8、CSS3特性(Class: CSS3)
在不犧牲性能和語義結構的前提下,CSS3中提供了更多的風格和更強的效果。此外,較之以前的Web排版,Web的開放字體格式(WOFF)也提供了更高的靈活性和控制性。四、HTML5的優勢有哪些?
1,跨平臺性
在HTML5到來之前,由於平臺的多樣性,導致每開發一套產品,就要針對不同的平臺開發多套版本,耗費大量的時間和精力,而且還增加了大量的開發成本,而HTML5技術的出現卻能很好的解決這個問題,開發者只要使用一套程式,就能夠很容易的實現多個平臺的展現功能,降低了開發難度,節約了開發時間和成本的投入。2,即時更新
之前原生應用上線Appstore,都需要等待很長的審核時間,一旦出現問題需要更新,則還要重新審核,無形中浪費了大量的時間。而HTML5是通過瀏覽器進行載入的,所以不存在這樣的問題,如果出現什麼問題,可以及時的更新上線,不需要等待審核時間。
3,離線緩存功能
HTML5中最酷的特性就是離線緩存。通過JavaScript提供了數種不同的離線儲存功能,相對於傳統的Cookie而言有更好的彈性以及架構,並且可以儲存更多的內容。它擁有更好的安全和性能,即使瀏覽器關閉後也可以保存。4,視頻和音頻的支持
之前在實現播放媒體功能時,一直是開發者比較痛苦的事情,需要讓你的視頻和音頻通過HTML5標簽和來訪問資源。並且為了它們能正確播放必須賦予一大堆的參數。這樣你就要不斷的重覆標簽,你的代碼也會變得十分繁瑣。現在,這一切都將變的非常簡單。5,清晰的代碼
HTML5可以讓你寫出簡單清晰的代碼。使用HTML5你可以通過使用語義學的HTML header標簽描述內容來最後解決你的div及其class定義問題。讓你的代碼更加清晰易於理解。6、現在就用HTML5
截至目前而言,主流的網頁瀏覽器Firefox5、Chrome 12和Safari 5都已經支援了許多的HTML5標準,而且目前最新版的IE也支援了許多HTML5標準,隨著使用者陸續升級到新版的瀏覽器,開發者應該在現在就可以招收開發!相容性問題會隨著時間的推移而越來越少。但對於不得不照顧低版本用戶的網站,網上也有大量的相關解決方案。
上海前端培訓編輯整理,更多前端文章推薦:
《【上海前端培訓】使用html+css+js實現日曆與定時器》;
《Html5前端如何實現文字邊框陰影》;
《實現HTML5 移動頁面自適應手機屏幕的4種方法》