Tu Ayuda Memoria Web Interactivo

Etiquetas HTML (Las 30 Fundamentales)

1. <html>

Es el elemento raíz que envuelve todo el contenido y documento HTML.

<!DOCTYPE html>
<html lang="es">
  <!-- Todo el sitio va aquí -->
</html>

Demostración:

Documento HTML raíz contenedor de todo.

2. <head>

Contiene metadatos, enlaces a hojas de estilo, título y configuraciones no visibles directamente en el cuerpo.

<head>
  <meta charset="UTF-8">
  <title>Mi Sitio</title>
</head>

Demostración:

Sección invisible que configura codificación y metadatos del navegador.

3. <body>

Representa el contenido principal y visible que los usuarios ven e interactúan en la página.

<body>
  <h1>Hola Mundo</h1>
</body>

Demostración:

Área donde habita todo el contenido renderizado.

4. <title>

Define el título de la página que aparece en la pestaña del navegador y marcadores.

<title>Ayuda Memoria Web</title>

Demostración:

📄 Ayuda Memoria Web (Pestaña)

5. <meta>

Establece metadatos del documento como codificación de caracteres y vista responsive móvil.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Demostración:

Asegura la interpretación correcta de acentos, caracteres e interfaces móviles.

6. <link>

Vincula recursos externos al documento, comunmente archivos de hoja de estilo CSS.

<link rel="stylesheet" href="style.css">

Demostración:

Estilos aplicados mediante vínculo CSS externo.

7. <script>

Inyecta o enlaza código ejecutable JavaScript para interactividad en la página.

<script src="script.js"></script>

Demostración:

8. <h1> a <h6>

Etiquetas de encabezado para jerarquizar títulos y subtítulos del nivel 1 al 6.

<h1>Título Nivel 1</h1>
<h3>Subtítulo Nivel 3</h3>

Demostración:

Encabezado H4

Encabezado H6

9. <p>

Representa un párrafo de texto dentro de la estructura lógica de la página.

<p>Este es un párrafo explicativo de ejemplo.</p>

Demostración:

Este es un texto formateado como párrafo.

10. <a>

Crea un hipervínculo o enlace hacia otras páginas o recursos utilizando el atributo href.

<a href="https://google.com" target="_blank">Visitar Google</a>

Demostración: Enlace de prueba

11. <img>

Muestra una imagen visual en la página mediante el atributo src y texto alternativo alt.

<img src="https://via.placeholder.com/80" alt="Ejemplo">

Demostración:

IMG

12. <div>

Contenedor genérico a nivel de bloque para agrupar elementos y aplicar estilos.

<div class="caja">
  <p>Contenido dentro de bloque</p>
</div>

Demostración:

Contenedor en bloque DIV

13. <span>

Contenedor genérico en línea utilizado para dar estilo a partes específicas de un texto.

<p>Texto con <span class="destaque">palabra clave</span>.</p>

Demostración:

Texto normal resaltado con span.

14. <ul>

Define una lista desordenada cuyos elementos se representan mediante viñetas.

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Demostración:

Item A
Item B

15. <ol>

Crea una lista ordenada secuencialmente con números o letras.

<ol>
  <li>Paso 1</li>
  <li>Paso 2</li>
</ol>

Demostración:

Primero
Segundo

16. <li>

Representa cada elemento o ítem individual dentro de una lista ul u ol.

<li>Elemento de lista</li>

Demostración:

Elemento LI de muestra

17. <header>

Representa la cabecera del sitio o de una sección, conteniendo títulos, logos y navegaciones.

<header>
  <h1>Logo</h1>
</header>

Demostración:

Cabecera Superior Header

18. <nav>

Etiqueta semántica destinada a contener los enlaces principales de navegación del sitio web.

<nav>
  <a href="#inicio">Inicio</a>
</nav>

Demostración:

19. <main>

Encapsula el contenido central y exclusivo del documento, excluyendo barras laterales o cabeceras.

<main>
  <h2>Contenido Central</h2>
</main>

Demostración:

Sección Main Principal

20. <footer>

Define el pie de página conteniendo avisos de derechos de autor, enlaces secundarios y contacto.

<footer>
  <p>© 2026 Tu Nombre</p>
</footer>

Demostración:

21. <section>

Representa una sección temática genérica dentro de un documento, normalmente con un encabezado.

<section>
  <h2>Servicios</h2>
</section>

Demostración:

Sección Temática

22. <article>

Representa un bloque de contenido independiente y autocontenido (ej. noticia, tarjeta, post).

<article>
  <h3>Noticia</h3>
  <p>Texto independiente</p>
</article>

Demostración:

Tarjeta Artículo Independiente

23. <table>

Representa una tabla para mostrar información organizada en filas y columnas de datos.

<table border="1">
  <tr><td>Dato</td></tr>
</table>

Demostración:

Nombre	Edad
Ana	22

24. <tr>

Define una fila dentro de una tabla de datos (Table Row).

