HTML5新添加的全局属性
| 标签 |
描述 |
| contenteditable |
指定元素内容是否可编辑 |
| contextmenu |
指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单(浏览器暂时不支持) |
| data-* |
用于存储页面的自定义数据 |
| draggable |
指定某个元素是否可以拖动 |
| dropzone |
指定是否将数据复制，移动，或链接，或删除(浏览器暂时不支持) |
| hidden |
规定对元素进行隐藏 |
| spellcheck |
检测元素是否拼写错误 |
| translate |
指定是否一个元素的值在页面载入时是否需要翻译(浏览器暂时不支持) |
<!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
<style type="text/css">
#div1{
350px;
height:70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function showDetails(animal){
var animalType=animal.getAttribute("data-animal-type");
alert("The"+animal.innerHTML+"is a"+animalType+".");
}
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>
<body>
<p contenteditable="ture">这是一个可编辑段落</p>
<h1>物种</h1>
<p>点击一个物种,看看它是什么类型</p>
<ul>
<li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
<li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
<li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">这是一段可移动的段落.请把该段落拖入上面的矩形.</p>
<p hidden>这是一段隐藏的文字</p>
<p>这是一段显示的文字</p>
<p>spellcheck可以对类型为text的input元素中的值(非密码),textarea元素中的值,可编辑元素中的值进行拼写检查</p>
<p>spellcheck验证拼写不正确的值的底部会出现红色的波浪线</p>
<input type="text" spellcheck="true" placeholder="请输入需要检查的文字">
<textarea spellcheck="true"> QQ is something</textarea>
<p contenteditable="true">这是一段可编辑文字</p>
</body>
</html>