HTML 新全局特性
1.contenteditable属性
作用：如果该属性为true，则该DOM元素可以编辑
<p contenteditable="true">这是一个可编辑段落。</p>
2.data-*（*为自定义字符串，例：data-a）
作用：可以储存一些自定义数据，和winfrom中的tag类似
<html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function showDetails(animal) { var animalType = animal.getAttribute("data-animal-type"); alert("The " + animal.innerHTML + " is a " + animalType + "."); } </script> </head> <body> <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> </body> </html>
3.draggable
作用：可拖拽属性
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <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>
图片拖拽和文字拖拽的代码一样，只是标签不一样（换成img）不一样而已。
4.spellcheck
作用：检测元素是否拼写错误，用于检测输入英文正确性，可以和contenteditable属性一起使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p> First name: <input type="text" name="fname" spellcheck="true"> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本不支持 spellcheck 属性。</p> </body> </html>
5.accesskey 属性
作用：设置快捷键
<a href="//www.runoob.com/html/html-tutorial.html" accesskey="h">HTML 教程</a><br> <a href="//www.runoob.com/css/css-tutorial.html" accesskey="c">CSS 教程</a>
提示： 各种浏览器下accesskey快捷键的使用方法：
IE浏览器
按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车.
FireFox浏览器
按住Alt+Shift键，点击accesskey定义的快捷键.
Chrome浏览器
按住Alt键，点击accesskey定义的快捷键.
Opera浏览器
按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择.
Safari浏览器
按住Alt键，点击accesskey定义的快捷键.
