Nuevas características globales de HTML

propiedad 1.contenteditable

Efectos: Si la propiedad es verdadera, entonces el DOM elemento puede editar

<P contenteditable = "true"> Este es un editable párrafo. </ P>

 

2.Data - * ( * cadena personalizada Ejemplo: Datos-A )

Acción: algunos datos personalizados se pueden almacenar, y lo mismo para la etiqueta winfrom

< Html > 
< cabeza > 
< meta charset = "UTF-8" >  
< título >菜鸟教程(runoob.com) </ título >  
< secuencia de comandos > 
función showDetails (Animal) 
{ 
    var animalType = animal.getAttribute ( " datos animal -type " ); 
    alerta ( " La "  + animal.innerHTML +  " es un "  + animalType +  " .); 
} 
</ Script > 
</ cabeza > 
< cuerpo > 

< h1 de > especies </ h1 de > 
< P > clic en una especie, para ver qué tipo es: </ P > 

< UL > 
  < Li las onclick = "showDetails ( el este) " ID =" "OWL --tipo de animal de datos =" Bird " > Owl </ Li > 
  < Li las onclick =" showDetails (el este) " ID =" Salmon "datos en animales de tipo = "de pescado" >Salmon </ li >   
  < li onclick = "showDetails (esto)" id = "tarantula" -de tipo animal de datos = "araña" > Tarantula </ li >   
</ ul > 

</ cuerpo > 
</ html >

3.draggable

 Rol: Usted puede arrastrar y soltar la propiedad

<! DOCTYPE HTML > 
< html > 
< cabeza > 
< meta charset = "UTF-8" >  
< título >菜鸟教程(runoob.com) </ título > 
< estilo tipo = "text / css" > 
# div1 { anchura : 350 píxeles ; altura : 70 píxeles ; padding : 10px ; frontera : #aaaaaa sólido 1px ; } 
</ Estilo > 
<= "text / javascript" > 
función AllowDrop (ev) 
{ 
    ev.preventDefault (); 
} 

Función de arrastre (ev) 
{ 
    ev.dataTransfer.setData ( " texto " , ev.target.id); 
} 

Función gota (ev) 
{ 
    var datos = ev.dataTransfer.getData ( " texto " ); 
    ev.target.appendChild (document.getElementById (datos)); 
    ev.preventDefault (); 
} 
</ Script de > 
</ cabeza > 
< cuerpo > 

< divID = "DIV1" OnDrop = "gota (Event)" OnDragOver = "AllowDrop (Event)" > </ div > 
< br /> 
< P ID = "Drag1" arrastrable con = "true" el ondragstart = "Drag (Event)" > este es un móvil párrafo. Por favor rectángulo de arrastrar el párrafo anterior. </ P > 

</ cuerpo > 
</ HTML >

Arrastre imágenes y palabras de código, como el arrastre, pero no la misma etiqueta (img sustituido) no es lo mismo.

4.spellcheck 

Papel: detectar si el elemento está mal escrito, para detectar una corrección de entrada en Inglés, se puede utilizar con el atributo contenteditable

<! DOCTYPE HTML > 
< HTML > 
< cabeza >  
< Meta charset = "UTF-8." >  
< Título > principiante tutorial (runoob.com) </ título >  
</ cabeza > 
< cuerpo > 

< P contenteditable = "true" corrección ortográfica = "true" > este es un editable párrafo. Intente editar el texto. </ P > 

Nombre: < ENTRADA tipo = "text" nombre = "fname"

el p > < fuerte > Nota: </ fuerte > Internet Explorer 9 y versiones anteriores de IE no son compatibles con el atributo de corrección ortográfica. </ P > 

</ cuerpo > 
</ HTML >

propiedad 5.accesskey

Rol: configurar teclas de acceso directo

< Un href = "// www.runoob.com/html/html-tutorial.html" accesskey = "h" > HTML教程</ una > < br > 
< un href = "// www.runoob.com/css /css-tutorial.html" accesskey = "c" > CSS教程</ una >

Consejo:  una variedad de navegadores accesskey atajos para su uso:

navegador IE

Mantenga pulsada la tecla Alt, haga clic accesskey atajos definidos (el foco se moverá al enlace), y pulse Intro.

navegador Firefox

Mantenga pulsada la tecla Shift + Alt, haga clic en el acceso directo de tecla de acceso definidos.

navegador Chrome

Mantenga pulsada la tecla Alt, haga clic en la tecla de acceso de acceso directo definido.

navegador Opera

Mantenga pulsada la tecla de mayúsculas, pulse ESC, tecla de acceso lista de atajos definidos en esta página aparece para elegir.

navegador Safari

Mantenga pulsada la tecla Alt, haga clic en la tecla de acceso de acceso directo definido.