html5中級(jí)教程

1、HTML5中級(jí)教程林鵬2016年1月目錄目錄 表單 新屬性 新input類型 新元素 通用屬性 其他屬性 標(biāo)準(zhǔn)事件 Window事件 表單事件 鍵盤事件 鼠標(biāo)事件 媒介事件 拖放 微數(shù)據(jù) 應(yīng)用緩存 歷史管理表單表單全局屬性 全局屬性可用于任何 HTML 元素 id 元素的唯一 ID tabindex 表示元素的 tab 鍵控制次序 contenteditable 是否允許用戶編輯內(nèi)容 contextmenu 元素的上下文菜單，上下文菜單在用戶點(diǎn)擊元素時(shí)顯示 draggable 是否允許用戶拖動(dòng)元素 hidden 表示該元素是無關(guān)的，被隱藏的元素不會(huì)顯示 data-* 自定義的屬性，用于存儲(chǔ)頁面

2、或應(yīng)用程序的私有定制數(shù)據(jù)特別屬性 ping 標(biāo)簽中異步發(fā)送一個(gè)POST請(qǐng)求到Ping指定的地址 async 標(biāo)簽中規(guī)定腳本將被異步執(zhí)行。表單表單元素新類型 email 電子郵件 number 數(shù)字 url 網(wǎng)絡(luò)地址 color RGB色彩選擇窗 range 數(shù)字范圍 search 查詢框 Date Pickers date 日期 datetime 日期時(shí)間 time 時(shí)間 week 周選擇 month 月選擇表單表單元素新屬性 novalidate 標(biāo)記元素在form提交時(shí)不驗(yàn)證 placeholder 一種提示文本，元素獲取焦點(diǎn)后不顯示 required 標(biāo)記該元素是否必錄 pattern

3、正則表達(dá)式，在form提交時(shí)驗(yàn)證格式 form 標(biāo)記元素所屬的一個(gè)或多個(gè)表單 表單重寫 允許您重寫 form 元素的某些屬性設(shè)定，常用于submit formaction - 重寫表單的 action 屬性 formenctype - 重寫表單的 enctype 屬性 formmethod - 重寫表單的 method 屬性 formnovalidate - 重寫表單的 novalidate 屬性 formtarget - 重寫表單的 target 屬性表單表單新的元素 progress 動(dòng)態(tài)進(jìn)度條 meter 度量衡 time 時(shí)間元素 address 地址元素 details 詳細(xì)信息元素

4、事件事件Window事件 onafterprint 文檔打印之后運(yùn)行的腳本 onbeforeprint 文檔打印之前運(yùn)行的腳本 onbeforeonload 文檔卸載之前運(yùn)行的腳本 onblur 焦點(diǎn)離開 onerror 在錯(cuò)誤發(fā)生時(shí)運(yùn)行的腳本 onfocus 獲取焦點(diǎn) onhaschange 當(dāng)文檔已改變時(shí)運(yùn)行的腳本 onload 頁面結(jié)束加載之后 onmessage 在消息被觸發(fā)時(shí)運(yùn)行的腳本 onoffline 當(dāng)文檔離線時(shí)運(yùn)行的腳本事件事件Window事件 ononline 當(dāng)文檔上線時(shí)運(yùn)行的腳本 onpagehide 當(dāng)窗口隱藏時(shí)運(yùn)行的腳本 onpopstate 當(dāng)窗口歷史記錄改變時(shí)運(yùn)

5、行的腳本 onredo 當(dāng)文檔執(zhí)行撤銷（redo）時(shí)運(yùn)行的腳本 onresize 當(dāng)瀏覽器窗口被調(diào)整大小時(shí)觸發(fā) onstorage 在 Web Storage 區(qū)域更新后運(yùn)行的腳本 onundo 在文檔執(zhí)行 undo 時(shí)運(yùn)行的腳本 onunload 一旦頁面已下載時(shí)觸發(fā)（或者瀏覽器窗口已被關(guān)閉）事件事件表單事件 onblur 失去焦點(diǎn) onchange 在元素值被改變時(shí)運(yùn)行的腳本 oncontextmenu 當(dāng)上下文菜單被觸發(fā)時(shí)運(yùn)行的腳本 onfocus 當(dāng)元素獲得焦點(diǎn)時(shí) onformchange 表單改變時(shí)運(yùn)行的腳本 onforminput 當(dāng)表單獲得用戶輸入時(shí)運(yùn)行的腳本 oninput 當(dāng)

