Referências HTML, CSS e JS

Disponível consulta de tags HTML, seletores e propriedades CSS,

instruções, declarações e operadores JS e alguns exercícios resolvidos JS.

Elementos básicos HTML


  Elementos básicos são o que constituem a base de todo documento HTML. Se vê esses elementos no código fonte de todas as páginas da web, logo em seguida da declaração de doctype, que está na primeira linha da página. O doctype específica qual a versão do HTML que a página está usando. Os elementos que formam o conteúdo da página são postos entre a tag de abertura <html> e a tag de fechamento </html>. O elemento <html> é também conhecido como o elemento raiz.

# Elemento Descrição
1 <html> Representa a raiz de um documento HTML. Todos os outros elementos devem ser descendentes desse elemento.

Metadados do documento


  Os metadados são onde se guardam várias informações sobre a página, incluindo informações sobre estilos, scripts e dados para auxiliar software (ferramentas de pesquisa, navegadores, etc) usar e renderizar a página. Os metadados de estilos e scripts podem ser definidos dentro da própria página ou escritos em um arquivo externo que é referênciado pela mesma.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <base> Especifica o endereço (URL) utilizada por todos os endereços relativos contidos dentro de um documento. Há um número máximo de 1 (um) elemento Base <base> do documento.
2 <head> Providencia informações gerais (metadados) sobre o documento, incluindo seu título e links para scripts e folhas de estilos.
3 <link> Especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo.
4 <meta> Define qualquer informação de metadados que não podem ser definidos por outros elementos HTML. ( <base>, <link>, <script>, <style> ou <title>).
5 <style> Contém informações de estilo para um documento ou uma parte do documento. As informações de estilo específico estão contidas dentro deste elemento, geralmente no CSS.
6 <title> Define o título do documento, mostrado na barra de título de um navegador ou na aba da página. Pode conter somente texto e quaisquer marcações contidas no texto não são interpretadas.

Separação de conteúdo


  Elementos de separação de conteúdo permitem organizar o conteúdo do documento em partes lógicas. Use elementos de separação para criar um esboço do conteúdo da página, incluindo navegação por cabeçalho e rodapé, e elementos de cabeçalho para identificar seções de conteúdo.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <address> Fornece informações de contato para seu ancestral <article> ou <body> mais próximo; no segundo caso, ele se aplica ao documento inteiro.
2 <article> Representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuido de forma independente ou reutilizável, por exemplo, em sindicação. Este poderia ser o post de um fórum, um artigo de revista ou jornal, um post de um blog, um comentário enviado por um usuário, um gadget ou widget interativos, ou qualquer outra forma de conteúdo independente.
3 <aside> Representa uma seção de uma página que consiste de conteúdo que é tangencialmente relacionado ao conteúdo do seu entorno, que poderia ser considerado separado do conteúdo. Essas seções são, muitas vezes, representadas como barras laterais. Elas muitas vezes contem explicações laterais, como a definição de um glossário; conteúdo vagamente relacionado, como avisos; a biografia do autor; ou, em aplicações web, informações de perfil ou links de blogs relacionados.
4 <footer> Representa um rodapé para o seu conteúdo de seção mais próximo ou seu parente mais próximo ( <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Normalmente um rodapé contém informações sobre o autor da seção de dados, direitos autorais ou links para documentos relacionados.
5 <header> Representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
6 <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Elementos de cabeçalho são implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da seção em que ele está. As informações de cabeçalho podem ser usadas por agentes de usuário, por exemplo, para construir uma tabela de conteúdos para um documento automaticamente.
7 <hgroup> Destina-se a agrupar cabeçalhos de diferentes níveis para uma seção do documento. Ele agrupa (é um container para) um conjunto de elementos <h1> ~ <h6>.
8 <main> Define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).
9 <nav> Representa uma seção de uma página que aponta para outras páginas ou para outras áreas da página, ou seja, uma seção com links de navegação.
10 <section> Representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Conteúdo textual


  Usam-se elementos HTML de conteúdo textual para se organizar blocos ou seções de conteúdo postos entre as tags de abertura <body> e fechamento </body>. Importantes para accessibilidade e SEO, esses elementos identificam o propósito ou estrutura do conteúdo.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <blockquote> Indica que o texto incluído é uma longa citação. Normalmente, este é processado visualmente pelo recuo. A URL para a fonte da citação pode ser dada usando o atributo cite, enquanto uma representação de texto da fonte pode ser dada usando o <cite> elemento.
