En HTML y CSS tenemos diferente tipos de etiquetas cada uno con un propósito en particular una
etiqueta se puede componerse de dos maneras.
| ESTRUCTURA DE ETIQUETAS: |
| Etiquetas que solo se apertura |
Etiquetas que tienen una apertura y un sierre |
| Este tipo de etiqueta común mente se utilizan
para indicar una dirección u origen se
componen por argumento u opciones tales
como src href. |
Este tipo de etiquetas común mente se
utilizan para encerrar un contenido tales como
texto img entre otros. |
🔎Lista de etiquetas dirigidas al texto:
<p></p> Los párrafos de texto de nuestro documento.
CSS
color: ;
color: ;
background-color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
<h1></h1> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<h2></h2> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<h3></h3> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<h4></h4> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<h5></h5> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<h6></h6> Para crear títulos de párrafos, de más importante.
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
background-color: ;
font-style: ;
padding: ;
font-weight: ;
<a></a> Sirve para definir y crear un hiperenlace.
CSS
color: ;
display: ;
width: ;
text-decoration: ;
padding: ;
border: ;
border-radius: ;
font-size: ;
background-color: ;
margin: ;
<s></s> Representa contenido que ya no es relevante o preciso.
CSS
color: ;
font-size: ;
background-color: ;
padding: ;
font-family: ;
text-align: ;
margin: ;
font-weight: ;
<em></em> Es el apropiado para marcar con énfasis las partes importantes de un texto.
CSS
color: ;
font-weight: ;
font-size: ;
background-color: ;
font-family: ;
text-align: ;
font-style: ;
padding: ;
margin: ;
<strong></strong> realmente no está diseñada para dar negrita, aunque el resultado sea en realidad ese.
CSS
color: ;
font-size: ;
background-color: ;
padding: ;
font-family: ;
text-align: ;
font-weight: ;
font-style: ;
margin: ;
<cite></cite> Representa el título de una obra.
CSS
color: ;
font-size: ;
padding: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<dfn></dfn> Está pensada para identificar dónde se define un término en un texto
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<rdb></rdb> Está pensada para identificar dónde se define un
término en un texto
CSS
color: ;
font-size: ;
font-weight: ;
text-align: ;
font-style: ;
<sub></sub> Está pensada para identificar
dónde se define un término en un texto
CSS
color: ;
font-size: ;
font-weight: ;
text-align: ;
<dfn></dfn> Representa el texto o la tecla que debe ingresar o pulsar el usuario
CSS
color: ;
font-size: ;
font-family: ;
text-align: ;
font-style: ;
font-weight: ;
<i></i> Muestra el texto marcado con un estilo en cursiva o itálica
CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
<code></code> Representa un código de programación
CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
<time></time> Representa un salto de línea
CSS
color: ;
font-size: ;
font-family: ;
font-style: ;
font-weight: ;
<b></b> Muestra el texto marcado con un estilo en negrita
CSS
color: ;
font-size: ;
font-family: ;
font-weight: ;
text-align: ;
🔎Listado de etiquetas dirigidas a objetos:
<img> sierve para agregar imagenes.
CSS
width: ;
height: ;
border: ;
border-radius: ;
margin: ;
padding: ;
<header></header> contiene al encabezado de una sección o documento.
CSS
background-color: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<section></section> se usa para representar una parte de un documento o artículo. Una regla general para determinar si su uso es correcto, es numerarlos.
CSS
background-color: ;
width: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<footer></footer>
El elemento footer representa al pie de una sección o documento, donde los autores habitualmente colocan firmas.
CSS
background-color: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<nav></nav> Sirve para crear una navegacion en la cabecera
CSS
color: ;
margin-right: ;
margin-left: ;
margin: ;
padding: ;
<article></article> Sirve para colocar un artículo
CSS
background-color: ;
width: ;
height: ;
display: ;
justify-content: ;
flex-direction: ;
flex-wrap: ;
margin: ;
padding: ;
<table></table>
sería el elemento que contendría todos los elementos de la tabla
<button></button>
Es el elemento crea botones marcadores.
<body></body> Delimita el cuerpo del documento
<style></style> Hoja de estilo incluida en el documento
<meta> Metainformación sobre el documento
<link></link> Enlace a otros archivos (hoja de estilo, etc.)
<title></title> Título del documento (se muestra en la pestaña del navegador)
<head></head> Delimita el encabezado del documento
<html></html> Engloba todo el documento lange
<!DOCTYPE></!DOCTYPE> Tipo de documento (versión de html empleada)
🔎Listado de propiedades css dirigidas a texto:
color: ;
Sirve para dar un color al texto
font-size: ;
Sirve para dar un tamaño al texto
text-align: ;
Sirve para dar una alineación al texto
font-family: ;
Sirve para cambiar la fuente del texto
font-weight: ;
Sirve para dar un grozor al texto
text-decoration: ;
Sirve para quitar la decoración a un texto, por ejemplo a un link
background-color: ;
Da un fondo de color al texto
list-style: ;
Da la opción de cambiarle el estilo a las listas
font-stretch: ;
Modifica la anchura de un texto
letter-spacing: ;
Indica el espacio entre cada letra
font-variant: ;
Sirve para colocar variantes tipograficas
line-height: ;
Indica el espacio entre cada línea del texto
🔎Listado de propiedades css dirigidas a objetos:
background-image:
Se emplea para establecer
la imagen de fondo de cada elemento
Indica el tipo de caja deseada
/li>
flex-direction:
Indica la direccion de las cajas
flex-wrap:
Hace que los objetos al ocupar toda la caja bajen
justify-content:
Hace que los objetos al ocupar toda la caja bajen
padding:
Delimita los margenes interiores
box-sizing:
Cambia el modelo de caja que traen por defecto los navegadores
flex-wrap:
Hace que los objetos al ocupar toda la caja bajen
margin:a un margen
width:
Define la anchura o distancia del texto
border:
Sirve para dar un borde
display:
Indica el tipo de caja deseada
flex-direction:
Indica la direccion de las cajas
border-radius:
Hace que los bordes tengan un redondeado
height:
Cambia la altura de un objeto