6、元素獲得用戶輸入時(shí)運(yùn)行的腳本 oninvalid 當(dāng)元素?zé)o效時(shí)運(yùn)行的腳本 onselect 在元素中文本被選中后觸發(fā) onsubmit 提交表單時(shí)觸發(fā)事件事件鍵盤事件 onkeydown 在用戶按下按鍵時(shí)觸發(fā) onkeypress 在用戶敲擊按鈕時(shí)觸發(fā) onkeyup 當(dāng)用戶釋放按鍵時(shí)觸發(fā)事件事件鼠標(biāo)事件 onclick 元素上發(fā)生鼠標(biāo)點(diǎn)擊時(shí)觸發(fā) ondbclick 元素上發(fā)生鼠標(biāo)雙擊時(shí)觸發(fā) ondrag 元素被拖動(dòng)時(shí)運(yùn)行的腳本 ondragend 在拖動(dòng)操作末端運(yùn)行的腳本 ondragenter 當(dāng)元素元素已被拖動(dòng)到有效拖放區(qū)域時(shí)運(yùn)行的腳本 ondragleave 當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)

7、行的腳本 ondragover 當(dāng)元素在有效拖放目標(biāo)上正在被拖動(dòng)時(shí)運(yùn)行的腳本 ondragstart 在拖動(dòng)操作開端運(yùn)行的腳本 ondrop 當(dāng)被拖元素正在被拖放時(shí)運(yùn)行的腳本事件事件鼠標(biāo)事件 onmousedown 當(dāng)元素上按下鼠標(biāo)按鈕時(shí)觸發(fā) onmousemove 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā) onmouseout 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā) onmouseover 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā) onmouseup 當(dāng)在元素上釋放鼠標(biāo)按鈕時(shí)觸發(fā) onmousewheel 當(dāng)鼠標(biāo)滾輪正在被滾動(dòng)時(shí)運(yùn)行的腳本 onscroll 當(dāng)元素滾動(dòng)條被滾動(dòng)時(shí)運(yùn)行的腳本事件事件媒介事件 onabort 在退出時(shí)

8、運(yùn)行的腳本 oncanplay 當(dāng)文件就緒可以開始播放時(shí)運(yùn)行的腳本 oncanplaythrough 當(dāng)媒介能夠無需因緩沖而停止即可播放至結(jié)尾時(shí)運(yùn)行的腳本 ondurationchange 當(dāng)媒介長度改變時(shí)運(yùn)行的腳本 onemptied 當(dāng)發(fā)生故障并且文件突然不可用時(shí)運(yùn)行的腳本 onended 當(dāng)媒介已到達(dá)結(jié)尾時(shí)運(yùn)行的腳本 onerror 當(dāng)在文件加載期間發(fā)生錯(cuò)誤時(shí)運(yùn)行的腳本 onloadeddata 當(dāng)媒介數(shù)據(jù)已加載時(shí)運(yùn)行的腳本 onloadedmetadata 當(dāng)元數(shù)據(jù)（比如分辨率和時(shí)長）被加載時(shí)運(yùn)行的腳本事件事件媒介事件 onloadstart 在文件開始加載且未實(shí)際加載任何數(shù)據(jù)前運(yùn)行的

9、腳本 onpause 當(dāng)媒介被用戶或程序暫停時(shí)運(yùn)行的腳本 onplay 當(dāng)媒介已就緒可以開始播放時(shí)運(yùn)行的腳本 onplaying 當(dāng)媒介已開始播放時(shí)運(yùn)行的腳本 onprogress 當(dāng)瀏覽器正在獲取媒介數(shù)據(jù)時(shí)運(yùn)行的腳本 onratechange 每當(dāng)回放速率改變時(shí)運(yùn)行的腳本 onreadystatechange 每當(dāng)就緒狀態(tài)改變時(shí)運(yùn)行的腳本 onseeked 當(dāng) seeking 屬性設(shè)置為 false時(shí)運(yùn)行的腳本 onseeking 當(dāng) seeking 屬性設(shè)置為 true時(shí)運(yùn)行的腳本 onstalled 在瀏覽器不論何種原因未能取回媒介數(shù)據(jù)時(shí)運(yùn)行的腳本事件事件媒介事件 onsuspend 在

