PlanB Flashcards

1
Q

Motor de renderizado de Safari

A

WebKit

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

Motor de renderizado de Opera

A

Blink (basado en Webkit), en el pasado usaba Presto

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

Motor de renderizado de Firefox

A

Quantum que es una mejora de Gecko

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

Motor de renderizado de Chrome

A

Blink (basado en WebKit) antes WebKit

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

Motor de renderizado de Edge

A

Blink (basado en webkit) antes EdgeHTML y antes Trident

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

Nombra 3 preprocesadores CSS

A

Less , SASS, Stylus

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

Nombra 3 editores

A

Atom, Sublime , VSCode

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

Novedades de HTML5 con respecto al 4

A

API’s, Semántica, multimedia

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

Nombra 5 librerías js

A

jquery, dojo, yui,prototype, mootools

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

Nombra 4 frameworks js

A

angular, react, vue,ember

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

Que interprete de js lleva chrome y firefox?

A

v8 y spidermonkey

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

Para que sirve modernizer?

A

Una librería js que permite detectar las capacidades del navegador

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

¿Qué es WebStorage y para qué se utiliza?

A

WebStorage proporciona almacenamiento local en el navegador del usuario que persiste incluso después de cerrar el navegador. Se utiliza para almacenar datos de sesión (sessionStorage) y datos que persisten más allá de la sesión (localStorage).

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

¿Qué es IndexedDB y cuándo se debería usar?

A

IndexedDB es una base de datos NoSQL en el navegador que permite almacenar grandes cantidades de datos estructurados y realizar búsquedas eficientes. Se debería usar para aplicaciones que necesitan almacenamiento de datos complejos y de gran tamaño.

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

¿Cómo funciona la API de Geolocation?

A

La API de Geolocation permite a las aplicaciones web acceder a la ubicación geográfica del usuario mediante el uso de GPS, Wi-Fi, y otras fuentes. Se usa comúnmente en aplicaciones de mapas y servicios basados en la ubicación.

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

¿Qué es la API File y cuál es su propósito?

A

La API File permite a las aplicaciones web manipular archivos locales del usuario. Permite leer y escribir archivos, proporcionando acceso directo a los archivos seleccionados por el usuario en su sistema de archivos

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

¿Qué es Canvas y para qué se utiliza?

A

Canvas es un elemento HTML5 que permite renderizar gráficos y animaciones en tiempo real utilizando JavaScript. Se utiliza para juegos, visualizaciones de datos, y gráficos interactivos.

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

¿Qué es un WebWorker y cuál es su beneficio principal?

A

Un WebWorker permite ejecutar scripts en segundo plano, sin afectar el rendimiento de la página principal. El beneficio principal es la capacidad de realizar tareas intensivas en cálculo sin bloquear la interfaz de usuario.

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

¿Qué es WebSocket y para qué se utiliza?

A

WebSocket es una API que proporciona comunicación bidireccional en tiempo real entre el navegador y el servidor. Se utiliza para aplicaciones que requieren actualizaciones instantáneas, como chats en línea y sistemas de notificación.

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

¿Cómo funciona Drag and Drop en HTML5?

A

La API de Drag and Drop permite a los usuarios arrastrar y soltar elementos dentro de una página web. Se usa para mejorar la interactividad de las aplicaciones, como en interfaces de gestión de archivos y organizadores visuales.

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

¿Qué es la API de Selector y para qué se usa?

A

La API de Selector, también conocida como querySelector y querySelectorAll, permite seleccionar y manipular elementos del DOM utilizando selectores CSS. Se utiliza para simplificar la manipulación del DOM en JavaScript.

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

¿Qué es Microdata y cómo se utiliza con dataset?

A

Microdata es una especificación HTML5 que permite incrustar datos estructurados en las páginas web. La propiedad dataset de un elemento HTML proporciona un acceso fácil a los atributos de datos personalizados (data-*), permitiendo la interacción con los microdatos.

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

Quien desarrollo html5?

A

