b3t8 - HTML5 Flashcards by Daniel Pelado

Con qué etiqueta empiezan los archivos html 5?

< ! DOCTYPE html>

How well did you know this?

Not at all

Perfectly

Dentro del bloque head, qué etiqueta sirve para añadir palabras clave para la indexación?

meta name=”keywords”

How well did you know this?

Not at all

Perfectly

Qué etiqueta sirve para cargar una hoja de estilos a una página html 5? Qué dos atributos principales tiene?

How well did you know this?

Not at all

Perfectly

Con qué etiqueta se carga una hoja de estilos alternativa?

How well did you know this?

Not at all

Perfectly

Con qué etiqueta se establece el título de la pestaña del navegador? Dentro de qué nodo se coloca?

Título, dentro del nodo head

How well did you know this?

Not at all

Perfectly

Qué atributo se usa en la etiqueta para indicar dónde se tiene que abrir el enlace? Qué opciones se usan para abrirlo en una pestaña nueva y en la misma ventana?

Se usa el atributo target

_blank: Abre el enlace en una nueva ventana o pestaña del navegador.
_self: Abre el enlace en la misma ventana o marco donde se encuentra el enlace (valor predeterminado si no se especifica).
_parent: Abre el enlace en el marco principal que contiene la página que contiene el enlace.
_top: Abre el enlace en la ventana completa del navegador, reemplazando cualquier marco existente.

How well did you know this?

Not at all

Perfectly

Qué atributo y cómo se usa en la etiqueta para navegar a otra parte del documento?

href”#identificador”

How well did you know this?

Not at all

Perfectly

Etiqueta: fragmento de texto enfatizado respecto a la frase que lo contiene

em:

<p>En el examen <em>no se puedeem> copiarp>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto importante o palabras clave

Strong:

<p>Texto con una palabra <strong>destacadastrong>p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo

mark:

<p>A continuacion viene un <mark> texto resaltadomark>p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto con voz o tono alternativo al resto o un elemento fuera de la prosa actual

<p>There is a certain <i lang=”fr”>je ne sais quoii> in the air.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto que llama la atención pero sin importancia destacable (fines utilitarios)

<p>The <b>frobonitorb> and <b>barbinatorb> components are fried.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto para nombres propios o escritura incorrecta intencionada

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto inexacto o que ya no es relevante. (errores o inexactitudes)

<s>Precio antiguo del producto: $3.99 per bottles>

How well did you know this?

Not at all

Perfectly

Etiqueta: contenedor in-line sin significado especial (sirve para aplicar estilo al texto o agrupar elementos en línea)

span

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto con el título de un trabajo creativo: obra, libro, autor, empresa, URL, tweet,…

cite:

<p>In the words of <cite class=”formato”>Charles Bukowskicite> - …

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de texto in-line con una cita corta
Con qué atributo se tiene que apuntar a la URL de donde se saca la cita?

<p>El SEO es una disciplina que obsesiona a muchos expertos digitales sin embargo hay que tener en cuenta que <q cite=”https://francescricart.com/a-que-me-dedico-mejoro-webs-y-escribo-en-ellas/”>Es a tu audiencia a quien debes satisfacer y no a google.cite>.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Subíndice y superíndice

sup:

<p>El resultado de 2<sup>10sup> es 1024

sub:

<p>Tenemos que hallar el valor de X<sub>asub> en la ecuacionp>

How well did you know this?

Not at all

Perfectly

Etiqueta: Anotaciones menores pequeñas puntualizaciones

small:

<p><small>Information obtained from <a href=”https://example.com/about.html”>example.coma> home page.small>

How well did you know this?

Not at all

Perfectly

Etiqueta: Termino definido en el texto circundante

dfn:

<p>El <dfn id=”muro-de-berlin”>muro de Berlindfn> fue parte de la frontera…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Abreviatura o acrónimo

abbr:

<p>

El término <abbr title=”Kilómetro”>Kmabbr> es una unidad de longitud.

How well did you know this?

Not at all

Perfectly

Etiqueta: Salto de línea (nueva línea)