2 <dd> Este elemento inclui os atributos globais como seus.
3 <dir> É usado como um contêiner para um diretório de arquivos e/ou pastas, potencialmente com estilos e ícones aplicados pelo user agent.
4 <div> é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>).
5 <dt> Identifica um termo na lista de definição. Este elemento pode ocorrer somente em um elemento filho de <dl>. Geralmente seguido por um elemento <dd>; ou multiplos <dt>na mesma linha indicam vários termos sendo definidos pelo próximo element <dd>.
6 <dl> Engloba uma lista de pares de termos e descrições. Um uso comum para este elemento é para implementar um glossário ou exibir metadados(uma lista de pares chave e valor).
7 <hr> Representa uma quebra temática entre elementos de nível de parágrafo (por exemplo , uma mudança da cena de uma história, ou uma mudança de tema com uma seção). Nas versões anteriores do HTML, representava uma linha horizontal. Pode continuar sendo exibida como uma linha horizontal nos navegadores, mas agora está definida em termos semânticos, em vez de termos de apresentação.
8 <li> É usado para representar um item que faz parte de uma lista. Este item deve estar contido em um elemento pai: uma lista ordenada (<ol>), uma lista desordenada ( <ul>), ou um menu (<menu>) e representa uma única entidade dessa lista. Em menus e listas desordenadas a relação de itens é exibida, normalmente, usando pontos de marcação (as bolinhas). Em listas ordenadas eles são, comumente, mostrados com algum contador ascendente - como um número, ou letra - à sua esquerda.
9 <main> Define o conteúdo principal dentro do <body> em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento <main> não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).
10 <ol> Representa uma lista de itens ordenados. De forma característica esses itens ordenados em uma lista são mostrados com uma contagem que os precede, que pode ser de qualquer tipo, como numerais, letras, algarismos romanos, ou simples símbolos. Esse modelo numerado não é definido na descrição html da página, mas na folha de estilos CSS associada, pela propriedade list-style-type.
11 <p> Representa um parágrafo do texto. Parágrafos são, geralmente, representados em mídia visual , como bloco de texto que são separados dos blocos adjacente por espaços brancos verticais e/ou recuo de primeira-linha. Parágrafos são elementos em bloco.
12 <pre> É a tag utilizada para representar texto pré-formatado. Um texto dentro desse elemento é tipicamente exibido em uma fonte não proporcional da mesma maneira em que o texto original foi disposto no arquivo. Espaços em branco são mantidos no texto da mesma forma em que este foi digitado.
13 <ul> Representa uma lista de itens sem ordem rígida, isto é, uma coleção de itens que não trazem uma ordenação numérica e as suas posições, nessa lista, são irrelevantes. Caracteristicamente, os itens em uma lista desordenada são exibidos com um marcador que pode ter várias formas, como um ponto, um círculo, ou um quadrado. O tipo de marcador não é definido na descrição HTML da página, mas na CSS associada, utilizando a propriedade list-style-type.

Semânticas textuais inline


  Usa-se a semântica textual inline para definir o significado, estrutura, ou estilo de uma palavra, linha, ou de qualquer outro tipo de texto.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <a> Define uma hiperligação (hyperlink), o destino de uma hiperligação, ou ambos.
