[A] Bloque III > Tema 8. HTML + CSS > Flashcards

Tema 8. HTML + CSS Flashcards

(71 cards)

Study These Flashcards
1
Q

Utilidad de la etiqueta HTML5 <details></details>

A

Zona de información “plegable”, pone el “título” de la zona desplegable, se usa junto a la etiqueta <summary>

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

¿Qué es Tailwind?

A

Framework de CSS (del estilo Bootstrap)

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

En CSS, ¿cuál es la property para cambiar el icono/círculo de un <li> dentro de un <ul> u <ol>

A

list-style-type

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

En CSS, ¿a qué se refiere el selector p:first-child {…}?

A

Esto NO se refiere al primer hijo de un <p> si no al propio <p> como primer hijo en otro contenedor.

Afecta al primer <p> de esta estructura:

<div>
<p></p> --> Aplica solo a este
<p></p>
</div>

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

En CSS qué hace .X

A

Selector de clase, donde X es el nombre de la clase

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

En CSS qué hace #X

A

Selector de id, donde X es el nombre del id

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

En CSS qué hace X ~ Y

A

Aplica en Y si es hermano de X (sólo aplica en Y)

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

En CSS qué hace X + Y

A

Aplica en Y si es hermano DIRECTO de X (sólo aplica en Y)

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

En CSS qué hace X > Y

A

Aplica a todas las etiquetas de Y que estén JUSTO DEBAJO de X (sólo aplica en Y)

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

En CSS qué hace X Y

A

Aplica a todas las etiquetas de Y que estén en cualquier nivel debajo de X (sólo aplica en Y)

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

¿Qué frameworks de CSS conoces?

A

Bootstrap (desarrollado por Twitter), Materialize (desarrollado por Google), Foundation, Tailwind, Bulma

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

¿Puede haber varios <main> dentro del <body>?

A

Sí, pero todas menos 1 tienen que tener el atributo <hidden></hidden>

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

Diferencias entre:

visibility: hidden;
display: none;

A

visibility: hidden; El elemento está pero no se ve, el hueco que ocuparía si se viese se queda en blanco en la página.

display: none; Desaparece por completo, el hueco que ocuparía en la página desaparece y carga el siguiente elemento.

NOTA: El código de ambos elementos se ven si le damos a “inspeccionar elemento”

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

Código para decirle al navegador que todas las media queries son relativas a ese viewpoint

A

<meta></meta>

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

¿Cómo importo una tipografía?

A

@font-face {
font-family: “Trickster”;
src:
local(“Trickster”),
url(“trickster-COLRv1.otf”) format(“opentype”) tech(color-COLRv1),
url(“trickster-outline.otf”) format(“opentype”),
url(“trickster-outline.woff”) format(“woff”);
}

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

Formas de expresar unidades

(Ejemplo: px = pixeles)

A

in: pulgadas
pc: picas
pt: puntos
px: pixeles
Q: ¼ de mm
em: tamaño actual de la fuente del contenedor padre
ex: relativo a la altura del carácter x
ch: ancho del cero
rem: tamaño fuente del elemento raíz
%: porentaje
vh/vw/vmax/vmin: relativas al viewport (responsive)

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

Propiedad display, diferencia entre

display: block
display: inline

A

display: block es la propiedad por defecto. Ocupa todo el ancho disponible en la línea y los elementos se colocan en VERTICAL.

display: inline Ocupa solo el espacio necesario, los elementos se ponen en HORIZONTAL. Ignora width o height

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

¿A qué equivale esto?

margin 20px 10px;

margin 20px 15px 10px;

A

margin 20px 10px 20px 10px;

margin 20px 15px 10px 15px;

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

Utilidad del comando tabindex de HTML5

A

Orden de tabulacion de los elementos de la pagina (tipico de los “input” de un formulario)

NOTA: elemento muy presente en las normas de Accesibilidad Web

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

Uso de la etiqueta <object></object>

A

Insertar contenido externo (ej. PDF, Video(*), Flash…)

Nota: Este contenido necesita un plugin en el navegador.
(*) Hoy en día no hace falta plugin para video ni audio, tenemos etiquetas específicas para eso

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

¿Como se indica que el valor de un campo input es obligatorio rellenarlo?

A

<input></input>

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

¿Cómo es posible conseguir imagenes adaptativas con la etiqueta <img></img>?

A

Al igual que hacemos con <picture> + <source></source>, con los atributos "srcset y sizes"</picture>

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

¿Con qué etiqueta HTML5 podemos generar una lista desplegable?

A

<select> y <datalist></datalist></select>

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

¿Qué selector tiene mas especificidad?

A) #menu .item
B) div#menu.item
C) .menu .item
D) body div

A

El B)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Si tengo un formulario HTML5 con campos de entrada y los envío al backend (php,.net,...), ¿cómo sabría identificarlos?
Con el atributo name de los diferentes "input"
26
Puerto del protocolo HTTPS
443 (el 80 está reservado para HTTP - Sin seguridad)
27
En HTML5, utilidad de la etiqueta kbd
Definir una entrada de teclado (a nivel informativo)

El usuario debe pulsar CTRL+C para copiar un texto