<tr>
  <td>Celda 1</td>
  <td>Celda 2</td>
</tr>

Demostración:

[Fila TR con celdas]

25. <td>

Representa una celda individual contenedora de datos dentro de una fila de tabla (Table Data).

<td>Contenido de celda</td>

Demostración: Celda TD

26. <form>

Contenedor de elementos interactivos para recopilar e intercambiar datos ingresados por el usuario.

<form action="/enviar" method="POST">
  <input type="text">
</form>

Demostración:

27. <input>

Campo de entrada interactivo para recibir datos como texto, números, fechas o casillas.

<input type="text" placeholder="Escribe aquí...">

Demostración:

28. <button>

Botón clicleable interactivo para ejecutar acciones o enviar formularios.

<button type="button">Hacer Clic</button>

Demostración:

29. <label>

Etiqueta descriptiva vinculada a un elemento de formulario para mejorar accesibilidad e usabilidad.

<label for="user">Usuario:</label>
<input id="user" type="text">

Demostración: Usuario:

30. <textarea>

Campo de entrada de texto multilínea ideal para comentarios o descripciones extensas.

<textarea rows="2" placeholder="Mensaje..."></textarea>

Demostración:

Propiedades CSS (Las 30 Más Usadas)

1. color

Define el color del texto de un elemento.

p {
  color: #e11d48;
}

Demostración:

Texto con color rojo-rosado.

2. background-color

Establece el color de fondo de un contenedor o elemento.

div {
  background-color: #fef08a;
}

Demostración:

Fondo Amarillo

3. font-size

Ajusta el tamaño tipográfico o dimensión de la letra.

span {
  font-size: 1.2rem;
}

Demostración: Texto Grande (18px)

4. font-family

Aplica el tipo de fuente tipográfica a utilizar en el texto.

p {
  font-family: 'Courier New', monospace;
}

Demostración:

Texto en Monospace

5. font-weight

Define el grosor o peso visual de las letras (ej. bold, normal, 700).

p {
  font-weight: 800;
}

Demostración:

Texto Grueso (Bold 800)

6. text-align

Controla la alineación horizontal del texto (center, left, right, justify).

p {
  text-align: center;
}

Demostración:

Texto Centrado

7. margin

Establece la separación o espacio exterior alrededor de una caja.

div {
  margin: 10px;
}

Demostración:

Con Margin Exterior

8. padding

Establece el relleno o espacio interior dentro de los límites de un contenedor.

div {
  padding: 12px;
}

Demostración:

Relleno interior Padding

9. width

Especifica la anchura de un elemento.

div {
  width: 60%;
}

Demostración:

Ancho al 60%

10. height

Especifica la altura de un elemento.

div {
  height: 40px;
}

Demostración:

Alto de 35px

11. max-width

Establece el límite máximo de ancho que un elemento puede abarcar.

div {
  max-width: 150px;
}

Demostración:

Max Width 120px

12. border

Define el estilo, grosor y color del borde alrededor de una caja.

div {
  border: 2px solid #2563eb;
}

Demostración:

Caja con Borde

13. border-radius

Redondea las esquinas del borde de un elemento.

button {
  border-radius: 8px;
}

Demostración:

Esquinas Redondeadas

14. box-shadow

Añade efectos de sombra alrededor del marco de un elemento.

