大佬教程收集整理的这篇文章主要介绍了html5 全局属性，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
（有些并不是html5才有的属性）
0. 属性规定是否可编辑元素的内容
contenteditable 奇淫技巧链接 http://blog.jobbole.com/32823
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
data:text/html,<html contenteditable> （写到浏览器输入url的地方回车即可）
data:text/html,<textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />编辑内容的时候背景颜色改变
data:text/html,<html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;seTinterval(function(){if(!E){t=Math.round(R_441_11845@ath.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.BACkgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=falsE},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
data:text/html,<style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monoKai");e.getSession().setMode("ace/mode/PHP");</script>
Python -> ace/mode/python C/C++ -> ace/mode/c_cpp Javscript -> ace/mode/javascript Java -> ace/mode/java Scala -> ace/mode/scala Markdown -> ace/mode/markdown CoffeeScript -> ace/mode/coffee 其他…… jakeonrails 语法高亮风格用的是 monoKai。 如果需要换成其他风格，，可把 ace/theme/monoKai 替换为： Eclipse -> ace/theme/eclipse TextMate -> ace/theme/textmate 其他……
<!DOCTYPE HTML> <html> <body> <a href="http://www.w3school.com.cn/" accesskey="u">W3School</a><br /> <a href="http://www.google.com/" accesskey="g">Google</a> <br /> <label for="aa" accesskey="r">输入:</label> <input type="text" id="aa" /> <label for="hobby" accesskey="h">爱好:</label> <input type="checkBox" id="hobby" /> <label for="food" accesskey="y">菜系:</label> <input type="checkBox" id="food" /> <br /> <p><b>注释：</b>请使用 Alt + <i>accessKey</i> 来访问带有快捷键的元素。</p> </body> </html>注意 以上快捷键不要和浏览器或者@R_301_2483@的快捷键冲突，否则可能没有效果。
<!DOCTYPE HTML> <html> <body> <p dir="rtl">,look at me..</p> <bdo dir="rtl">dcba</bdo> <p dir="rtl">dcba</p> </body> </html>ltr 从左向右的文本方向。
3. draggable draggable 属性规定元素是否可拖动
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落。请把该段落拖入上面的矩形。</p> </body> </html>true 规定元素是可拖动的。
4. tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a> <a href="http://www.google.com/" tabindex="1">Google</a> <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
以上是大佬教程为你收集整理的html5 全局属性全部内容，希望文章能够帮你解决html5 全局属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。