En HTML y CSS tenemos distintos tipos de etiquetas cada uno con un propósito en particular, una etiqueta puede componerse de dos maneras
| 📖Estructura de etiquetas | |||
| Etiquetas que solo se aperturan. | Etiquetas que tienen una apertura y un cierre. | ||
| Este tipo de etiqueta comunmentese utilizan para indicar una dirección u origen, se componen por argumento o por acciones tales como src href. | Este tipo de etiquetas comunmente se utilizan para encerrar un contenido tales como texto, img, entre otros. | ||
✒Lista de etiquetas dirigidas al texto.
| <p></p> | Define una parte que debe mostrarse como un párrafo. |
| <h1></h1> | Sirvepara colocar subtitulos |
| <a></a> | Representa un hiperenlace. |
| <em></em> | Especifica un texto enfatizado. |
| <stronger></stronger> | Establece un texto importante. |
| <small></small> | Define un comentario aparte, es decir, textos de políticas de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento. |
| <s></s> | Representa contenido que no es exacto, tiene el estilo tachado. |
| <cite></cite> | Indica el título de una obra. |
| <q></q> | Representa una cita textual entre comillas. |
| <dfn></dfn> | Sirve para marcar el término que se quiere definir. |
| <abbr></abbr> | Representa una abreviación o un acrónimo; mediante el atributo title se puede describir la abreviatura. El texto es usualmente representado como tooltip cuando se pasa el puntero sobre el elemento. |
| <time></time> | Determina un valor de fecha y hora. |
| <code></code> | Establece un código de programación. |
| <var></var> | Representa a una variable, es decir, una expresión matemática o una variable de un programa o similar. |
| <samp></samp> | Determina la salida de un programa. |
| <kbd></kbd> | Representa el texto que debe introducir o la tecla que debe pulsar el usuario. |
| <sub></sub> , <sup></sup> | Establece un subíndice y un superíndice respectivamente. |
| <i></i> | Muestra el texto marcado con un estilo en cursiva o itálica. |
| <b></b> | Representa el texto marcado con un estilo en negrita. |
| <u></u> | Muestra el texto subrayado. |
| <mark></mark> | Representa un texto marcado o resaltado. |
| <span></span> | Especifica texto en línea. Sirve para aplicar estilo al texto o agrupar elementos en línea. |
| <br></br> | Inserta un salto de línea. |
| <wbr></wbr> | Indica una oportunidad de salto de línea, es decir, un punto sugerido donde el texto puede ser dividido para mejorar su legibilidad. |
🌆Lista de etiquetas dirigdas a objetos.
| <img> | para colocar una imagen |
| <header> | colocar cabecera al documento |
| <!DOCTYPE></!DOCTYPE> | tipo de documento (versión de html empleada) |
| <html></html> | engloba todo el documento |
| <head></head> | delimita el encabezado del documento |
| <tittle></tittle> | título del documento (se muestra en la pestaña del navegador) |
| <base></base> | URI base para direcciones relativas |
| <link></link> | enlace a otros archivos (hoja de estilo, etc.) |
| <meta></meta> | metainformación sobre el documento |
| <style></style> | hoja de estilo incluida en el documento |
| <body></body> | delimita el cuerpo del documento |
| <article></article> | artículo |
| <section></section> | sección |
| <nav></nav> | navegación |
| <aside></aside> | lateral |
| h1 a h6 | encabezado (de nivel 1 a 6) |
| <hgroup></hgroup> | grupo de encabezados |
| <header></header> | cabecera |
| <footer></footer> | pie |
| <address></address> | dirección (información sobre el autor) |
| <p></p> | párrafo |
| <hr></hr> | separador |
| <div></div> | división |
| <blockquote></blockquote> | cita larga (que incluye varios párrafos) |
| <pre></pre> | texto preformateado |
| <main></main> | principal |
| <figure></figure> | ilustración |
| <figcaption></figcaption> | pie de ilustración |
| <picture></picture> | imagen múltiple para diferentes resoluciones o densidades |
| <iframe></iframe> | marco incrustado en el documento |
| <object></object> | objeto |
| <param></param> | parámetro para objeto |
| <map></map> | mapa de imagen |
| <area></area> | área en mapa de imagen |
| <ol></ol> | lista ordenada |
| <ul></ul> | lista no ordenada |
| <menu></menu> | equivale a ul |
| <li></li> | elemento de lista (ordenada o no ordenada) |
| <dl></dl> | lista de definición |
| <dt></dt> | término en lista de definición |
| <dd></dd> | definición en lista de definición |
| <table></table> | tabla |
| <caption></caption> | leyenda de tabla |
| <colgroup></colgroup> | grupo de columnas |
| <tbody></tbody> | cuerpo de tabla (grupo de filas) |
| <thead></thead> | cabecera de tabla (grupo de filas) |
| <tfood></tfood> | pie de tabla (grupo de filas) |
| <tr></tr> | fila |
| <td></td> | celda |
| <th></th> | celda de cabecera |
| <col></col> | columna |
| <form></form> | formulario |
| <label></label> | etiqueta de un control |
| <input></input> | control (hay varios tipos) |
| <button></button> | botón |
| <select></select> | caja de lista |
| <optgroup></optgroup> | grupo de opciones en una caja de lista |
| <option></option> | opción de caja de lista |
| <textarea></textarea> | área de texto |
| <output></output> | cálculo |
| <progress></progress> | barra de progreso |
| <meter></meter> | indicador |
| <fieldset></fieldset> | grupo de controles |
| <legend></legend> | leyenda de grupo de controles |
| <details></details> | desplegable |
| <summary></summary> | leyenda para details |
| <dialog></dialog> | cuadro de diálogo de una aplicación open |
| <script></script> | script |
| <noscript></noscript> | contenido a mostrar en navegadores que no admiten script |
| <template></template> | plantillas utilizables por scripts |
| <slot></slot> | marcador para componente |
| <canvas></canvas> | zona de dibujo utilizable por script width, height |
| <ruby></ruby> | notación ruby |
| <rt></rt> | elemento de notación ruby (texto) |
| <rp></rp> | elemento de notación ruby (paréntesis) |
🎓Lista de propiedades css dirigidas al texto.
| color:#fffff; | cambiar el color del texto |
| font-size:1px; | modificar el tamaño del texto |
| text-ident | Desplazamiento de la primera línea del texto |
| text-aling | Alineamiento del texto |
| text-decoration | Efectos de subrayado, tachado |
| letter-spacing | Espacio entre caracteres |
| word-spacing | Espacio entre palabras |
| text-transform | Transformación a mayúsculas / minúsculas |
| line-height | Tamaño del espacio entre líneas |
| vertical-aling | Alineación vertical |
🎨Listado de propiedades css dirigidas a objetos.
| width:100px; | utilizado para definir el ancho de un objeto |
| align-content | Alinea los elementos del contenedor a lo largo del eje transversal en flexbox y a lo relativo a la columna en grid. El valor por defecto es stretch. |
| align-items | Establece el valor align-self para todos los elementos descendientes directos de un elemento. Utilizada en flexbox y grid. El valor por defecto es stretch. |
| align-self | En felxbox la propiedad align-self reposiciona elementos individuales relativamente al eje transversal de la caja En grid la propiedad align-self alinea el ítem relativo a la columna. |
| all | Reestablece el valor de todas las propiedades del elemento seleccionado excepto direction y unicode-bidi. |
| animation | Utilizada para animar las propiedades CSS que pueden ser animadas. |
| appearance | Utilizada para mostrar los estilos nativos del sistema operativo para un elemento como checkbox, button, textarea, radio, etc... |
| backdrop-filter | Tiene el mismo efecto que la propiedad filter, solo que los estilos se aplican al fondo (background) en lugar de aplicarse al elemento. |
| backface-visibility | Decide si un elemento, girado 180º alrededor del eje X o Y, debe seguir visible ( el valor por defecto ) o no ( hidden ). |
| background | Establece todas las propiedades del fondo en una sola declaración abreviada |
| background-attachment | Se utiliza para controlar como se comportan las imágenes de fondo al desplazar la página. |
| background-blend-mode | Utilizada para combinar dos imágenes de fondo, o una imagen y un color. |
| background-clip | Especifica hasta donde se extiende el fondo ( background ) de un elemento, ya sea color o imagen. |
| background-color | Se utiliza para dar un color de fondo a un elemento HTML |
| background-image | Utiliza una imagen o un gradiente como imagen de fondo de un elemento HTML. |
| background-origin | Utilizada para determinar como se calcula la posición ( background-position ) de la imagen de fondo ( background-image ). |
| background-position | Permite posicionar una imagen de fondo dentro de su contenedor. |
| background-repeat | Utilizada para establecer si la imagen se repite o no y de que forma: |
| background-size | Permite redimensionar las imágenes de fondo. |
| bleed | Propiedad utilizada con la regla at @page para determinar el sangrado de pagina |
| border | Establece en una declaración abreviada las propiedades border-width, border-style, y border-color. |
| border-collapse | Establece si las celdas adiacentes de una tabla comparten el mismo borde ( collapsed ) o no ( separate ). |
| border-spacing | Controla la separación de los bordes en una tabla table con bordes separados border-collapse: separate |
| bottom | Establece la distancia entre el borde inferior de un elemento posicionado ( position:relative | absolute ... ) relativo al borde inferior de la caja padre |
| box-decoration-break | Decide como utilizar los elementos decorativos de un elemento ( background, border, border-radius, border-image, box-shadow, margin, y padding ) cuando el elemento ocupa múltiples líneas columnas o páginas. |
| box-shadow | Aplica una sombra alrededor de un elemento HTML |
| box-sizing | Decide como se calcula el ancho y el alto de una caja; si el padding y el border de la caja suman ( content-box ) o no ( border-box ). |
| break-inside | En el layout de columnas la propiedad break-inside se utiliza para controlar si romper o no un elemento html entre columnas. |
| caption-side | Decide donde poner la descripción ( caption) de una tabla ( table). |
| caret-color | especifica el color del cursor de texto de un elemento editable. |
| clear | Decide si un elemento tiene que aparecer al lado o debajo de un elemento flotado que lo precede. |
| clip-path | Crea una región de recorte para que solo una parte del elemento HTML sea visible |
| color | Establece el color del texto de las decoraciones ( text-decoration ) y el valor de currentcolor |
| color-adjust | Establece como se debe optimizar el aspecto de un elemento en los dispositivos de salida ( una impresora - por ejemplo ). |
| column-count | En el layout de columnas la propiedad column-count especifica el número de columnas. |
| column-fill | Especifica como aparece el contenido de un elemento en el layout de columnas |
| column-gap | Especifica el tamaño ( px, em, etc…) del espacio entre columnas. |
| column-rule | Declaración abreviada para establecer las propiedades del separador entre columnas. |
| column-span | Establece si un elemento puede extenderse a lo largo de varias columnas |
| column-width | Sugiere la anchura optima de las columnas. |
| columns | Declaración abreviada para establecer las propiedades column-width y column-count |
| content | Se utiliza junto con los pseudo-elementos ::before y ::after para generar el contenido que sde estos. |
| counter-increment | Se utiliza junto con los pseudo-elementos ::before y ::after para especificar el incremento del contador utilizado como valor de la propiedad content |
| counter-reset | Se utiliza junto con los pseudo-elementos ::before y ::after para reestablecer el valor inicial de un contador utilizado como valor de la propiedad content |
| cursor | Especifica el tipo de cursor que se mostrara cuando el raton pasa por encima de un elemento. |
| direction | Se utiliza para indicar en que dirección fluye el texto ( rtl: de derecha a izquierda o ltr: de izquierda a derecha ) |
| display | Permite definir como será mostrado un cierto elemento HTML |
| empty-cells | Establece si los bordes y los fondos de las celdas vacías de una tabla table serán visibles o no. |
| filter | Es una manera de aplicar filtros SVG a un elemento html (sobretodo imagenes) |
| flex | Es una propiedad de los ítems de un contenedor flex. y representa la declaración abreviada de flex-grow, flex-shrink ( opcional ) y flex-basis ( opcional ) |
| felx-basic | Es una propiedad de los ítems de un contenedor flex. Especifica el valor inicial del tamaño principal de un elemento flex, antes de que esté redimensionado |
| flex-direction | Es una propiedad del contenedor flex, y establece la dirección de los elementos hijos ( ítems flex ). |
| flex-flow | Es una propiedad del contenedor flex. Representa la declaración abreviada de las dos propiedades: flex-direction y flex-wrap ( opcional ) |
| flex-grow | Una propiedad de los ítems del contenedor flex. Establece cuanto puede crecer un elemento flex en relación al resto de elementos de la misma caja flex. |
| felx-shrink | Una propiedad de los ítems del contenedor flex. Establece cuanto puede disminuir un elemento flex en relación al resto de elementos de la misma caja flex |
| flex-wrap | Es una propiedad del contenedor flex y especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ). |