div {
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

Demostración:

Caja con Sombra

15. display

Especifica el tipo de modelo de renderizado (flex, grid, block, inline-block, none).

div {
  display: flex;
}

Demostración:

AB (Flexbox)

16. flex-direction

Establece la dirección del eje principal en un contenedor Flexbox (row, column).

.container {
  flex-direction: column;
}

Demostración:

1. Arriba2. Abajo

17. justify-content

Alinea los elementos flexibles a lo largo del eje principal (center, space-between, flex-end).

.container {
  justify-content: space-between;
}

Demostración:

IzquierdaDerecha

18. align-items

Alinea los elementos flexibles a lo largo del eje transversal (center, flex-start, stretch).

.container {
  align-items: center;
}

Demostración:

Centrado vertical

19. gap

Establece la separación o espacio entre filas y columnas en layout Flexbox o Grid.

.container {
  gap: 12px;
}

Demostración:

Caja 1Caja 2

20. grid-template-columns

Define el número y las dimensiones de las columnas en un diseño CSS Grid.

.grid {
  grid-template-columns: 1fr 1fr;
}

Demostración:

Col 1

Col 2

21. position

Establece la estrategia de posicionamiento de un elemento (static, relative, absolute, fixed, sticky).

.caja {
  position: relative;
}

Demostración:

Absolute

22. top/bottom/left/right

Determinan las coordenadas de desplazamiento para elementos posicionados.

.caja {
  top: 5px;
  left: 10px;
}

Demostración:

Desplazado Left 15px

23. z-index

Indica la profundidad u orden de superposición vertical de elementos posicionados.

.capa {
  z-index: 10;
}

Demostración:

Capa 1Capa 2 Superior

24. opacity

Ajusta el nivel de transparencia de un elemento (de 0.0 transparente a 1.0 opaco).

.transparente {
  opacity: 0.5;
}

Demostración:

Opacidad 0.4 (40%)

25. cursor

Especifica el tipo de puntero del ratón al pasar sobre un elemento (pointer, wait, help).

.boton {
  cursor: pointer;
}

Demostración:

Pasa el mouse (Cursor Pointer)

26. transition

Permite animar suavemente los cambios de propiedades CSS con una duración determinada.

.btn {
  transition: all 0.3s ease;
}

Demostración:

27. overflow

Determina qué ocurre cuando el contenido desborda los límites de su caja (hidden, scroll, auto).

.caja {
  overflow: hidden;
}

Demostración:

Texto sumamente largo que se recorta...

28. box-sizing

Define cómo se calcula el ancho y alto total (border-box incluye padding y border).

* {
  box-sizing: border-box;
}

Demostración:

Tamaño exacto incluido borde

29. line-height

Establece la distancia o altura de interlineado entre líneas de texto.

p {
  line-height: 1.6;
}

Demostración:

Primera línea
Segunda línea con espacio.

30. text-decoration

Añade o quita líneas decorativas al texto (underline, line-through, none).

a {
  text-decoration: none;
}

Demostración: Texto tachado | Subrayado

Comandos JavaScript (Los 20 Esenciales)

1. let / const

Declara variables reasignables (let) o constantes inmutables en su referencia (const).

let contador = 0;
const API_URL = "https://api.com";

Demostración:

let x = 10; const Y = 20;

2. document.getElementById()

Selecciona y retorna un elemento del DOM a través de su atributo ID único.

const el = document.getElementById('mi-id');

Demostración:

Esperando...

3. document.querySelector()

Busca y devuelve el primer elemento que coincida con un selector CSS especificado.

const caja = document.querySelector('.tarjeta');

Demostración:

Elemento con clase .demo-qs

4. addEventListener()

Registra un evento (clic, input, hover, etc.) en un elemento para disparar una función.

btn.addEventListener('click', () => {
  alert('¡Clic detectado!');
});

Demostración:

5. textContent

Obtiene o cambia el contenido de texto plano de un elemento del DOM.

elem.textContent = "Nuevo texto seguro";

Demostración: Texto Original

6. innerHTML

Inyecta o reemplaza código o etiquetas HTML dinámicamente dentro de un elemento.

elem.innerHTML = "<strong>Texto en negrita</strong>";

Demostración:

Original

7. style

Permite leer o modificar propiedades de diseño CSS directamente desde JavaScript.

elem.style.color = "red";
elem.style.backgroundColor = "black";

Demostración:

Cambia mi estilo

8. classList.add()

Agrega una o más clases CSS a la lista de clases de un elemento.

elem.classList.add('resaltado');

Demostración:

Elemento sin clase

9. classList.remove()

Remueve una o más clases CSS previamente asignadas a un elemento.

elem.classList.remove('oculto');

Demostración:

Elemento con clase

10. classList.toggle()

Alterna una clase CSS: si existe la quita, y si no existe la agrega.

elem.classList.toggle('activo');

Demostración:

Alternar este texto

11. function

Declara un bloque de código reutilizable que realiza una tarea cuando es invocado.

function saludar(nombre) {
  return "Hola " + nombre;
}

Demostración:

12. if / else

Estructura condicional que ejecuta bloques de código según si una condición evalúa true o false.

if (edad >= 18) {
  mensaje = "Mayor";
} else {
  mensaje = "Menor";
}

Demostración:

13. .value

Obtiene o asigna el valor actual ingresado en un campo de entrada (input, select, textarea).

const texto = miInput.value;

Demostración:

14. preventDefault()

Cancela la acción por defecto asignada por el navegador a un evento (ej. recargar página al enviar form).

form.addEventListener('submit', (e) => {
  e.preventDefault();
});

Demostración:

15. parseInt() / Number()

Convierte una cadena de texto o string en un número entero o numérico operable.

let num = parseInt("42");
let total = Number("10.5");

Demostración:

16. forEach()

Método para iterar y ejecutar una función sobre cada elemento de un arreglo o lista.

array.forEach((item) => {
  console.log(item);
});

Demostración:

17. .push()

Añade uno o más elementos al final de un arreglo y devuelve la nueva longitud.

let lista = [1, 2];
lista.push(3);

Demostración:

Arreglo: [1, 2]

18. localStorage.setItem()

Guarda un par clave-valor en la memoria local persistente del navegador del usuario.

localStorage.setItem('usuario', 'Juan');

Demostración:

19. localStorage.getItem()

Recupera el valor almacenado en localStorage asociado a una clave específica.

let user = localStorage.getItem('usuario');

Demostración:

20. setTimeout()

Ejecuta una función tras transcurrir un tiempo de retardo en milisegundos.

setTimeout(() => {
  alert('Pasaron 2 seg');
}, 2000);

Demostración: