html5备忘录——张鑫旭
生活随笔
收集整理的這篇文章主要介紹了
html5备忘录——张鑫旭
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
byzhangxinxufromhttp://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544
一、前言兼圖片備忘
下圖是我從testking網站上的Ultimate HTML5 Cheatsheat這篇文章中備忘圖片（已大小優化，因為圖片較高，故滾動顯示）。
但是，上面畢竟是圖片格式（原圖上兆），而且還是英文的，所以自己覺得有必要將上面的內容文字化，同時做下簡單的中文翻譯。整理一番，于是就有下面的些內容。
二、文字備忘之標簽
| <article> | 定義文章 |
|---|---|
| <aside> | 定義頁面內容旁邊的內容 |
| <audio> | 定義聲音內容 |
| <canvas> | 定義圖形 |
| <command> | 定義一個控制按鈕 |
| <datagrid> | 指樹或表格狀數據格式中的動態數據 |
| <datalist> | 定義一個下拉列表 |
| <details> | 定義一個元素的細節 |
| <dialog> | 定義會話或人的交談 |
| <embed> | 定義額外的交互內容或插件 |
| <figcaption> | 定義指定元素的標題 |
| <figure> | 定義一組媒體內容，以及他們的標題 |
| <footer> | 為章節或頁面定義一個底部 |
| <header> | 為章節或頁面定義一個頭部 |
| <hgroup> | 定義文檔中某段落的信息 |
| <keygen> | 定義表單生成的關鍵 |
| <mark> | 定義被標記的文本 |
| <meter> | 定義預定義范圍內的測量 |
| <nav> | 定義導航鏈接 |
| <output> | 定義某種類型的輸出 |
| <progress> | 定義任意種類任務的進程 |
| <rp> | 定義瀏覽器不支持ruby元素的替代者 |
| <rt> | 定義ruby注釋的解釋 |
| <ruby> | 定義 ruby 注釋（中文注音或字符）。 |
| <section> | 定義章節 |
| <source> | 定義媒體資源 |
| <summary> | 定義某"detail"元素的頭部 |
| <time> | 定義日期/時間 |
| <video> | 定義視頻 |
| <wbr> | 定義可能的換行 |
| <!– …–> | 定義注釋 |
|---|---|
| <!DOCTYPE> | 定義文檔類型 |
| <a> | 定義超鏈接 |
| <abbr> | 定義縮寫 |
| <address> | 定義地址元素 |
| <area> | 定義圖片地圖的某區域 |
| <b> | 定義加粗文字 |
| <base> | 定義整個頁面的基礎URL |
| <bdo> | 定義文本顯示的方向 |
| <blockquote> | 定義一個長引用 |
| <body> | 定義主體元素 |
| <br> | 插入單個的換行 |
| <button> | 定義按鈕 |
| <caption> | 定義表格的標題 |
| <cite> | 定義引用 |
| <code> | 定義計算機代碼文本 |
| <col> | 定義表格列的屬性 |
| <colgroup> | 定義表格列的組 |
| <dd> | 定義個定義描述 |
| <del> | 定義刪除文本 |
| <dfn> | 定義個定義項 |
| <div> | 定義文檔章節 |
| <dl> | 定義定義列表 |
| <dt> | 定義定義項 |
| <em> | 定義強調文本 |
| <fieldset> | 定義控件組 |
| <form> | 定義表單 |
| <h1>到<h6> | 定義頭部1到頭部6 |
| <head> | 定義文檔信息 |
| <hr> | 定義水平線 |
| <html> | 定義個html文檔 |
| <i> | 定義傾斜文本 |
| <iframe> | 定義內聯替代窗口（框架） |
| <img> | 定義個圖片 |
| <input> | 定義輸入域 |
| <ins> | 定義插入文本 |
| <kbd> | 定義鍵盤文本 |
| <label> | 定義表單控件的標簽 |
| <legend> | 定義控件組的標題 |
| <li> | 定義列表項 |
| <link> | 定義相關資源 |
| <map> | 定義圖片地圖 |
| <menu> | 定義菜單列表 |
| <meta> | 定義元信息 |
| <noscript> | 定義無腳本章節 |
| <object> | 定義內嵌對象 |
| <ol> | 定義一個有序列表 |
| <optgroup> | 定義個選項組 |
| <option> | 定義下拉列表選項 |
| <p> | 定義段落 |
| <params> | 定義object的參數 |
| <pre> | 定義預格式化文本 |
| <q> | 定義短引用 |
| <s> | 定義不再正確的文本 |
| <samp> | 定義簡單的計算機代碼 |
| <script> | 定義腳本 |
| <select> | 定義可選擇列表 |
| <small> | 定義小點的文本 |
| <span> | 定義文檔章節 |
| <strong> | 定義強調的文字 |
| <style> | 定義一個樣式定義 |
| <sub> | 定義下標文字 |
| <sup> | 定義上標文字 |
| <table> | 定義表格 |
| <tbody> | 定義表格的主體 |
| <td> | 定義表格單元格 |
| <textarea> | 定義文本域 |
| <tfoot> | 定義表格底部 |
| <th> | 定義表格頭 |
| <thead> | 定義表格頭 |
| <title> | 定義文檔的標題 |
| <tr> | 定義表格行 |
| <ul> | 定義無序列表 |
| <var> | 定義變量 |
| <acronym> | 在HTML4.01中定義首字母縮略詞 |
|---|---|
| <applet> | 定義內嵌的小應用程序 |
| <basefont> | 定義文檔中基本的字體屬性 |
| <big> | 讓文字變大點 |
| <center> | 居中顯示文字或內容 |
| <dir> | 定義目錄列表 |
| <font> | 指定字體種類，大小，顏色等 |
| <frame> | 在框架集中定義獨有的窗體 |
| <frameset> | 定義框架集，包含多個窗體 |
| <noframe> | 當瀏覽器不支持框架的時候顯示文字 |
| <strike> | 定義刪除線文本 |
| <tt> | 定義電傳打字機文本 |
| <u> | 定義下劃線文字 |
| <xmp> | 定義格式化的文字 |
三、HTML5文字備忘之全局屬性
| contenteditable |
指定是否允許用戶編輯內容 true | false |
|---|---|
| contextmenu |
定義元素的上下文菜單 menu id |
| draggable |
指定是否允許用戶拖拽元素 true|false|auto |
| dropzone |
指定當拖拽數據放開的時候會發生什么 copy|move|link |
| hidden |
指定元素不相干 hidden |
| spellcheck |
指定是否元素要進行拼寫檢查 true | false |
| accesskey |
指定訪問元素的快捷鍵 字符(character) |
|---|---|
| class |
指定元素的類名（為樣式表） 類名(classname) |
| dir |
指定元素文本內容的對齊方向 ltr|rtl |
| id |
為元素指定唯一的id id |
| lang |
為元素內容指定語言代碼 語言代碼(language code) |
| style |
指定元素的內聯樣式 樣式定義(style definition) |
| tabindex |
指定元素的tab順序 數值(nubmer) |
| title |
指定元素額外的信息 文本(text) |
四、HTML5文字備忘之事件屬性
1. window對象
| onafterprint | 在文檔打印之后執行 |
|---|---|
| onbeforeprint | 在文檔打印之前執行 |
| onbeforeloaded | 在文檔加載完畢之前執行 |
| onerror | 當錯誤發生時執行 |
| onhaschange | 當文檔發生改變的時候執行 |
| onmessage | 當該信息被觸發的時候執行 |
| onoffline | 當文檔離線的時候執行 |
| ononline | 當文檔上線的時候執行 |
| onpagehide | 當窗體隱藏的時候執行 |
| onpageshow | 當窗體顯示的時候執行 |
| onpopstate | 當窗體歷史改變的時候執行 |
| onredo | 當文檔執行恢復上一次操作的時候執行 |
| onresize | 當窗體大小改變的時候執行 |
| onstorage | 當文檔加載ok的時候執行 |
| onondo | 當文檔執行恢復之前一次操作的時候執行 |
| onunload | 當用戶離開文檔的時候執行 |
| onblur | 當窗體失去焦點的時候執行 |
|---|---|
| onfocus | 當窗體獲得焦點的時候執行 |
| onload | 當文檔加載完畢的時候執行 |
2. form表單的事件屬性
| oncontextmenu | 當上下文菜單被觸發的時候執行 |
|---|---|
| onformchange | 當表單發生改變的時候執行 |
| onforminput | 當表單獲得用戶輸入時候執行 |
| oninput | 當元素獲得用戶輸入的時候執行 |
| oninvalid | 當元素驗證無效的時候執行 |
| onblur | 當元素失去焦點的時候執行 |
|---|---|
| onchange | 當元素改變的時候執行 |
| onfocus | 當元素獲得焦點的時候執行 |
| onselect | 當元素被選擇的時候執行 |
| onsubmit | 當表單被提交的時候執行 |
| onreset | 當表單重置的時候執行 |
|---|
3. 鍵盤事件
| onkeydown | 當鍵按下的時候執行 |
|---|---|
| onkeypress | 當鍵按下并釋放的時候執行 |
| onkeyup | 當鍵抬起的時候執行 |
4. 鼠標事件
| ondrag | 當元素被拖拽的時候執行 |
|---|---|
| ondragend | 當元素拖拽操作結束的時候執行 |
| ondragenter | 當元素拖拽進入釋放對象的時候 |
| ondragleave | 當元素拖拽離開釋放對象的時候 |
| ondragover | 當元素拖拽經過釋放對象的時候 |
| ondragstart | 當元素拖拽操作開始的時候執行 |
| ondrop | 當拖拽元素被放開的時候 |
| onmouswheel | 當鼠標滑輪滾動的時候執行 |
| onscroll | 當元素的滾動條滾動的時候執行 |
| onclick | 當鼠標點擊的時候執行 |
|---|---|
| ondbclick | 當鼠標雙擊的時候執行 |
| onmousedown | 當鼠標按下的時候執行 |
| onmousemove | 當鼠標移動的時候執行 |
| onmouseout | 當鼠標移出元素的時候執行 |
| onmouseover | 當屬性進入元素的時候執行 |
| onmouseup | 當鼠標抬起的時候執行 |
5. 媒體事件
| oncanplay | 當媒體可以播放的時候執行 |
|---|---|
| oncanplaythrough | 當媒體可以播放到最后的時候執行 |
| ondurationchange | 當媒體長度改變的時候執行 |
| onemptied | 當媒體資源元素變成空的時候執行 |
| onended | 當媒體已經到達最后的時候執行 |
| onerror | 當加載元素發生錯誤的時候執行 |
| onloadeddata | 當媒體數據加載完畢的時候執行 |
| onloadedmetadata | 當媒體元素的持續時間加載完畢的時候執行 |
| onloadstart | 當瀏覽器開始加載媒體數據的時候執行 |
| onpause | 當媒體數據暫停的時候執行 |
| onplay | 當媒體數據繼續開始播放的時候執行 |
| onplaying | 當媒體數據已經開始播放的時候執行 |
| onprogress | 在瀏覽器正在獲取媒體數據的時候執行 |
| onratechange | 當媒體數據播放比率發生改變的時候執行 |
| onreadystatechange | 當ready-state發生改變的時候執行 |
| onseeked | 當元素的seeking屬性不是true的時候執行 |
| onseeking | 當元素的seeking屬性是true的時候執行 |
| onstalled | 當獲取元素數據發生錯誤的時候執行 |
| onsuspend | 當瀏覽器停止獲取媒體數據的時候執行 |
| ontimeupdate | 當媒體改變其播放位置的時候執行 |
| onvolumechange | 當媒體音量大小發生改變的時候執行，包括無聲 |
| onwaiting | 當媒體元素停止播放的時候 |
| onabort | 碰到abort的時候執行 |
|---|
五、HTML5文字備忘之瀏覽器的準備情況
支持：
不支持：
部分支持：
注：下表格最右側三欄指移動設備上的瀏覽器支持情況。
|
8 |
3.6 |
9.0 |
5.0 |
11.0 |
2.3 |
4.5 |
10.0 |
||
|---|---|---|---|---|---|---|---|---|---|
| Details & Summary元素 | |||||||||
| WebGL – 3D Canvas 制圖 | |||||||||
| HTML5中內聯SVG | |||||||||
| Datalist元素 | |||||||||
| Progress & Meter | |||||||||
| classList(DOMTokenList) | |||||||||
| Ruby注解 | |||||||||
| 表單驗證 | |||||||||
| Session歷史管理 | |||||||||
| HTML5表單特征 | |||||||||
| 拖拽和拖放 | |||||||||
| contenteditable屬性 | |||||||||
| Canvas的文本API | |||||||||
| Audio元素 | |||||||||
| Video元素 | |||||||||
| dataset & data – 屬性 | |||||||||
| 新語義元素 | |||||||||
| Canvas(基本支持) | |||||||||
| Hash改變事件 | |||||||||
| 離線web應用程序 | |||||||||
| getElementsByClassName | |||||||||
| 總支持率 | 21% | 55% | 85% | 67% | 64% | 51% | 50% | 36% |
六、最后幾句話
時間倉促，錯誤難免。歡迎大力指正。以上就是全部內容。
參考文章：Ultimate HTML5 Cheatsheat [Infographic]
原創文章，轉載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544
（本篇完）
總結
以上是生活随笔為你收集整理的html5备忘录——张鑫旭的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 阻抗匹配（这样理解阻抗匹配比较容易懂！）
- 下一篇： 非常人贩2在线观看（非常人贩2在线观看高