<br>

How well did you know this?

Not at all

Perfectly

Etiqueta: Entrada de información del usuario (generalmente, combinación de teclado)

kbd:

<p>Pulsa las teclas <kbd>CTRLkbd>+<kbd>Tkbd>…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Salida de información de un programa informático

samp:

<p>Cuando ingresé el comando, la computadora respondió <samp>Error: comando no encontradosamp>. Estoy perdido…p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Variable (contexto matemático o informático)

var:

<p>…donde <var>avar> representa la longitud de la hipotenusa, y <var>bvar> y <var>cvar> representan las

longitudes de los otros dos lados.p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Indica una fecha/hora legible para humanos, con formato para máquinas opcional

<time datetime=”2001-01-04”>4 de Enerotime>

How well did you know this?

Not at all

Perfectly

Etiqueta: Información equivalente orientado a máquinas/programas

data:

<p>Producto: <data value=”21354860684”>TV LED Full HDdata>p>

How well did you know this?

Not at all

Perfectly

Etiqueta: Fragmento de código de un lenguaje de programación

code:

con “pre” tiene la ventaja de que se respetará el formato: espacios, saltos de linea, etc

<p>Deberías declarar la función así: <code class=”formato”>function cambiarColor(elemento, evento) { … }code>, donde el

contenido de la función es representado por los puntos suspensivos.p>

How well did you know this?

Not at all

Perfectly

Anotaciones Ruby. Se utilizan para añadir anotaciones foneticas para la pronunciación de caracteres de Asia Oriental. Se suelen colocar encima del texto anotado

ruby
rt
rp:

<ruby>

漢 <rt>Kanrt>

字 <rt>jirt>