Fue desarrollado por el WHATWG (Web Hypertext Application Technology Working Group), un grupo formado por representantes de Apple, Mozilla, y Opera en 2004, con el objetivo de avanzar en el desarrollo de estándares web. Posteriormente, el W3C (World Wide Web Consortium) también colaboró en el desarrollo y formalización de HTML5. El enfoque principal de HTML5 fue mejorar el soporte para multimedia y gráficos, así como proporcionar una mejor experiencia para aplicaciones web.

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

Quien desarrolló html4?

A

W3C (World Wide Web Consortium)

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

Cual es la etiqueta de inicio de documento html5?

A

<!DOCTYPE html>

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

Para que sirve la etiqueta blockquote de html4?

A

se utiliza para definir una sección que es citada de otra fuente. El contenido dentro de la etiqueta <blockquote> suele estar sangrado o presentado de una manera distinta para resaltar que es una cita.

La etiqueta puede incluir un atributo cite para proporcionar la URL de la fuente de la cita:x

<blockquote_cite=’http://www.example.com’ >
“This is the quoted material that you want to highlight for your readers. It should be a direct quote from a source.”
</blockquote>

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

Para que sirve la etiqueta <pre> de html4?

A

Conserva formato. La etiqueta <pre> en HTML4 se utiliza para definir texto preformateado. El texto dentro de un elemento <pre> se muestra en una fuente de ancho fijo (generalmente monospace) y conserva todos los espacios en blanco y saltos de línea como se han escrito en el código fuente. Esto es útil para mostrar código, poesía, o cualquier contenido donde el espaciado y el formato sean importantes.

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

Código para una lista ordenada como esta:
C. Elemento 3
D. Elemento 4

A

<ol_type=”A” start=”3”>

<li>Elemento 3</li>

<li>Elemento 4</li>

</ol>

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

Código para lista de definiciones que de este resultado:
Término 1
Definición del término 1

Término 2
Definición del término 2

A

<dl>
<dt>Término 1</dt>
<dd>Definición del término 1</dd>
<dt>Término 2</dt>
<dd>Definición del término 2</dd>
</dl>

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

Código para lista no ordenada
Elemento 1
Elemento 2
Elemento 3

A

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

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

Codigo para una lista ordenada que empiece por 3

A

<ol_start=”3”>

<li>Elemento 3</li>

<li>Elemento 4</li>

<li>Elemento 5</li>

</ol>

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

Diferencia entre embed y object

A

<embed_>: Incrusta contenido externo en una página web de manera sencilla.
<object_>: Incrusta contenido externo y permite especificar contenido alternativo..

<embed_src="file.pdf" width="600" height="400">


<object_data="file.pdf" width="600" height="400">
<p>Tu navegador no soporta la visualización de este documento. <a>Descárgalo aquí</a>.</p>
</object>
</object_></embed_>

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

Háblame de las etiqueta audio

A

Reproduce archivos de audio como MP3, Ogg y WAV

<audio_controls>
<source_src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento de audio.
</audio>

Atributos comunes: controls, autoplay, loop, muted, preload
</audio_controls>

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

Háblame de la etiqueta video

A

Reproduce archivos de video como MP4, WebM y Ogg.

<video_width=”640” height=”360” controls>
<source_src=”video.mp4” type=”video/mp4”>
Tu navegador no soporta el elemento de video.
</video>

Atributos comunes: controls, autoplay, loop, muted, preload, poster

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

Etiqueta track

A

se utiliza dentro de <video> o <audio> para especificar pistas de texto, como subtítulos, descripciones de audio y capítulos.</audio></video>

<video_width=”640” height=”360” controls>
<source_src=”video.mp4” type=”video/mp4”>
<track_src=”subtitles.vtt” kind=”subtitles” srclang=”en” label=”English”>
Tu navegador no soporta el elemento de video.
</video>

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

¿Para qué se utiliza la etiqueta <header> en HTML5?

A

se utiliza para definir el encabezado de una sección o página web, que generalmente incluye títulos, logotipos, y elementos de navegación. Puede haber varias, por ejemplo, cada <section> puede llevar su <header>

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

¿Cuál es el propósito de la etiqueta <nav> en HTML5?

A

se utiliza para definir un conjunto de enlaces de navegación que ayudan a los usuarios a navegar por el sitio web. Puede haber varias en una misma página.

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

