Atributos básicos.
Los atributos de las etiquetas HTML sirven para definir detalles de comportamiento o presentación de la etiqueta a los que se les coloca. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas.
href: se utiliza para indicar la URL a la que apunta el enlace y es el atributo mas importante para la etiqueta <a>.
Ejemplo: <a href="https://www.w3schools.com">This is a link</a>
SRC: Donde el atributo src contiene como valor un URL. Este URL indica la dirección y el nombre de la imagen que se desea insertar. Esta dirección puede ser absoluta o relativa.
Ejemplo: <img src="img_girl.jpg">
width yheight: proporcionan información para las imágenes.
Ejemplo: <img src="img_girl.jpg" width="500" height="600">
alt: especifica un texto alternativo que se utilizará, si una imagen no se puede visualizar.
Ejemplo: <img src="img_girl.jpg" alt="Girl with a jacket">
Ejemplo: <h1 class="intro">Header 1</h1>
Ejemplo: <p contenteditable="true">This is an editable paragraph.</p>
Ejemplo: <li data-animal-type="bird">Owl</li>
Ejemplo: <p dir="rtl">Write this text right-to-left!</p>
Ejemplo: <p draggable="true">This is a draggable paragraph.</p>
Ejemplo: <div dropzone="copy"></div>
hidden: es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante.
Ejemplo: <p hidden>This paragraph should be hidden.</p>
Ejemplo: <h1 id="myHeader">Hello World!</h1>
Ejemplo: <p lang="fr">Ceci est un paragraphe.</p>
Ejemplo: <p contenteditable="true" spellcheck="true">This is a paragraph.</p>
Ejemplo: <p style="color:green">This is a paragraph.</p>
Ejemplo: <a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
title: contiene un texto representado información relacionada al elemento al cual pertenece.
translate: es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio.
onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body yHTML framset.
onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset.
onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.
ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.
accesskey: Establece una tecla de acceso rápido a un elemento HTML.
Ejemplo: <a href="https://www.w3schools.com/html5" accesskey="h">HTML5</a><br>
tabindex: Establece la posición del elemento en el orden de tabulación de la página.
Ejemplo: <a href="http://www.google.com/" tabindex="1">Google</a>
onfocus, onblur: Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
alt: especifica un texto alternativo que se utilizará, si una imagen no se puede visualizar.
Ejemplo: <img src="img_girl.jpg" alt="Girl with a jacket">
style: se utiliza para especificar el estilo de un elemento, como el color, tipo de letra, tamaño, etc.
Ejemplo: <p style="color:red">This is a paragraph.</p>
lang: Con este atributo se declara el lenguaje.
Ejemplos: <html lang="en-US">
title: añade atributo al <p> elemento. El valor del atributo de título se muestra como un consejo al pasar el ratón sobre el párrafo.
Ejemplo: <p title="I'm a tooltip">
This is a paragraph.
</p>
Atributos para internacionalización
accesskey: provee un indicio para generar un atajo de teclado para el elemento actual.
Ejemplo: <a href="https://www.w3schools.com/css3" accesskey="c">CSS3</a>
class: es una lista de las clases del elemento separada por espacios.
contenteditable: es un atributo enumerado que indica si el elemento debe de ser editable por el usuario.
data-*: forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts.
dir: es un atributo enumerado que indica la direccionalidad del texto de los elementos.
draggable: es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el
HTML Drag and Drop API.
dropzone: es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and DroP.
hidden: es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante.
id: define un identificador único (ID) el cual no debe repetirse en todo el documento.
lang: participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos.
spellcheck: es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado.
style: contiene declaraciones de estilo CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados .
tabindex: indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre).
title: contiene un texto representado información relacionada al elemento al cual pertenece.
Ejemplo: <p title="Free Web tutorials">W3Schools.com</p>
translate: es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio.
Ejemplo: <p translate="no">Don't translate this!</p>
Atributos de eventos
Ejemplo: <body onload="myFunction()">
Ejemplo: <body onunload="myFunction()">
Ejemplo: <button onclick="myFunction()">Click me</button>
Ejemplo: <button ondblclick="myFunction()">Double-click me</button>
onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado sobre el elemento (independientemente de que sea soltado o no).
Ejemplo: <p onmousedown="mouseDown()">Click the text!</p>
onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el elemento.
Ejemplo: <p onmouseup="mouseUp()">Click the text!</p>
onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento.
Ejemplo: <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está sobre el elemento.
Ejemplo: <img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">
onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un documento.
Ejemplo: <img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y HTML button.
Ejemplo: <input type="text" id="fname" onfocus="myFunction(this.id)">
onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeypress="displayResult()">
onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada (independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeydown="myFunction()">
onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeyup="myFunction()">
onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del elemento HTML form.
Ejemplo: <form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por defecto. Este evento es exclusivo del elemento HTML form.
Ejemplo: <form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>
onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y HTML textarea.
Ejemplo: <input type="text" onselect="myFunction()" value="Hello world!">
onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos HTML input, HTML select y HTML textarea.
Ejemplo: <select onchange="myFunction()">
Atributos de foco
accesskey: Establece una tecla de acceso rápido a un elemento HTML.
Ejemplo: <a href="https://www.w3schools.com/html5" accesskey="h">HTML5</a><br>
tabindex: Establece la posición del elemento en el orden de tabulación de la página.
Ejemplo: <a href="http://www.google.com/" tabindex="1">Google</a>
onfocus, onblur: Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
No hay comentarios:
Publicar un comentario