Resumo dos principais comandos HTML
🔹 Estrutura básica
● <!DOCTYPE html> → define o tipo de documento.
● <html> → envolve todo o conteúdo da página.
● <head> → guarda informações “ocultas” (título, links de estilo, meta).
● <title> → define o título que aparece na aba do navegador.
● <body> → parte visível da página (onde vai texto, imagens, links, etc).
🔹 Texto e títulos
● <h1> até <h6> → títulos (h1 é o maior, h6 o menor).
● <p> → parágrafo.
● <br> → quebra de linha.
● <hr> → linha horizontal.
● <strong> ou <b> → negrito.
● <em> ou <i> → itálico.
● <u> → sublinhado.
🔹 Listas
● <ul> → lista não ordenada (bolinhas).
● <ol> → lista ordenada (números).
● <li> → item da lista.
🔹 Links e imagens
● <a href="url"> → cria link.
● <img src="caminho" alt="texto"> → insere uma imagem.
🔹 Tabelas
● <table> → tabela.
● <tr> → linha da tabela.
● <td> → célula.
● <th> → cabeçalho da tabela.
🔹 Formulários
● <form> → cria formulário.
● <input> → campo de entrada (texto, senha, checkbox, etc).
● <textarea> → área de texto maior.
● <button> → botão.
● <label> → rótulo para identificar campos.
🔹 Estruturação moderna
● <div> → bloco de conteúdo.
● <span> → marcação em linha.
● <header> → cabeçalho da página.
● <nav> → menu de navegação.
● <section> → seção de conteúdo.
● <article> → artigo/post.
● <footer> → rodapé.
🔹 Estrutura e semântica
● <main> → conteúdo principal da página.
● <aside> → conteúdo lateral, tipo anúncios ou widgets.
● <figure> → figura com legenda.
● <figcaption> → legenda de uma figura.
● <mark> → destaca texto (tipo marca-texto).
● <small> → texto menor.
● <code> → mostra código.
● <pre> → texto pré-formatado (mantém quebras e espaços).
🔹 Multimídia
● <audio src="arquivo" controls> → toca áudio com controles.
● <video src="arquivo" controls> → toca vídeo com controles.
● <source src="arquivo" type="tipo"> → fonte de mídia dentro de <audio> ou <video>.
● <iframe src="url"></iframe> → incorpora outra página/YouTube.
🔹 Formulários avançados
● <select> → lista suspensa.
● <option> → item dentro de <select>.
● <fieldset> → agrupa campos de formulário.
● <legend> → título para <fieldset>.
● <datalist> → lista de sugestões para <input>.
● <input type="radio"> → botão de opção.
● <input type="checkbox"> → caixa de seleção.
● <input type="file"> → upload de arquivo.
🔹 Estrutura de links e navegação
● <link rel="stylesheet" href="[Link]"> → importa CSS.
● <meta> → informações sobre a página (charset, viewport, descrição).
● <base href="url"> → define URL base para links.
🔹 Outros
● <span> → marcação inline para estilizar trechos.
● <div> → bloco genérico para agrupar conteúdo.
● <script src="[Link]"></script> → importa JavaScript.
● <noscript> → conteúdo exibido se JS estiver desativado.
Perfeito, Benzinho😎vou fazer uma mega tabela CSS organizada pra estudo rápido,
mostrando Propriedade → Descrição → Exemplo.
Tabela Completa de CSS para Estudo
Propriedade Descrição Exemplo
color Cor do texto color: red;
background-color Cor de fundo background-color: #f0f0f0;
background-image Imagem de fundo background-image:
url('[Link]');
background-repea Repetição da imagem background-repeat: no-repeat;
t
background-size Tamanho da imagem background-size: cover;
font-family Tipo de fonte font-family: Arial,
sans-serif;
font-size Tamanho da fonte font-size: 16px;
font-weight Peso da fonte font-weight: bold;
font-style Estilo da fonte font-style: italic;
text-align Alinhamento do texto text-align: center;
text-decoration Decoração do texto text-decoration: underline;
text-transform Transformação do text-transform: uppercase;
texto
line-height Altura da linha line-height: 1.5;
margin Espaço externo margin: 20px;
padding Espaço interno padding: 10px;
border Borda completa border: 2px solid black;
border-radius Bordas arredondadas border-radius: 8px;
display Tipo de exibição display: flex;
position Posição do elemento position: relative;
top / bottom / Posicionamento top: 10px; left: 20px;
left / right
float Flutuar elemento float: left;
z-index Camada do elemento z-index: 10;
flex-direction Direção do flexbox flex-direction: row;
justify-content Alinhamento justify-content: center;
horizontal
align-items Alinhamento vertical align-items: center;
gap Espaçamento entre gap: 10px;
elementos
grid-template-co Colunas no grid grid-template-columns:
lumns repeat(3, 1fr);
grid-gap Espaço entre células grid-gap: 15px;
do grid
opacity Transparência opacity: 0.5;
box-shadow Sombra em blocos box-shadow: 5px 5px 10px #888;
text-shadow Sombra no texto text-shadow: 2px 2px 2px #000;
transition Animação suave transition: all 0.3s ease;
transform Transformação de transform: scale(1.2);
elemento
:hover Ao passar o mouse button:hover { color: red; }
:focus Ao focar no elemento input:focus { border-color:
blue; }
:active Ao clicar a:active { color: green; }
:first-child Primeiro filho li:first-child { font-weight:
bold; }
:last-child Último filho li:last-child { font-style:
italic; }
::before Adiciona conteúdo p::before { content: "→ "; }
antes
::after Adiciona conteúdo p::after { content: " ✓"; }
depois
@media Responsividade @media(max-width:768px) { body
{ font-size: 14px; } }