teste2 | teste2 |
---|
Tag | Description |
---|---|
<!--...--> | Definir um comentario- Este comentario so aparece para o programador no codigo |
<!-- texto texto --> |
Definir um comentario em mais de uma linha- Este comentario so aparece para o programador no codigo |
Este e <!--comentario--> um texto | Definir um comentario no meio de um codigo Este comentario so aparece para o programador no codigo |
<!DOCTYPE html> | Declarar para o navegador o tipo de documento html |
<a href="pagina.html" target="_blank"> Clique Aqui</a"> | Definir um link,_self-> abre na mesma janela,TARGET= "_blank"->abre em uma nova guia ou janela,TARGET= "_parent"->abre no quadro pai,TARGET= "_top"-> abre em todo o corpo da janela, TARGET="frameB"-> abre o link dentro do frame |
<abbr> | Definir abreviacao ou acrônimo como HTML, CSS, Mr, Dr. |
<acronym> | Nao suportado no HTML5. Use <abbr> no lugar. Definir um acrônimo |
<address> | Definir informacao de contato para o autor do documento |
<applet> | Nao suportado no HTML5. Use <embed> or <object> instead. Defines an embedded applet |
<area> | Definir uma area dentro de uma imagem |
<article> | Definir um artigo |
><aside> | Definir conteudo fora do conteudo da pagina |
<audio> | Definir som |
<b> | Defines Texto em negrito |
<base> | Especificar a URL de um link |
<basefont> | Nao suportado no HTML5. Use CSS no lugar Especificar a cor, tamanho e fonte do texto no documento |
<bdi> | Isola uma parte do texto que pode estar formatada em uma direcao diferente de outro texto fora dele |
<bdo dir="rtl"> Este texto ficara da direita para a esquerda.</bdo> | Substitui a direcao do texto atual, a inversao se da letra por letra, ltr->esquerda para direita , rtl ->direita para esquerda |
<big> | Nao suportado no HTML5. Use CSS no lugar. Definir texto grande |
<blockquote cite="http://www.google.com.br"> texto citacao </blockquote> | Define uma secao que e citada de outra fonte |
<body> | Define o corpo do documento |
<br> | Define uma quebra de linha única |
<button> | Define um botao clicavel |
<canvas> | Usado para desenhar graficos, em tempo real, via script (geralmente JavaScript ) |
<caption> | Define uma legenda de tabela, aparece como um cabecalho na tabela |
<center> | Nao suportado no HTML5. Use CSS no lugar. Definir texto centralizado |
<cite> | Definir o título do trabalho |
<code> | Escrever pedacos de codigo em uma pagina |
<col> | Especificar propriedades da coluna a cada <colgroup> elemento |
<colgroup> | Especificar um grupo ou mais de colunas na tabela formatada |
<data> | Adiciona um texto legível por maquina traducao de um determinado conteúdo |
<datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox2"> <option value="Chrome1"> <option value="Opera3"> <option value="Safari4"> </datalist> |
cria uma lista para um campo de texto, ao clicar no campo de texto exibe as opções da lista para preenchimento |
<dd> | Define uma descricao/valor de um termo em uma lista de descricao |
<del> | Define o texto que foi excluído de um documento |
<details> | Define detalhes adicionais que o usuario pode visualizar ou ocultar |
<dfn> | Especifica um termo que sera definido no conteúdo |
<dialog> | Define uma caixa de dialogo ou janela |
<dir> | Nao suportado no HTML5. Use <ul> no lugar. Defina uma lista de diretorio |
<div> | Define uma secao em um documento- Elementos em nível de bloco |
<dl> | Define uma lista de descricao |
<dt> | Define um termo/nome em uma lista de descricao |
<em> | Define o texto enfatizado |
<embed> | Define um contêiner para um aplicativo externo |
<fieldset> | Agrupa elementos relacionados em um formulario |
<figcaption> | Define uma legenda para a <figura> elemento |
<figure> | Especifica o conteúdo independente |
<font> | Nao suportada no HTML5. Use CSS no lugar. Defina fonte, cor, e tamanho para o texto |
<footer> | Define um rodape para um documento ou secaon |
<form> | Define um formulario HTML para entrada do usuario |
<frame> | Nao suportada no HTML5.. Defina uma janela (um frame) em um frameset |
<frameset> | Nao suportada no HTML5. Definir um conjunto de frames |
<h1> ate <h6> | Define cabecalhos HTML com tamanho da fonte <h1> Letra Grande,<h6> Letra pequena |
<head> | Contem metadados/informacões para o documento |
<header> | Define um cabecalho para um documento ou secao |
<hr> | Coloca uma linha ----------------------- |
<html> | Define a raiz de um documento HTML |
<html lang="en"> | Declara para o navegador a língua da pagina |
<html lang="en-US"> | Declara para o navegador a língua e o país da pagina |
<i> | Define uma parte do texto em uma voz ou humor alternativo |
< iframe src="demoiframe.htm" height="200" width="300" title="Iframe Example"> </iframe> > | Define um frame embutido,uma pagina dentro de outra pagina |
<iframe src="demoiframe.htm" name="iframea" title="Iframe Example"</iframe> <a href="link" target="iframea">Escola</a> |
Define um link para um iframe |
<img src="imagem.jpg" alt="Texto ao posicionar o mouse" width="100px" height="150px"> | Defina uma imagem, alt = texto exibido ao posicionar o mouse em cima, width e height = altura e largura |
<input> | Define um controle de entrada |
<ins> | Define um texto que foi inserido em um documento |
<kbd> | Define a entrada do teclado |
<label for="fname">First name:</label> | Defina um texto para um <input> elemento |
<legend> | Defina uma legenda para a <fieldset> elemento |
<li> | Defina uma lista de itens |
<link> | Define a relacao entre um documento e um recurso externo (a maioria usado para vincular a folhas de estilo) |
<main> | Especifica o conteúdo principal de um documento |
<map> | Defina um mapa da imagem |
<mark> | Define o texto marcado/destacado |
<meta> | Define metadados sobre um documento HTML. Normalmente usado para especificar o conjunto de caracteres, descricao da pagina, palavras-chave, autor do documento e configuracões da janela de visualizacao. |
<meta charset="UTF-8"> | Define o tipo de codificacao de dados . |
<meta name="keywords" content="HTML, CSS, JavaScript"> | Define palavras chave . |
<meta name="description" content="Free Web tutorials"> | Define uma descricao para a pagina. |
<meta name="author" content="John Doe"> | Define um autor para a pagina. |
<meta http-equiv="refresh" content="30"> | Atualiza a pagina a cada 30 segundos |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Configura a janela de visualizacao para que seu site fique bem em todos os dispositivos: |
<meter> | Define uma medida escalar dentro de um intervalo conhecido (um medidor) |
<nav> | Define links de navegacao como um menu |
<noframes> | Nao suportado em HTML5 . Define um conteúdo alternativo para usuarios que nao suportam frames |
<noscript> | Define um conteúdo alternativo para usuarios que nao suportam scripts do lado do cliente |
<object> | Define um contêiner para um aplicativo externo |
<ol> | Define uma lista ordenada |
<optgroup> | Define um grupo de opcões em uma lista drop-down |
<option> | Define uma opcao na lista drop-down |
< output name="x" for="a b"></output> | soma os valores de input sendo a + b e exibe o resultado |
<p> | Define um paragrafo |
<param> | Define um parametro para um objeto |
<picture> | Define um container para multiplos recursos de imagem |
<pre> | Exibe o texto na mesma formatacao que você escreveu no codigo |
<progress> | Representa o progresso de uma tarefa |
<q> | Define uma citacao curta |
<rp> | Define o que mostrar em navegadores que nao suportam anotacões ruby |
<rt> | Define uma explicacao/pronúncia de caracteres (para o Leste Asiatico tipografia) |
<ruby> | Define uma anotacao rubi (para tipografia do Leste Asiatico) |
<s> | Define o texto que nao esta mais correto |
<samp> | Define a saída de amostra de um programa de computador |
<script src="javascript.js"> </script> | Define um link para um arquivo javascript |
<section> | Define uma secao em um documento |
<select> | Define uma lista suspensa |
<small> | Define um texto pequeno |
<source> | Define varios recursos de mídia para elementos de mídia (<video> and <audio>) |
<span> | Define uma secao em um documento |
<strike> | Nao suportado em HTML5. Use <del> ou <s> no lugar. Define o texto tachado |
<strong> | Define texto importante |
<style> | Define informacões de estilo para um documento |
<sub> | Define o texto subscrito |
<summary> | Define um título visível para um <details> elemento |
<sup> | Define texto sobrescrito |
<svg> | Define um contêiner para graficos SVG |
<table> | Define uma tabela |
<table style="width:100%"> | Define a largura de uma tabela |
<tbody> | Agrupa o conteúdo do corpo em uma tabela |
<td> | Define uma celula em uma tabela |
<template> | Define um contêiner para o conteúdo que deve ficar oculto quando a pagina for carregada |
<textarea name="message" rows="10" cols="30"> The cat was playing in the garden. </textarea> |
Define uma área de texto com linhas e colunas |
<tfoot> | Agrupa o conteúdo do rodape em uma tabela |
<th> | Define uma celula de cabecalho em uma tabela |
<th style="width:70%"> | Define a largura de uma celula de cabecalho em uma tabela |
<thead> | Agrupa o conteúdo do cabecalho em uma tabela |
<time> | Define uma hora específica (ou datetime) |
<title> | Define um título para o documento |
<tr> | Define uma linha em uma tabela |
<track> | Define faixas de texto para elementos de mídia (<video> and <audio>) |
<tt> | Nao suportado em HTML5. Use CSS em vez disso. Define o texto do teletipo |
<u> | Define algum texto nao articulado e com estilo diferente do normal texto |
<ul> | Define uma lista nao ordenada |
<var> | Define uma variavel |
<video> | Define o conteúdo de vídeo incorporado |
<wbr> | Define uma possível quebra de linha |
<link rel="stylessheet" type="text/css" href="styles.css"> |
Link para o estilo CSS da pagina |
<a href="mailto:someone@example.com">Enviar email</a> |
Link para e-mail |
<button onclick="document.location='default.asp'">Texto do botao</button > |
Criar botao no html que redireciona para link ao clicar |
<input type="button" onclick="alert('Hello World!')" value="Click Me!"> |
Criar botao no html que exibe mensagem na tela Hello World quando se clica no botão |
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379"> <map name="workmap"> <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm"> <area shape="rerct" coords="34,44,270,350" "34,44,270,350" alt="Computer" href="coffee.htm"> </map> |
Criar mapa na imagem onde se pode se habilitar link em pontos específicos da imagem, pode se colocar varios links em uma imagem | <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg" style="width:auto;"> </picture></a> |
Criar imagem que muda conforme o usuario muda o tamanho do browser |
<link rel="icon" type="image/x-icon" href="/images/favicon.ico" > |
Colocar um ícone no barramento da pagina |
ESTRUTURA TABELA <table> inicio tabela <tr> inicio linha <th>Firstname</th> cabecalho coluna <td>Jill</td> corpo coluna </tr> fim linha </table> fim tabela |
Criar tabela, tr-> cria linha, th-> cria coluna de cabecalho, td-> cria coluna de corpo, caption ->Define uma legenda de tabela, colgroup->Especifica um grupo de uma ou mais colunas em uma tabela para formatacao |
<ul> cria lista com pontos <li>Coffee</li> cria um item da lista <li>Tea</li> cria um item da lista </ul> |
Cria uma lista com pontos. |
<ol> cria lista com numeros <li>Coffee</li> cria um item da lista <li>Tea</li> cria um item da lista </ol> |
Cria uma lista com números. |
<dl> <dt>Coffee</dt> à esquerda <dd>- black hot drink</dd> item da lista <dt>Milk</dt> à esquerda <dd>- white cold drink</dd> item da lista </dl>> |
Cria uma lista Coffe e outra para Milk |
<ol type="1"> |
Define o tipo da lista. type="1"-> Os itens da lista serao numerados com números (padrao), type="A"-> Os itens da lista serao numerados com letras maiúsculas, type="a"-> Os itens da lista serao numerados com letras minúsculas, type="I"-> Os itens da lista serao numerados com números romanos maiúsculos, type="i"-> Os itens da lista serao numerados com números romanos minúsculos |
<button type="button" > Click Me!</button> |
Cria um botao |
<style> codigo css aqui dentro </style> |
Cria um espaco para codigos css de estilo dentro da pagina HTML |
<script> codigo javascript aqui dentro </script> |
Cria um espaco para codigos de javascript dentro da pagina HTML |
<base href="http://www.google.com" target="_blank"> |
Define um endereco de base para redirecionamento dos links, href ou src="texto.html". Ira ficar http://www.google.com.br/texto.html |
<noscript> codigo nao javascript aqui dentro </noscript> |
Cria um espaco de codigos para usuarios que nao suportem javascrpit em seu navegador |
< form action="/action_page.php"> <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <label for="vehicle1">First name:</label> <input type="text" id="fname" value="John"> <input type="submit" value="Submit"> </form> |
Cria um formulario |
< form action="/action_page.php" method="get" > |
Cria um formulario com o metodo GET (mostra dados na barra da pagina) |
<form action="/action_page.php" method="post"> |
Cria um formulario com o metodo POST (não mostra dados na barra da pagina) |
<form action="/action_page.php" autocomplete="on"> |
Quando o preenchimento automático está ativado, o navegador completa automaticamente os valores com base nos valores que o usuário inseriu anteriormente. |
<form action="/action_page.php" novalidate> |
Quando presente, especifica que os dados do formulário (entrada) não devem ser validados quando enviados. |
<form action="/action_page.php" enctype="multipart/form-data"> |
Especifica como os dados do formulario devem ser codificados ao enviá-los ao servidor (somente para method="post") |
<input type="text"> |
Exibe um campo de entrada de texto de linha única |
<input type="radio" id="html" name="fav_language" value="HTML"> <input type="radio" id="html" name="fav_language" value="CSS"> |
Exibe um botão de opção (para selecionar uma das muitas opções) |
<input type="checkbox"> |
Exibe uma caixa de seleção (para selecionar zero ou mais de muitas opções) |
<input type="submit" value="Enviar"> |
Exibe um botão de envio (para enviar o formulário) |
<input type="button"> |
Exibe um botão clicável |
0 <input type="range" id="a" name="a" value="50"> 100 |
Exibe uma barra com escala de 0 a 100 |
<input type="number" id="b" name="b" min="0" max="100" step="10" value="30"> |
Exibe uma caixa de texto com o número, com seta para cima e para baixo, para aumentar ou diminuir o número |
<input type="color" id="favcolor" name="favcolor"> |
Exibe um botão seletor de cor |
<input type="date" id="datemin" name="datemin" min="2000-01-02" name="datemax" max="2079-12-31"> |
Exibe uma caixa de texto no formato de data |
<input type="datetime-local" id="birthdaytime" name="birthdaytime"> |
Exibe uma caixa de texto no formato de data e hora |
<input type="email" id="email" name="email"> |
Exibe uma caixa de texto no formato de email |
<input type="email" id="email" name="email" disabled > |
Exibe uma caixa de texto no formato de email desabilitado |
<input type="email" id="email" name="email" value="a@a.com" readonly> |
Exibe uma caixa de texto no formato de email apenas para leitura, sem poder editar |
<input type="email" id="email" name="email" value="a@a.com" size="40"> |
Exibe uma caixa de texto do tamanho 40 |
<input type="email" id="email" name="email" value="a@a.com" maxlength="4"> |
Exibe uma caixa de texto do tamanho máximo de escrita de 4 letras |
<input type="file" id="myfile" name="myfile"> |
Exibe um botão seletor de arquivos no windows. Para selecionar multiplos arquivos mantenha CTRL segurado |
<input type="hidden" id="custId" name="custId" value="3487"> |
Esconde o botão |
<input type="image"> |
Exibe um botão seletor de imagens |
<input type="month" id="bdaymonth" name="bdaymonth"> |
Exibe uma caixa de texto para se colocar o mês |
<input type="week" id="week" name="week"> |
Exibe uma caixa de texto para se colocar a semana, NÃO SUPORTADO NO FIREFOX,SAFARI OU INTERNET EXPLORER |
<input type="number" id="quantity" name="quantity" min="1" max="5">> |
Exibe uma caixa de texto para se colocar números |
<input type="password" id="pwd" name="pwd"> |
Exibe uma caixa de texto para se coloca senha ***** |
<input type="reset"> |
Reseta os campos e os torna vazio de novo |
<input type="search" id="gsearch" name="gsearch"> |
Exibe um campo de pesquisa |
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> |
Exibe um campo de texto de telefone |
<input type="text"id="fname" name="fname"> |
Exibe um campo de texto |
<input type="time" id="appt" name="appt"> |
Exibe um campo de horas |
<input type="url" id="homepage" name="homepage"> |
Exibe um campo de URL |
<input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> |
Exibe um campo de texto com filtro, só aceita submit quando está no formato do filtro, senão exibe: Atenda ao formato solicitado Three letter country code |
<input type="text" id="country_code" name="country_code" placeholder="123-45-678" > |
Exibe um campo de texto escrito um pre-texto para servir como guia para o que o usuário deve digitar |
<input type="text" id="country_code" name="country_code" required" > |
Exibe um campo de texto com obrigatoriedade de preenchimento |
<input type="text" id="country_code" name="country_code" autofocus" > |
Exibe um campo de texto que direciona o foco da página |
<form action="/action_page.php"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"> <input type="submit" value="Submit"> <input type="submit" formaction="/action_page2.php" value="Submit as Admin"> </form> |
formulario onde o formaction sobrepõe o endereço de envio do action do formulario |
<input type="submit" formenctype="multipart/form-data" > |
O atributo formenctype de entrada especifica como os dados do formulário devem ser codificados quando enviados (somente para formulários com method="post"). |
<input type="submit" formmethod="post" value="Submit using POST" > |
O atributo formmethod de entrada define o método HTTP para enviar dados de formulário para a URL de ação. |
<input type="submit" formtarget="_blank" value="Submit to a new window/tab" > |
O atributo formtarget de entrada especifica um nome ou uma palavra-chave que indica onde exibir a resposta recebida após o envio do formulário. |
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation" > |
O atributo input formnovalidate especifica que um elemento <input> não deve ser validado quando submetido.. |
<form action="/action_page.php" novalidate > |
Quando presente, novalidate especifica que todos os dados do formulário não devem ser validados quando enviados. |
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> |
O elemento HTML <svg> é um contêiner para gráficos SVG. O SVG tem vários métodos para desenhar caminhos, caixas, círculos, texto e imagens gráficas. O svg com circle cria circulos |
<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg> |
O SVG com rect cria quadrados |
<svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> |
O SVG com polygon cria polígonos |
<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg> |
O SVG com linear gradient cria imagem gradiente, com ellipse cria caixa redonda |
< canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> |
O elemento HTML <canvas>é usado para desenhar gráficos em uma página da web. |
< video width="400" controls autoplay muted> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML video. </video> |
O elemento HTML <video> é usado para mostrar um vídeo em uma página da web. controls mostra os controles. autoplay da play automaticamente. muted dá mute automaticamente |
<video width="320" height="240" controls> <source src="forrest_gump.mp4" type="video/mp4"> <source src="forrest_gump.ogg" type="video/ogg"> <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English"> <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> </video> |
O elemento HTML <track> é usado para colocar uma legenda no vídeo.Os textos são formatados no formato WebVTT (arquivos .vtt). kind dentro de track especifica o tipo de texto .label dentro de track especifica o texto para o video. srclang dentro de track especifica a linguagem do video. |
<audio controls autoplay muted> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> |
Para reproduzir um arquivo de áudio em HTML, use o elemento <audio>. controls mostra os controles, autoplay dá play automaticamente. muted dá mute no audio |
<object width="100%" height="500px" data="snippet.html"> </object> |
O elemento <object> é suportado por todos os navegadores. O elemento <object> define um objeto incorporado em um documento HTML. |
<object data="audi.jpeg"> </object> |
Você pode definir uma imagem como objeto se você quiser |
<iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&loop=1&controls=1"> </iframe> |
Colocar um vídeo do youtube. autoplay=1 dar play automaticamente. mute=1 dar mute.loop=1 loop ativado. controls=0 controles desativados, controls=1 controles ativados |
<embed src="audi.jpeg"> |
O elemento <embed> é suportado em todos os principais navegadores. O elemento <embed> também define um objeto incorporado em um documento HTML. |
<select id="cars" name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> |
lista suspensa de escolha |
<option value="fiat" selected>Fiat</option> | Deixa a opção pré-selecionada |
<select id="cars" name="cars" size="4" multiple> | Permite selecionar multiplas opções segurando ctrl e clicando com o mouse |
<script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> |
A API de geolocalização HTML é usada para localizar a posição de um usuário. Mostra a latitude e longitude. |
<!DOCTYPE HTML> <html> <head> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Drag the W3Schools image into the rectangle:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html> |
Arrastar e Soltar.Em HTML, qualquer elemento pode ser arrastado e solto. |
<script> // Check browser support if (typeof(Storage) !== "undefined") { // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage..."; } </script> |
Armazenamento Web API; melhor que cookies. |
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p> <script> var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); w = undefined; } </script> </body> </html> |
Um web worker é um JavaScript executado em segundo plano, sem afetar o desempenho da página. Ao executar scripts em uma página HTML, a página não responde até que o script seja concluído. |
Dentro da tag: |
|
style = "color:red" | altera a cor do texto |
title= "titulo" | Exibe um texto ao posicionar o mouse em cima |
style="font-size:60px;" | Altera o tamanho da fonte |
style="background-color:powderblue;" | Altera a cor do fundo |
style="background-color:rgb(255,99,71);" | Altera a cor do fundo |
style="background-color:#FF6347"; | Altera a cor do fundo |
style="background-color:hsl(9,100%,64%"); | Altera a cor do fundo |
style="font-family:Arial;" | Altera a fonte do texto |
align="left" | Alinha o conteúdo, left->esquerda, right->direita, center->centro, justify->estica texto e deixa todas as linhas iguais |
style="border:2px solid dodgerblue;" | Cria borda colorida |
style="width:42px;height:42px;" | estabelece a largura e a altura |
alt="texto a ser exibir quando posicionar o mouse" | exibe um texto ao posicionar o mouse em cima |
title="titulo" | exibe um texto ao posicionar o mouse em cima |
target="_blank" | Define como ira abrir o link TARGET="_self"-> abre na mesma janela,TARGET= "_blank"->abre em uma nova guia ou janela,TARGET= "_parent"->abre no quadro pai,TARGET= "_top"-> abre em todo o corpo da janela,TARGET="nomedoframe" -> abre o link no frame |
text-decoration: overline; | Decoracao do texto, overline-> linha em cima do texto, line-through->linha no meio do texto, underline->linha embaixo do texto, underline overline->linha embaixo e em cima do texto, dotted red -> linha pontilhada vermelha, wavy blue 5px;->linha diagonal azul |
id="C1" | Estabelece um id para a tag |
class="C2" | Estabelece um id de classe para a tag |
style="background-image: url('img_girl.jpg');" | Estabelece uma imagem para o fundo |
text-align: left; | Alinha o texto para a esquerda. left – O valor padrao. O conteúdo e alinhado ao lado esquerdo. right – o conteúdo e alinhado ao lado direito. center – Centros de conteúdo entre as bordas esquerda e direita justificar – O conteúdo e espacado de modo que o maior número possível de blocos caiba em uma linha e a primeira palavra nessa linha esteja na borda esquerda e a última palavra na borda direita. inherit – O valor sera qualquer que seja o elemento pai. |
colspan="2" | une duas colunas lateralmente |
rowspan="2" | une duas linhas verticalmente |
style="list-style-type:disc; | Define o estilo do marcador de listas, disc ->Define o marcador do item da lista para um marcador (padrao), circle-> Define o marcador do item da lista para um círculo, square-> Define o marcador do item da lista para um quadrado, none-> Os itens da lista nao serao marcados |
class="nomedaclasse" | O atributo class HTML e usado para especificar uma classe para um elemento HTML. Que sera utilizado no CSS .nomedaclasse{ } |
id="nomedoid" | O atributo ID HTML e usado para especificar um ID para um elemento HTML. Que sera utilizado no CSS #nomedaclasse{ } |
pattern="[A-Za-z]{3}" | Filtro para o campo de texto |
Caracteres Especiais |
|
|
|
😀 |
Emojis, substituir o número 128512 pelo número de outro emoji |