html5 全局属性

浏览数：74 / 时间：2015年06月09日

有几个属性之前并不熟悉，现在总结一下
其实我是无意间看到一个关于 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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html5 全局属性

标签： htmlhtml