28
En CCS3, utilidad de la propiedad z-index
Controla el índice de profundidad/apilamiento de elementos que pueden estar solapados
29
¿Qué tipo de producto es V8?
Motor de JS presente en la familia Chromium y en runtime de Javascript Node
30
En HTML5, utilidad de la etiqueta
Contenedor en línea sin semántica (como

pero en una sola línea) Las etiquetas

y son las únicas que no tienen semántica
31
En HTML5, utilidad y requisito de la etiqueta
Definir zonas clicables (interactivas) sobre una imagen Tiene que ir dentro de
32
En HTML como hacemos en un formulario un input para meter la fecha y la hora
…
33
¿Para qué es útil la propiedad de CSS3 border-radius?
Redondear bordes
34
Contenido de la etiqueta SVG
Contenido de un documento XML que representa un gráfico vectorial
35
¿Qué propiedad no se hereda por defecto y qué hay que hacer para que se herede?
Background p {background:inherit;}
36
¿Qué hace el preprocessdor LESS?
Transforma lo escrito en LESS a CSS Ejemplo de uso: lessc style.less style.css
37
¿Cómo digo que mi web va a usar UTF-8?
38
¿Cómo indico versiones alternativas de la web?
39
¿Cuántas clases publicas puede haber en un archivo de Java?
Sólo 1. Además, el nombre del archivo debe coincidir con el de esa clase.
40
¿Para qué se usa la propiedad text-decoration en CSS y qué valores tiene?
Se utiliza para especificar la decoración que se aplica al texto. * none: No aplica ninguna decoración al texto. * underline: Agrega una línea debajo del texto. * overline: Agrega una línea encima del texto. * line-through: Agrega una línea a través del texto (tachado). * blink: Hace que el texto parpadee (no se recomienda su uso). Ejemplo: .texto_subrayado { text-decoration: underline; }
41
¿Qué hace este css? .texto { text-decoration: line-through; }
Todo HTML que tenga la clase "texto" aparecerá como tachado.
42
¿Qué hace este css? .mi_clase::after { content: "★ "; } .mi_clase::before { content: "★ "; }
Pone una estrella antes y después de que cada texto que esté en una etiqueta con clase "mi_clase"
43
¿Qué hace este css? .mi_clase:hover { background-color: #27ae60; transform: rotate(5deg); }
Cuando se pone el ratón encima de un elemento con la clase "mi_clase" cambia el color de fondo y rota 5 grados a la derecha
44
¿Qué hacen estos eventos HTML? onfocus, onblur, onclick, onselect, onchange
- onfocus: Se activa cuando un elemento recibe el foco. - onblur: Se activa cuando un elemento pierde el foco. - onclick: Se activa al hacer clic en un elemento. Por ejemplo en un botón o un enlace. - onselect: Se activa al seleccionar texto en un campo. - onchange: Se activa cuando cambia el valor de un elemento de formulario y pierde el foco.
45
¿Qué hacen estas pseudoclases de CSS? :link :active :hover :visited :invalid :empty :required :first-child :not()
:link Enlaces que aún no han sido visitados. :active Seleccionar un elemento mientras está siendo presionado por el usuario. :hover Seleccionar un elemento cuando el cursor del mouse está sobre él. :visited Seleccionar un enlace que ya ha sido visitado. :invalid Seleccionar un elemento de formulario que no cumple con los requisitos de validación. :empty Seleccionar elementos que no tienen ningún contenido entre sus etiquetas de apertura y cierre. :required Seleccionar un elemento de formulario que es requerido y no tiene un valor definido. :first-child Seleccionar el primer hijo de un elemento padre. :not() Seleccionar elementos que no cumplen con ciertas condiciones.
46
¿Qué hacen estos pseudoelementos de CSS? ::after ::before ::first-line :first-letter
::after Después. Ejemplo: h1::after { content: url(smiley.gif); } ::before Antes. Ejemplo: h1::before { content: url(smiley.gif); } ::first-line Primera línea. Ejemplo: p::first-line { color: red; } :first-letter Primera letra. Ejemplo: p::first-letter { font-size: xx-large; }
47
En HTML, ¿qué tenemos que introducir si queremos capturar texto de varias líneas en un formulario?
NOTA: Atributos rows y cols ...
48
En CSS3, ¿Qué significa el selector div > table?
Selector que aplica a las que son hijos DIRECTOS de un
Texto
...
¿Cuál es el árbol DOM que se genera a partir de estas etiquetas?
| | ---------- |
49
En HTML5, utilidad de la etiqueta y parámetros
Visualizar el progreso de una tarea Ej. 70% NOTA: La tarea que actualiza el porcentaje de progreso será Javascript
50
¿Cuál de las siguientes etiquetas de HTML5 permite definir contenido autónomo que podría existir independientemente del resto del contenido? -
-
51
En HTML5, utilidad de la etiqueta
Especificar en tu página datos que tiene una parte de "humano" y otra de "maquina"
  • El retorno del Rey

    El retorno del Rey

    • 52
    ¿Cómo se llama a la técnica mediante la cual podemos realizar peticiones al servidor para traernos información (en formato JSON, XML,…) y realizar una actualización exclusivamente de una parte del documento HTML?
    AJAX. El objeto principal se llama xmlHttpRequest
    53
    Di parámetros de
      que conozcas
      Hace que la lista empiece a contar por 5
        Letras mayúsculas
          Letras minúsculas
            Números romanos mayúscula
              Números romanos minúscula
                Números (opción por defecto)
    54
    Diferencia entre y
    pensado para ser actualizado dinámicamente con Javascript conforme avanza un proceso. Ej: Descarga indica un valor dentro de un rango. Ej: Nivel de batería
    55
    Dentro de un
    a) formaction="url": Dice a qué url se envía b) formmethod="get/post/dialog" get: post: dialog: c) formnovalidate: enviar sin validar cosas tipo required, pattern, type="email", etc. d) formtarget="_blank" | `_self` | Misma ventana / frame | Normal, predeterminado | `_blank` | Nueva pestaña o ventana | Abrir sin reemplazar página actual | | `_parent` | Ventana contenedora directa | Dentro de frames anidados | | `_top` | Ventana principal completa | Salir de cualquier frame |x
    56
    Dentro de < script src="js/funciones.js" > se pueden poner los parámetros async y defer. ¿Qué hacen? ¿Y si no pones ninguno de los dos parámetros?
    async: El script se ejecuta en cuanto esté descargado aunque no haya cargado todo el HTML. defer: Aunque el script haya descargado, no se ejecuta hasta que no esté todo el HTML descargado. Si no pones ningún parámetro, se parsea el documento HTML normal de arriba a abajo así que se ejecuta primero una parte de HTML, luego el script y luego el resto de HTML.
    57
    ¿Qué hacen las etiquetas HTML y ?
    : Elevado a : Subíndice
    58
    ¿Qué hace la etiqueta ? ¿Cómo se usa?
    Anotaciones fonéticas para caracteres asiáticos. Se usa junto a y
    59
    ¿Qué hace la etiqueta
    ? ¿Cómo se usa?
    dl = Definition list
    Gallina
    Ave doméstica del orden de las galliformes.
    Cobarde, pusilánime.
    60
    ¿Qué es un verbo http idempotente?
    Una operación que al realizarla muchas veces tiene el mismo efecto que realizarla una sola vez Ejemplos: GET Sí Consultar datos. Leer la misma página 10 veces no cambia el contenido del servidor. PUT Sí Reemplazar un recurso. Si actualizas tu nombre a "Álex" cinco veces, el resultado siempre será que te llamas "Álex". DELETE Sí Eliminar un recurso. Una vez que borras el archivo foto.jpg, intentar borrarlo de nuevo no cambia nada (el archivo ya no está). POST No Crear recursos. Si haces clic en "Enviar pedido" cinco veces, podrías terminar comprando cinco televisores. PATCH No (usualmente) Modificaciones parciales. Depende de cómo se implemente, pero si envías una instrucción de "sumar +1", repetirla cambiará el resultado cada vez.
    61
    54. ¿Cuál de las siguientes unidades en CSS es relativa al tamaño de la fuente del elemento raíz (html)? a) em b) px c) no existe tal unidad d) rem
    d) rem Explicación: rem (root em) es una unidad relativa al tamaño de la fuente del elemento raíz (html). em es relativa al tamaño de la fuente del elemento padre o del propio elemento, no necesariamente de la raíz.
    62
    ¿Cuál de las siguientes etiquetas NO es semántica en HTML5? a)
    b)
    c)
    Una etiqueta es semántica cuando describe claramente su significado tanto al navegador como al desarrollador. Indica qué tipo de contenido hay dentro, no cómo debe verse.
    63
    ¿Con qué selectore de CSS podemos destacar en color rojo los enlaces que no tengan informado el atributo “title”?
    a:not([title]) {color:red;}
    64
    ¿Cómo empieza un documento en HTML5?
    65
    ¿Cuál es el motor que usa Microsoft Edge de representación para mostrar contenido web en aplicaciones nativas?
    WebView2
    66
    Diferencia entre display: inline; y display: inline-block;
    La primera ignora width o height, la segunda no
    67
    Métodos interesantes de la API geolocation
    navigator.Geolocation.getCurrentPosition(showLoc): Retrieves the device's current location. concurso: navigator.Geolocation.watchPosition(showLoc): Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.
    68
    ¿Cómo mandamos con Web Worker cosas al segundo hilo?
    myWorker.postMessage(first.value second.value)
    69
    ¿Cómo recogemos con Web Worker cosas del segundo hilo?
    myWorker.onMessage El onMessage tiene otro postMessage dentro para devolver la info al hilo pricnipal
    70
    ¿Cuando lanzas un Worker tiene acceso a Windows?
    No Pregunta concursazo total
    71
    Función de la API geolocation
    function getlocation(){ navigator.geolocation.getCurrentPosition(showLoc); }
    [A] Bloque III
    flashcards
    Decks in class (17)
    # Cards
    Brainscape helps you reach your goals faster, through stronger study habits.
    © 2026 Bold Learning Solutions. Terms and Conditions