2 <abbr> Representa uma abreviação e opcionalmente fornece uma descrição completa para ela. Se presente, o atributo title deve conter a descrição completa e apenas ela.
3 <b> Representa um intervalo de texto estilísticamente diferente do texto normal, sem transmitir qualquer importância ou relevância. Ele é geralmente usado para destacar palavras-chaves em um resumo, nomes de produtos em um comentário ou outros vãos de texto cuja a apresentação típica seria negrito. Outro exemplo de seu uso é como marcação da frase principal de cada paragrafo de um artigo.
4 <bdi> Este elemento é útil ao incorporar o texto com uma direção desconhecida, de um banco de dados por exemplo, no interior do texto com uma direção fixa.
5 <bdo> É usado para substituir a direcionalidade atual do texto. Isso faz com que a direcionalidade dos personagens seja ignorada em favor da direcionalidade especificada.
6 <br> Produz uma quebra de linha em um texto. É útil para escrever poemas ou um endereço, onde a divisão de linha é significante.
7 <cite> Representa uma referência a um trabalho artístico. Deve incluir o título do trabalho ou uma URL de referência, que pode ser em uma forma abreviada de acordo com as convenções usadas para a adição dos metadados de citação.
8 <code> É uma tag de frase. Ela define o estilo do texto como sendo um pedaço de código de computador.
9 <data> Vincula um determinado conteúdo a uma tradução legível por máquina. Se o conteúdo estiver relacionado à hora ou à data, a tag <time> deverá ser usado.
10 <dfn> Representa uma instância de definição de um termo.
11 <em> Marca o texto que tem ênfase. O elemento <em> pode ser aninhado, com cada nível de aninhamento indicando um grau maior de ênfase.
12 <i> Representa uma parte do texto que é destacada do restante por algum motivo, por exemplo, termos técnicos, expressões de outros idiomas ou pensamentos de personagens fictícios. Normalmente, é apresentado com o uso do tipo "itálico".
13 <kbd> É uma tag de frase. Ela define o estilo do texto como sendo uma entrada do teclado.
14 <mark> Representa um trecho de destaque em um texto, por exemplo, uma sequência de texto marcado como referência, devido à sua relevância em um contexto particular. Por Exemplo, pode ser utilizado em uma página que mostra os resultados de uma busca onde todas as instâncias da palavra pesquisadas receberam destaque.
15 <q> Define uma citação curta. Os navegadores normalmente inserem aspas ao redor da citação.
16 <rb> É usado para delimitar o componente de texto base de uma anotação <ruby>, ou seja, o texto que está sendo anotado. Um elemento <rb> deve envolver cada segmento atômico separado do texto base.
17 <rp> Pode ser usada para fornecer parênteses em torno de um texto ruby, a ser mostrado por navegadores que não suportam anotações ruby.
18 <rt> Abraça a pronúncia do caractere apresentado em anotações ruby, que são para mostrar a pronúncia de caracteres do leste asiático. É usado dentro do elemento <ruby>.
19 <rtc> Abrange anotações semânticas de caracteres apresentadas em ruby ​​de elementos <rb> usados ​​dentro do elemento <ruby>.
20 <ruby> Representa uma anotação ruby. Anotações ruby são para mostrar a pronúncia de caracteres do Leste Asiático
21 <s> Especifica o texto que não é mais correto, preciso ou relevante, ricando-o.
22 <samp> É uma tag de frase. Ela define o estilo da saída como de código de computador.
23 <small> Define o texto com um estilo menor pré-definido. Normalmente vem por padrão com o seguinte atributo: font-size: smaller;
24 <span> É um conteiner genérico em linha para conteúdo fraseado, que não representa nada por natureza. Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id ), ou para compartilhar valores de atributos como lang. Ele deve ser usado somente quando nenhum outro elemento semântico for apropriado. <span> é muito parecido com o elemento <div>, entretando <div> é um elemento de nível de bloco enquanto <span> é um elemento em linha.
25 <strong> É uma tag de frase. Ela define texto importante.Normalmente, é apresentado com o uso do tipo "negrito".
26 <sub> Define o texto subscrito. O texto subscrito aparece com meio caractere abaixo da linha normal e às vezes é renderizado em uma fonte menor. Subscrito texto pode ser utilizado para as fórmulas químicas, por exemplo.
27 <sup> Define o texto sobrescrito. O texto sobrescrito aparece com meio caractere acima da linha normal e às vezes é renderizado em uma fonte menor. O texto sobrescrito pode ser usado para notas de rodapé, por exemplo.
28 <time> Representa o tempo tanto no formato de 24 horas ou como uma data precisa no calendário Gregoriano (com informações opcionais de tempo e fuso horário)
29 <u> Representa algum texto que deve ser estilisticamente diferente do texto normal, como palavras com erros ortográficos ou nomes próprios em chinês. É apresentado com o uso do tipo "sublinhado"
30 <var> Representa uma variável em uma expressão matemática ou um contexto de programação.
31 <wbr> Representa uma posição no texto onde o navegador pode, opcionalmente, quebrar uma linha, embora suas regras de quebra de linha de outra forma não criar uma ruptura naquele local.

Imagem e multimídia


  HTML suporta vários recursos multimídia como imagens, audio, e video.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <area> Define uma região hot-spot em uma imagem, e, opcionalmente, associa-lo com um link de hipertexto. É usado somente dentro de um elemento <map>.
2 <audio> Utilizado para embutir conteúdo de som em um documento HTML. Foi adicionado como parte do HTML5.
3 <img> Representa a inserção de imagem no documento, sendo implementado também pelo HTML5 para uma melhor experiência com o elemento <figure> e <figcaption>.
4 <map> Usado com os elementos <area> para definir um mapa de imagem (a área clicável do link).
5 <track> Usado como filho dos elementos de mídia <audio> e <video>. Ela permite que você especifique faixas de texto temporizadas (ou dados baseados em tempo), por exemplo, para lidar automaticamente com legendas.
6 <video> Especifica o vídeo, como um clipe de filme ou outras transmissões de vídeo. Qualquer texto entre as tags <video> e </video> será exibido em navegadores que não suportam o elemento <video>. Este elemento conta também com uma série de atributos opcionais.
7 <figure> Especifica conteúdo independente, como ilustrações, diagramas, fotos, listagens de código etc. Embora seu conteúdo esteja relacionado ao fluxo principal, sua posição é independente e, se removido, não deve afetar o fluxo do documento.
8 <figcaption> Define uma legenda para um elemento <figure>. Pode ser colocado como o primeiro ou o último filho do elemento <figure>.

