| 标签 | 描述 |
|---|---|
| contenteditable | 指定元素内容是否可编辑 |
| contextmenu | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单(浏览器暂时不支持) |
| data-* | 用于存储页面的自定义数据 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除(浏览器暂时不支持) |
| hidden | 规定对元素进行隐藏 |
| spellcheck | 检测元素是否拼写错误 |
| translate | 指定是否一个元素的值在页面载入时是否需要翻译(浏览器暂时不支持) |
<!DOCTYPE html><html><head><title>PRogress</title><meta charset="utf-8"><style type="text/CSS">#div1{width: 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>新闻热点
疑难解答
