<!--
Adaptado por mim a partir do código originalmente elaborado por Nicholas Cerminara, no seu artigo em:
https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss
---
This is all HTML elements taken from this awesome resource and then modified by me for clarity:
https://github.com/cbracco/html5-test-page
-->
<select id="change-reset">
<option value="none">Nenhum (Apenas Estilos do Navegador)</option>
<option value="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">Eric Meyer Reset</option>
<option value="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">Normalize.css</option>
<option value="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">Reboot.css</option>
</select>
<div class="make-me-easy-to-visualize">
<div id="top" class="page" role="document">
<header role="banner">
<h1>Página de Teste HTML5</h1>
<p>Esta é uma página de teste preenchida com elementos HTML comuns para uso no fornecimento de <em>feedback</em> visual no desenvolvimento de sistemas com CSS e <em>frameworks</em>.</p>
</header>
<nav role="navigation">
<ul>
<li>
<a href="#text">Texto</a>
<ul>
<li><a href="#text__headings">Cabeçalhos (Headings)</a></li>
<li><a href="#text__paragraphs">Parágrafos (Paragraphs)</a></li>
<li><a href="#text__blockquotes">Citações (Blockquotes)</a></li>
<li><a href="#text__lists">Listas (Lists)</a></li>
<li><a href="#text__hr">Linhas horizontais (Horizontal rules)</a></li>
<li><a href="#text__tables">Tabelas (Tabular data)</a></li>
<li><a href="#text__code">Código (Code)</a></li>
<li><a href="#text__inline">Elementos em Linha (Inline elements)</a></li>
</ul>
</li>
<li>
<a href="#embedded">Conteúdo Embutido</a>
<ul>
<li><a href="#embedded__images">Imagens (Images)</a></li>
<li><a href="#embedded__audio">Áudio (Audio)</a></li>
<li><a href="#embedded__video">Vídeo (Video)</a></li>
<li><a href="#embedded__canvas">Canvas (Canvas)</a></li>
<li><a href="#embedded__meter">Barra de medida (Meter)</a></li>
<li><a href="#embedded__progress">Barra de progresso (Progress)</a></li>
<li><a href="#embedded__svg">SVG em Linha (Inline SVG)</a></li>
<li><a href="#embedded__iframe">IFrames</a></li>
</ul>
</li>
<li>
<a href="#forms">Elementos de formulário</a>
<ul>
<li><a href="#forms__input">Campos de Entrada (Input fields)</a></li>
<li><a href="#forms__select">Menus de Seleção (Select menus)</a></li>
<li><a href="#forms__checkbox">Caixas de seleção (Checkboxes)</a></li>
<li><a href="#forms__radio">Botões de rádio (Radio buttons)</a></li>
<li><a href="#forms__textareas">Áreas de texto (Textareas)</a></li>
<li><a href="#forms__html5">Entradas HTML5 (HTML5 inputs)</a></li>
<li><a href="#forms__action">Botões de ação (Action buttons)</a></li>
</ul>
</li>
</ul>
</nav>
<main role="main">
<section id="text">
<header><h1>Texto</h1></header>
<article id="text__headings">
<header>
<h1>Cabeçalhos</h1>
</header>
<div>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__paragraphs">
<header><h1>Parágrafos</h1></header>
<div>
<p>Um parágrafo (do grego <em>paragraphos</em>, "escrever lado a lado" ou "escrito lado a lado") é uma unidade autônoma de um discurso na escrita, tratando de um determinado ponto ou ideia. Um parágrafo consiste de uma ou mais sentenças. Embora não seja exigido pela sintaxe de nenhuma linguagem, os parágrafos normalmente fazem parte da escrita formal, e são usados para organizar uma prosa mais longa.</p>
</div>
<footer><p><a href="#top">[Top]</a></p></footer>
</article>
<article id="text__blockquotes">
<header><h1>Citações</h1></header>
<div>
<blockquote>
<p>Um bloco de citação (também chamado citação longa ou excerto) é uma citação no documento escrito, ressaltada do texto principal de um parágrafo ou bloco de texto.</p>
<p>Em geral distinguem-se visualmente usando indentação e tipo de letra diferentes ou com tamanho menor. Podem incluir ou não uma identificação da fonte, normalmente colocada embaixo e à direita.</p>
<cite><a href="#!">Só sei que nada sei.</a></cite>
</blockquote>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__lists">
<header><h1>Listas</h1></header>
<div>
<h3>Lista de definição</h3>
<dl>
<dt>Título da Lista de Definição</dt>
<dd>Esta é uma divisão da lista de definição.</dd>
</dl>
<h3>Lista Ordenada</h3>
<ol>
<li>Item 1 da lista</li>
<li>Item 2 da lista</li>
<li>Item 3 da lista</li>
</ol>
<h3>Lista Não-Ordenada</h3>
<ul>
<li>Item 1 da Lista</li>
<li>Item 2 da Lista</li>
<li>Item 3 da Lista</li>
</ul>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__hr">
<header><h1>Linhas horizontais</h1></header>
<div>
<hr>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__tables">
<header><h1>Tabelas</h1></header>
<table>
<caption>Título da tabela</caption>
<thead>
<tr>
<th>Cabeçalho Tab. 1</th>
<th>Cabeçalho Tab. 2</th>
<th>Cabeçalho Tab. 3</th>
<th>Cabeçalho Tab. 4</th>
<th>Cabeçalho Tab. 5</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rodapé Tab. 1</th>
<th>Rodapé Tab. 2</th>
<th>Rodapé Tab. 3</th>
<th>Rodapé Tab. 4</th>
<th>Rodapé Tab. 5</th>
</tr>-
</tfoot>
<tbody>
<tr>
<td>Célula Tab. 1</td>
<td>Célula Tab. 2</td>
<td>Célula Tab. 3</td>
<td>Célula Tab. 4</td>
<td>Célula Tab. 5</td>
</tr>
<tr>
<td>Célula Tab. 1</td>
<td>Célula Tab. 2</td>
<td>Célula Tab. 3</td>
<td>Célula Tab. 4</td>
<td>Célula Tab. 5</td>
</tr>
<tr>
<td>Célula Tab. 1</td>
<td>Célula Tab. 2</td>
<td>Célula Tab. 3</td>
<td>Célula Tab. 4</td>
<td>Célula Tab. 5</td>
</tr>
<tr>
<td>Célula Tab. 1</td>
<td>Célula Tab. 2</td>
<td>Célula Tab. 3</td>
<td>Célula Tab. 4</td>
<td>Célula Tab. 5</td>
</tr>
</tbody>
</table>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__code">
<header><h1>Código</h1></header>
<div>
<p><strong>Entrada de teclado:</strong> <kbd>Cmd</kbd></p>
<p><strong>Código em linha:</strong> <code><div>code</div></code></p>
<p><strong>Exemplo de saída:</strong> <samp>Este é um exemplo da saída de um programa de computador.</samp></p>
<h2>Texto pré-formatado:</h2>
<pre>T E X T O P R É - F O R M A T A D O
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ </pre>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="text__inline">
<header><h1>Elementos em linha</h1></header>
<div>
<p><a href="#!">Este e um texto com link</a>.</p>
<p><strong>A tag <em>Strong</em> é usada para realçar o texto.</strong></p>
<p><em>Neste texto foi adicionada ênfase.</em></p>
<p>O <b>elemento b</b> é um texto com estilo diferente do texto normal, sem nenhuma importância especial.</p>
<p>O <i>elemento i</i> é um texto ressaltado do texto normal.</p>
<p>O <u>elemento u</u> é um texto com anotação não articulada, embora seja explícitamente renderizado.</p>
<p><del>Este texto foi apagado</del> e <ins>Este texto foi inserido</ins>.</p>
<p><s>Este texto foi riscado</s>.</p>
<p>Sobrescrito<sup>®</sup>.</p>
<p>Subscrito para coisas como H<sub>2</sub>O.</p>
<p><small>Este texto pequeno é para impressão de notas, etc.</small></p>
<p>Abreviação: <abbr title="Linguagem de Marcação de Hipertexto">HTML</abbr></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">Este texto é uma citação curta em linha.</q></p>
<p><cite>Esta é uma citação.</cite></p>
<p>O <dfn>elemento dfn</dfn> indica uma definição.</p>
<p>O <mark>elemento mark</mark> indica um realce.</p>
<p>O <var>elemento variável</var>, como em <var>x</var> = <var>y</var>.</p>
<p>O elemento de tempo: <time datetime="2013-04-06T12:32+00:00">duas semanas atrás</time></p>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
</section>
<section id="embedded">
<header><h1>Conteúdo embutido</h1></header>
<article id="embedded__images">
<header><h2>Imagens</h2></header>
<div>
<h3>Nenhum elemento <code><figure></code></h3>
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
<h3>Envelopada num elemento <code><figure></code>, sem <code><figcaption></code></h3>
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
<h3>Envelopada num elemento <code><figure></code>, com <code><figcaption></code></h3>
<figure>
<img src="http://placekitten.com/420/420" alt="Image alt text">
<figcaption>Aqui está uma descrição para esta imagem.</figcaption>
</figure>
</div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__audio">
<header><h2>Áudio</h2></header>
<div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__video">
<header><h2>Vídeo</h2></header>
<div><video controls="">video</video></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__canvas">
<header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Topo</a></p></footer>
</article>
<article id="embedded__meter">
<header><h2>Barra de medição</h2></header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__progress">
<header><h2>Barra de progresso</h2></header>
<div><progress>progress</progress></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__svg">
<header><h2>SVG Em Linha</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
<article id="embedded__iframe">
<header><h2>IFrame</h2></header>
<div><iframe src="https://pontogpp.com.br/" height="300"></iframe></div>
<footer><p><a href="#top">[Topo]</a></p></footer>
</article>
</section>
<section id="forms">
<header><h1>Elementos de formulário</h1></header>
<form>
<fieldset id="forms__input">
<legend>Campos de entrada</legend>
<p>
<label for="input__text">Entrada de Texto</label>
<input id="input__text" type="text" placeholder="Entrada de Texto">
</p>
<p>
<label for="input__password">Senha</label>
<input id="input__password" type="password" placeholder="Digite sua senha">
</p>
<p>
<label for="input__webaddress">Endereço na Internet</label>
<input id="input__webaddress" type="url" placeholder="http://seusite.com.br">
</p>
<p>
<label for="input__emailaddress">Endereço de email</label>
<input id="input__emailaddress" type="email" placeholder="nome@email.com.br">
</p>
<p>
<label for="input__phone">Telefone</label>
<input id="input__phone" type="tel" placeholder="(999) 9999-9999">
</p>
<p>
<label for="input__search">Buscar</label>
<input id="input__search" type="search" placeholder="Digite o termo a pesquisar">
</p>
<p>
<label for="input__text2">Entrada Numérica</label>
<input id="input__text2" type="number" placeholder="Digite um número">
</p>
<p>
<label for="input__text3" class="error">Erro</label>
<input id="input__text3" class="is-error" type="text" placeholder="Entrada de Texto">
</p>
<p>
<label for="input__text4" class="valid">Válido</label>
<input id="input__text4" class="is-valid" type="text" placeholder="Entrada de Texto">
</p>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__select">
<legend>Menus de seleção</legend>
<p>
<label for="select">Selecione</label>
<select id="select">
<optgroup label="Grupo de Opções">
<option>Opção Um</option>
<option>Opção Dois</option>
<option>Opção Três</option>
</optgroup>
</select>
</p>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__checkbox">
<legend>Caixas de Seleção</legend>
<ul class="list list--bare">
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Escolha A</label></li>
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Escolha B</label></li>
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Escolha C</label></li>
</ul>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__radio">
<legend>Botões de rádio</legend>
<ul class="list list--bare">
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Opção 1</label></li>
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Opção 2</label></li>
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Opção 3</label></li>
</ul>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__textareas">
<legend>Áreas de Texto</legend>
<p>
<label for="textarea">Área de Texto</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Digite sua mensagem aqui"></textarea>
</p>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__html5">
<legend>Entradas HTML5</legend>
<p>
<label for="ic">Entrada de cor</label>
<input type="color" id="ic" value="#000000">
</p>
<p>
<label for="in">Entrada de número</label>
<input type="number" id="in" min="0" max="10" value="5">
</p>
<p>
<label for="ir">Entrada de intervalo</label>
<input type="range" id="ir" value="10">
</p>
<p>
<label for="idd">Entrada de data</label>
<input type="date" id="idd" value="1970-01-01">
</p>
<p>
<label for="idm">Entrada de mês</label>
<input type="month" id="idm" value="1970-01">
</p>
<p>
<label for="idw">Entrada de semana</label>
<input type="week" id="idw" value="1970-W01">
</p>
<p>
<label for="idt">Entrada de dia e hora</label>
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
</p>
<p>
<label for="idtl">Entrada de dia/hora-local</label>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p>
</fieldset>
<p><a href="#top">[Topo]</a></p>
<fieldset id="forms__action">
<legend>Botões de ação</legend>
<p>
<input type="submit" value="<input type=submit>">
<input type="button" value="<input type=button>">
<input type="reset" value="<input type=reset>">
<input type="submit" value="<input disabled>" disabled>
</p>
<p>
<button type="submit"><button type=submit></button>
<button type="button"><button type=button></button>
<button type="reset"><button type=reset></button>
<button type="button" disabled><button disabled></button>
</p>
</fieldset>
<p><a href="#top">[Topo]</a></p>
</form>
</section>
</main>
<footer role="contentinfo">
<p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
</footer>
</div>
</div>/* Ignore this. This is not the purpose of this demo. */
body {
background: #f5f5f5 !important;
}
.make-me-easy-to-visualize {
background: #fff;
box-shadow: 0 2px 2px 0 rgba(17,58,102,.3);
margin: 5% auto;
padding: 5%;
max-width: 1000px;
}
#change-reset {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
margin: 25px;
font-size: 180%;
}$('#change-reset').change(function() {
$('.reset-stylesheet').remove();
$('head').append('<link class="reset-stylesheet" rel="stylesheet" href="'+$(this).val()+'">');
});
External CSS
This Pen doesn't use any external CSS resources.