傳統的技術相比,HTML5 的語法特征更加明顯,可以更加便捷地處理多媒體內容,而且 HTML5 中還結合了其他元素,對原有的功能進行調整和修改,進行標準化工作。HTML5 在 2012 年已形成了穩定的版本。
1. 解決了跨瀏覽器問題
在 HTML5 之前,各大瀏覽器廠商為了爭奪市場占有率,會在各自的瀏覽器中增加各種各樣的功能,并且不具有統一的標準。使用不同的瀏覽器,常常看到的頁面效果也不同。在 HTML5 中,納入了所有合理的擴展功能,具備良好的跨平臺性能。針對不支持新標簽的老式 IE 瀏覽器,只需簡單地添加 JavaScript 代碼就可以使用新的元素。
2. 新增了多個新特性
HTML 語言從 1.0 到 5.0 經歷了巨大的變化,從單一的文本顯示功能到圖文并茂的多媒體顯示功能,許多特性經過多年的完善,已經發展成為一種非常重要的標記語言。 HTML5 新增的特性如下。
3. 用戶優先的原則
HTML5 標準的制定是以用戶優先為原則的,一旦遇到無法解決的沖突時,規范會把用戶放在第一位。另外,為了增強 HTML5 的使用體驗,還加強了以下兩方面的設計。
安全機制的設計
為確保 HTML5 的安全,在設計 HTML5 時做了很多針對安全的設計。HTML5 引入了一種新的基于來源的安全模型,該模型不僅易用,而且對不同的 API(Application Programming Interface ,應用程序編程接口)都通用。使用這個安全模型,不需要借助于任何不安全的 hack 就能跨域進行安全對話。
表現和內容分離
表現和內容分離是 HTML5 設計中的另一個重要內容。實際上,表現和內容的分離早在 HTML4.0 中就有設計,但是分離得并不徹底。為了避免可訪問性差、代碼復雜度高、文件過大等問題,HTML5 有了更加明晰的規范。但是考慮到 HTML5 的兼容性問題,一些陳舊的內容還是可以兼容使用的。
4. 化繁為簡的優勢
作為當下流行的通用標記語言,HTML5 盡可能地簡化,嚴格遵循了簡單至上的原則,主要體現在這幾個方面:
從新增的標簽來看,HTML5 有以下幾個特點:
隨著 HTML 的不斷發展,其經歷了“從 HTML4 的寬松到 XHTML 的嚴格再到 HTML5 寬松”的發展路程。
相比較 HTML4 和 XHTML 的結構標簽而言,HTML5 對結構標簽進行了較大簡化,精簡了聲明部分標簽的定義過程,使得結構標簽更加的簡潔。
在引入語義化標簽之前,我們常常采用 DIV + CSS 來布局,這樣的布局方式使得文檔的結構不清晰。為了解決這個問題,在 HTML5 中新增了一些標簽,來幫助我們更清晰地展現文檔的結構。
所謂語義化標簽就是一看標簽名,我們就知道該標簽里內容的作用。
語義標簽的優點:
在我們的課程中會給大家講解如下所示的語義化標簽:
特性
1.語意特性,添加<header><header/><nav><nav>
等標簽
2.多媒體, 用于媒介回放的 video 和 audio 元素
3.圖像效果,用于繪畫的 canvas 元素,svg元素等
4.離線 & 存儲,對本地離線存儲的更好的支持,local Store,Cookies等
5.設備兼容特性 ,HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連,
6.連接特性,更有效的連接工作效率,使得基于頁面的實時聊天,更快速的網頁游戲體驗,更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術,Server-Sent Event和WebSockets就是其中的兩個特性,這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能
7.性能與集成特性,HTML5會通過XMLHttpRequest2等技術,幫助您的Web應用和網站在多樣化的環境中更快速的工作
新增標簽
1.多媒體:<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
2.新表單元素:<datalist> ,<output> , <keygen>
3.新文檔節段和綱要:<header>頁面頭部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部
等
使用html5shiv可以解決ie低版本不兼容的問題,只需要在head中加上,當版本低于IE9時,瀏覽器會加載html5.js腳本,使得支持html5的新功能,也可以將腳本文件下載到本地
<head> <!--[if lt IE 9]> <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'> </script> <![endif]--></head>
localStorage.setItem(key,value)
如果key存在時,更新valuelocalStorage.getItem(key)
如果key不存在返回nulllocalStorage.removeItem(key)
一旦刪除,key對應的數據將會全部刪除localStorage.clear()
使用removeItem逐個刪除太麻煩,可以使用clear,執行的后果是會清除所有localStorage對象保存的數據天小編將分享前端開發中必學的知識點,HTML5中關于音視頻處理
基本內容:目前國內的視頻網站 - Flash技術,HTML5的視頻處理首先替換Flash技術,支持的視頻格式有:
1.MP4 - .mp4 目前比較主流的視頻格式。
2.OGG - .ogv 手機端的視頻格式。
3.WebM - 目前唯一一個支持超高清視頻格式,該視頻格式出自Goggle公司。
問: 如何處理視頻?
答:<video>元素 - 引入單個格式視頻文件,它由自己的屬性組成。 src屬性 - 指定視頻文件的地址, width屬性 - 設置視頻寬度, height屬性 - 設置視頻高度。語法規范:<video src="視頻文件路徑" width=“100px”>
!!需要注意的是:視頻的寬高比不會改變, 在video元素內定義不支持的提示內容。
如果要想在<video>元素引入多個格式視頻文件,那么就使用<source/>,使用這種方式能夠實現各個瀏覽器的兼容性,語法規范:
<video>
<source src="視頻文件路徑1"/>
<source src="視頻文件路徑2"/>
<source src="視頻文件路徑3"/>
</video>
<video>元素的屬性
autoplay屬性 - 自動播放
controls屬性 - 提供控制面板
loop屬性 - 循環播放
poster屬性 - 播放之前顯示一張圖片
preload屬性 - 預加載(視頻)
none - 不加載
auto - (默認值)自動(盡快加載完畢)
metadata - 只加載除視頻之外的信息(寬和高)
video的高級用法 方法
play() - 播放視頻
pause() - 暫停視頻
load() - 加載視頻
canPlayType() - 判斷是否支持該格式
事件
play - 播放視頻時觸發
pause - 暫停視頻時觸發
ended - 結束播放時觸發
error - 播放錯誤時觸發
canplay - 可播放時觸發(不考慮整體)
canplaythrough - 整體播放順利時觸發
progress - 下載進度
屬性
paused - 判斷視頻當前是否暫停,如果暫停狀態,返回true
ended - 判斷視頻當前是否結束播放,如果結束播放,返回true
duration - 當前視頻的總時長
currentTime - 獲取或設置當前視頻播放的位置
基本內容:目前HTML頁面實現音頻處理,將Windows Media Player播放器,內置頁面中,使用Flash技術實現音頻處理,HTML5實現音頻處理支持的音頻格式有:
1.mp3 - 感謝百度(MP3)
2.ogg
3.wav
問: 如何使用音頻?
答: audio元素 - 引入一種音頻格式。
<audio>元素的屬性
src屬性 - 引入音頻文件,作用 - 實現頁面背景音樂播放
audio元素 - 引入多種音頻格式
source元素
autoplay - 自動播放
controls - 提供控制面板
loop - 循環播放
preload - 預加載
audio的高級用法
事件
play - 播放音頻時觸發
方法
play() - 播放音頻
pause() - 暫停音頻
屬性
paused - true,表示暫停狀態
!! 需要特別注意,IE 8及之前的版本都不支持
*請認真填寫需求信息,我們會在24小時內與您取得聯系。