Guide HTML5

1. Tags de estrutura básica
<html> - Raiz do documento
<head> - Contém metadados
<body> - Corpo do documento
<div> - Contêiner genérico (usado com CSS)
<span> - Contêiner inline genérico

2. Tags de cabeçalho e metadados
<title> - Título da página (aba do navegador)
<meta> - Metadados (charset, viewport, descrição)
<link> - Link para recursos externos (CSS, ícones)
<style> - CSS interno
<script> - JavaScript (interno ou externo)

3. Tags de texto e formatação
<h1> a <h6> - Títulos (h1 é o mais importante)
<p> - Parágrafo
<br> - Quebra de linha
<hr> - Linha horizontal
<strong> ou <b> - Texto em negrito
<em> ou <i> - Texto em itálico
<u> - Texto sublinhado
<mark> - Texto marcado
<small> - Texto pequeno
<sub> - Subscrito
<sup> - Sobrescrito

4. Tags de lista
<ul> - Lista não ordenada
<ol> - Lista ordenada
<li> - Item de lista
<dl> - Lista de definição
<dt> - Termo de definição
<dd> - Descrição da definição

5. Tags de link e navegação
<a href="url"> - Link
<nav> - Seção de navegação

6. Tags de imagem e mídia
<img src="imagem.jpg" alt="descrição"> - Imagem
<audio> - Áudio
<video> - Vídeo
<source> - Fonte para áudio/vídeo
<iframe> - Incorpora outra página

7. Tags de tabela
<table> - Tabela
<tr> - Linha da tabela
<td> - Célula da tabela
<th> - Célula de cabeçalho
<thead> - Cabeçalho da tabela
<tbody> - Corpo da tabela
<tfoot> - Rodapé da tabela

8. Tags de formulário (extremamente importantes)
<form> - Formulário
<input> - Campo de entrada (text, email, password, etc.)
<textarea> - Área de texto multilinha
<button> - Botão
<select> - Lista suspensa
<option> - Opção da lista suspensa
<label> - Rótulo para campo
<fieldset> - Agrupa elementos do formulário
<legend> - Legenda do fieldset

9. Tags semânticas do HTML5 (modernas e importantes)
<header> - Cabeçalho da página ou seção
<footer> - Rodapé da página ou seção
<main> - Conteúdo principal
<article> - Conteúdo independente
<section> - Seção genérica
<aside> - Conteúdo relacionado/barra lateral
<figure> - Conteúdo ilustrativo
<figcaption> - Legenda da figura
<time> - Representa data/hora

10. Outras tags úteis
<code> - Código de computador
<pre> - Texto pré-formatado
<blockquote> - Citação longa
<q> - Citação curta
<abbr> - Abreviação
<address> - Informações de contato
<progress> - Barra de progresso
<meter> - Medida escalar

Tags menos usadas, mas existentes:
<datalist> - Lista de opções para input
<details> e <summary> - Conteúdo expansível
<dialog> - Caixa de diálogo
<embed> - Conteúdo externo
<map> e <area> - Mapa de imagem
<noscript> - Conteúdo para quando o JS está desabilitado
<object> - Objeto incorporado
<output> - Resultado de cálculo
<picture> - Versões alternativas de imagem
<template> - Modelo de conteúdo reutilizável
<wbr> - Oportunidade de quebra de palavra

Boas práticas:
Semântica é crucial: Use tags semânticas sempre que possível
Hierarquia de títulos: Use apenas um <h1> por página
Acessibilidade: Sempre use alt em imagens
Validação: Use validadores HTML
Compatibilidade: Teste em diferentes navegadores

Um <iframe> (inline frame) é um elemento HTML que permite incorporar outro documento HTML dentro de uma página web atual, como vídeos do YouTube, mapas ou até outras páginas. Ele funciona como uma janela para conteúdo externo, que pode ser posicionado em qualquer lugar da página sem interferir na estrutura principal do site.

CSS (Cascading Style Sheets) é uma linguagem de estilo usada para descrever a apresentação de documentos HTML/XML. Enquanto o HTML define a estrutura e o conteúdo, o CSS controla:

Layout e posicionamento
Cores e fundos
Tipografia
Animações e transições
Responsividade para diferentes dispositivos

seletor {
propriedade: valor;
propriedade2: valor2;
}

/* Posicionamento */
position: relative;
top: 0;
left: 0;

/* Box Model */
display: block;
width: 100%;
margin: 0;
padding: 1rem;

/* Tipografia */
font-family: system-ui, sans-serif;
font-size: 16px;
line-height: 1.5;

/* Cores e Background */
color: #333;
background-color: #fff;

/* Bordas */
border: 1px solid #ddd;
border-radius: 4px;

/* Efeitos */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.3s ease;

/* Propriedades são case-insensitive */
COLOR: RED; /* Funciona */
Color: Red; /* Funciona */
color: red; /* Padrão recomendado */

/* Valores podem ser case-sensitive ou não */
font-family: Arial; /* Case-insensitive para nomes de fontes */
url("Image.jpg") /* Case-sensitive em alguns servidores */
#abc /* Case-insensitive para hex */
rgb(255, 0, 0) /* Case-insensitive */

/* 1. Valores de Comprimento e Medida */
element {
/* Absolutas */
width: 300px; /* Pixels (96px = 1 polegada) */
width: 2.54cm; /* Centímetros */
width: 1in; /* Polegadas */
width: 10mm; /* Milímetros */
width: 72pt; /* Pontos (1pt = 1/72 in) */
width: 6pc; /* Picas (1pc = 12pt) */

/* Relativas ao elemento */
width: 50%; /* Porcentagem do elemento pai */
width: 2em; /* Múltiplo do font-size do elemento */
width: 2rem; /* Múltiplo do font-size do root */

/* Relativas ao viewport */
width: 50vw; /* 50% da largura da viewport */
height: 100vh; /* 100% da altura da viewport */
width: 50vmin; /* 50% da menor dimensão da viewport */
width: 50vmax; /* 50% da maior dimensão da viewport */

/* Relativas ao caractere */
width: 10ch; /* Largura do caractere "0" */
width: 10ex; /* Altura do caractere "x" */

/* Unidades flexíveis do Grid */
width: 1fr; /* Fração do espaço disponível */

/* Relativas à linha */
width: 5lh; /* Múltiplo da altura da linha */
width: 5rlh; /* Múltiplo da altura da linha do root */
}

/* 2. Valores de Ângulo */
.element {
transform: rotate(45deg); /* Graus: 360deg = círculo completo */
transform: rotate(0.5turn); /* Voltas: 1turn = 360deg */
transform: rotate(1.5708rad); /* Radianos: 2π rad = 360deg */
transform: rotate(100grad); /* Gradianos: 400grad = 360deg */
}

/* 3. Valores de Tempo */
.element {
transition-duration: 2s; /* Segundos */
transition-duration: 2000ms; /* Milissegundos */
animation-duration: 0.5s; /* Ponto decimal permitido */
}

/* 4. Valores de Frequência (CSS3 - raramente usado) */
.element {
/* pitch: 440Hz; / / Hertz - proposto para speech */
}

/* 5. Valores de Resolução */
@media (min-resolution: 192dpi) { } /* Dots per inch */
@media (min-resolution: 2dppx) { } /* Dots per pixel */

.element {
/* Palavras-chave (147 cores nomeadas) */
color: aliceblue;
color: rebeccapurple; /* #663399 - homenagem a Eric Meyer */

/* Hexadecimal */
color: #f00; /* #ff0000 */
color: #ff0000; /* Vermelho completo */
color: #ff000080; /* Com alpha (50% opacidade) */

/* RGB - Red, Green, Blue */
color: rgb(255, 0, 0); /* 0-255 por canal */
color: rgb(100%, 0%, 0%); /* Porcentagens */
color: rgba(255, 0, 0, 0.5); /* Com alpha */
color: rgb(255 0 0 / 0.5); /* Nova sintaxe (CSS Color 4) */

/* HSL - Hue, Saturation, Lightness */
color: hsl(0, 100%, 50%); /* Hue: 0-360, Sat/Light: 0-100% */
color: hsla(0, 100%, 50%, 0.5);
color: hsl(0 100% 50% / 0.5); /* Nova sintaxe */

/* HWB - Hue, Whiteness, Blackness */
color: hwb(0 0% 0%); /* CSS Color 4 */
color: hwb(0 0% 0% / 0.5);

/* LAB - Perceptualmente uniforme */
color: lab(56% 80 -52); /* L: lightness, a: green-red, b: blue-yellow */

/* LCH - Lightness, Chroma, Hue */
color: lch(56% 96 328); /* Mais intuitivo que LAB */

/* OKLAB e OKLCH (Melhor uniformidade) */
color: oklab(62% 0.22 0.13);
color: oklch(62% 0.25 30);

/* CMYK - Para impressão */
color: device-cmyk(0% 100% 100% 0%);

/* Sistemas de cores especiais */
color: color(display-p3 1 0 0); /* Gamut mais amplo que sRGB */
color: color(srgb 1 0 0);

/* Palavras-chave especiais */
color: currentColor; /* Herda do elemento pai */
color: transparent; /* rgba(0,0,0,0) */
}

.element {
/* Funções matemáticas */
width: calc(100% - 40px); /* Cálculos dinâmicos */
width: min(100%, 500px); /* Menor valor */
width: max(50%, 300px); /* Maior valor */
width: clamp(300px, 50%, 800px); /* Valor entre limites */

/* Funções de cor */
background: linear-gradient(45deg, red, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green);
filter: hue-rotate(90deg); /* Rotação de matiz */

/* Funções de string e atributo */
content: attr(data-label); /* Valor do atributo */
content: counter(item); /* Contadores CSS */
content: string(title); /* Conteúdo de string */

/* Funções de forma */
clip-path: circle(50% at 50% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
shape-outside: ellipse(100px 150px at 50% 50%);

/* Funções de transformação */
transform: translate(50px, 100px);
transform: scale(1.5);
transform: rotate(45deg);
transform: skew(30deg);
transform: matrix(1, 0, 0, 1, 0, 0); /* Matriz 2D */
transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); /* 3D */

/* Funções de timing (animações) */
transition-timing-function: ease;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* Bézier personalizado */
transition-timing-function: steps(4, jump-start);

/* Funções de imagem */
background-image: url("image.jpg");
background-image: image-set("img-1x.jpg" 1x, "img-2x.jpg" 2x);
background-image: cross-fade(url(a.jpg) 50%, url(b.jpg) 50%);

/* Funções de layout */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: fit-content(200px);
grid-template-columns: minmax(100px, 1fr);

/* Funções de filtro */
filter: blur(5px);
filter: brightness(150%);
filter: contrast(200%);
filter: grayscale(100%);
filter: sepia(100%);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(200%);
filter: drop-shadow(2px 2px 5px black);
}

.element {
/* Múltiplos valores (listas separadas por espaço ou vírgula) */
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-shadow: 2px 2px 5px black, inset 0 0 10px white; /* Múltiplas sombras */
transition: color 0.3s, background-color 0.3s, transform 0.3s;

/* Valores com fallback */
background: var(--cor-personalizada, #f00); /* Usa fallback se variável não existir */

/* Valores globais (keywords especiais) */
all: initial; /* Reseta todas propriedades para valores iniciais */
all: inherit; /* Herda todas do pai */
all: unset; /* Se herdável: inherit, senão: initial */
all: revert; /* Reverte para valor do user agent */

/* Valores especiais para animação */
animation: pulse 2s infinite;
animation-play-state: paused; /* paused | running */
}