Conteúdo integrado


  Além do conteúdo normal de multimídia, HTML pode incluir uma variedade de outros conteúdos, apesar de nem todos serem possuírem fácilidade de interação.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <applet> Identifica a inclusão de um applet Java.
2 <embed> Representa um ponto de integração para uma aplicação externa ou conteúdo interativo (em outras palavras, um plug-in).
3 <iframe> Representa um contexto de navegação aninhado, efetivamente incorporando outra página HTML para a página atual. Em HTML 4.01, um documento pode conter uma cabeça e um corpo ou uma cabeça e um conjunto de quadros, mas não tanto um corpo e um conjunto de quadros. No entanto, um <iframe> pode ser usado dentro de um corpo de documento normal. Cada contexto de navegação tem sua própria história de sessão e o documento ativo. O contexto de navegação que contém o conteúdo incorporado é chamado o pai de contexto de navegação. O contexto de navegação de nível superior (que não tem um pai) normalmente é a janela do navegador.
4 <object> Define um objeto incorporado em um documento HTML. Pode ser usado para incorporar multimídia (como áudio, vídeo, miniaplicativos Java, ActiveX, PDF e Flash) nas suas páginas da web. Você também pode usá-la para incorporar outra página da Web ao seu documento HTML.
5 <param> Usada para definir parâmetros para plugins incorporados através de um elemento <object>.
6 <picture> É um container usado para especificar múltiplos elementos <source> para um elemento específico <img> contido nele. O navegador irá escolher a imagem mais adequada de acordo com o layout atual da página, caracteristicas do dispositivo em que será exibido (p.e. um dispositivo normal ou um hiDPI), e a habilidade do navegador de renderizar um certo tipo de imagem (p.e., envie uma imagem WebP para os navegadores baseados no Chromium ou PNG para navegadores não-Chromium); se não houver correspondência entre os elementos <source>, o arquivo especificado pelo elemento <img> será selecionado. A imagem selecionada é então exibida no espaço ocupado pelo elemento <param>.
7 <source> Utilizado para especificar múltiplos recursos de mídia de elementos <picture>, <audio> ou <video> em HTML5. É um elemento vazio. É normalmente usado para disponibilizar múltiplos formatos suportados por diferentes navegadores.

Scripting


  Com o intuito de permitir a criação de conteúdo dinâmico e aplicações Web, HTML foi projetado com suporte a linguagens de scripting, a mais prominiente sendo JavaScript. Certos elementos suportam essa capacidade.

# Elemento Descrição
1 <canvas> Pode ser utilizado para desenhar gráficos utilizando scripts (geralmente JavaScript). Por exemplo, além de desenhar gráficos, ele pode ser usado para fazer composições de fotos e também para animações. Você poderá colocar conteúdos alternativos dentro do bloco <canvas>. Este conteúdo será renderizado também em navegadores antigos e em navegadores com JavaScript desabilitado.
2 <noscript> Define uma seção de html a ser inserida se um tipo de script não é suportado pela página ou se o script está desativado no navegador.
3 <script> Usado para incluir ou referenciar um script executável.

Demarcando edições


  Estes elementos permitem prover indicações que partes específicas de um texto foram alteradas.

# Elemento Descrição
1 <del> Representa uma parte do texto que foi excluída de um documento. Este elemento é (não necessariamente) renderizado pelos navegadores com uma linha entre o texto.
2 <ins> Representa um intervalo de texto que foi adicionado a um documento.

Conteúdo tabulado


  Estes elementos são usados para se criar e manipular dados em tabelas.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <caption> Representa o título de uma tabela. Embora ele seja sempre o primeiro filho de um <table>, seu estilo, usando CSS pode colocar ele em qualquer lugar relativo a tabela.
2 <col> Especifica propriedades da coluna para cada coluna em um elemento <colgroup>. É útil para aplicar estilos a colunas inteiras, em vez de repetir os estilos para cada célula, para cada linha.
3 <colgroup> Especifica um grupo de uma ou mais colunas em uma tabela para formatação.
4 <table> Define uma tabela. Representa dados em duas dimensões ou mais.
5 <tbody> Usada para agrupar o conteúdo do corpo em uma tabela HTML.
6 <td> Define uma célula padrão em uma tabela HTML (contém dados) - regular e alinhado à esquerda por padrão.
7 <tfoot> Usada para agrupar o conteúdo do rodapé em uma tabela HTML.
8 <th> Ddefine uma célula de cabeçalho em uma tabela HTML (contém informações do cabeçalho) - negrito e centralizado por padrão.
9 <thead> Usada para agrupar o conteúdo do cabeçalho em uma tabela HTML.
10 <tr> Define uma linha em uma tabela HTML. Contém um ou mais elementos <th> ou <td>.

