Atributos de HTML
Atributos básicos: Son elementos que definen las etiquetas de HTML, los atributos son parecidos a funciones especiales que te permiten dar diseño o marcar una etiqueta.
Atributos:
Atributos:
Atributos de evento:
Estos atributos nos permiten detectar acciones que es llevan acabo en nuestra pagina web, estos atributos se usa con otro lenguaje de programación llamado JavaScript.
Eventos sobre el documento HTML
Es posible poner a escuchar ciertos eventos sobre el documento HTML completo, estableciendo el atributo del evento en la etiqueta <body>:
Tipo de evento Atributo HTML Descripción
UIEvent onLoad: La página (el documento HTML) ha terminado de cargarse.
UIEvent onUnload: La página (el documento HTML) va a cerrarse.
UIEvent onScroll: El usuario ha hecho scroll sobre la página (el documento HTML).
Eventos sobre la carga de un recurso
Sobre las etiquetas que cargan un archivo externo, como podrían ser <img> o <script>, e incluso <style> con estilos CSS en línea. Los archivos multimedia <audio> y <video> tienen sus propios eventos específicos, ya que tienen un proceso de carga especial
Tipo de evento Atributo HTML Descripción
UIEvent onLoad: El recurso ha terminado de cargarse en la página.
UIEvent onUnload: El recurso ha sido eliminado de la página.
UIEvent onAbort: El recurso ha sido cancelado y no ha terminado su carga.
UIEvent onError: El recurso ha dado un error y no ha terminado su carga.
UIEvent onSelect: El usuario ha seleccionado un texto de un campo de datos.
Eventos de foco en elementos
Sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:
Eventos de ratón
Los eventos de ratón se utilizan para detectar todas aquellas acciones que el usuario realiza mediante el ratón con algún elemento de la página, como podría ser mover el ratón por encima de ellos, hacer clic, mover la rueda del ratón, etc...
Tipo de evento Atributo HTML Descripción
MouseEvent onClick: El usuario ha pulsado (y soltado) el elemento.
MouseEvent onDblclick: El usuario ha hecho doble clic en el elemento.
MouseEvent onMousedown: El usuario ha pulsado (aún sin haber soltado) el elemento.
MouseEvent onMouseup: El usuario ha soltado el botón pulsado en un elemento.
MouseEvent onMousemove: El usuario ha movido el ratón.
MouseEvent onMouseenter: El usuario ha movido el ratón dentro de un elemento.
MouseEvent onMouseleave: El usuario ha movido el ratón fuera de un elemento.
MouseEvent onMouseout: El usuario ha movido el ratón fuera de un elemento (bubbles).
MouseEvent onMouseover: El usuario ha movido el ratón dentro de un elemento (bubbles).
WheelEvent onWheel: El usuario ha movido la rueda del ratón.
Eventos de entrada de datos
Sobre elementos <input> o elementos HTML con el atributo contentEditable, y por lo tanto, elementos HTML que son editables por el usuario:
Tipo de evento Atributo HTML Descripción
InputEvent onBeforeInput: Un elemento <input> o con atributo contentEditable a punto de cambiar.
InputEvent onInput: Un elemento <input> o con atributo contentEditable ha cambiado.
Eventos multimedia (audio o video)
Sobre elementos multimedia como <audio> o <video>, donde se carga un recurso (MP4, WebM, MP3, OGG...) externo:
Tipo de evento Atributo HTML Descripción
MediaEvent onEmptied: El audio o video se ha vacíado (recargar elemento).
MediaEvent onLoadedMetadata: Se han precargado los metadatos del audio o video (duración, subs...)
MediaEvent onLoadedData: Se ha precargado el comienzo del audio o video.
MediaEvent onCanPlay: El audio o video se ha precargado lo suficiente para reproducir.
MediaEvent onCanPlayThrough: El audio o video se ha precargado completamente.
MediaEvent onPlay: El audio o video comienza a reproducirse (tras haber sido pausado).
MediaEvent onPlaying: El audio o video comienza a reproducirse.
MediaEvent onPause: El audio o video ha sido pausado.
MediaEvent onTimeUpdate: El audio o video ha avanzado en su reproducción.
MediaEvent onEnded: El audio o video ha completado su reproducción.
MediaEvent onWaiting: El audio o video está esperando a que el buffer se complete.
MediaEvent onDurationChange: El audio o video ha cambiado su duración total (metadatos).
MediaEvent onRateChange: El audio o video ha cambiado su velocidad de reproducción.
MediaEvent onVolumeChange: El audio o video ha cambiado su volumen de reproducción.
ProgressEvent onProgress: El audio o video se está descargando.
ProgressEvent onLoadStart: El audio o video ha comenzado a descargarse.
MediaEvent onSuspend: La precarga del audio o video ha sido suspendida (ok o pause).
UIEvent onAbort: La precarga del audio o video ha sido abortada o reiniciada.
UIEvent onError: Ha ocurrido un error.
MediaEvent onStalled: El navegador intenta precargar el audio o video, pero se ha estancado.
MediaEvent onSeeking: El navegador comenzó a buscar un momento concreto del audio/video.
MediaEvent onSeeked: El navegador terminó de buscar un momento concreto del audio/video.
UIEvent onResize: El video ha sido redimensionado.
Atributos de foco: Se usa sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:
FocusEvent onBlur: El elemento ha perdido el foco (foco de salida).
FocusEvent onFocusout: El elemento ha perdido el foco (y permite bubble).
FocusEvent onFocus: El elemento ha ganado el foco (foco de entrada).
FocusEvent onFocusin: El elemento ha ganado el foco (y permite bubble).
Atributos:
- <img src> menciona la dirección exacta de una imagen en la computadora para presentarla en el archivo HTML.
- <link rel> permite enlazar el archivo HTML con otros archivos como; archivos CSS o JS (JavaScript).
- <*** class="**"> permite definir una clase dentro de una etiqueta, esto nos permitirá darle diseño a nuestra pagina por medio de CSS o JS.
- <*** id="**"> permite definir id dentro de una etiqueta y tiene la misma función que el atributo class pero esta solo se puede usar una sola vez en nuestro código.
Los Atributos para Internacionalización:
Se utilizan para que las páginas que muestren sus contenidos en varios idiomas o a aquellas páginas que quieran indicar de forma explicita el idioma que utilizan para sus contenidos.Atributos:
- <html lang="en"> nos permite poner el código de nuestra idioma.
- <dir> este atributo indica la dirección del texto, esto es muy util para los idiomas escritos de derecha a izquierda.
Atributos de evento:
Eventos sobre el documento HTML
Es posible poner a escuchar ciertos eventos sobre el documento HTML completo, estableciendo el atributo del evento en la etiqueta <body>:
Tipo de evento Atributo HTML Descripción
UIEvent onLoad: La página (el documento HTML) ha terminado de cargarse.
UIEvent onUnload: La página (el documento HTML) va a cerrarse.
UIEvent onScroll: El usuario ha hecho scroll sobre la página (el documento HTML).
Eventos sobre la carga de un recurso
Sobre las etiquetas que cargan un archivo externo, como podrían ser <img> o <script>, e incluso <style> con estilos CSS en línea. Los archivos multimedia <audio> y <video> tienen sus propios eventos específicos, ya que tienen un proceso de carga especial
Tipo de evento Atributo HTML Descripción
UIEvent onLoad: El recurso ha terminado de cargarse en la página.
UIEvent onUnload: El recurso ha sido eliminado de la página.
UIEvent onAbort: El recurso ha sido cancelado y no ha terminado su carga.
UIEvent onError: El recurso ha dado un error y no ha terminado su carga.
UIEvent onSelect: El usuario ha seleccionado un texto de un campo de datos.
Eventos de foco en elementos
Sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:
Eventos de ratón
Los eventos de ratón se utilizan para detectar todas aquellas acciones que el usuario realiza mediante el ratón con algún elemento de la página, como podría ser mover el ratón por encima de ellos, hacer clic, mover la rueda del ratón, etc...
Tipo de evento Atributo HTML Descripción
MouseEvent onClick: El usuario ha pulsado (y soltado) el elemento.
MouseEvent onDblclick: El usuario ha hecho doble clic en el elemento.
MouseEvent onMousedown: El usuario ha pulsado (aún sin haber soltado) el elemento.
MouseEvent onMouseup: El usuario ha soltado el botón pulsado en un elemento.
MouseEvent onMousemove: El usuario ha movido el ratón.
MouseEvent onMouseenter: El usuario ha movido el ratón dentro de un elemento.
MouseEvent onMouseleave: El usuario ha movido el ratón fuera de un elemento.
MouseEvent onMouseout: El usuario ha movido el ratón fuera de un elemento (bubbles).
MouseEvent onMouseover: El usuario ha movido el ratón dentro de un elemento (bubbles).
WheelEvent onWheel: El usuario ha movido la rueda del ratón.
Eventos de entrada de datos
Sobre elementos <input> o elementos HTML con el atributo contentEditable, y por lo tanto, elementos HTML que son editables por el usuario:
Tipo de evento Atributo HTML Descripción
InputEvent onBeforeInput: Un elemento <input> o con atributo contentEditable a punto de cambiar.
InputEvent onInput: Un elemento <input> o con atributo contentEditable ha cambiado.
Eventos multimedia (audio o video)
Sobre elementos multimedia como <audio> o <video>, donde se carga un recurso (MP4, WebM, MP3, OGG...) externo:
Tipo de evento Atributo HTML Descripción
MediaEvent onEmptied: El audio o video se ha vacíado (recargar elemento).
MediaEvent onLoadedMetadata: Se han precargado los metadatos del audio o video (duración, subs...)
MediaEvent onLoadedData: Se ha precargado el comienzo del audio o video.
MediaEvent onCanPlay: El audio o video se ha precargado lo suficiente para reproducir.
MediaEvent onCanPlayThrough: El audio o video se ha precargado completamente.
MediaEvent onPlay: El audio o video comienza a reproducirse (tras haber sido pausado).
MediaEvent onPlaying: El audio o video comienza a reproducirse.
MediaEvent onPause: El audio o video ha sido pausado.
MediaEvent onTimeUpdate: El audio o video ha avanzado en su reproducción.
MediaEvent onEnded: El audio o video ha completado su reproducción.
MediaEvent onWaiting: El audio o video está esperando a que el buffer se complete.
MediaEvent onDurationChange: El audio o video ha cambiado su duración total (metadatos).
MediaEvent onRateChange: El audio o video ha cambiado su velocidad de reproducción.
MediaEvent onVolumeChange: El audio o video ha cambiado su volumen de reproducción.
ProgressEvent onProgress: El audio o video se está descargando.
ProgressEvent onLoadStart: El audio o video ha comenzado a descargarse.
MediaEvent onSuspend: La precarga del audio o video ha sido suspendida (ok o pause).
UIEvent onAbort: La precarga del audio o video ha sido abortada o reiniciada.
UIEvent onError: Ha ocurrido un error.
MediaEvent onStalled: El navegador intenta precargar el audio o video, pero se ha estancado.
MediaEvent onSeeking: El navegador comenzó a buscar un momento concreto del audio/video.
MediaEvent onSeeked: El navegador terminó de buscar un momento concreto del audio/video.
UIEvent onResize: El video ha sido redimensionado.
Atributos de foco: Se usa sobre etiquetas <input>, <textarea>, <select>, <a> o cualquier otra etiqueta que pueda ser seleccionable por el usuario pulsando la tecla TAB, existen una serie de eventos para controlar cuando gana o pierde el foco un elemento:
FocusEvent onBlur: El elemento ha perdido el foco (foco de salida).
FocusEvent onFocusout: El elemento ha perdido el foco (y permite bubble).
FocusEvent onFocus: El elemento ha ganado el foco (foco de entrada).
FocusEvent onFocusin: El elemento ha ganado el foco (y permite bubble).
Comentarios
Publicar un comentario