千呼萬喚 HTML 5 (5) - 元素的通用屬性
作者：webabcd
介紹
HTML 5: 元素的通用屬性
- 元素的通用屬性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone
示例
1、accesskey - 用於定義快捷鍵
element/_globalAttributes/accesskey.html
<!doctype html>
<html>
<head>
<title>accesskey</title>
</head>
<body>
<!--
accesskey - 用於定義快捷鍵。快捷鍵為：alt + accesskey，參考第一個示例
第二個示例描述為：有全鍵盤的設備快捷鍵為：ctrl + alt + q（目前 IE 為：ctrl + shift + q），僅有小鍵盤的設備快捷鍵為：“數字 0 鍵”
-->
<a accesskey="w" href="http://webabcd.cnblogs.com/">webabcd blog</a>
<a accesskey="q 0" href="http://webabcd.cnblogs.com/">webabcd blog</a>
</body>
</html>
2、style - 用於定義樣式
element/_globalAttributes/style.html
<!doctype html>
<html>
<head>
<title>style</title>
</head>
<body>
<!--
style - 用於定義樣式
-->
<span style="font-size:36px; color:Blue">webabcd</span>
</body>
</html>
3、class - 指定需要應用的 css 類選擇器
element/_globalAttributes/class.html
<!doctype html>
<html>
<head>
<title>class</title>
<style>
.myClass { font-size:36px; }
.myClass2 { color:Blue; }
</style>
</head>
<body>
<!--
class - 指定需要應用的 css 類選擇器
-->
<span class="myClass myClass2">webabcd</span>
</body>
</html>
4、title - 用於描述元素信息，相當於 ToolTip
element/_globalAttributes/title.html
<!doctype html>
<html>
<head>
<title>title</title>
</head>
<body>
<!--
title - 用於描述元素信息，相當於 ToolTip
-->
<a title="webabcd" href="http://webabcd.cnblogs.com/">webabcd blog</a>
<img src="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245" alt="頭像" title="webabcd" />
</body>
</html>
5、tabindex - 用於定義 TAB 鍵的導航順序（整型值）
element/_globalAttributes/tabindex.html
<!doctype html>
<html>
<head>
<title>tabindex</title>
</head>
<body>
<!--
tabindex - 用於定義 TAB 鍵的導航順序（整型值）
按從小到大的順序導航（0 除外，0 會被最后導航到）
負數則不會被導航到
-->
<input type="text" tabindex="-1" />
<input type="text" tabindex="-2" />
<input type="text" tabindex="0" />
<input type="text" tabindex="3" />
<input type="text" tabindex="1" />
<input type="text" tabindex="4" />
<input type="text" tabindex="2" />
</body>
</html>
6、id - 用於定義元素的唯一標識，主要給 DOM 用
element/_globalAttributes/id.html
<!doctype html>
<html>
<head>
<title>id</title>
</head>
<body>
<!--
id - 用於定義元素的唯一標識，主要給 DOM 用
-->
<a id="myId" href="http://webabcd.cnblogs.com/">webabcd blog</a>
<script type="text/javascript">
alert(document.getElementById('myId').innerHTML);
</script>
</body>
</html>
7、dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的縮寫）
element/_globalAttributes/dir.html
<!doctype html>
<html>
<head>
<title>dir</title>
</head>
<body>
<!--
bdo - 定義文本排列的方向（bdo 是 bi-directional override 的縮寫）
dir - 文本排列方向，可能的值有：auto|ltr|rtl（dir 是 direction 的縮寫）
-->
<bdo dir="rtl">123</bdo>
</body>
</html>
8、spellcheck - 是否使用瀏覽器的拼寫檢查功能對元素內的內容做拼寫檢查
element/_globalAttributes/spellcheck.html
<!doctype html>
<html>
<head>
<title>spellcheck</title>
</head>
<body>
<!--
spellcheck - 是否使用瀏覽器的拼寫檢查功能對元素內的內容做拼寫檢查（支持如下元素：textarea; 類型為 text 的 input; contenteditable 為 true 的元素）
可能的值有："", "true", "false"
-->
<textarea rows="10" cols="20" spellcheck="true">
i am jack, i am webabcd, haha, good, hehe
</textarea>
</body>
</html>
9、hidden - 用於隱藏元素（不占位）
element/_globalAttributes/hidden.html
<!doctype html>
<html>
<head>
<title>hidden</title>
</head>
<body>
<!--
hidden - 用於隱藏元素（不占位）
-->
<input type="text" hidden />
<input type="text" />
<input type="text" hidden />
</body>
</html>
10、contenteditable - 用於定義內容是否可編輯
element/_globalAttributes/contenteditable.html
<!doctype html>
<html>
<head>
<title>contenteditable</title>
</head>
<body>
<!--
contenteditable - 用於定義內容是否可編輯
可能的值有："", "true", "false"
-->
<p contenteditable>我是可以編輯的，試試看</p>
</body>
</html>
11、contextmenu - 指定上下文菜單的數據源
element/_globalAttributes/contextmenu.html
<!doctype html>
<html>
<head>
<title>contextmenu</title>
</head>
<body>
<!--
contextmenu - 指定上下文菜單的數據源
menu - 定義菜單（目前僅有 FireFox 實現了 context 菜單）
type - 菜單的類型，有兩種類型：context（右鍵菜單） 和 toolbar（工具欄菜單）
label - 菜單的名稱，顯示用
menuitem - 定義菜單項（菜單的子集）
label - 菜單項的名稱，顯示用
icon - 菜單項的圖標
-->
<section contextmenu="myContextMenu">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="" />
<menu type="context" id="myContextMenu">
<menuitem label="menuitem1" onclick="alert('menuitem1')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
<menuitem label="menuitem2" onclick="alert('menuitem2')"></menuitem>
<menu label="menuitem3" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245">
<menuitem label="menuitem31" onclick="alert('menuitem31')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
<menuitem label="menuitem32" onclick="alert('menuitem32')" icon="http://pic.cnblogs.com/avatar/a14540.jpg?id=24173245"></menuitem>
</menu>
</menu>
</section>
<!-- 工具欄式的菜單，目前還沒有瀏覽器實現此標准 -->
<section contextmenu="myToolbarMenu">
<menu type="toolbar">
<li>
<menu label="File">
<button type="button" onclick="fnew()">
New...</button>
<button type="button" onclick="fopen()">
Open...</button>
<button type="button" onclick="fsave()">
Save</button>
<button type="button" onclick="fsaveas()">
Save as...</button>
</menu>
</li>
<li>
<menu label="Edit">
<button type="button" onclick="ecopy()">
Copy</button>
<button type="button" onclick="ecut()">
Cut</button>
<button type="button" onclick="epaste()">
Paste</button>
</menu>
</li>
<li>
<menu label="Help">
<li><a href="#">Help</a></li>
<li><a href="#">About</a></li>
</menu>
</li>
</menu>
</section>
</body>
</html>
12、draggable - 元素是否可拖拽；dropzone - 拖放的目標元素（可承載被拖拽元素的元素）
element/_globalAttributes/draggable_dropzone.html
<!doctype html>
<html>
<head>
<title>draggable dropzone</title>
</head>
<body>
<span>關於 draggable 和 dropzone 的詳細說明，參見 /other/drag_drop</span>
</body>
</html>
OK
[源碼下載]