Cheatsheet de HTML, CSS y JavaScript

HTML

Elemento Descripción Ejemplo
<!DOCTYPE html> Declaración del tipo de documento <!DOCTYPE html>
<html> Raíz del documento HTML <html lang="es"></html>
<head> Contiene metadatos y enlaces <head></head>
<title> Título de la página <title>Mi Página</title>
<body> Contenido principal de la página <body></body>
<h1> a <h6> Encabezados de diferentes niveles <h1>Título 1</h1>
<p> Párrafo <p>Este es un párrafo.</p>
<a> Enlace <a href="http://ejemplo.com">Enlace</a>
<img> Imagen <img src="imagen.jpg" alt="Descripción">
<ul> / <ol> Lista desordenada/ordenada <ul><li>Item 1</li></ul>
<div> División de bloque <div>Contenido</div>
<span> Contenedor en línea <span>Texto en línea</span>
<form> Formulario <form action="submit.php" method="post"></form>
<input> Campo de entrada <input type="text" name="nombre">
<button> Botón <button type="submit">Enviar</button>

CSS

Propiedad Descripción Ejemplo
color Color del texto color: red;
background-color Color de fondo background-color: yellow;
font-size Tamaño de la fuente font-size: 16px;
margin Margen externo margin: 10px;
padding Relleno interno padding: 10px;
border Borde border: 1px solid black;
width Ancho del elemento width: 100px;
height Altura del elemento height: 100px;
display Tipo de visualización del elemento display: block;
position Posición del elemento position: absolute;
top, right, bottom, left Posición relativa al contenedor top: 10px; left: 10px;
flex Flexbox: Flexibilidad del contenedor display: flex;
grid Grid: Sistema de cuadrícula display: grid;
align-items Alineación de elementos en el eje vertical align-items: center;
justify-content Justificación de elementos en el eje horizontal justify-content: space-between;

JavaScript

Función / Método Descripción Ejemplo
console.log() Imprime mensaje en la consola console.log("Hola, mundo!");
document.getElementById() Selecciona un elemento por su ID document.getElementById("miElemento");
addEventListener() Añade un evento a un elemento element.addEventListener("click", function);
innerHTML Cambia el contenido HTML de un elemento element.innerHTML = "Nuevo contenido";
innerText Cambia el texto de un elemento element.innerText = "Nuevo texto";
function Declara una función function miFuncion() {}
var, let, const Declaran variables let x = 10;
if...else Estructura condicional if (x > 10) { ... } else { ... }
for Bucle for for (let i = 0; i < 10; i++) { ... }
while Bucle while while (condición) { ... }
Array Array: Colección de elementos let arr = [1, 2, 3];
.push() Añade un elemento al final de un array arr.push(4);
.pop() Elimina el último elemento de un array arr.pop();
.length Devuelve la longitud de un array arr.length;
JSON.stringify() Convierte un objeto en una cadena JSON JSON.stringify(obj);
JSON.parse() Convierte una cadena JSON en un objeto JSON.parse(string);