千呼万唤 HTML 5 (5) - 元素的通用属性
来源:互联网 发布:2016淘宝开店要钱吗 编辑:程序博客网 时间:2024/05/17 02:45
原文地址:http://www.cnblogs.com/webabcd/archive/2012/02/02/2335318.html
作者: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
[源码下载]
- 千呼万唤 HTML 5 (5) - 元素的通用属性
- 千呼万唤 HTML 5 (2) - 区块元素
- 千呼万唤 HTML 5 (3) - 内容分组元素
- 千呼万唤 HTML 5 (4) - 文本语义元素
- 千呼万唤 HTML 5 (7) - 表单元素
- 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
- 千呼万唤 HTML 5 (1) - 根元素, 元数据元素, 脚本元素
- 千呼万唤 HTML 5 (8) - 画布(canvas)之绘制图形
- 千呼万唤 HTML 5 (9) - 画布(canvas)之承载媒体
- 千呼万唤 HTML 5 (10) - 画布(canvas)之转换
- 千呼万唤 HTML 5 (11) - 画布(canvas)之效果
- 千呼万唤的iPhone 5可能让你大跌眼镜!
- HTML 元素属性的兼容性问题
- HTML的元素、标签、属性
- HTML元素的display属性
- html元素的title属性
- html元素&属性的总结
- 记不住就存下来---- HTML 5 新增通用属性
- nginx + php + https 配置用例
- Fckeditor漏洞利用总结
- CRC32 逆向算法的C语言实现
- 学破解 <一> PE格式之MS-DOS MZ header
- stl string常用函数
- 千呼万唤 HTML 5 (5) - 元素的通用属性
- nginx rewrite 参数和例子
- 函数指针
- 深入浅出linux内核源代码之双向链表list_head(上)
- C++课程设计小区物业管理系统
- 千呼万唤 HTML 5 (6) - 表单元素之 input 元素
- 一线网页游戏程序员日志 (十二)
- 千呼万唤 HTML 5 (7) - 表单元素
- struts注册信息验证的实现描述附带代码