HTML – Estructura y etiquetas
<html> / </html> Inicio y fin del documento HTML.
Ejemplo:
<html> ... </html>
<head> Contiene metadatos, título, enlaces a estilos y scripts. Ejemplo:
html
<head><title>Mi página</title></head>
<body> Contenido visible de la página. Ejemplo:
html
<body><h1>Hola mundo</h1></body>
<title> Título en la pestaña del navegador. Ejemplo:
Html
<title>Mi sitio web</title>
<style> CSS dentro del documento. Ejemplo:
html
<style>h1 { color: red; }</style>
<script> Código JavaScript. Ejemplo:
html
<script>alert("Hola!");</script>
<link> Conecta recursos externos como hojas de estilo. Ejemplo:
html
<link rel="stylesheet" href="[Link]">
<meta> Metadatos (descripción, palabras clave, viewport). Ejemplo:
html
<meta name="description" content="Ejemplo">
<noscript> Contenido alternativo si JS está deshabilitado. Ejemplo:
html
<noscript>Tu navegador no soporta scripts.</noscript>
<div> Contenedor de bloque. Ejemplo:
html
<div class="caja">Contenido</div>
<span> Contenedor en línea. Ejemplo:
html
<span style="color:blue">Texto azul</span>
<p> Párrafo. Ejemplo:
html
<p>Este es un párrafo.</p>
<br> Salto de línea. Ejemplo:
html
Hola<br>Mundo
<hr> Línea horizontal. Ejemplo:
html
<hr>
<nav> Menú de navegación. Ejemplo:
html
<nav><a href="[Link]">Inicio</a></nav>
<footer> Pie de página. Ejemplo:
html
<footer>© 2026 Mi sitio</footer>
<header> Encabezado de página o sección.
<section> Define una sección.
<article> Contenido independiente.
<aside> Contenido secundario.
<details> Contenido desplegable.
<figure> Contenido autónomo (ej. imagen + pie).
<a> (ancla) Enlaces internos o externos. Ejemplo:
html
<a href="[Link]">Ir</a>
Marcador Salto directo a una parte específica.
Vínculo relativo URL parcial.
Enlace absoluto URL completa.
<map> Mapa de imagen con áreas clicables.
<form> Formularios para capturar datos.
Métodos de envío:
GET → Recupera datos.
POST → Envía datos.
o PUT → Inserta datos.
<select> Lista desplegable.
<textarea> Área de texto multilínea.
<button> Botón interactivo.
<img> Inserta imágenes. Ejemplo:
html
<img src="[Link]" alt="Descripción">
Atributos de imagen:
o alt → Texto alternativo.
o title → Texto emergente.
o loading → Carga diferida.
o srcset → Varias versiones de imagen.
o source → Fuente alternativa.
o media → Condiciones de visualización.
<video> Inserta videos.
Atributos de video:
o controls → Controles de reproducción.
o muted → Silenciado.
o autoplay → Reproducción automática.
o loop → Repetición.
<track> Subtítulos o descripciones en video.
<svg> Gráficos vectoriales escalables.
<canvas> Área para dibujar con JavaScript.
🎨 CSS – Estilos y propiedades
Selector → Indica a qué elementos se aplican las reglas. Ejemplo:
css
p { color: green; }
Declaración → Propiedad + valor. Ejemplo:
css
h1 { font-size: 20px; }
Clase (.clase) → Aplica estilo a elementos con class. Ejemplo:
css
.destacado { font-weight: bold; }
ID (#id) → Aplica estilo a un elemento único. Ejemplo:
css
#principal { background: yellow; }
Selector universal (*) → Aplica estilo a todos los elementos. Ejemplo:
css
* { margin: 0; }
Propiedades de texto
font-family → Tipografía. Ejemplo: p { font-family: Arial; }
font-size → Tamaño del texto. Ejemplo: h1 { font-size: 30px; }
font-style → Normal, cursiva, oblicua. Ejemplo: p { font-style: italic;
}
font-weight → Grosor/negrita. Ejemplo: p { font-weight: bold; }
color → Color del texto. Ejemplo: p { color: blue; }
background-color → Color de fondo. Ejemplo: body { background-color:
lightgray; }
text-decoration → Subrayado, tachado. Ejemplo: a { text-decoration:
underline; }
letter-spacing → Espaciado entre letras. Ejemplo: p { letter-spacing:
2px; }
line-height → Altura de línea. Ejemplo: p { line-height: 1.5; }
text-indent → Sangría. Ejemplo: p { text-indent: 20px; }
direction → Dirección del texto (LTR/RTL). Ejemplo: p { direction:
rtl; }
Colores
RGB → Rojo, verde, azul. Ejemplo: p { color: rgb(255,0,0); }
HEX → Código hexadecimal (#ffffff). Ejemplo: p { color: #00ff00; }
Comentarios
/* ... */ → Texto ignorado por el navegador. Ejemplo:
css
/* Esto es un comentario */
Modelo de caja
margin → Espacio externo. Ejemplo: div { margin: 10px; }
padding → Espacio interno. Ejemplo: div { padding: 5px; }
border → Borde. Ejemplo: div { border: 1px solid black; }
Display
block →