¿Qué contenido debe incluir la etiqueta <main> en HTML5?

A

debe contener el contenido principal de la página, excluyendo encabezados, barras laterales y pies de página, y debe ser única por página.

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

¿Cómo se utiliza la etiqueta <section> en HTML5?

A

se utiliza para definir secciones temáticas en el contenido de la página, como capítulos o grupos de contenido relacionado.

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

Qué tipo de contenido debe ir dentro de la etiqueta <article> en HTML5?

A

La etiqueta <article> se utiliza para contenido independiente que puede ser distribuido o sindicado, como artículos de noticias, blogs o comentarios.

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

Para qué se utiliza la etiqueta <aside> en HTML5?

A

Se utiliza para contenido relacionado pero independiente del contenido principal, como barras laterales, citas o enlaces relacionados.

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

Qué se suele incluir en la etiqueta <footer> en HTML5?

A

se utiliza para definir el pie de página de una sección o página, que generalmente incluye información de contacto, derechos de autor y enlaces a términos de servicio.

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

¿Cuál es el propósito de la etiqueta <figure> en HTML5?</figure>

A

se utiliza para agrupar contenido de medios como imágenes, diagramas, ilustraciones, y su correspondiente descripción utilizando <figcaption>

<figure>
<img></img>
<figcaption>Esta es una descripción de la imagen.</figcaption>
</figure>

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

¿Para qué sirve la etiqueta <mark> en HTML5?</mark>

A

Se utiliza para resaltar o destacar texto importante dentro del contenido, indicando que tiene relevancia o interés especial.

42
Q

¿Cómo se define el idioma del documento?

A

<html_lang=”es”>

43
Q

¿Cómo se especifica la codificación del documento?

A

<!DOCTYPE html>
<html_lang=”es”>

<head>
<meta_charset="UTF-8">
</head>

44
Q

Configura la vista para diseños responsivos.

A

<!DOCTYPE html>

<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>



</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
45
Q

Vincula una hoja de estilo

A

<!DOCTYPE html>

<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>



</head>
<body>
<!-- Contenido de la página -->
</body>
</html>

>

46
Q

Vincula un js

A

<!DOCTYPE html>

<html>
<head>
<meta></meta>
<title>Título de la Página</title>
<meta></meta>
<link></link>



</head>
<body>
<!-- Contenido de la página -->
</body>
</html>
47
Q

Para que sirve hreflang?

A

Se utiliza para indicar a los motores de búsqueda el idioma y la región del contenido de una página vinculada, ayudando a redirigir a los usuarios al contenido adecuado según su idioma y ubicación. Para redirigir a una página en inglés, puedes usar el atributo hreflang en una etiqueta <link></link> o <a>.</a>

<link_rel=”alternate” href=”https://www.example.com/en” hreflang=”en”>

<a_href=”https://www.example.com/en” hreflang=”en”>English Version</a>

48
Q

Para que sirve <link rel=”alternate”?

A

<link_rel=”alternate” href=”https://www.example.com/en” hreflang=”en”>
<link_rel=”alternate” href=”https://www.example.com/es” hreflang=”es”>
<link_rel=”alternate” href=”https://www.example.com/fr” hreflang=”fr”>

se utiliza para especificar versiones alternativas de una página web, como versiones en diferentes idiomas. Esto ayuda a los motores de búsqueda y navegadores a identificar y servir la versión correcta de la página a los usuarios en función de su idioma preferido.

49
Q

Para que sirve autocomplete en un formulario?

A

autocomplete=”on”: El navegador sugerirá valores basados en entradas anteriores.
autocomplete=”off”: El navegador no sugerirá valores, útil para campos sensibles como contraseñas o información confidencial.

50
Q

¿Qué hace el atributo datalist en un campo de entrada?

A

El atributo list asocia el campo de entrada con un <datalist>, proporcionando una lista de opciones sugeridas al usuario.</datalist>

<input_type=”text” id=”browser” name=”browser” list=”browsers”>
<datalist_id=”browsers”>
<option_value=”Chrome”>
<option_value=”Firefox”>
</datalist><br></br>

51
Q

¿Para qué sirve el atributo autofocus?

A

da automáticamente el enfoque al campo de entrada cuando la página se carga.

