HTML y CSS
ETIQUETAS HTML
Etiquetas de metadatos Etiquetas para dar estructura
<head> </head> <body> </body>
<title> </title> <header> </header>
<link> <nav> </nav>
<style> </style> <section> </section>
<meta> <h1> </h1>
<script></script> <h6> </h6>
<footer> </footer>
Para agrupar contenido Para insertar contenido multimedia
<div> </div> <img>
<p> </p> <video> </video>
<ol> </ol> <audio> </audio>
<ul> </ul> <iframe> </iframe>
<li> </li> <svg> </svg>
<dt></dt>
<dd></dd>
Etiquetas semanticas Etiquetas contenido de texto
<a> </a> <blockquote></blockquote>
<br> <pre></pre>
<strong> </strong> <figure></figure>
<header> </header> <figcaption></figcaption>
<nav> </nav>
<section> </section>
<mark> </mark>
<article> </article>
<footer> </footer>
FORMULARIOS HTML
Elemento input Atributo
<input type="text"> _blank
<input type="radio"> _self
<input type="checkbox"> _parent
<input type="submit"> _top
<input type="button"> framename
Elementos del formulario Tipos de entrada HTML
<input> <input type="button">
<label> <input type="checkbox">
<select> <input type="color">
<textarea> <input type="date">
<button> <input type="datetime-local">
<fieldset> <input type="email">
<legend> <input type="file">
<datalist> <input type="hidden">
<output> <input type="image">
<option> <input type="month">
<optgroup> <input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Atributos en HTML
id
class
src
href
alt
style
SELECTORES
Selector de tipo h1 { } Los tipos de selectores
Selector universal * { } El selector universal
Selector de clase .box { } Los selectores de clase
Selector de ID #unique { } Los selectores de ID
Selector de atributo a[title] { } Los selectores de atributo
Pseudoclase p:first-child { } Las pseudoclases
Pseudoelemento p::first-line { } Los pseudoelementos
PROPIEDADES DE CAJA
• Padding: padding-top, padding-right, padding-bottom, padding-left o
padding.
• Border: border-width, border-style, border-color.
• Margin: margin-top, margin-right, margin-bottom, margin-left o
margin.
LAYOUT
PROPIEDADES DE GRID
• grid-template-columns: Define el tamaño de las columnas.
• grid-template-areas: Asigna áreas a los elementos.
• grid-gap: Define el espacio entre filas y columnas.
• justify-items: Alinea los elementos dentro de las celdas.
• align-items: Alinea los elementos a lo largo del eje principal de la celda.
• place-items: Combina justify-items y align-items.
• grid-template-rows: Define el tamaño de las filas.
PROPIEDADES DE FLEXBOX
Contenedor:
flex-direction: row, column, row-reverse, column-reverse
justify-content: lex-start, flex-end, center, space-between, space-around
align-items: lex-start, flex-end, center, stretch
align-content: flex-start, flex-end, center, space-between, space-around, stretch
Elementos:
order
flex-grow
flex-shrink
flex-basis
FUENTES:
W3Schools
[Link] - MDN