有几个属性之前并不熟悉，现在总结一下其实我是无意间 看到一个关于 contenteditable 的奇淫技巧才决定把每个属性都看一下的。
（有些并不是html5才有的属性）
0. 属性规定是否可编辑元素的内容contenteditable 奇淫技巧链接 <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='?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(Math.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;">
最适合装X的来了：实现一个php编辑器：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="" 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>
当然不仅仅是 php 编辑器改造成支持其他语言语法高亮的，可把 ace/mode/php 替换为：Python -> ace/mode/pythonC/C++ -> ace/mode/c_cppJavscript -> ace/mode/javascriptJava -> ace/mode/javaScala -> ace/mode/scalaMarkdown -> ace/mode/markdownCoffeeScript -> ace/mode/coffee其他……jakeonrails 语法高亮风格用的是 monokai。如果需要换成其他风格，，可把 ace/theme/monokai 替换为：Eclipse -> ace/theme/eclipseTextMate -> ace/theme/textmate其他……1. accesskey 访问元素的键盘快捷键 <!DOCTYPE HTML><html><body><a href="" accesskey="u">W3School</a><br /><a href="" 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>注意 以上快捷键不要和浏览器或者自定义的快捷键冲突，否则可能没有效果。
2. dir 属性规定元素内容的文本方向
<!DOCTYPE HTML><html><body><p dir="rtl">,,look at me..</p><bdo dir="rtl">dcba</bdo><p dir="rtl">dcba</p></body></html>ltr 从左向右的文本方向。rtl 从右向左的文本方向。auto 让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。
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 规定元素是可拖动的。false 规定元素是不可拖动的。auto 使用浏览器的默认特性。
4. tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序
其实生命无论长短，只要我们能努力绽放出生命的光彩，便会拥有精彩的人生。