漢 <rp>(rp>

<rt>Kanrt>

字 <rp>(rp>

ruby>

How well did you know this?

Not at all

Perfectly

Etiqueta: para dar un texto descriptivo a una tabla

Caption

How well did you know this?

Not at all

Perfectly

Etiqueta: para agrupar visualmente varias celdas, por ejemplo con colores

colgroup, dentro del elemento table, hermano de thead o tbody

colgroup>

How well did you know this?

Not at all

Perfectly

Etiqueta: para indicar que es la cabecera de una tabla

<thead>

<tr>

<th scope=”col”>Destinoth>

<th>En autoth>

<th>En trenth>

<th>En bicicletath>

tr>

thead>

How well did you know this?

Not at all

Perfectly

Etiqueta: para indicar visualmente el pie de la tabla

<tfoot>

<tr>

<th scope=”row”>Promedioth>

<th>1 h 24 minth>

<th>1 h 22 minth>

<th>6 h 54 minth>

tr>

tfoot>

How well did you know this?

Not at all

Perfectly

Etiqueta: para indicar el cuerpo de una tabla

tbody:

<tbody>

<tr>

<th>Nueva Yorkth>

<td>1 h 51 mintd>

<td>1 h 22 mintd>

<td>8 h 53 mintd>

tr>

<tr>

<th>Allentownth>

<td>1 h 11 mintd>

<td>6 h 9 mintd>

tr>

<tr>

<th>Readingth>

<td>1 h 12 mintd>

<td>5 h 40 mintd>

tr>

tbody>

How well did you know this?

Not at all

Perfectly

Etiqueta: fila de una tabla

<tr>

<th>Nueva Yorkth>

<td>1 h 51 mintd>

<td>1 h 22 mintd>

<td>8 h 53 mintd>

tr>

How well did you know this?

Not at all

Perfectly

Etiqueta: celda de una tabla

td:

<tr>

<th>Nueva Yorkth>

<td>1 h 51 mintd>

<td>1 h 22 mintd>

<td>8 h 53 mintd>

tr>

How well did you know this?

Not at all

Perfectly

Etiqueta: celda de una tabla pero con un formato resaltado, de cabecera ya esté en cabecera o no

th:
<tr>

<th>Allentownth>

<td>1 h 11 mintd>

<td>6 h 9 mintd>

tr>

How well did you know this?

Not at all

Perfectly

Con qué etiquetas se da información al usuario cuando la tabla es compleja

caption, figcaption si la tabla es un elemento figure

How well did you know this?

Not at all

Perfectly

Qué atributos de td sirve para indicar cuántas celdas a la derecha o abajo debe ocupar la celda?

colspan
rowspan

How well did you know this?

Not at all

Perfectly

Qué es el elemento header y en qué se diferencia del head

In general, it may be said as a container element which may contain an introductory or a navigational content.

header element has nothing to do with the head element. And, it does not introduce any new section, but it is the head of a section.

How well did you know this?

Not at all

Perfectly

Etiqueta: zona con enlaces de navegacion en el ambito de nuestro site

Nav

How well did you know this?

Not at all

Perfectly

Etiqueta: representa una agrupación del contenido del que se trata en la pagina

Primera sección de la web
<section>

Primera sección de la web

<article> Artículo 1 article>

<article> Artículo 2 article>

<article> etc article>

section>

How well did you know this?

Not at all

Perfectly

Etiqueta: es un contenedor de bloques de contenido que se consideran independientes del sitio web y pueden, por lo tanto, ser vistos, reutilizados y distribuidos por separado, como por ejemplo, en la sindicación.

Primera sección de la web
Artículo 1
Artículo 2
etc

How well did you know this?

Not at all

Perfectly

Etiqueta: Representa información tangencialmente/ligeramente relacionada con el contenedor section/main/article/…

aside:

<aside>

<p> Texto 1 del aside p>

<p> Texto 2 del aside p>

aside>

How well did you know this?

Not at all

Perfectly

Etiqueta:
representa el pie de un documento o contenedor section/main/article/…

footer

footer>

How well did you know this?

Not at all

Perfectly

Etiqueta: para ejecutar un script js
Un atributo para ejecutar el script tan pronto esté disponible pero sin bloquear la carga del documento
Un atributo para ejecutar el script cuando la página se haya terminado de cargar

scritp:
- async (se ejecutará el script tan pronto como esté disponible pero sin bloquear la carga del documento)
- defer (se ejecutará el script cuando la pagina haya terminado de cargar)

How well did you know this?

Not at all

Perfectly

Etiqueta: Es un bloque que tiene por defecto un comportamiento desplegable
Dentro, tiene una etiqueta para el título que se verá antes de desplegar

details:

<summary>Más informaciónsummary>

<h2>Nombre del sujetoh2>

details>

How well did you know this?

Not at all

Perfectly

Etiqueta: para mostrar un mensaje emergente

dialog:

<p>¡Hola, soy un mensaje!p>

<button id=”close” onclick=”document.getElementById(‘ms’).close()”>Ok!button>

dialog>

How well did you know this?

Not at all

Perfectly

Atributo: Permite hacer cambios al usuario, pero afectan únicamente al DOM generado en cliente

contenteditable

Este contenido se puede editar por el usuario directamente en el browser

How well did you know this?

Not at all

Perfectly

Atributo: para ocultar un elemento
Similar al comportamiento de display:none, no deja ni el espacio que ocuparía el elemento

hidden

Texto que está oculto

div>

Etiqueta: Nos permite definir una zona de dibujo usada por el usuario o por algun(os) algortimos a traves de javascript+eventos

canvas:

canvas>

Etiqueta: Existe un mecanismo interesante de reutilizacion llamado templates (hay que usar javascript para clonar la plantilla). Ej:
 var plantilla = document.getElementById("plantillaCapa");
 var clon = plantilla.cloneNode(true);
 document.body.appendChild(clon);

<div>

<article>article>

section>

div>

template>

Indica qué tipos de elemento imput

text

date

pass

radio

color

range

Etiqueta: para definir lista de opciones predefinidas para aplicar a distintos elementos

datalist:

datalist>

<p>

Nivel actual de cafeína en sangre: <input type=”range” name=”nivelcafeina” list=”listanivelescafeina”>

Atributo para definir un atajo de teclado a un campo

Atributo: podemos forzar que avance de 2 en 2 por ejemplo (sirve para otros tipos de input como range, date, time, month, week, …

step:

Atributo: poder agrupar varias opciones en elementos de selección

optgroup

<option value=”1”>Fútboloption>

<option value=”2” selected>Hockeyoption>

optgroup>

<option value=”3”>Tenisoption>

optgroup>

select>

Atributo: forzar al navegador a hacer una revisión de ortografía del contenido del elemento

spellcheck

<p><textarea name=”mensaje” placeholder=”Comparte tu opinión con el autor!” spellcheck=”true”>textarea>

Atributos importantes de los imput

a) Nuevo de HTML5, para indicar el id del formulario al que pertenece. Util cuando hay formularios anidados, etc)
b) recoger el foco al cargar la página. solo lo puede tener un control
c) el usuario no puede editar y el usuario no puede editar y ademas no se envia
d) maxlength/minlength
e) obligatorio
f) autocompletar en base a valores insertados anteriormente
g) debe cumplir la expresión regular que se ponga

