- Propriedades esperadas das TAGS
- Display: Mostra o comportamento padrão de estilo da tag
- Toda tag é filha de algum elemento, alguma diretamente do body, outras de seus pais
- Categoria:
- Fluxo => Parte do documento principal, uma tag que necessita desta propriedade tem que receber apenas tags de texto e não o texto diretamente
- Seção => Parte integrante do documento aside,footer,header
- Interativo => Já tem estilizações com que o usuário pode interagir
- Fraseado => Pode ser colocado nos interiores dos elementos
- [x] Instrução
- [x] <!DOCTYPE html>
- Especifica para o navegador qual é a linguagem
- [x] <!-- --> (Comentário)
- [x] <HTML>
- Tag container raiz, DOM interface
- Attribute: lang { en, pt-br }
- Especifica o documento HTML
- Filhos: head, body
- [x] head (Configurações da página)
- Filhos do head:
- [x] <title>
- Mostra o titulo da pagina na aba do navegador
- É necessária por padrão do head
- [x] <script>
- [x] <noscript> (Habilitado quando o browser não suporta javascript)
- Display: none.
- Categoria: Metadados, fluxo e seção
- Deve ser colcado após a tag <script>
- Parâmetros:
- [x] <meta> (Regista e configura metadados/tags do site)
- Display: none.
- Categoria: Metadados
- Parâmetros: http-equiv:(Controla ações do browser),{
'cache-control',
'content-language',
'content-type',
'pragma',
}
content: {
'public',
'private',
'no-cache',
'pt-br','en-US',
'text/html;charset=UTF-8',
},
name: {'copyright', 'description', 'keywords'}
- [x] <base> (Indica o caminho base de um caminho usado após pela tag a)
- Display: none.
- Categoria: Metadados,
- Parâmetros: 'href', 'target'
```Exemplo:
<base href="http://www.exemple.com">
(...)
<a href="index.html"></a>
Abre: http://www.exemple.com/index.html
```
- [x] <link> (Linka arquivos de estilo)
- Display: none,
- Categoria: metadados,
- Filho de head,
- Parâmetros: globalAttributes,
rel: {'stylesheet','icon'},
type(Valida o MIME type){'text/css'},
href,
sizes: {'16x16','32x32','64x64'}
- [x] <style> (Permite um bloco de css)
- Display: none,
- Categoria: metadados,
- Filhos: css,
- Parâmetros: globalAttributes,
type: {'text/css'}
- [x] <body>
- Filhos do body:
- [x] <p>
- Display: block (Não autoriza conteúdo na mesma linha)
- Filho de body
- Parametros: globalAtributes
- [x] hn <h1> <h2> <h3>
- Display: block
- Representam os cabeçalhos
- Parâmetros: globalAtributes
- [x] <a>
- Display: inline,
- Parametros: globalAtributes,
href: (Especifica o link em si),{
'..'(Volta uma pagina),
'mailto:'(Especifica email)
},
target: (Especifica onde será aberto),{
'_blank' (Nova aba),
'_parent' (Página de origem da atual),
'_top',
'_framename',
'_self'(padrão)
},
rel: (Qual tipo de arquivo é chamado pelo link),{
'external',
'bookmark'
},
media: (Para qual midia é adequado abrir),{
'all',
'print',
'screen'
},
type: (Tipo de conteúdo na codificação),{
'text/css',
'text/html'
}
- [x] <adress> (Cria valores de endereço, normalmente usado no footer)
- [x] <map> <img usemap="">
- [x] <area> ( Especifica uma área clicável, é filho de map),
- Parametros: globalAtributes,
coords: (Especifica os pontos de uma imagem),
shape: (Especifica o formato)
- [x] <div>
- [x] <ol> (Listas Ordenadas)
- Display: block.
- Categoria: fluxo
- Parâmetros: globalAtributes,
start: '1','2'..
type: 'a','A','I',
reversed: {true,false}
- [x] <ul> (Listas Não-ordenadas)
- [x] <li> (Filho de ul)
- Parâmetros:
- [x] <blockquote> (Faz um recuo na borda da página criando uma citação)
- Display: block,
- Categoria: Fluxo e seção
- Parâmetros: globalAtributes,
cite,
- [x] <cite> (Representa um titulo de uma obra/autores)
- Display: block,
- Categoria: Fluxo e seção,
- [x] <div> (Representa uma posição/divisão da página, layout e organização)
- Display: block,
- Categoria: Fluxo,
- Parâmetros: globalAtributes,
Nova semântica
- [x] <header> (Cabeçalho de seções)
- Display: block
- Categoria: Fluxo e cabeçalho,
- Parâmetros: globalAtributes,
- [x] <article> (Sessões independentes dentro do documento principal)
- Display: block
- Categoria: Fluxo e seção (Área da pagina independente),
- Parâmetros: globalAtributes,
- [x] <aside> (Relacionado ao conteúdo separado da página)
- Display: block
- Categoria: Fluxo e seção (Área da pagina independente),
- Parâmetros: globalAtributes,
- [x] <footer>
- Display: block,
- Categoria: Fluxo e seção (Área da pagina independente)
- Parâmetros: globalAtributes,
- [x] <audio> (Tag de reprodução de músicas)
- Parametros: globalAtributes,
autoplay: (Reproduz automaticamente),
preload: (Setar o buffer da memoria),
controls: (Mostra os controles do player),
loop: (Repetir o audio),
mediagroup,
muted: (Silenciar),
src,
- [x] <b> (Negrito)
- Display: inline,
- Categoria: Fluxo e fraseado (body)
- [x] <br> (Quebra de linha - Usado em poemas e endereços caso contrário é abusivo seu uso)
- Display: inline,
- Categoria: Fluxo e fraseado (body)
- [x] <button> (Representa um botão clicável)
- Display: inline,
- Categoria: Fluxo, fraseado (body) e interativo (Dentro de elementos EX:<p>)
- Parâmetros: globalAttributes,
autofocus: (Clica automaticamente quando a pagina é carregada),
disabled: (Desabilita o botão),
form: (Associar a um formulário),
formaction: (URL no qual irá submeter),
formenctype: (Tipo de submissão),
formmethod: (Especifica o método $POST $GET),
formvalidate,
formtarget,
name: (Nome do botão),
type: (Os tipos válidos: submit, reset e button),
value: (Valor interno do componente),
- [x] <canvas>
- Display: inline,
- Categoria: Fluxo, fraseado (body) e interativo (Dentro de elementos EX:<p>)
- Parâmetros: globalAttributes,
width,
height,
- [x] <code> (Exibe código)
- Display: inline,
- Categoria: Fluxo e fraseado
- [x] <pre> (Exibe texto pré-formatado mantendo seu formato)
- Display: inline,
- Categoria: Fluxo
```Exemplo:
<pre><code>import Dev from './src/dev';<code><pre> Correto
<code><pre>import Dev from './src/dev';<pre><code> Errado
```
- [x] <del> (Formata o texto como riscado como semântica de deletado)
- Display: inline-block,
- Categoria: Fluxo
- [x] <ins> (Formata o texto sublinhado com semântica de inserido)
- Display: inline-block,
- Categoria: Fluxo e fraseado
- [x] <details> (Tag interativa que mostra um conteúdo abaixo do mesmo)
- Display: block,
- Categoria: Fluxo e interativo,
- Parâmetros: globalAttributes,
open,
- [x] <summary> (filho de details - título da tag)
- [x] dialog
- Parametros: open
- [ ] style
- [ ] menu
- [x] Listas de definição (dl, dt, dd)
- [x] <dl> (Definition List)
- Display: block,
- Categoria: Fluxo,
- Filhos: <dt> e <dd>
- Parâmetros: globalAttributes,
- [x] <dt> (Definition Term)
- Display: block,
- Categoria: [],
- Parâmetros: globalAttributes,
- [x] <dd> (Definition Description)
- Display: block,
- Categoria: [],
- Parâmetros: globalAttributes,
```Exemplo
<dl>
<dt>Html</dt>
<dd>Lorem Ipsum html language for losers</dd>
<dt>CSS</dt>
<dd>Lorem Ipsum html language for losers</dd>
</dl>
```
- [x] <em> (Tag para ênfase de texto)
- Display: inline,
- Categoria: Fluxo e fraseado,
- Parâmetros: globalAttributes,
```Exemplos com hierarquia de Ênfase:
<p>Cats and <em>dogs are <em>cutes</em> </em></p>
```
- [x] <embed> (Define uma área de um objeto externo -> Video/musica)
- Categoria: Fluxo, fraseado e incorporado,
- Parâmetros: globalAttributes,
src,
- [x] <figure> (Serve para representar o conteúdo de um fluxo com legenda)
- Display: block,
- Categoria: Fluxo e seção (Container),
- Parâmetros: globalAttributes,
- [x] figcaption
- [x] <form>
- Display: block,
- Categoria: Fluxo,
- Parâmetros: globalAttributes,
action: (URL com arquivo que irá receber os dados),
autocomple: (Autocompletar dados){
true,
false
},
method: (Método de envio){
'$GET',
'$POST'
},
name: (Nome do formulário),
novalidade: (Desabilita a validação pelo browser),
target: (Como a página será aberta),
- [x] <label> (Titulo do formulario)
- Display: inline,
- Categoria: Fluxo e fraseado,
- Parâmetros: globalAttributes,
- [x] <select> (Seleção de texto)
- [x] <option> (Especifica as opções)
- [x] <fieldset> (Determina um limite ao formulário)
- Display: block,
- Categoria: Fluxo e seção (Raiz),
- Parâmetros: globalAttributes,
disabled: {true, false},
- [x] <legend> (Insere legenda no fildset)
- [x] <textarea> (Representa uma area de texto multilinha)
- Display: inline,
- Categoria: Fluxo, fraseado e interativo,
- Filhos: Texto,
- Parâmetros: globalAttributes,
'cols'(Tamanho das colunas),
'rows'(Tamanho das linhas),
'maxleng'(Tamanho máximo de caracteres),
- [x] <input>
- Display: inline,
- Categoria: Fluxo e fraseado,
- Parâmetros: globalAttributes,
value: (Mostra o valor inicial do input),
type: (Demonstra o tipo de input),{
'submit' (Faz o envio do form),
'required'(Torna o input necessário ao envio),
'reset' (Limpa o form),
'button' (Torna o input um button),
'password' (Modo de senha),
'checkbox' (Caixa de seleção),
'number' (Modo de número),
'maxlength' (Limita os caracteres),
'size' (Redimensiona o tamanho do input),
'radio' (Caixa de seleção única),
'time' (Caixa de seleção de horário),
'date' (Caixa de seleção de data),
'datetime-local',
'min' (Limita o minimo da hora/data),
'max' (Limita o máximo da hora/data),
'month'(Retorna o mês selecionado),
'week' (Retorna o número da semana selecionado),
'color'(Escolhe uma cor e retorna um #hex),
'email',
'tel',
'pattern'(Especifica um padrão do telefone)
pattern='\([0-9]{2}\)[9]{1}[0-9]{4}-[0-9]{4}',
'search'(Campo de texto para pesquisa com 'x' para apagar),
'file'(Seleciona e envia arquivos),
'multiple'(Aciona multiplos arquivos),
'accept'(Especifica o arquivo enviado),
'url'(Recebe apenas URL),
'list'(Barras de listagem),
'datalist'(Barras de listagem),
```Ex:
<input list="cores" name="cor">
<datalist id="cores">
<option value="red">Vermelho</option>
<option value="green">Verde</option>
</datalist>
```
},
- [x] hr
- Display: block,
- Categoria: Fluxo,
- Parâmetros: none,
- [x] <strong>
- [x] <kbd> (Destaca texto de atalhos de teclado)
- [x] var
- [x] samp
- [x] dfn
- [x] b
- [x] <i> (Deixa o texto em italico porém é para o destaque do texto)
- Display: inline,
- Categoria: Fluxo e fraseado,
- [x] <iframe> (Inserir uma janela dentro de outra janela)
- Display: block,
- Categoria: Fluxo,
- Parâmetros: globalAttributes,
sandbox:(Define o que será mostrado),{
'allow-forms',
'allow-popups',
'allow-scripts'
}
- [x] <img>
- Display: inline,
- Categoria: Fluxo, fraseado, incorporado e interativo,
- Filhos: vazio,
- Parâmetros: globalAttributes,
src,
alt,
width,
height,
- [x] <nav> (Seção de navegação)
- Display: block,
- Categoria: Fluxo e seção,
- Filhos: fluxo,
- Parâmetros: globalAttributes,
- [x] <section> (Container de seção de característica genérica)
- Display: block,
- Categoria: Fluxo e seção,
- Filhos: fluxo,
- Parâmetros: globalAttributes,
- [x] <span> (Cria uma caixa de elemento sem alterar o fluxo do texto )
- Display: inline,
- Categoria: Fluxo,
- Parâmetros: globalAttributes,
- [x] <sub> (Subscrito => Acima )
- [x] <sup> (Sobrescrito => Abaixo)
- [x] <big>
- [x] <small>
- [x] <address>
- [x] <table>
- Display: block,
- Categoria: Fluxo,
- Filhos: caption, thead, tbody, tfooter, tr
- Parâmetros: globalAttributes,
- [x] <tr> (Table row, linha da tabela)
- [x] <td> (Table division)
- [x] <thead>
- [x] <tbody>
- [x] <tfooter>
- [x] <time> (Especifica e formata a data e horário do fluxo de texto)
- Parâmetros: globalAttributes,
datetime: (Define o valor da data especifica)
<p><time datetime='12-25'>Natal</p>
- acesskey: Especifica um atalho para acessar o elemento
- class: Especifica a classe do elemento
- dir: Especifica um diretório para o conteúdo do elemento
- hidden: Especifica que o elemento não está ou não é relevante
- id: Especifica um nome para o id do elemento
- lang: Especifica a linguagem do contúdo do elemento
- style: Especifica um estilo para o elemento
- translate: Especifica se o conteúdo pode ser traduzido
- title: Informação do elemento
All -> value: {script}
- onafterprint: Roda um script após o documento ser impresso
- onbeforeprint: Roda um script antes do documento ser impresso
- onbeforeunload: Roda um script ao sair da página
- onerror: Roda um script quando um erro ocorre
- onhashchange: Roda um script quando há alguma mudança feita por URL da tag <a>
- onload: Roda um script após a página ser carregada
- onoffline: Roda um script quando verificado que a página está offline
- ononline: Roda um script quando é verificado que a página está online
- onpageshow: Roda um script quando o usuário navega pela página
- onresize: Roda um script ao mudar o tamanho de zoom do navegador
DOM Interface (TAG a)
- Define como a tag se comporta recebendo os parâmetros
interface HTMLAnchorElement : HTMLElement {
attribute DOMString target;
attribute DOMString download;
attribute DOMString rel;
[SameObject, PutForwards=value] readonly attribute DOMTokenLis relList;
attribute DOMString hreflang.
aattribute DOMString type;
attribute DOMString text;
};
HTMLAnchorElement implements HTMLHyperlinkElementUtils;