52
Q

¿Cómo se usan los atributos min y max en un campo de entrada?

A

min y max especifican los valores mínimo y máximo permitidos en campos de entrada numéricos, de rango, fecha y hora.

<input_type=”date” id=”date” name=”date” min=”2023-01-01” max=”2024-12-31”>

53
Q

¿Qué hace el atributo pattern en un campo de entrada?

A

utiliza una expresión regular para definir un formato que debe cumplir el valor del campo de entrada.

54
Q

¿Para qué se utiliza el atributo multiple?

A

permite seleccionar múltiples archivos o valores en campos de entrada de tipo file o select.

55
Q

¿Cuál es la función del atributo placeholder?

A

proporciona un texto de marcador de posición que se muestra en el campo de entrada cuando está vacío, ayudando al usuario a entender qué información debe ingresar.

56
Q

¿Qué indica el atributo required en un campo de entrada?

A

marca el campo de entrada como obligatorio, impidiendo el envío del formulario si el campo está vacío.

57
Q

Como se crea un atributo personalizado y como se captura su valor con javascript?

A

<div_id=”product” data-id=”12345” data-name=”Laptop” data-price=”999.99”>
Información del Producto
</div>

<script_>
const product = document.getElementById('product');
const productId = product.dataset.id;
const productName = product.dataset.name;
const productPrice = product.dataset.price;
</script_>

58
Q

Cuando se usa # en un selector para cargar un id?

A