a) form
b) autofocus
c) readonly y disabled
d) maxlength/minlength=
e) required
f) autocomplete=”on”
g) pattern

NOTA: otras opciones que se le pueden añadir al submit en HTML5 son:

a) formaction
b) formmethod
c) formnovalidate
d) formtarget

NOTA: otras opciones que se le pueden añadir al submit en HTML5 son:

a) formaction=”url” -> indica la URL donde enviar la información del formulario
b) formmethod=”get/post”
c) formnovalidate -> (enviar sin validar)
d) formtarget=”_blank, _self, _parent, _top”

Etiqueta: Proporciona informacion de contacto de una persona, organizacion, etc

address

You can contact author at <a href=”http://www.somedomain.com/contact”>www.somedomain.coma>.<br>

If you see any bugs, please <a href=”mailto:webmaster@somedomain.com”>contact webmastera>.<br>

You may also want to visit us:<br>

Mozilla Foundation<br>

1981 Landings Drive<br>

Building K<br>

Mountain View, CA 94043-0801<br>

USA

address>

Etiqueta: Agrupador de bloque sin especial significado

div

Etiqueta: Representa contenido que se cita de otra fuente (etiqueta de bloque)

blockquote

<p>La primera regla del Club de la Lucha es: Nadie habla sobre el Club de la Lucha.p>

<cite class=”author”>Tyler Durdencite> en

<cite class=”title”>El Club de la Luchacite>

footer>

blockquote>

Etiqueta: Texto preformateado: respeta espacios, saltos de linea, etc

pre:

<pre>

Las cosas que necesitarás están listadas aquí:

Una linterna.
Una caja de fósforos.
Un cuchillo afilado.

pre>

Etiqueta: Lista ordenada

Atributos interesantes:
- a) start=nº (por donde empieza a generar la secuencia)
- b) type -> I (numeros romanos mayusculas), 1 (enteros), a (letras minusculas)

<ol>

<p>Procedimiento para ingresar a la configuración:p>

<li>Encienda la computadora.li>

<li>Presione la tecla … cuando se le indique.li>

<li>Ingrese la contraseñali>

ol>

Etiqueta: Lista de definiciones (un termino y uno o varias descripciones)

<dl>

<dt>Gallinadt>

<dd>Ave doméstica del orden de las galliformes.dd>

<dd>Cobarde, pusilánime.dd>

<dl>

Etiqueta: Ilustraciones con informacion autocontenida: pueden servir para anotar imagenes, videos, tablas, texto, etc

figure:

<figcaption>Logotipo oficial del lenguaje de marcas HTML5.figcaption>

figure>

Etiqueta: Contenido principal de la pagina. Solo deber de existir uno (si hay mas de uno, los demas deben estar hidden)

<main>

<p>Contenido principal del documentop>

main>

Atributos etiqueta img para configurar imágenes reponsive en función de la anchura/resolución del dispoistivo

Nuevo atributo srcset que sirve para configurar imagenes responsive en funcion de la anchura/resolucion del dispositivo en la carga inicial de la pagina
Aqui src funciona como imagen por defecto si el browser no soporta srcset