Formulários


  HTML provê de vários elementos que podem ser usados juntos para criar formulários que o usuário pode preencher e mandar para o website ou aplicativo.

Filtre por id, elemento ou descrição:



# Elemento Descrição
1 <button> Representa um botão clicável.
2 <datalist> Contém um conjunto de elementos <option> que representam as opções possíveis para o valor de outros controles.
3 <fieldset> Usado para agrupar elementos, assim como labels (<label>), dentro de um formulário web.
4 <form> Representa uma seção de um documento que contém controles interativos que permitem ao usuário submeter informação a um determinado servidor web.
5 <input> Especifica um campo de entrada onde o usuário pode inserir dados. São usados ​​em um elemento <form> para declarar controles de entrada que permitem que os usuários insiram dados. Um campo de entrada pode variar de várias maneiras, dependendo do atributo type.
6 <label> Representa uma legenda para um item em uma interface de usuário. Ele pode estar associado com um elemento de controle, colocando este dentro do elemento label, ou usando o atributo for. Tal controle é chamado o controle etiquetado do elemento etiqueta. Um input pode ser associado a diversas etiquetas <label>.
7 <legend> Representa um rótulo para o conteúdo do seu ancestral <fieldset>.
8 <meter> Pode representar um valor escalar dentro de um intervalo conhecido ou um valor fracionário.
9 <optgroup> Cria um agrupamento de opções dentro do elemento <select> em um Formulário Web.
10 <option> É usado para criar um controle que representa um item dentro de um elemento HTML5 <select>, <optgroup> ou <datalist> em um formulário Web.
11 <output> É um elemento no qual um site ou aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário.
12 <progress> Usado para visualizar o progresso de uma tarefa. Embora as especifidades de como é mostrado ficam a cargo do desenvolvedor, tipicamente, é mostrado como uma barra de progresso.
13 <select> Representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <option>, que podem ser agrupados por elementos <optgroup>. As opções podem ser pré-selecionadas para o usuário.
14 <textarea> Representa um controle de edição para uma caixa de texto, útil quando você quer permitir ao usuário informar um texto extenso em formato livre, como um comentário ou formulário de retorno.

Elementos interativos


  HTML oferece uma seleção de elementos que auxiliam na criação de objetos interativos de interface para usuários.

# Elemento Descrição
1 <details> Usado como uma ferramenta de onde o usuário irá obter informações adicionais.
2 <dialog> Representa uma caixa de diálogo ou outro componente interativo, tal como um inspetor ou janela.
3 <menu> Define uma lista / menu de comandos. É usada para menus de contexto, barras de ferramentas e para listar controles e comandos de formulário.
4 <menuitem> Define um item de comando / menu que o usuário pode chamar em um menu pop-up. Está obsoleta no HTML5.
5 <summary> Utilizado como um sumário ou legenda para o conteúdo de um elemento <details>.

Seletores CSS


Digite algo no campo a seguir para procurar na tabela por seletores, exemplos ou descrições:



# Seletor Exemplo Descrição
1 .class .intro Seleciona todos os elementos com class="intro"
2 #id #firstname Seleciona o elemento com id="firstname"
3 * * Seleciona todos os elementos
4 elemento p Seleciona todos <p>
5 elemento, elemento div, p Seleciona todos <div> e todos elementos <p>
6 elemento elemento div p Seleciona todos elementos <p> dentro de elementos <div>
7 elemento > elemento div > p Seleciona todos <p> onde o pai é um elemento <div>
8 elemento + elemento div + p Seleciona todos <p> que estão imediatamente depois de um elemento <div>
9 elemento1 ~ elemento2 p ~ ul Seleciona todo elemento <ul> que precede um elemento <p>
10 [attribute] [target] Seleciona todos os elementos com um atributo target
11 [attribute=value] [target=_blank] Seleciona todos os elementos com target="_blank"
12 [attribute~=value] [title~=flower] Seleciona todos os elementos com um atributo title que contém a palavra "flower"
13 [attribute|=value] [lang|=pt-br] Seleciona todos os elementos com um atributo lang, cujo valor comece com "pt-br"
14 [attribute^=value] a[href^="https"] Seleciona todo elemento <a> que tem um atributo href cujo valor começa com "https"
15 [attribute$=value] a[href$=".pdf"] Seleciona todo elemento <a> que tem um atributo href cujo valor termina com ".pdf"
16 [attribute*=value] a[href*="tableless"] Seleciona todo elemento <a> que tem um atributo href cujo valor contém "tableless"
17 :active a:active Seleciona o link ativo
18 ::after p::after Insere conteúdo depois de cada elemento <p>
19 ::before p::before Insere conteúdo antes de cada elemento <p>
20 :checked input:checked Seleciona todo elemento <input> que stão marcados como "checked"
21 :default input:default Seleciona os <input> padrões
22 :disabled input:disabled Seleciona todo <input> desabilitado
23 :empty p:empty Seleciona todo elemento <p> que não tem filhos, incluindo texto
24 :enabled input:enabled Seleciona todo <input> habilitado
25 :first-child p:first-child Seleciona todo elemento <p> que é o primeiro filho do seu pai
26 ::first-letter p::first-letter Seleciona a primeira letra de todo elemento <p>
27 ::first-line p::first-line Seleciona a primeira linha de todo elemento <p>
28 ype.asp">:first-of-type p:first-of-type Seleciona todo elemento <p> que é o primeiro filho do seu pai
29 :focus input:focus Seleciona o <input> que tem focus
30 :hover a:hover Seleciona links quando o mouse passa por cima
31 sp">:in-range input:in-range Seleciona o elemento <input> com o atributo value dentro de um range especificado
32 :indeterminate input:indeterminate Seleciona o elemento <input> que tem um estado indeterminado
33 :invalid input:invalid Seleciona todos <input> elementos com um valor inválido
34 :lang(language) p:lang(pt-br) Seleciona todo elemento <p> com a atributo lang="pt-br"
35 sp">:last-child p:last-child Seleciona todo elemento <p> que é o último filho de seu pai
36 ype.asp">:last-of-type p:last-of-type Seleciona todo elemento <p> que é o último elemento do tipo <p> do seu pai
37 :link a:link Seleciona todos links não visitados
38 :not(Seletor) :not(p) Seleciona todo elemento elemento que não é um elemento <p>
39 sp">:nth-child(n) p:nth-child(2) Seleciona todo elemento <p> que é o segundo filho do seu pai
40 hild.asp">:nth-last-child(n) p:nth-last-child(2) Seleciona todo elemento <p> que é o segundo filho do seu pai, contando com o último filho
41 f-type.asp">:nth-last-of-type(n) p:nth-last-of-type(2) Seleciona todo elemento <p> que é o segundo <p> do seu pai, contando com o último filho
42 ype.asp">:nth-of-type(n) p:nth-of-type(2) Seleciona todo elemento <p> que é o segundo <p> do seu pai
43 ype.asp">:only-of-type p:only-of-type Seleciona todo elemento <p> que é o único <p> do seu pai
44 sp">:only-child p:only-child Seleciona todo elemento <p> que é o único filho do seu pai
45 :optional input:optional Seleciona o elemento <input> com ou sem o atributo "required"
46 ange.asp">:out-of-range input:out-of-range Seleciona o elemento <input> com o atributo "out-of-range"> especificado
47 ::placeholder input::placeholder Seleciona o elemento <input> com texto placeholder
48 sp">:read-only input:read-only Seleciona o elemento <input> com o atributo "readonly" especificado
49 sp">:read-write input:read-write Seleciona o elemento <input> com o atributo "readonly" não especificado
50 :required input:required Seleciona o elemento <input> com o atributo "required" especificado
51 :root :root Seleciona o elemento root
52 ::selection ::selection Seleciona a porção de um elemento que está selecionado pelo usuário
53 :target #news:target Seleciona o elemento atual ativo #news (clicado pelo usuário na URL contendo o nome ancora)
54 :valid input:valid Seleciona todos elementos <input> com um valor válido
55 :visited a:visited Seleciona todos links já visitados

Propriedades CSS


  CSS: Folha de estilo em cascata. É um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos, etc) aos documentos web. Segue um resumo com as principais propriedades de estilo da linguagem CSS.

Digite algo no campo a seguir para procurar na tabela por propriedades, exemplos ou descrições:



# Seletor Exemplo Descrição
1 font-family font-family: Arial; Define a família da fonte utilizada.
2 font-style font-style: italic; Define a propriedades de estilos que podem ser: normal>, italic> ou oblique>.
3 font-weight font-weight: bold; Define a propriedade de intensidade de uma fonte na sequência de valores de ‘100’ a ‘900’, cada número indica uma fonte mais intensa (escura) que o valor anterior.
4 font-size font-size: 12px; Define o tamanho da fonte.
5 letter-spacing letter-spacing: 5px; Controla o espaçamento entre as letras de um texto.
6 word-spacing; word-spacing: 10px; Controla o espaçamento entre as palavras de um texto.
7 line-height line-height: 25px; Controla a altura entre as linhas do texto de um paragrafo.
8 text-align text-align: center; Controla o posicionamento horizontal do conteúdo de um elemento. Os valores possíveis são: left>, right>, center> e justify.
9 text-decoration text-decoration: underline; Define um efeito decorativo no texto. Podendo entre eles ser: none (sem decoração); underline (sublinhado); line-through(linha cortando o texto); e blink (efeito piscante).
10 text-transform text-transform: uppercase; Controla os efeitos de capitalização do texto. Com ela, podemos definir a caixa das letras (minúsculas e maiusculas). Os valores possíveis são: capitalize, uppercase, lowercase e none
11 text-indent text-indent: 20px; Define o tamanho da endentação para a primeira linha do texto contida em um bloco, ou seja, o deslocamento para a direita de um parágrafo.
12 color color: rgb(255,0,0); Define a cor do texto de um texto.
13 font font: normal small-caps bold 14px "Comic Sans MS", sans-serif; Propriedade para definir em um único local vários estilos para a fonte. A sintaxe geral para font: [style] [variant] [weight] [size] [/line-height] [family]. Nota: Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).
14 width width: 100px; Define o comprimento (largura) de um elemento.
15 height height: 50px; Define a altura de um elemento.
16 border border:1px solid #CCC; Define bordas para um elemento.
17 background background:url("images/fundo-topo.png") no-repeat; Define as propriedades relacionadas ao fundo de exibição.
18 margin margin: 15px; Controla as margens de um elemento. Se forem indicados quatro valores, eles dizem respeito, respectivamente, às margens superior, direita, inferior e esquerda. Se for fornecido apenas um valor, ele é aplicado às quatro margens.
19 padding padding: 10px 5px 5px 10px; Controla os espaçamentos de um elementos. Se forem indicados quatro valores, eles dizem respeito, respectivamente, aos espaçamentos superior, direito, inferior e esquerdo. Se for fornecido apenas um valor, ele é aplicado aos quatro espaçamentos.
20 float float: left; Esta regra faz com que o box seja retirado de sua posição no fluxo do documento e flutuado para a direita ou esquerda. O espaço original ocupado pelo box não será deixado livre, mas preenchido pelo elemento que segue no fluxo do documento.

Instruções e Declarações


  As aplicações em JavaScript consistem em declarações com uma sintaxe apropriada. Uma única declaração pode abranger várias linhas de código. Várias instruções podem ocorrer em uma única linha também, se cada declaração for devidamente separada por ponto e virgula. Instrução não é uma palavra-chave, mas sim, um grupo de palavras-chave.

--->>> Clique sobre um código na tabela para abrir uma referência externa mais detalhada!

Digite algo no campo a seguir para procurar na tabela por instrução, declaração ou descrição:



# Código Categoria Descrição
1 break Controle de
Fluxo		 Termina o atual loop, troca, ou nomeia instruções e transfere o controle do programa para a próxima instrução após a que foi terminada agora.
2 continue Controle de
Fluxo		 Termina a execução das instruções na atual iteração do atual loop, e continua a execução do loop com a seguinte iteração.
3 if...else Controle de
Fluxo		 Executa uma instrução se a condição especificada é verdadeira. Se a condição é falsa, outra instrução pode ser executada.
4 switch Controle de
Fluxo		 Retorna uma expressão, combinando o valor da expressão a condição do caso, e executa a condição associada a este caso.
5 throw Controle de
Fluxo		 Aplica uma exceção definida pelo usuário.
6 try...catch Controle de
Fluxo		 Marca um bloco de instruções para tentar, e especifica a resposta, uma exceção deve ser retornada.
7 Bloco Controle de
Fluxo		 Uma instrução de bloqueio é usada para um grupo de zero ou mais instruções. O bloqueio é delimitado por um par de chaves.
8 Vazio Controle de
Fluxo		 Uma instrução vazia é usada para gerar uma "não-instrução", ainda que o JavaScrpit espere uma.
9 var Declarações Declara uma variável, opcionalmente inicializando com um valor.
10 let Declarações Declara acesso ao local da variável, opcionalmente inicializando com um valor.
11 const Declarações Declara uma constante de apenas leitura.
12 function Funções e
Classes		 Declara uma função com os parâmetros especificos.
13 function* Funções e
Classes		 Gera funções habilitando iteradores de escrita mais facilmente.
14 return Funções e
Classes		 Especifica o valor a ser retornado por uma função.
15 class Funções e
Classes		 Declara uma classe.
16 do...while Iterações Cria um loop que executa uma especifica instruçãot até que a condição de teste seja falsa. A condição é retornada depois da execução da instrução, resultando na instrução especificada executando ao menos uma vez.
17 for Iterações Cria um loop que consiste em três opções de expressões, entre parenteses e seprado por ponto e vírgula, seguido pela instrução executada no loop.
18 for...in Iterações Itera através de enumeráveis propriedades de um objeto, em ordem arbitrária. Para cada propriedade distinta, instruções podem ser executadas.
19 for...of Iterações Itera através de objetos iteráveis (incluindo arrays, array-like objects, iterators & generators), invocando uma iteração personalizada com instruções para serem executadas pelo valor de cada propriedade.
20 while Iterações Cria um loop que executa uma especifica instrução enquanto o teste da condição for positivo. A condição é retornada antes de executar a instrução.
21 debugger Outros Invoca qualquer funcionalidade de depuração disponível. Se não há funcionabilidade disponível, a instrução não tem efeito.
22 export Outros Usado para exportar funções que os deixa disponível para importação em módulos externos, outros scripts.
23 import Outros Usado para importar funções exportadas de um módulo externo, outro script.
24 label Outros Fornece uma instrução com um identificador que pode ser referido usando as instruções break ou continue.

