📋 Referencia Rápida

Consulta las etiquetas, propiedades y métodos más usados en el desarrollo web

🏗️ Estructura Base

Plantilla básica que debe tener cualquier documento HTML5.

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="UTF-8">
  <title>Título</title>
 </head>
 <body>...</body>
</html>

🏷️ Etiquetas Semánticas

Etiquetas que le dan significado al contenido para navegadores y motores de búsqueda.

<header> <nav> <main> <section> <article> <aside> <footer> <figure>

🔗 Enlace e Imagen

Etiquetas para vincular páginas y mostrar imágenes.

<!-- Enlace -->
<a href="url" target="_blank">Texto</a>

<!-- Imagen -->
<img src="img.png" alt="descripción">

📝 Formularios

Elementos básicos para capturar datos del usuario.

<form action="">
 <input type="text" placeholder="Nombre">
 <input type="email">
 <select><option>Opción</option></select>
 <button type="submit">Enviar</button>
</form>

📋 Listas

Ordenadas y no ordenadas.

<!-- Lista con viñetas -->
<ul>
 <li>Elemento</li>
</ul>

<!-- Lista numerada -->
<ol>
 <li>Primero</li>
</ol>

📊 Tabla

Estructura básica para presentar datos en filas y columnas.

<table>
 <thead>
  <tr><th>Col 1</th></tr>
 </thead>
 <tbody>
  <tr><td>Dato</td></tr>
 </tbody>
</table>

🎥 Multimedia

Añade audio y video de forma nativa.

<video controls width="100%">
 <source src="video.mp4" type="video/mp4">
</video>

<audio controls>
 <source src="audio.mp3" type="audio/mpeg">
</audio>

📂 Details & Summary

Crea un acordeón interactivo sin necesidad de JavaScript.

<details>
 <summary>Haz clic para leer más</summary>
 <p>Este es el contenido oculto.</p>
</details>

🎨 Selectores

Las formas de seleccionar elementos del DOM para aplicar estilos.

/* Por etiqueta */
p { color: red; }

/* Por clase (.) */
.mi-clase { font-size: 16px; }

/* Por ID (#) */
#mi-id { display: flex; }

/* Descendiente */
nav a { text-decoration: none; }

📦 Box Model

Cada elemento es una caja con las siguientes capas.

.caja {
 width: 200px;
 padding: 20px; /* interior */
 border: 1px solid #ccc;
 margin: 10px; /* exterior */
 box-sizing: border-box;
}

↔️ Flexbox

Sistema de diseño unidimensional para alinear elementos en una fila o columna.

.container {
 display: flex;
 justify-content: center; /* eje X */
 align-items: center; /* eje Y */
 gap: 20px;
 flex-wrap: wrap;
}

⊞ CSS Grid

Sistema de diseño bidimensional para crear cuadrículas complejas.

.grid {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 /* o con auto-fit: */
 grid-template-columns:
  repeat(auto-fit, minmax(200px, 1fr));
 gap: 20px;
}

✨ Transiciones

Animaciones suaves entre estados CSS.

.btn {
 transition: all 0.3s ease;
}
.btn:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

🖥️ Media Queries

Estilos condicionales según el tamaño de pantalla (Responsive Design).

/* Tablet y menores */
@media (max-width: 768px) {
 .sidebar {
  display: none;
 }
}
/* Móvil */
@media (max-width: 480px) {
 h1 { font-size: 1.5rem; }
}

📍 Posicionamiento

Controla la ubicación exacta de los elementos en pantalla.

position: relative; /* Su ubicación original */
position: absolute; /* Relativo al padre posicionado */
position: fixed; /* Fijo a la pantalla */
position: sticky; /* Fijo al hacer scroll */

/* Coordenadas */
top: 0; left: 10px; z-index: 10;

🎨 Variables CSS

Crea variables reutilizables para colores y tamaños.

:root {
 --color-primario: #6366f1;
}

.boton {
 background-color: var(--color-primario);
}

🪄 Pseudo-clases y elementos

Estilos para estados interactivos o partes virtuales.

/* Estados */
a:hover { color: red; }
input:focus { border-color: blue; }

/* Elementos virtuales */
.box::before {
 content: "★";
}

🔍 Seleccionar del DOM

Cómo acceder a elementos HTML desde JavaScript.

// Un elemento por ID
const el = document.getElementById('mi-id');

// Primero que coincida
const el = document.querySelector('.clase');

// Todos los que coincidan
const items = document.querySelectorAll('li');

🖱️ Eventos

Cómo escuchar acciones del usuario sobre los elementos.

const btn = document.querySelector('#btn');

btn.addEventListener('click', (e) => {
 console.log('¡Clic!');
 e.preventDefault(); // evita recarga
});

⏳ Async / Await

Maneja promesas y código asíncrono de forma más limpia y legible.

const obtenerDatos = async () => {
 try {
  const res = await fetch('/api/data');
  const json = await res.json();
  console.log(json);
 } catch (error) {
  console.error(error);
 }
};

📦 Destructuring & Spread

Desempaqueta valores o expande objetos y arrays en una línea.

// Destructuring
const { nombre, edad } = usuario;
const [primero, segundo] = array;

// Spread Operator
const nuevoArr = [...viejoArr, 4, 5];
const nuevoObj = { ...viejoObj, extra: true };

🏹 Arrow Functions

Funciones más cortas y con ámbito (this) léxico.

// Función Tradicional
function sumar(a, b) {
 return a + b;
}

// Arrow Function
const sumar = (a, b) => a + b;
const saludar = nombre => `Hola ${nombre}`;

🔁 Array.map()

Crea un nuevo array transformando cada elemento.

const nums = [1, 2, 3, 4];

const dobles = nums.map(n => n * 2);
// → [2, 4, 6, 8]

🔍 Array.filter()

Filtra elementos que cumplen una condición.

const nums = [1, 2, 3, 4, 5, 6];

const pares = nums.filter(n => n % 2 === 0);
// → [2, 4, 6]

📡 Fetch API

Realiza peticiones HTTP para consumir APIs externas.

fetch('https://api.ejemplo.com/datos')
 .then(res => res.json())
 .then(data => {
  console.log(data);
 })
 .catch(err => console.error(err));

💾 localStorage

Guarda datos en el navegador que persisten al recargar.

// Guardar
localStorage.setItem('clave', 'valor');

// Recuperar
const val = localStorage.getItem('clave');

// Eliminar
localStorage.removeItem('clave');