<img style=”max-width: 20%;” class=”formato” src=”../images/hero-big.jpg” srcset=”../images/hero-small.jpg 450w, ../images/hero-medium.jpg 960w, ../images/hero-big.jpg 1500w”

sizes=”(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px” alt=”Learnedia Hero”/>

Etiqueta: Para que el navegador solicite otra imagen en función del tamaño/resolución y el atributo que sirve para configurar cada una de esas imágenes

Con picture y los distintos sources el navegador puede, dinamicamente, solicitar otra imagen cuando cambie el tamaño de la visualizacion en el dispositivo

picture>

Etiqueta para gráficos vectoriales

Los graficos svg son vectoriales y basados en xml

Your browser support SVG.

text>

Sorry, your browser does not support SVG.

svg>

Atributos allow, srcdoc y sandbox de la etiqueta iframe

Con el atributo “srcdoc” podemos proporcionar codigo html directamente al frame

Con el atributo “allow” activamos una serie de Directivas de politica sobre distintos origenes

Si solo aparece el atributo sandbox sin valor se todas las características se deshabilitan por defecto

Etiqueta: para incrustar contenido de recursos externos de aplicaciones no-html tenemos estas dos etiquetas…

embed

object

data=”https://www.boe.es/boe/dias/2021/07/01/pdfs/BOE-B-2021-31639.pdf” width=”300” height=”200”>

object>

Atributos interesantes de la etiqueta “video”:
- a) imagen de portada
- b) comienza a reproducir el video inmediatamente). Podemos empezar en un segundo concreto src=”video.mp4#t=15
- c) una vez acaba vuelve a reproducirlo
- d) sin sonido
- e) muestra controles de reproduccion
- f) con valor “auto” precarga el video y con valor “metadata” solo ciertas propiedades del video

Atributos interesantes de la etiqueta “video”:
- a) poster=url
- b) autoplay
- c) loop
- d) muted
- e) controls
- f) preload (con valor “auto” y con valor “metadata”

<video src=”video.webm” poster=”presentacion.jpg” controls autoplay muted loop>video>

Otros valores para el atributo kind de la etiqueta track a parte de subtitles:

Otros valores para el atributo kind de subtitles:

a) chapters -> poner titulos a los capitulos
b) captions -> transcripcion del audio (incluir para sordos info no verbal por ej)

etc

Etiqueta: audio

La etiqueta de audio ofrece unas prestaciones similares a la de “video”

audio>

Etiqueta para definir un mapa de zonas en base a unas coordenadas …

… y luego usar esa definición de zonas sobre una imagen dada

map>

Qué librerías de javascript se usan o usaban antes de los frameworks js?

jquery

dojo

prototype

ExtJs

MooTools

Yui

Qué es un preprocesador CSS? Nombra 3. A qué lenguaje traducen su código?

Es una herramienta que permite definir pseudocódigo CSS, que se apoya luego en un compilador para traducir su código a CSS

LESS, SASS, STYLUS

Qué nuevos lenguajes han surgido a partir de javascript?

Typescript

Coffeescript

ES6 (ECMAScript 6)

Cómo se denominan los lenguajes como typescript, coffeescript o EC6 debido a cómo traducen el código a javascript?

Transpiladores

Qué significa MVVM? Nombra 4 frameworks MVVM.

Significa Model-View-View Model

Angular
ReactJs
Ember.js
Vue.js

Qué herramientas de gestión de dependencias se usan en los framework javascript? Nombra 2

nmp
yarn
bower

Nombra 3 editores actuales de front-end

Viual Studio Code (VS Code)
ATOM
Sublime

Nombra 5 navegadores web y qué motor de renderizado han usado alguna vez

Chrome (viene de Chromium)
Edge (ahora de Chromium)
Firefox:
Opera (viene de Chromium)
Safari

Chrome (viene de Chromium): Webkit → Blink
Edge (ahora de Chromium): MS → Blink
Firefox: Gecko → Quantum
Opera (viene de Chromium): Presto → Blink
Safari: Webkit