10、媒介數(shù)據(jù)完全加載之前不論何種原因終止取回媒介數(shù)據(jù)時(shí)運(yùn)行的腳本 ontimeupdate 當(dāng)播放位置改變時(shí)（比如當(dāng)用戶快進(jìn)到媒介中一個(gè)不同的位置時(shí)）運(yùn)行的腳本 onvolumnchange 每當(dāng)音量改變時(shí)（包括將音量設(shè)置為靜音）時(shí)運(yùn)行的腳本 onwaiting 當(dāng)媒介已停止播放但打算繼續(xù)播放時(shí)（比如當(dāng)媒介暫停已緩沖更多數(shù)據(jù)）運(yùn)行腳本拖放拖放dragstart dragenter dragover drop dragend將元素的draggable屬性設(shè)置為 true拖動(dòng)對(duì)象的ondragstart和event.dataTransfer.setData() 用于在拖動(dòng)過程中傳遞數(shù)據(jù) 支持兩種類型，

11、字符串和文件拖動(dòng)目標(biāo)對(duì)象的ondragover放置ondrop拖放拖放function allowDrop(ev)ev.preventDefault();function drag(ev)ev.dataTransfer.setData(Text,ev.target.id);function drop(ev)ev.preventDefault();var data=ev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data);微數(shù)據(jù)微數(shù)據(jù)微數(shù)據(jù)是對(duì) Web 頁面上已經(jīng)存在的數(shù)據(jù)提供附加的語義，是

12、對(duì) HTML 的一種補(bǔ)充itemscope 標(biāo)記該元素是微數(shù)據(jù)元素，其子元素是微數(shù)據(jù)格式的一部分itemtype 定義微數(shù)據(jù)格式的詞匯表itemid 數(shù)據(jù)項(xiàng)的唯一標(biāo)識(shí)，可選itemprop 自定義的數(shù)據(jù)元素，鍵值格式itemref 允許微數(shù)據(jù)元素關(guān)聯(lián)另一個(gè)在同一頁面的元素微數(shù)據(jù)微數(shù)據(jù)微數(shù)據(jù)微數(shù)據(jù).應(yīng)用緩存應(yīng)用緩存可以讓開發(fā)人員指定瀏覽器應(yīng)緩存哪些文件以供離線用戶訪問優(yōu)勢(shì) 離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們 速度 - 已緩存資源加載得更快 減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源應(yīng)用緩存應(yīng)用緩存緩存清單文件manifest 可以是任何文本文件，但建議是以.appcac

13、he結(jié)尾 列出瀏覽器應(yīng)緩存以供離線訪問的資源 必須以 text/cache-manifest MIME 類型提供 .緩存清單文件結(jié)構(gòu) CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存 NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會(huì)被緩存 FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時(shí)的回退頁面（比如 404 頁面）應(yīng)用緩存應(yīng)用緩存CACHE MANIFEST# 2010-06-18:v2# Explicitly cached master entries.CACHE:/favicon.icoindex.htmlstylesheet

14、.cssimages/logo.pngscripts/main.js# Resources that require the user to be online.NETWORK:login.php/myapihttp:/# static.html will be served if main.py is inaccessible# offline.jpg will be served in place of all images in images/large/# offline.html will be served in place of all other .html filesFALL

15、BACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html應(yīng)用緩存應(yīng)用緩存 應(yīng)用緩存狀態(tài)（window.applicationCache.status） appCache.UNCACHED 未緩存 appCache.IDLE 空閑 appCache.CHECKING 緩存檢查 appCache.DOWNLOADING 下載中 appCache.UPDATEREADY 更新就緒 appCache.OBSOLETE 過期緩存 應(yīng)用緩存事件 瀏覽器會(huì)對(duì)下載進(jìn)度、應(yīng)用緩存更新和錯(cuò)誤狀態(tài)等情況觸發(fā)相應(yīng)事件應(yīng)

16、用緩存應(yīng)用緩存/ Fired after the first cache of the manifest.appCache.addEventListener(cached, handleCacheEvent, false);/ Checking for an update. Always the first event fired in the sequence.appCache.addEventListener(checking, handleCacheEvent, false);/ An update was found. The browser is fetching resources

17、.appCache.addEventListener(downloading, handleCacheEvent, false);/ The manifest returns 404 or 410, the download failed,/ or the manifest changed while the download was in progress.appCache.addEventListener(error, handleCacheError, false);/ Fired after the first download of the manifest.appCache.add

18、EventListener(noupdate, handleCacheEvent, false);/ Fired if the manifest file returns a 404 or 410./ This results in the application cache being deleted.appCache.addEventListener(obsolete, handleCacheEvent, false);/ Fired for each resource listed in the manifest as it is being fetched.appCache.addEventListener(progress, handleCacheEvent, false);/ Fired when the manifest resources have been newly redownloaded.appCache.addEventListener(updateready, handleCacheEvent, false);歷史管理歷史管理 返回 window.history.back(); | window.history.go(-