JavaScript (nativo): document.getElementById(‘id’) (sin #)
CSS y querySelector: #id (con #)
const element = document.querySelector(‘#myId’); // Correcto

59
Q

¿Qué son los microdatos en HTML y cómo mejoran la visibilidad de un sitio web en los motores de búsqueda?

A

Los microdatos son un conjunto de atributos utilizados en HTML para añadir metadatos semánticos a tu contenido web, lo que permite a los motores de búsqueda entender mejor el contenido de tus páginas. Al usar microdatos, los motores de búsqueda pueden generar fragmentos enriquecidos (rich snippets) en los resultados de búsqueda, proporcionando información adicional y más detallada sobre tu página, como descripciones de productos, reseñas, eventos, y más. Esto mejora la visibilidad y el atractivo de tu sitio web, lo que puede aumentar el tráfico y la interacción del usuario.

<div
_itemscope_itemtype=’https://schema.org/Person”>
<h1><span_itemprop=”name”>John Doe</span></h1>
<p>Trabajo: <span_itemprop=”jobTitle”>Ingeniero de Software</span></p>
<p>Teléfono: <span_itemprop=”telephone”>(425) 123-4567</span></p>
<a href=”http://www.example.com”_itemprop=”url”>Perfil de John Doe</a>
</div>

60
Q

lenguajehtml.com

A

repaso

61
Q

Booleanos checked con “”, true o checked?

A

<input_type=”checkbox” checked />
<input_type=”checkbox” checked=”” />
<input_type=”checkbox” checked=”checked” />

62
Q

Como se usa la etiqueta refresh en html

A

<meta_http-equiv=”refresh” content=”35”>

63
Q

Si queremos que una lista ordenada empiece por 50 como es el código

A

<ol_start=”50”>
<li>Elemento 50</li>
<li>Elemento 51</li>
<li>Elemento 52</li>
</ol>

64
Q

Que estilo deberemos usar para que una lista ordenada tenga a,b,c / A,B,C

A

list-style-type: lower-alpha; / upper-alpha

65
Q

Que estilo deberemos usa para que una lista ordenada tenga I,II,III,IV / i,ii,iii,iv

A

list-style-type: upper-roman; / lower-roman

66
Q

Que estilo deberemos usar para en una lista no ordenada empiece por un circulo o un cuadrado

A

list-style-type: circle / square

67
Q

Para que sirve la etiqueta <dialog> y como se utiliza?</dialog>

A

Sirve para mostrar un cuadro de dialogo en html 5, con <dialog> se muestra, si no se pone open no se muestra.</dialog>

En js tambien se puede controlar con: document.getElementById(‘myDialog’).showModal();
document.getElementById(‘myDialog’).close();

68
Q

p b {color: red;}

A

Aplica el color rojo a todos los elementos <b> que son descendientes de un elemento <p></b>

<p>Este es un <b>texto en rojo</b> dentro de un párrafo.</p>

<div>Este es un <b>texto en negrita</b> dentro de un div.</div>
69
Q

p, b {color: red;}

A

Aplica el color rojo a todos los elementos <p> y <b>.</b>

<p>Texto en rojo.</p>

<b>Texto en rojo.</b>
70
Q

p > b {color: red;}

A

Aplica el color rojo a todos los elementos <b> que son hijos directos de un elemento <p>.</b>

<p>Este es un <b>texto en rojo</b> dentro de un párrafo.</p>

<p>Este es un <span><b>texto en negrita</b> dentro de un span en un párrafo.</span></p>
71
Q

p ~ b {color: red;}

A

Aplica el color rojo a todos los elementos <b> que son hermanos (siblings) de un elemento <p> y vienen después de él en el mismo nivel jerárquico.</b>

<p>Este es un párrafo.</p>

<b>Texto en rojo.</b>
<div>Este es un div.</div>
<b>Texto en rojo.</b>
72
Q

p + b {color: red;}

A

El selector p + b aplica el estilo solo a los elementos <b> que son el siguiente hermano inmediato de un elemento <p>.</b>

<p>Este es un párrafo.</p>

<b>Texto en rojo porque es el siguiente hermano inmediato de un párrafo.</b>

<p>Este es otro párrafo.</p>
<span>Este es un span.</span>
<b>Este texto no es rojo porque hay un span en medio.</b>

<p>Este es un tercer párrafo.</p>
<b>Texto en rojo porque es el siguiente hermano inmediato de un párrafo.</b>

<div>
    <b>Este texto no es rojo porque no es hermano inmediato de un párrafo.</b>
</div>

</body>

73
Q

p:first-child {color: red;}

A

Aplica el color rojo a un elemento <p> que es el primer hijo de su padre.

<div>
<p>Texto en rojo porque es el primer hijo de su contenedor div.</p>
<p>Este párrafo no es el primer hijo.</p>
</div>

<div>
    <span>Este no se verá afectado.</span>
    <p>Este párrafo no es el primer hijo.</p>

</div>

74
Q

p:first-of-type {color: red;}

A

Aplica el color rojo al primer <p> de su tipo dentro de su padre.

<div>
<p>Texto en rojo porque es el primer `<p>` dentro de su contenedor div.</p>
<p>Este es otro párrafo en el mismo div.</p>
<span>Este no se verá afectado.</span>
<p>Este es otro párrafo en el mismo div.</p>
</div>
</p></div>

75
Q

p:last-child {color: red;}

A

<div>
<p>Este párrafo no es el último hijo de su contenedor div.</p>
<span>Este no se verá afectado.</span>
<p>Texto en rojo porque es el último hijo de su contenedor div.</p>
</div>

76
Q

nombra frameworks de css

A

Bootstrap, Material, Tailwind, Bulma, Foundation y Yaml

77
Q

que hace la etiqueta <progress_value=”70” max=”100”>

A

crea una barra de progreso que estará al 70%

78
Q

th y thead son equivalentes?

A

<th> (Table Header Cell)
Define una celda de encabezado en una tabla.

<thead> (Table Header Group)
Agrupa el contenido del encabezado de una tabla, que usualmente incluye una o más filas de celdas de encabezado (<th>).

<table>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Juan</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>María</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</tbody>
</table>
</th></thead></th>

79
Q

Cual es el código para aplicar flexbox a un elemento

A

display: flex;

79
Q

Como se pondría el foco en un campo de formulario automaticamente al cargar?

A

con autofocus en el <input type=”text” “ name=”nombre” autofocus>

o con

function ponerFoco() {
document.getElementById(‘nombre’).focus();
<input></input>

79
Q

HTML5 Etiqueta texto enfatizado

A

<em></em>

79
Q

HTML5 Etiqueta texto importante

A

<strong></strong>

80
Q

HTML5 Etiqueta voz/tono alternativo

A

<i></i>

81
Q

HTML5 Etiqueta texto resaltado

A

<mark></mark>

82
Q

HTML5 Etiqueta palabra clave

A

<b></b>

83
Q

HTML5 Etiqueta anotaciones

A

<u></u>

84
Q

HTML5 Etiqueta superindice

A

<super>
</super>

85
Q

HTML5 Etiqueta subíndice

A

<_sub></_sub>

86
Q

HTML5 Etiqueta pequeñas aclaraciones

A

<small></small>

87
Q

HTML5 Etiqueta variable o incógnita

A

<var></var>

88
Q

HTML5 Etiqueta resultado de la operación

A

<samp></samp>

89
Q

HTML5 Etiqueta entrada de usuario

A

<kbd></kbd>

90
Q

HTML5 Etiqueta definición

A

<dfn>></dfn>

91
Q

HTML5 Etiqueta abreviatura

A

<abbr></abbr>

92
Q

HTML5 Etiqueta titulos de trabajos u obras

A

<cite></cite>

93
Q

HTML5 Etiqueta citas (frases)

A

<q></q>

94
Q

HTML5 Etiqueta oportunidad de salto de línea

A

<wbr></wbr>

95
Q

HTML5 Etiqueta texto eliminado (inexacto) - tachado -

A

<s>
</s>

96
Q

HTML5 Etiqueta de texto añadido / eliminado

A

<p>Este es un texto original.</p>

<p>Este es un <ins datetime="2023-07-25T10:00:00Z" cite="https://ejemplo.com/cambios">texto insertado se ve subrayado</ins> en el documento.</p>
<p>Este es un <del datetime="2023-07-25T10:00:00Z" cite="https://ejemplo.com/cambios">texto eliminado se ve tachado</del> del documento.</p>
97
Q

HTML5 Etiqueta de fecha

A

No pinta nada solo el texto, <time> es semántico</time>

    <p>
            El próximo evento tecnológico tendrá lugar el <time datetime="2024-09-01">1 de septiembre de 2024</time>.
        </p> 
        <p>
            La última actualización fue realizada el <time datetime="2024-07-20T14:00">20 de julio de 2024 a las 14:00</time>.
        </p>
98
Q

Para que sirve la etiqueta HTML5 <data_value=”29.99”>29,99 €</data>

A

Equivalencia para máquinas

99
Q

HTML5 Fragmento de código

A

<code></code>

100
Q

Como se puede hacer distintas partes de una imagen seleccionables

A

<map>
<area></area>
<area></area>
<area></area>
</map>

101
Q

Para que sirve el atributo download y como se usa?

A

Dentro de <a_download> y <area_download> para que se descargue el contenido de los enlaces en vez de navegar por ellos</area_download></a_download>

102
Q

Para que sirve el atributo rel y donde se utiliza?

A

Se utiliza en las etiquetas <a>, <link></link>, y <area></area> para definir la relación entre el documento actual y el recurso enlazado. Ayuda a mejorar la seguridad, la navegación, y la optimización para motores de búsqueda (SEO) al proporcionar información contextual sobre el enlace.</a>

Usos Comunes de rel
Seguridad y Privacidad:

noopener: Evita que la nueva página acceda al objeto window.opener.
noreferrer: No envía la referencia (referrer) al recurso enlazado.
SEO:

nofollow: Indica a los motores de búsqueda que no sigan el enlace.
ugc: Indica contenido generado por usuarios.
Navegación:

prev y next: Relaciona documentos en una secuencia, como capítulos de un libro.
alternate: Enlaces a recursos alternativos, como feeds RSS.
Otros:

license: Enlaces a información de licencia.
author: Enlaces a la página del autor del documento.

Ejemplos

<a href=”https://example.com” target=”_blank”_rel=”noopener”>Enlace Seguro</a>
Enlace con nofollow
html

<a href=”https://example.com”_rel=”nofollow”>Enlace NoFollow</a>
Enlace de Navegación

<a href=”chapter2.html”_rel=”next”>Siguiente Capítulo</a>
<a>Capítulo Anterior</a>

<link></link>

<link rel=”alternate” href=”https://example.com/rss” type=”application/rss+xml” title=”RSS

103
Q

Etiqueta html5 para cargar plantilla html

A

<template>
</template>