當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

html5备忘录——张鑫旭

發布時間：2024/6/21 综合教程 31 生活家

生活随笔收集整理的這篇文章主要介紹了 html5备忘录——张鑫旭小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

byzhangxinxufromhttp://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=1544

一、前言兼圖片備忘

下圖是我從testking網站上的Ultimate HTML5 Cheatsheat這篇文章中備忘圖片（已大小優化，因為圖片較高，故滾動顯示）。

但是，上面畢竟是圖片格式（原圖上兆），而且還是英文的，所以自己覺得有必要將上面的內容文字化，同時做下簡單的中文翻譯。整理一番，于是就有下面的些內容。

二、文字備忘之標簽

**HTML5中新增的標簽**
<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>	定義可能的換行

**HTML5支持且同時存在于HTML4中的標簽**
<!– …–>	定義注釋
<!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>	定義變量

**HTML5不支持的標簽**
<acronym>	在HTML4.01中定義首字母縮略詞
<applet>	定義內嵌的小應用程序
<basefont>	定義文檔中基本的字體屬性
<big>	讓文字變大點
<center>	居中顯示文字或內容
<dir>	定義目錄列表
<font>	指定字體種類，大小，顏色等
<frame>	在框架集中定義獨有的窗體
<frameset>	定義框架集，包含多個窗體
<noframe>	當瀏覽器不支持框架的時候顯示文字
<strike>	定義刪除線文本
<tt>	定義電傳打字機文本
<u>	定義下劃線文字
<xmp>	定義格式化的文字

三、HTML5文字備忘之全局屬性

**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對象

**window新增事件屬性**
onafterprint	在文檔打印之后執行
onbeforeprint	在文檔打印之前執行
onbeforeloaded	在文檔加載完畢之前執行
onerror	當錯誤發生時執行
onhaschange	當文檔發生改變的時候執行
onmessage	當該信息被觸發的時候執行
onoffline	當文檔離線的時候執行
ononline	當文檔上線的時候執行
onpagehide	當窗體隱藏的時候執行
onpageshow	當窗體顯示的時候執行
onpopstate	當窗體歷史改變的時候執行
onredo	當文檔執行恢復上一次操作的時候執行
onresize	當窗體大小改變的時候執行
onstorage	當文檔加載ok的時候執行
onondo	當文檔執行恢復之前一次操作的時候執行
onunload	當用戶離開文檔的時候執行

**window已存在事件屬性**
onblur	當窗體失去焦點的時候執行
onfocus	當窗體獲得焦點的時候執行
onload	當文檔加載完畢的時候執行

2. form表單的事件屬性

**form表單新增事件屬性**
oncontextmenu	當上下文菜單被觸發的時候執行
onformchange	當表單發生改變的時候執行
onforminput	當表單獲得用戶輸入時候執行
oninput	當元素獲得用戶輸入的時候執行
oninvalid	當元素驗證無效的時候執行

**form表單已支持事件屬性**
onblur	當元素失去焦點的時候執行
onchange	當元素改變的時候執行
onfocus	當元素獲得焦點的時候執行
onselect	當元素被選擇的時候執行
onsubmit	當表單被提交的時候執行

**HTML5不支持的form表單事件屬性**
onreset	當表單重置的時候執行

3. 鍵盤事件

**已存在的鍵盤事件屬性**
onkeydown	當鍵按下的時候執行
onkeypress	當鍵按下并釋放的時候執行
onkeyup	當鍵抬起的時候執行

4. 鼠標事件

**HTML5新增鼠標事件屬性**
ondrag	當元素被拖拽的時候執行
ondragend	當元素拖拽操作結束的時候執行
ondragenter	當元素拖拽進入釋放對象的時候
ondragleave	當元素拖拽離開釋放對象的時候
ondragover	當元素拖拽經過釋放對象的時候
ondragstart	當元素拖拽操作開始的時候執行
ondrop	當拖拽元素被放開的時候
onmouswheel	當鼠標滑輪滾動的時候執行
onscroll	當元素的滾動條滾動的時候執行

**已存在的鼠標事件屬性**
onclick	當鼠標點擊的時候執行
ondbclick	當鼠標雙擊的時候執行
onmousedown	當鼠標按下的時候執行
onmousemove	當鼠標移動的時候執行
onmouseout	當鼠標移出元素的時候執行
onmouseover	當屬性進入元素的時候執行
onmouseup	當鼠標抬起的時候執行

5. 媒體事件

**HTML5中新增媒體事件**
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文字備忘之瀏覽器的準備情況

支持：
不支持：
部分支持：

注：下表格最右側三欄指移動設備上的瀏覽器支持情況。

**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在线观看高