Qué dos técnicas de extensibilidad tiene HTML5? Para qué sirve cada una?

Atributos personalizados: Se pueden usar atributos con la sintaxis “data-*” que luego se pueden manipular con el API DATASET del javascript:
→ objetotd.dataset.codigo
Microdatos para definir semántica para mejores indexaciones:
Se usa los atributos
- itemscope para indicar que el conenedor tiene una semántica
- Itemtype para indicar con una url qué entidad de https//:schema.org se usa en el contenedor
- itemprop para indicar en cada elemento del contenedor qué propiedad de la entidad de https//:schema.org

Los atributos personalizados “data-*”, con qué API de javascript se puede explotar?

Con el API DATASET

objeto.dataset.atributoPersonalizado

por ej. objeto.dataset.data-categoría

En qué consisten los microdatos? Para qué se usa? En qué página están los itemtype y los itemprop que se pueden usar?

Son una forma de extensibilidad de HTML5 para dar más semántica y mejorar la indexación de las páginas HTML5

Las entidades itemtype están en https://schema.org, con sus itemprop

Qué es el árbol dom de hmtl5?

Es un árbol de objetos en memoria del navegador que representa la pantalla html y sus elementos

Qué tipos de elementos tiene el árbol dom y qué representan de una página html? de qué elemento heredan todos estos elementos?

Document: nodo que engloba todos los demás
Element: representa una etiqueta
Attr: representa un atributo de una etiqueta
Text: representa el contenido de una etiqueta

Todos heredan de Node

Nombra algunos métodos del elemento Document y para qué se usan

.getElementById(id)
.querySelector(selector)
.getElementsByTagName(tagName)
.getElementsByClassName (className)
.createElement (…)

Nombra dos atributos y dos métodos del elemento DOM Node

Atributos:

firstChild
childNodes

Métodos

appendChild
hasAttributes → booleano

Qué librerías nos ayudan a detectar las características que soporta un navegador?

MODERNIZR → Ayuda a detectar las características del navegador

Para qué sirven los plugin Polyfills?

Son unos plugins para simular una determinada API cuando el navegador no la soporta.

A diferencia de las librerías MODERNIZR, que sólo detectan lo que soporta o no soporta el navegador, los PolyFills lo detectan y devuelven automáticamente la el plugin que lo simula

Nombra algunas APIs de html5 y para qué se usan

WebStorage (sesion storage (se borra al cerrar pestaña) y local storage (no se borra))
Geolocation
IndexedDB
Canvas
File (controla más aspectos de la subida de un documento)
WebWorker → crea tareas asíncronas para no bloquear el hilo principal
WebSocket / Server Side Events (tecnica push)
Drag and Drop
Selector
Microdata / DataSet

Cómo se puede INCRUSTAR en HTML (a secas) una imagen?

En la etiqueta img , en el atributo src en lugar de poner la url, se pone el mimetipe y el contenido en base64

Qué es javascript vanilla?

Es el javascript puro, sin ningún framework ni libería adicional

Es el que se usaba en HTML4

Qué es la antigua tecnología CGI?

Common Gateway Interface - Tecnología web que permitía al navegador obtener datos dinámicos del servidor, independientemente de la tecnología del servidor

La antigua tecnología AJAX, qué concepto introdujo?

Qué nuevo objeto introdujo en el entorno de ejecución del navegador

Recargar parcialmente las páginas html de forma asíncrona, cuando antes eran refrescos completos síncronos

Introduce el objeto XmlHttpRequest

En qué consiste a alto nivel el salto tecnológico que viene de la mano del mundo HTML5?

Mirar en el laboratorio cómo se visualizan las etiquetas html5, aunque en las tarjetas ya tengamos la semántica

Cuáles son las etiquetas HTML5, que son completamente nuevas y que sirven para estructurar SEMÁNTICAMENTE la página, y que no tienen ninguna representación visual?

Header → puede ser una para cada “contenedor” (main, section, article, …)

nav → área con enlaces de navegación