Operadores JavaScript


  Esta seção busca documentar todos os operadores da linguagem JavaScript.

Digite algo no campo a seguir para procurar na tabela por operadores, categorias ou descrições:



# Operador Categoria Descrição
1 + Operadores Aritméticos Adição
2 - Operadores Aritméticos Subtração
3 * Operadores Aritméticos Multiplicação
4 ** Operadores Aritméticos Exponenciação
5 / Operadores Aritméticos Divisão
6 % Operadores Aritméticos Módulo
7 ++ Operadores Aritméticos Incremento
8 -- Operadores Aritméticos Decremento
9 = Operadores de Atribuição Exemplo: x = y   Equivalente a: x = y
10 += Operadores de Atribuição Exemplo: x += y   Equivalente a: x = x + y
11 -= Operadores de Atribuição Exemplo: x -= y   Equivalente a: x = x - y
12 *= Operadores de Atribuição Exemplo: x *= y   Equivalente a: x = x * y
13 /= Operadores de Atribuição Exemplo: x /= y   Equivalente a: x = x / y
14 %= Operadores de Atribuição Exemplo: x %= y   Equivalente a: x = x % y
15 <<= Operadores de Atribuição Exemplo: x <<= y   Equivalente a: x = x << y
16 >>= Operadores de Atribuição Exemplo: x >>= y   Equivalente a: x = x >> y
17 <<<= Operadores de Atribuição Exemplo: x <<<= y   Equivalente a: x = x <<< y
18 &= Operadores de Atribuição Exemplo: x &= y   Equivalente a: x = x & y
19 ^= Operadores de Atribuição Exemplo: x ^= y   Equivalente a: x = x ^ y
20 |= Operadores de Atribuição Exemplo: x |= y   Equivalente a: x = x | y
21 **= Operadores de Atribuição Exemplo: x **= y   Equivalente a: x = x ** y
22 & (AND) Operadores Binários Define cada bit como 1 se os dois bits forem 1
23 | (OR) Operadores Binários Define cada bit como 1 se um dos dois bits for 1
24 ^ (XOR) Operadores Binários Define cada bit como 1 se apenas um dos dois bits for 1
25 ~ (NOT) Operadores Binários Inverte todos os bits.
26 >> Operadores Binários Desliza os bits para a direita. O operando da direita é o responsável pelo número de vezes que os bits serão deslizados. Acrescentam-se cópias da parte mais a esquerda para "empurrar" os bits para a direita - isso faz com que o sinal seja preservado.
27 << Operadores Binários Desliza os bits para a esquerda. O operando da direita é o responsável pelo número de vezes que os bits serão deslizados.Acrescentam-se zeros da parte mais a direita para "empurrar" os bits para a esquerda.
28 >>> Operadores Binários Desliza os bits para a direita. O operando da direita é o responsável pelo número de vezes que os bits serão deslizados. Acrescentam-se zeros da parte mais a esquerda para "empurrar" os bits para a direita
29 == Operadores de Comparação Igual a
30 === Operadores de Comparação Valor igual e tipo igual
31 != Operadores de Comparação Não igual a
32 !== Operadores de Comparação Valor não igual ou tipo não igual
33 > Operadores de Comparação Maior que
34 < Operadores de Comparação Menor que
35 >= Operadores de Comparação Maior ou igual a
36 <= Operadores de Comparação Menor ou igual a
37 ? : Operadores de Comparação Operador ternário. Ex.: variável = (condição) ? valor1:valor2  Neste caso, se a condição for satisfeita, o valor da variável será igual ao valor 1, caso contrário, a variável será igual ao valor 2.
38 || Operadores Lógicos Ou (OR)
39 ! Operadores Lógicos Negação (NOT)
40 && Operadores Lógicos E (AND)

Comentários (Beta Feature)