有几个属性之前并不熟悉，现在总结一下
其实我是无意间 看到一个关于 contenteditable 的奇淫技巧才决定把每个属性都看一下的。
（有些并不是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(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="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>
当然不仅仅是 php 编辑器
改造成支持其他语言语法高亮的，可把 ace/mode/php 替换为：
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 其他……
1. accesskey 访问元素的键盘快捷键
<!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>
注意 以上快捷键不要和浏览器或者自定义的快捷键冲突，否则可能没有效果。
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" 键进行导航时元素的顺序
<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>
时间： 2025-01-22 10:53:18