B3T8 HTML Flashcards

1
Q

Indica tres motores de plantillas para HTML

A
  • Pug (antes llamado Jade)
  • Handlebars
  • Mustache
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

¿Qué elementos tiene cada nodo dentro de la API de DOM

A

[EA,DOTE]
NODE –>
1. ELEMENT
2. ATTR
3. TEXT
4. DOCUMENT –>HTML Document

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Indica las APIs de HTML5

A
  • Web Storage
  • Indexed DB (bbdd NoSQL)
  • File: controla subida de ficheros
  • Geolocation
  • Canvas: lienzo
  • Drag and Drop
  • Microdata / DataSet: extensibilidad
  • Web Notification
  • Selectors: métodos .queryselector y .queryselectorAll
  • Web Worker: hilos en segundo plano
  • Web Socket / Server Sent Events (SEE): nos ofrecen una conexión bidireccional entre el servidor y el navegador
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

¿Cual es el motor de renderizado del navegador Edge, Chrome y Opera?

A

Blink

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

¿Cual es el motor de renderizado del navegador Firefox?

A

Gecko -> Quantum

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

¿Cual es el motor de renderizado del navegador Safari?

A

Webkit

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

¿Cual es el motor de JS del navegador Edge, Chrome y Opera?

A

V8

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

¿Cual es el motor de JS del navegador Mozilla?

A

SpiderMonkey

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

¿Cual es el motor de JS del navegador Safari?

A

Nitro

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

¿Para que sirve la etiqueta FIGURE de HTML5?

A

La <figure>etiqueta especifica contenido autónomo, como ilustraciones, diagramas, fotografías, listados de códigos, etc
Suele ir acompañada de la etiqueta <figcaption> se utiliza para agregar un título al <figure>elemento.</figure></figure>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

¿Para que sirve la etiqueta srcset de una img?

A

Sirve para configurar imágenes responsive en función de la anchura/resolución del dispositivo en la carga inicial de la página
EJ.
< 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”>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

¿Qué diferencia principal hay entre la etiqueta srcset de img y la etiqueta source de picture?

A

Con picture y los distintos sources el navegador puede, dinámicamente, solicitar otra imagen cuando cambie el tamaño de la visualización en el dispositivo. –>source media

También nos puede servir para cargar una imagen en función del formato que entienda el browser –> source type

–> Con srcset sólo coge la imagen que mejor le viene en la carga de la página

EJ. DE ETIQUETA PICTURE

<picture>
<**source media**="(max-width: 552px)" srcset="../images/hero-small.jpg">
<img></img> <!-- Opcion por defecto -->
</picture>

EJ DE ETIQUETA PICTURE DEPENDIENDO DEL FORMATO QUE ENTIENDE EL BROWSER

<picture>
<**source type**="image/svg+xml" srcset="../images/pyramid.svg" width="20%">
<img></img> <!-- Opcion por defecto-->
</picture>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

¿Que ocurre si en un iframe si solo aparece el atributo sandbox sin valor asignado?

A

Se aplican todas las restricciones posibles.

Posibles opciones para configurar:
-allow-forms
-allow-pointer-lock
-allow-top-navigation
-allow-same-origin
-allow-popups
-allow-scripts

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

¿Para que sirve el atributo allow de un iframe?

A

<–iframe src=”https://example.com/pagina.html” width=”260” height=”115” allow=”camera ‘none’; microphone ‘https://example.com’; payment *”></iframe>
Comentario
Con el atributo “allow” activamos una serie de Directivas de politica sobre distintos origenes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

¿Para que sirve el atributo srcdoc en un iframe?

A

Con el atributo “srcdoc” podemos proporcionar codigo html directamente al frame.
En caso de que el navegador no soporte el atributo recientemente introducido srcdoc, src actúa como respaldo

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

existe el input type datetime-local?

A

Si

17
Q

¿El input de tipo email tiene una validacion automatica del formato (incluso si se especifica multiple)?

A

Si

18
Q

que diferencia hay entre un input type readonly y otro disabled?

A

readonly (el usuario no puede editar) y disabled (el usuario no puede editar y ademas no se envia)

19
Q

¿Qué opciones se pueden configurar en un input type submit en HTML5?

A

a) formaction=”url”
b) formmethod=”get/post”
c) formnovalidate (enviar sin validar)
d) formtarget=”_blank”
f) formenctype=”multipart/form-data | application/x-www-form-urlencoded | text/plain”

20
Q

¿Para que sirve la etiqueta details en html?

A

Es un bloque que tiene por defecto un comportamiento desplegable
El título del desplegable que aparece siempre, se encuentre desplegado o no, se configura con la etiqueta summary anidada.

Ejemplo

<details>
<summary>Más información</summary>
<h2>Nombre del sujeto</h2>
</details>

21
Q

¿Para que sirve el atributo contenteditable?

A

Para permitir editar el contenido

22
Q

que hace esta etiqueta en una table?
< colgroup>
<col span="3" style="background-color:#c4f2ff;">
<col style="background-color:yellow;">
</colgroup>

A

Agrupar columnas y darles formato en grupo.
Estructura
colgroup->col:: attr span: numero de columnas que se agrupan; :: attr valign: como centran el texto de forma vertical el grupo de columnas seleccionadas

23
Q

¿Para que sirve el atributo sandbox en un iframe?

A

Habilita un conjunto adicional de restricciones para el contenido del iframe.
Si el atributo está vacío se aplican todas las restricciones. Se puede indicar tipo de restricciones separadas por espacios.

Restricciones:
- Tratar el contenido como si fuera de un origen único.
- bloquear el envío del formulario
- bloquear la ejecución del script
- deshabilitar las API
- evitar que los enlaces se dirijan a otros contextos de navegación
- evitar que el contenido utilice complementos (a través de <embed></embed>, <object>, <applet>u otros)
- impedir que el contenido navegue en su contexto de navegación de nivel superior
- bloquear funciones activadas automáticamente (como reproducir automáticamente un video o enfocar automáticamente un control de formulario)</object>

24
Q

Indica como se incluye en un documento HTML un fichero css y un fichero js externos

A

CSS:
< link rel=’stylesheet’ src=”doc.css”>

JS:
< script src=”doc.js”> –> Atributos especiales para carga script con src:
- async: el script se descarga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible (antes de que se complete el análisis).
- defer: el script se descarga en paralelo al análisis de la página y se ejecuta una vez que la página ha terminado de analizarse.
- Si ninguno de los dos atributos está configurado: el script se descarga y ejecuta inmediatamente, bloqueando el análisis hasta que se complete el script.

25
Q

Posibles valores de la etiqueta enctype de un formulario y para que sirve

A
  • application/x-www-form-urlencoded: El valor predeterminado de la etiqueta del formulario.
  • multipart/form-data: debemos insertar este atributo cuando existe la posibilidad de insertar uno o más archivos en el formulario.
  • text/plain: se ha introducido con html5 y se usa solo para la depuración.
26
Q
A