千呼万唤 HTML 5 (5) - 元素的通用属性

介绍
HTML 5: 元素的通用属性

元素的通用属性 - accesskey, style, class, title, tabindex, id, dir, spellcheck, hidden, contenteditable, contextmenu, draggable, dropzone

示例
1、accesskey - 用于定义快捷键
element/_globalAttributes/accesskey.html

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	`<!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

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`<!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

柠檬铺