mirror of
https://github.com/cbracco/html5-test-page.git
synced 2025-01-17 04:58:16 +01:00
Initial release
This commit is contained in:
cbracco
parent
e83071f830
commit
9458b4202b
3
CHANGELOG.md
Normal file
3
CHANGELOG.md
Normal file
@ -0,0 +1,3 @@
|
||||
# 0.1.0 (April 4, 2014)
|
||||
|
||||
- Initial release!
|
||||
21
LICENSE.md
Normal file
21
LICENSE.md
Normal file
@ -0,0 +1,21 @@
|
||||
Copyright (c) Chris Bracco
|
||||
|
||||
MIT License
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
33
README.md
33
README.md
@ -1,4 +1,31 @@
|
||||
html5-test-page
|
||||
===============
|
||||
# HTML5 Test Page - 0.1.0
|
||||
|
||||
A page filled with common HTML elements to be used for testing purposes. Useful when building CSS systems for projects big and small.
|
||||
This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
|
||||
|
||||
I have not been able to find a sufficient test page out there, so I made one.
|
||||
|
||||
The HTML elements are loosely categorized as either text, embedded content, or form elements.
|
||||
|
||||
## Versioning
|
||||
|
||||
Cardinal will be maintained using the [Semantic Versioning](http://semver.org/) guidelines. From here on out, releases will be numbered using the following format:
|
||||
|
||||
`major.minor.patch`
|
||||
|
||||
* Breaking backwards compatibility increments `major`, while resetting `minor` and `patch`.
|
||||
* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
|
||||
* Bug fixes and other small changes increment `patch`.
|
||||
|
||||
## Contributing
|
||||
|
||||
Do you have ideas or requests? Please [submit an issue](https://github.com/cbracco/html5-test-page/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!
|
||||
|
||||
When submitting a pull request, **please checkout a new feature branch, and submit your pull request from it.** Do not submit pull requests from your `master` branch. Please and thank you.
|
||||
|
||||
## License
|
||||
|
||||
HTML Test Page is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/html5-test-page/blob/master/LICENSE.md) file in this repository.
|
||||
|
||||
## Colophon
|
||||
|
||||
Made by [@cbracco](http://twitter.com/cbracco).
|
||||
|
||||
270
test.html
Normal file
270
test.html
Normal file
@ -0,0 +1,270 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML5 Test Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="top" class="page" role="document">
|
||||
<header role="banner">
|
||||
<h1>HTML5 Test Page</h1>
|
||||
<p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
|
||||
</header>
|
||||
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#text">Text</a>
|
||||
<ul>
|
||||
<li><a href="#text__headings">Headings</a></li>
|
||||
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
||||
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
||||
<li><a href="#text__lists">Lists</a></li>
|
||||
<li><a href="#text__hr">Horizontal rules</a></li>
|
||||
<li><a href="#text__tables">Tabular data</a></li>
|
||||
<li><a href="#text__syntax">Syntax</a></li>
|
||||
<li><a href="#text__inline">Inline elements</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#embedded">Embedded content</a>
|
||||
<ul>
|
||||
<li><a href="#embedded__audio">Audio</a></li>
|
||||
<li><a href="#embedded__video">Video</a></li>
|
||||
<li><a href="#embedded__canvas">Canvas</a></li>
|
||||
<li><a href="#embedded__progress">Progress bars</a></li>
|
||||
<li><a href="#embedded__svg">Inline SVG</a></li>
|
||||
<li><a href="#embedded__iframes">IFrames</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#forms">Form elements</a>
|
||||
<ul>
|
||||
<li><a href="#forms__text">Text fields</a></li>
|
||||
<li><a href="#forms__select">Select menus</a></li>
|
||||
<li><a href="#forms__checkbox">Checkboxes</a></li>
|
||||
<li><a href="#forms__radio">Radio buttons</a></li>
|
||||
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
||||
<li><a href="#forms__action">Action buttons</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main role="main">
|
||||
<section id="text">
|
||||
<header><h1>Text</h1></header>
|
||||
|
||||
<article id="text__headings">
|
||||
<header>
|
||||
<h1>Headings</h1>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__paragraphs">
|
||||
<header><h1>Paragraphs</h1></header>
|
||||
|
||||
<div>
|
||||
<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__blockquotes">
|
||||
<header><h1>Blockquotes</h1></header>
|
||||
|
||||
<div>
|
||||
<blockquote>
|
||||
<p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
|
||||
<p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
|
||||
<cite><a href="#">Said no one, ever.</a></cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__lists">
|
||||
<header><h1>Lists</h1></header>
|
||||
|
||||
<div>
|
||||
<h3>Definition list</h3>
|
||||
<dl>
|
||||
<dt>Definition List Title</dt>
|
||||
<dd>This is a definition list division.</dd>
|
||||
</dl>
|
||||
|
||||
<h3>Ordered List</h3>
|
||||
<ol>
|
||||
<li>List Item 1</li>
|
||||
<li>List Item 2</li>
|
||||
<li>List Item 3</li>
|
||||
</ol>
|
||||
|
||||
<h3>Unordered List</h3>
|
||||
<ul>
|
||||
<li>List Item 1</li>
|
||||
<li>List Item 2</li>
|
||||
<li>List Item 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__hr">
|
||||
<header><h1>Horizontal rules</h1></header>
|
||||
|
||||
<div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__tables">
|
||||
<header><h1>Tabular data</h1></header>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table Heading 1</th>
|
||||
<th>Table Heading 2</th>
|
||||
<th>Table Heading 3</th>
|
||||
<th>Table Heading 4</th>
|
||||
<th>Table Heading 5</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Table Footer 1</th>
|
||||
<th>Table Footer 2</th>
|
||||
<th>Table Footer 3</th>
|
||||
<th>Table Footer 4</th>
|
||||
<th>Table Footer 5</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
<td>Table Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
<td>Table Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
<td>Table Cell 5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Table Cell 1</td>
|
||||
<td>Table Cell 2</td>
|
||||
<td>Table Cell 3</td>
|
||||
<td>Table Cell 4</td>
|
||||
<td>Table Cell 5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__syntax">
|
||||
<header><h1>Syntax</h1></header>
|
||||
|
||||
<div>
|
||||
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
||||
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
|
||||
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
|
||||
|
||||
<h2>Pre-formatted text</h2>
|
||||
|
||||
<pre>
|
||||
P R E F O R M A T T E D T E X T
|
||||
! " # $ % & ' ( ) * + , - . /
|
||||
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">[Top]</a></p></footer>
|
||||
</article>
|
||||
|
||||
<article id="text__inline">
|
||||
<header><h1>Inline elements</h1></header>
|
||||
|
||||
<div>
|
||||
<p><a href="#">This is a text link</a>.</p>
|
||||
|
||||
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
||||
|
||||
<p><em>This text has added emphasis.</em></p>
|
||||
|
||||
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
|
||||
|
||||
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
||||
|
||||
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
|
||||
|
||||
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
|
||||
|
||||
<p><s>This text has a strikethrough</s>.</p>
|
||||
|
||||
<p>Superscript<sup>®</sup>.</p>
|
||||
|
||||
<p>Subscript for things like H<sub>2</sub>O.</p>
|
||||
|
||||
<p><small>This small text is small for for fine print, etc.</small></p>
|
||||
|
||||
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
|
||||
|
||||
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
|
||||
|
||||
<p><cite>This is a citation.</cite>
|
||||
|
||||
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
||||
|
||||
<p>The <mark>mark element</mark> indicates a highlight.</p>
|
||||
|
||||
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
||||
|
||||
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
||||
</div>
|
||||
|
||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||
</article>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user