section - article → uno puede anidar a otro y viceversa, agrupación de información. Article está tan completa o auto-contextualizada, que se considera independiente del sitio web y se puede reutilizar y distribuir por separado, sigue teniendo sentido.

main → área con la información principal

aside → información tangencial, relacionado con

footer → puede ser una para cada “contenedor” (main, section, article, …)

En el área Head de html, qué dos tipo de etiquetas se incluyen?

meta: keywords, author, charset, …
link: stylesheet (para enlazar la css), alternate (para enlazar otras vistas de tu página como pdf, en otro idioma, para impresión ,…), prev, next, …

En HTML5, la etiqueta label tiene un atributo para indicar qué input describe, cuál es?

El atributo for, donde se pone el id del input que describe

La etiqueta label puede tener dentro además del texto a mostrar en pantalla, el campo imput al que se refiere.
También puede tener el imput fuera, y relacionarlo con el campo for

En HTML5, la etiqueta input de tipo submit tiene un atributo para indicar a qué dirección se enviará el formulario, y que sobreescribe la que haya en el atributo action del formulario?

El atributo formaction

Atributos de etiquetas input

mandar el foco al elemento al cargar la página
indicar a qué dirección se enviará el formulario
indica a qué form en está asociado el elemento
posición del elemento en el orden del foco
obligatorio

autofocus
formaction
form
tabindex
required

Para qué sirven los siguientes atributos de etiquetas en HTML5

class

title

sytle

dir

lang

contenteditable

tabindex

draggable

spellcheck

translate

hidden

id → id único

class → clase de estilos definida en la css

title → información al pasar el rat

sytle → estilos inline

dir → dirección/sentido en el que se lee el texto

lang → idioma

contenteditable → editar en arbol DOM y visualmente un campo

tabindex → índice de la navegación secuencial con tabulador

draggable → si es arrastrable

spellcheck → si aplica la corrección ortográfica

translate → si se puede traducir

hidden → oculto

Qué son Pug (antiguo Jade), Mustache o Handlebars?

Son superlenguajes para html, para facilitar el desarrollo

Qué son Gulp y Grunt?

Automatizadores de tareas

Qué son Parcel, Rollup o Webpack?

Sustituyen y mejoran lo que se hacía con Gulp y Grunt para automatizar tareas

Qué elemento del DOM hereda de Document?

HTMLDocument

Cómo se llama el API de HTML5 que sirve para lanzar eventos desde el backend para que los distintos clientes conectados puedan actualizar su información?

Server-Sent Events

Qué es la etiqueta bdi?

El elemento _HTML < bdi> _(o elemento de aislamiento Bi-Direccional)

Qué Codec y formato contenedor de audio son compatible en navegadores con html5

Qué Codec y formato contenedor de video son compatible en navegadores con html5

Codec(Contenedor):

H.264 (MP4), el Ogg Theora(Ogg) y el VP8,VP9 (WebM)

Qué atributos se usan en la etiqueta audio o video para lo siguiente?

Video a reproducir. Obligatoria si actua como etiqueta contenedora.
Muestra una imagen a modo de presentación. (sólo video)
Indica como realizar la precarga del video.
Establece un nombre para un grupo de contenidos multimedia.
Comienza a reproducir el video automáticamente.
Vuelve a iniciar el video cuando finaliza su reproducción (bucle).
Establece el video sin sonido (silenciado).
Muestra los controles de reproducción. Por defecto no se muestran.
Indica el tamaño de ancho del video. Si no se pone, se ajusta al video (sólo video)
Indica el tamaño de alto del video. Si no se pone, se ajusta al video (sólo video)

src
poster
preload -> auto | metadata | none
mediagroup
autoplay
loop
muted
controls
width
heigh

La etiqueta audio o video puede tener otras etiquetas dentro. Cuáles y para qué sirven?

Las etiquetas

source -> atributos src y type. Sirve para poner varias fuentes de audio o video. Si se ponen varias se intentan cargar en orden hasta que pueda cargar una. Si no puede ninguna y se pone un texto o una imagen después del último source, se mostrará ese texto o imagen

