Skip to content

Instantly share code, notes, and snippets.

@caiorn

caiorn/html5.html

Created August 26, 2018 19:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save caiorn/8cf9bbf31f220820d091295f6e03a519 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save caiorn/8cf9bbf31f220820d091295f6e03a519 to your computer and use it in GitHub Desktop.
Download ZIP
html5 Cheat Sheet basic
Raw
html5.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="" />
<title>TAGS BASICAS HTML5</title>
</head>
<body bgcolor="white"> <!--NOT SUPORTE HTML5-->
<div style="background-color:#E8E8E8;border-style: dotted solid dashed double;"> <!--SUPORTED HTML5-->
<style>
::-moz-selection { /* Code for Firefox */ <!--#id e .class-->
color: red;
background: yellow;
}
::selection {
color: red;
background: yellow;
}
</style>
<h3><ins>sublinhado,</ins><del> Riscado,</del><sup> superscript,</sup><sub> subscript.</sub><b> Negrito,</b><i> itálico,</i><small> Diminuir,</small><mark> Marked,</mark></h3>
<em>Emphasized text</em><br/>
<strong>Strong text</strong><br/>
<code>A piece of computer code</code><br/>
<samp>Sample output from a computer program</samp><br/>
<kbd>Keyboard input</kbd><br/>
<var>Variable</var><br/>
<p style="text-align:left;">CSS<span style="font-family:Calibri;font-style:italic;font-weight:bold;color:#CAFF70;background-color:DarkSlateGray;font-size:20px;text-shadow:2px 2px 2px red;">Fonte;<wbr>italico;Negrito;Cor;&shyAlinhamento;Cor-de-fundo;Tamanho;Sombreado.</span>HTML5</p>
<p>formataçao <font color="blue" face="Verdana" size="4">antiga</font></p><!--NOT SUPORTED HTML5-->
<p style="unicode-bidi:bidi-override;direction:rtl;"> Texto ao contrario</p>
<h3>Passe o Mouse por cima de <abbr title="HyperText Markup Language">"HTML"</abbr></h3>
<pre>
Texto em um elemento de pré
é exibido em uma largura fixa
fonte, e preserva
e ambos os espaços
quebras de linha
</pre>
<ol type=""> <!--Lista Ordenada.Tipos: i, I, a, A-->
<li>Azul</li>
<li>Vermelho</li>
<ul type="circle"> <!--Lista Não Ordenada.tipos: disk, circle, square-->
<li>Vermelho escuro</li>
<li>Vermelho claro</li>
</ul>
<li>Verde</li>
<li>Amarelo</li>
</ol><br/>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação de texto</dd>
<dt>CSS</dt>
<dd>Usado para formatação de documentos</dd>
</dl>
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
<style>
p:empty {
width: 100px;
height: 20px;
background: #ff0000;
}
</style>
<p></p>
</div>
<hr/> <!-- linha horizontal -->
<!--////////////////////////////LINKS\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div style="background-color:#D8E7D4;">
<a href="http://www.w3schools.com">Link web Simples</a><br>
<a href="BaseSimples.html">Link entre Pasta</a><br>
<a href="http://www.google.com" target="_blank" style="text-decoration:none;">link com Nova Aba </a>
<ul style="color:#FF7F24">
<li><a href="http://www.w3schools.com/html/default.asp">HTML</a></li>
<li><a href="http://www.w3schools.com/css/default.asp">CSS</a></li>
<li><a href="http://www.w3schools.com/js/default.asp">JavaScript</a></li>
</ul>
<a href="#ancof">ANCORA HTML FIM</a><br/>
<a href="decisao.html#estru" target="_blank">PARA OUTRA PAGINA</a><br/><br/>
<nav>
<a href="Base1Alinhamento.html">Alinhamento</a>|
<a href="Base2Formataçao.html">Formataçao</a>|
<a href="Base3Forms-Imput.html">Forms</a>|
<a href="Base4Medias-Links.html">Medias & Links</a>|
<a href="Base5Tabela.html">Tabelas</a>|
<a href="frame.html">Visualizar FRAME</a>
</nav>
</div>
<hr/>
<!--////////////////////////////MÍDIAS\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div style="background: #F3FFFF url('relogio.jpg') no-repeat right top;">
<h4>Imagem___________Imagem Com link</h4>
<img src="logohtml5.png" alt="logohtml" height="" width="">
<a href="BaseSimples.html"><img src="logocss3.png"></a><br/>
<!-- <audio controls autoplay ou autostart="true"> -->
<!-- loop repetição automatica, ou loop=10 para repetir 10x-->
<video width="320" height="240" controls>
<source src="movie2.mp4" type="video/mp4">
<source src="movie2.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> <br/>
<audio controls="controls">
<source src="track.ogg" type="audio/ogg" />
<source src="track.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</div>
<hr/>
<!--///////////////////////////////TABELAS\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div>
<!--cellpadding="2"= tamanho das celulas.. "cellspacing="3" = espessura da borda-->
<table border="1">
<caption>Titulo da Tabela</caption> <!-- <caption> tag define uma legenda da tabela-->
<thead>
<th>Coluna 1</th> <!--<th> define um cabeçalho da tabela -->
<th>Coluna 2</th>
</thead>
<tbody>
<tr> <!-- <tr> delimita uma linha uma linha da tabela-->
<td>linha1, coluna 1</td><!-- <td> delimita uma coluna da tabela-->
<td> linha 1, coluna 2</td>
</tr>
<tr>
<td background="logohtml5.png">linha 2, coluna 1</td><!--NO HTML5-->
<td style="background-image:url('logohtml5.png')">linha 2, coluna 2</td>
<tbody>
</tr>
</table><br/>
<table border="1">
<tr>
<td rowspan="2">Ed</td> <!--rowspan mesclar linhas-->
<td colspan="2">Tom</td><!-- colspan mesclar colunas-->
</tr>
<tr>
<td>Curly</td>
<td>Moe</td>
</tr>
</table><br/>
<table border="1">
<thead> <!-- <thead> Cabeçalhos -->
<tr>
<th colspan="2">Cabeçalho</th>
</tr>
<tr>
<th>Sub-Cabeçalho1</th>
<th>Sub-Cabeçalho2</th>
</tr>
<thead>
<tfoot> <!--<tfoot>fim da tabela.-->
<tr>
<td>total</td>
<td>total2</td>
</tr>
<tr>
<th colspan="2">fim</th>
<tfoot>
<tbody> <!--<tbody> Corpo,Conteudo..-->
<tr>
<td>XXX</td>
<td>YYY</td>
</tr>
<tr>
<td rowspan="3">2XXX</td>
</tr>
<tr>
<td>YYY</td>
</tr>
<tr>
<td>YYY</td>
</tr>
<tbody>
</table><br/>
<table align="left" border="1" bordercolor="#0f0">
<caption>NOT SUPORTED HTML5</caption>
<tr>
<td width="75" height="40" align="middle" valign="middle" bgcolor="#ADD8E6"> modo1</td>
<td width="75" height="40"align="left" valign="bottom" bgcolor="#4682B4">modo2</td>
<td width="75" height="40" align="right" valign="top" bgcolor="#AFD8E6">modo3</td>
</table>
<table style="float:right;border:solid 1px #0f0">
<caption>Sintax em CSS,suported HTML5</caption>
<tr>
<td style="width:75px;height:40px;text-align:middle;vertical-align:middle;background-color:#ADD8E6;border:solid 1px #0f0;">modo1</td> <!--"width(tamanho) pode ter 2 valores, em pixel ou em %"-->
<td style="width:75px;height:40px;text-align:left;vertical-align:bottom;background-color:#4682B4;border:solid 1px #0f0">modo2</td>
<td style="width:75px;height:40px;text-align:right;vertical-align:top;background-color:#AFD8E6;border:solid 1px #0f0">modo3</td>
</table>
</div><br style="clear:both"/><hr/><!--(clear:) limpa (float:)-->
<!--///////////////////////////////////FORMULARIOS\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\-->
<div style="background:linear-gradient(to top, LemonChiffon, #fff);">
<h1>FORMULARIOS</h1>
<p>1.Formulario Simples</p> <!-- 1111111111111111111111111111111111111111111111111111 -->
<style>
input{ <!--input[type^="text"] = somente para type="text" CSS3-->
font-size: 0.8em;
}
input:focus {
background-color: yellow;
border-color:blue;
}
input:hover{
border-color:black;
font-size:1.1em;
}
</style>
<form action="demo_form_test.asp" name="form_contado" method="post">
<label for="name23">Name:</label></br>
<input type="text" id="name23" name="nome_do_usuario" maxlength="8" size="40" value="NICKNAME" required><br/>
<label for="senha33">Password:</label></br>
<input type="password" id="senha33" name="senha_do_usuario" oninvalid="setCustomValidity('TESTE2.');alert('LULULULU')" title="uê so to testando" required><br/>
<input type="submit" value="Entrar">
<input type="reset" value="Limpar tudo" onclick="alert('LIMPADO COM SUCESSO')">
</form>
<p>2.Design 1</p> <!--2222222222222222222222222222222222222222222222222222222-->
<form action="banco_de_dados.php" method="post">
<fieldset> <!--Agrupar elementos,caixa,desing-->
<legend>Personalia:</legend> <!--adiciona nome sobre a Linha-->
<label>Nome:</label>
<input type="text" name="nome_do_usuario" placeholder="Digite seu nome" size="30"><br/>
<style>
#ema15:valid {background:#006600;color:#fff;}
#ema15:invalid {background:#990000; color:#fff;}
</style>
<label>Email:</label>
<input type="email" id="ema15"name="fMail" size="50" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Digite seu email" required><br/>
<style>
#caio:valid {border:2px solid green;}
#caio:invalid{border:2px solid pink;}
</style>
<label>Tel:</label>
<input type="tel" id="caio" maxlength="15" name="fFone" pattern="\([0-9]{2}\) [0-9]{4,6}-[0-9]{3,4}$" placeholder="(xx) xxxx-xxxx" title="Digite seu telefone" required="required"></br>
<style>
input:out-of-range {<!--input:required{}=campos requeridos ou input:optional{}=opcionais -->
border: 2px solid purple;
}
input:in-range {
border: 2px solid green;
}
</style>
<label>Data:</label>
<input type="date" id="teste33" name="data" min="2012-01-01" max="2016-03-29"><br/>
<label>Data2 text:</label>
<input type="text" maxlength="10" name="fData" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-20" required>
<label>Data e Hora:</label>
<input type="datetime-local" name="data"><br/>
<label>Mês e Ano:</label>
<input type="month" name="email_do_usuario"><br/>
<label>Quantidade:</label>
<input type="number" name="quantidade" min="0" max="100" step="10" value="30"><br/>
<label>Hora:</label>
<input type="time" name="horario"><br/>
<label>Cor:</label>
<input type="color" name="email_do_usuario"><br/>
<labeL>Points:</label>
<input type="range" name="points" min="0" max="12" value="9" step="3" list="powers">
<input type="submit" formtarget="_blank" value="novaAba"/>
</fieldset>
</form>
<br>
<p>3.HTML text area</p> <!-- 333333333333333333333333333333333333333333333333333333 -->
<form action="nome_do_banco.asp" method="post">
<label for="junto">Escreva seu comentario:</label></br> <!--rows define a altura e cols a largura da caixa-->
<textarea maxlength="200" id="junto" name="Mensagem" rows="5" cols="60" value="não_definido" readonly> <!--readonly ou usar disabled="disabled"-->
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
eu sodales quam.
</textarea></br>
<input type="submit" value="Enviar Email"> <input type="reset" value="Limpar Formulário" >
<input type="submit" value="Nova aba" formtarget="_blank">
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"><!-- botao imagem -->
</form>
<p>4.Botao Simples<p><!--4444444444444444444444444444444444444444444444444444444-->
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
<p>5.Caixa Seleção Simples</p><!--55555555555555555555555555555555555555555555555555-->
<form action="armazenamento.php" method="post">
<label>Selecione seu estado:</label>
<select name="sabor">
<option value="SP">São Paulo</option>
<option value="RJ">Rio de Janeiro</option>
<option value="MG" selected >Minas Gerais</option>
<option value="BA">Bahia</option>
</select>
</form>
<p>6.Caixa Seleção 2</p><!--66666666666666666666666666666666666666666666666666666666-->
<form action="" method="post">
<label>Selecione:</label><br/>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<optgroup label="Brasil" disabled="disabled">
<option value="gol">Gol</option>
<option value="fiat">Fiat</option>
<option value="uno">Uno</option>
</optgroup></p>
</select>
</form>
<p>7.Caixa com Pré-definiçoes</p><!--777777777777777777777777777777777777777777777777777777-->
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers"> <!-- Um elemento <input> com os valores pré-definidos em um <datalist>-->
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">Teste</option>
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Escolher">
</form>
<p>8.Caixa de multiplas seleçoes(checkbox)</p><!--888888888888888888888888888888888888888888888-->
<style>
input:checked {
height: 25px;
width: 25px;
}
</style>
<form id="lol1" action="" method="post">
<label>De que frutas você gosta?</label> <br />
<input type="checkbox" id="11" name="uva" value="uva"/><label for="11">Uva</label> <br />
<input type="checkbox" id="12" name="maca" value="maca"/><label for="12">Maçã</label><br />
<input type="checkbox" id="13" name="melancia" value="melancia"/><label for="13">Melancia</label>
</form>
<p>9.Seleçao Unica (radio)</p><!--9999999999999999999999999999999999999999999999999999-->
<form action="demo_form.asp" method="post">
<label for="masculino">Male</label>
<input type="radio" name="Genero" id="masculino" value="male"><br>
<label for="feminino">Female</label>
<input type="radio" name="genero" id="feminino" value="female"><br>
<label for="outro">Other</label>
<input type="radio" name="genero" id="outro" value="other" CHECKED><br/><!--CHECKED e uma pré seleçao caso o individuo nao marque-->
<input type="submit" value="HUEHUE">
</form>
<p>X.Envio de arquivo único</p><!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<form action="demo_form.asp">
<input type="file" name="audio" accept="file_extension"></input><br>
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
</form>
<p>Y.Envio de vários arquivos</p><!--YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY-->
<input type="file" name="img" accept="audio/*,video/*,image/*" multiple>
<input type="submit" >
<br/><hr>
<a name="ancof"><a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment