New global characteristics of HTML

1.contenteditable property

Effects: If the property is true, then the DOM element can edit

<P contenteditable = "true"> This is a paragraph editable. </ P>

2.Data - * ( * custom string Example: Data-A )

Action: some custom data can be stored, and similarly for the tag winfrom

<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 of > species </ h1 of > 
< P > click on a species, to see what type it is: </ P > 

< UL > 
  < Li the onclick = "showDetails ( the this) " ID =" OWL " Data-Animal-type =" Bird " > Owl </ Li > 
  < Li the onclick =" showDetails (the 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

Role: You can drag and drop property

<!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 with = "to true" the ondragstart = "Drag (Event)" > this is a paragraph movable. Please rectangle drag the paragraph above. </ P > 

</ body > 
</ HTML >

Drag pictures and code words, like drag, but not the same label (replaced img) just not the same.

4.spellcheck

Role: detecting whether the element is misspelled, for detecting an input correctness in English, can be used with the contenteditable attribute

<! DOCTYPE HTML > 
< HTML > 
< head >  
< Meta charset = "UTF-. 8" >  
< title > novice tutorial (runoob.com) </ title >  
</ head > 
< body > 

< P contenteditable = "to true" spellcheck = "to true" > this is a paragraph editable. Try to edit the text. </ P > 

First name: < INPUT type = "text" name = "fname"

the p- > < strong > Note: </ strong > Internet Explorer 9 and earlier versions of IE do not support the spellcheck attribute. </ P > 

</ body > 
</ HTML >

5.accesskey property

Role: set shortcut keys

<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>

Tip: a variety of browsers accesskey shortcuts to use:

IE browser

Hold down the Alt key, click accesskey defined shortcuts (the focus will move to the link), and press Enter.

FireFox browser

Hold down Alt + Shift key, click on the shortcut accesskey defined.

Chrome browser

Hold down the Alt key, click on the shortcut accesskey defined.

Opera browser

Hold down the Shift key, click esc, accesskey list of shortcuts defined on this page appear to choose from.

Safari browser

Hold down the Alt key, click on the shortcut accesskey defined.

New global characteristics of HTML

Guess you like