< video width=”640” height=”480”>
< source src=”video.mp4” type=”video/mp4” />
< source src=”video.webm” type=”video/webm” />
< source src=”video.ogv” type=”video/ogg” />
< img src=”imagen.png” alt=”Video no soportado” />
Su navegador no soporta contenido multimedia.
< /video>

track -> Establece un archivo de subtítulos o lo añade como alternativa.

La etiqueta track dentro de la etiqueta audio o video, qué atributos puede tener y para qué sirven?

Archivo o ruta del archivo de subtítulos WebVTT
idioma de los subtítulos.
Título que verá el usuario para elegir el canal de subtítulos.
Indica el tipo o género de subtítulos enlazados.
Utiliza este canal de subtítulos por defecto.

src
lang
label
kind -> subtitles | captions , descriptions, chapters | metadata
default

< video controls>
< source src=”video.mp4” />
< source src=”video.webm” />
< track src=”subs-es.vtt” srclang=”es” label=”Español” default />
< track src=”subs-en.vtt” srclang=”en” label=”English” />
< track src=”subs-fr.vtt” srclang=”fr” label=”Français” />
< /video>
< /pre>

Leer eventos típicos js en elementos html5

https://lenguajehtml.com/html/scripting/eventos-html/

Leer eventos típicos js en elementos html5

https://lenguajehtml.com/html/scripting/eventos-html/

Otros tipos de input
number (cajita con flechas arriba y abajo)

otras etiquetas
meter
progress
hr

Barras de progreso ->
meter
progress

hr -> separador visual

Distintos protocolos H.xXX

H.264: También conocido como MPEG-4 Parte 10 o AVC (Advanced Video Coding), es un estándar de compresión de video ampliamente utilizado que permite transmitir video de alta calidad a tasas de bits más bajas.

H.265: También conocido como MPEG-H Parte 2 o HEVC (High Efficiency Video Coding), es un estándar de compresión de video más reciente que proporciona una mayor eficiencia de compresión en comparación con H.264, lo que resulta en una mejor calidad de video a tasas de bits más bajas.

H.323: Es un estándar de comunicaciones multimedia para videoconferencias y comunicaciones en tiempo real sobre redes de paquetes. H.323 define protocolos para la señalización, establecimiento de llamadas, control de flujo y calidad de servicio en aplicaciones de comunicaciones multimedia, incluido el video.

H.239: Es un estándar que permite la transmisión de múltiples flujos de video en conferencias y colaboración en tiempo real. Permite compartir contenido visual, como presentaciones o pizarras electrónicas, en una conferencia junto con la transmisión de video en vivo.

algunos de los valores más comunes para el atributo list-style-type aplicados a una lista no ordenada (<ul>)

Viñeta redonda (por defecto).
Viñeta circular abierta.
Viñeta cuadrada.
Sin viñetas, los elementos se muestran sin marcadores.
Numeración decimal (1, 2, 3, …).
Numeración decimal con ceros principales (01, 02, 03, …).
Numeración romana en minúsculas (i, ii, iii, …).
Numeración romana en mayúsculas (I, II, III, …).
Numeración alfabética en minúsculas (a, b, c, …).
Numeración alfabética en mayúsculas (A, B, C, …).

disc: Viñeta redonda (por defecto).
circle: Viñeta circular abierta.
square: Viñeta cuadrada.
none: Sin viñetas, los elementos se muestran sin marcadores.
decimal: Numeración decimal (1, 2, 3, …).
decimal-leading-zero: Numeración decimal con ceros principales (01, 02, 03, …).
lower-roman: Numeración romana en minúsculas (i, ii, iii, …).
upper-roman: Numeración romana en mayúsculas (I, II, III, …).
lower-alpha: Numeración alfabética en minúsculas (a, b, c, …).
upper-alpha: Numeración alfabética en mayúsculas (A, B, C, …).

Brainscape's Knowledge GenomeTM

b3t8 - HTML5 Flashcards

Brainscape's Knowledge Genome^TM