mirror of
https://github.com/cbracco/html5-test-page.git
synced 2025-08-21 13:21:56 +02:00
Compare commits
19 Commits
0.6.1
...
97arushish
Author | SHA1 | Date | |
---|---|---|---|
|
7611bf513b | ||
|
9c92199a7e | ||
|
5cdb76d0fb | ||
|
a7b56dec9b | ||
|
8f241cf5f1 | ||
|
1fecd23aa7 | ||
|
66a77835cc | ||
|
ab4675eae5 | ||
|
3b85be264e | ||
|
d4d5224177 | ||
|
23c3d5f7c9 | ||
|
ffd3e00512 | ||
|
3a0973f6fa | ||
|
58308fc6bd | ||
|
f54b5040be | ||
|
c7d89818d6 | ||
|
5ff15df75d | ||
|
5c388acf5e | ||
|
a6d11b25a2 |
3
.editorconfig
Normal file
3
.editorconfig
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
25
CHANGELOG.md
25
CHANGELOG.md
@@ -1,10 +1,31 @@
|
|||||||
# 0.6.1 (February 2, 2015)
|
# 0.9.1 (April 3, 2021)
|
||||||
|
|
||||||
|
- Add background images (thanks @97arushisharma!).
|
||||||
|
|
||||||
|
# 0.9.0 (April 3, 2021)
|
||||||
|
|
||||||
|
- Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!).
|
||||||
|
|
||||||
|
# 0.8.0 (March 19, 2018)
|
||||||
|
|
||||||
|
- Add test for HTML comments (thanks @ep00ch!).
|
||||||
|
|
||||||
|
# 0.7.1 (April 5, 2016)
|
||||||
|
|
||||||
|
- Add missing form button types (thanks @gnowland!).
|
||||||
|
|
||||||
|
# 0.6.2 (March 14, 2016)
|
||||||
|
|
||||||
|
- Minor formatting change (thanks @gilluminate!).
|
||||||
|
- Fix incorrect years in `CHANGELOG.md`.
|
||||||
|
|
||||||
|
# 0.6.1 (February 2, 2016)
|
||||||
|
|
||||||
- Simplify the instructions in `CHANGELOG.md`.
|
- Simplify the instructions in `CHANGELOG.md`.
|
||||||
- Rename `LICENSE.md` to `LICENSE`.
|
- Rename `LICENSE.md` to `LICENSE`.
|
||||||
- Update `README.md` content.
|
- Update `README.md` content.
|
||||||
|
|
||||||
# 0.6.0 (February 1, 2015)
|
# 0.6.0 (February 1, 2016)
|
||||||
|
|
||||||
- Update indentation and whitespace.
|
- Update indentation and whitespace.
|
||||||
- Add to npm.
|
- Add to npm.
|
||||||
|
120
index.html
120
index.html
@@ -1,4 +1,4 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
@@ -18,18 +18,23 @@
|
|||||||
<ul>
|
<ul>
|
||||||
<li><a href="#text__headings">Headings</a></li>
|
<li><a href="#text__headings">Headings</a></li>
|
||||||
<li><a href="#text__paragraphs">Paragraphs</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__lists">Lists</a></li>
|
||||||
|
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
||||||
|
<li><a href="#text__details">Details / Summary</a></li>
|
||||||
|
<li><a href="#text__address">Address</a></li>
|
||||||
<li><a href="#text__hr">Horizontal rules</a></li>
|
<li><a href="#text__hr">Horizontal rules</a></li>
|
||||||
<li><a href="#text__tables">Tabular data</a></li>
|
<li><a href="#text__tables">Tabular data</a></li>
|
||||||
<li><a href="#text__code">Code</a></li>
|
<li><a href="#text__code">Code</a></li>
|
||||||
<li><a href="#text__inline">Inline elements</a></li>
|
<li><a href="#text__inline">Inline elements</a></li>
|
||||||
|
<li><a href="#text__comments">HTML Comments</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href="#embedded">Embedded content</a>
|
<a href="#embedded">Embedded content</a>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
||||||
<li><a href="#embedded__images">Images</a></li>
|
<li><a href="#embedded__images">Images</a></li>
|
||||||
|
<li><a href="#embedded__bgimages">Background images</a></li>
|
||||||
<li><a href="#embedded__audio">Audio</a></li>
|
<li><a href="#embedded__audio">Audio</a></li>
|
||||||
<li><a href="#embedded__video">Video</a></li>
|
<li><a href="#embedded__video">Video</a></li>
|
||||||
<li><a href="#embedded__canvas">Canvas</a></li>
|
<li><a href="#embedded__canvas">Canvas</a></li>
|
||||||
@@ -37,6 +42,8 @@
|
|||||||
<li><a href="#embedded__progress">Progress</a></li>
|
<li><a href="#embedded__progress">Progress</a></li>
|
||||||
<li><a href="#embedded__svg">Inline SVG</a></li>
|
<li><a href="#embedded__svg">Inline SVG</a></li>
|
||||||
<li><a href="#embedded__iframe">IFrames</a></li>
|
<li><a href="#embedded__iframe">IFrames</a></li>
|
||||||
|
<li><a href="#embedded__embed">Embed</a></li>
|
||||||
|
<li><a href="#embedded__object">Object</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
@@ -77,17 +84,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</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">
|
<article id="text__lists">
|
||||||
<header><h1>Lists</h1></header>
|
<header><h1>Lists</h1></header>
|
||||||
<div>
|
<div>
|
||||||
@@ -111,6 +107,36 @@
|
|||||||
</div>
|
</div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</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__details">
|
||||||
|
<header><h1>Details / Summary</h1></header>
|
||||||
|
<details>
|
||||||
|
<summary>Expand for details</summary>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
|
||||||
|
</details>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
|
<article id="text__address">
|
||||||
|
<header><h1>Address</h1></header>
|
||||||
|
<address>
|
||||||
|
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
|
||||||
|
Visit us at:<br>
|
||||||
|
Example.com<br>
|
||||||
|
Box 564, Disneyland<br>
|
||||||
|
USA
|
||||||
|
</address>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<article id="text__hr">
|
<article id="text__hr">
|
||||||
<header><h1>Horizontal rules</h1></header>
|
<header><h1>Horizontal rules</h1></header>
|
||||||
<div>
|
<div>
|
||||||
@@ -206,33 +232,48 @@
|
|||||||
<p><small>This small text is small for for fine print, etc.</small></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>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><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><cite>This is a citation.</cite></p>
|
||||||
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
||||||
<p>The <mark>mark element</mark> indicates a highlight.</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 <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>
|
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
||||||
</div>
|
</div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
|
<article id="text__comments">
|
||||||
|
<header><h1>HTML Comments</h1></header>
|
||||||
|
<div>
|
||||||
|
<p>There is comment here: <!--This comment should not be displayed--></p>
|
||||||
|
<p>There is a comment spanning multiple tags and lines below here.</p>
|
||||||
|
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
|
||||||
|
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
|
||||||
|
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
|
||||||
|
</div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="embedded">
|
<section id="embedded">
|
||||||
<header><h1>Embedded content</h1></header>
|
<header><h1>Embedded content</h1></header>
|
||||||
<article id="embedded__images">
|
<article id="embedded__images">
|
||||||
<header><h2>Images</h2></header>
|
<header><h2>Images</h2></header>
|
||||||
<div>
|
<div>
|
||||||
<h3>No <code><figure></code> element</h3>
|
<h3>No <code><figure></code> element</h3>
|
||||||
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
|
<p><img src="https://placekitten.com/480/480" alt="Image alt text"></p>
|
||||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
||||||
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
|
<figure><img src="https://placekitten.com/420/420" alt="Image alt text"></figure>
|
||||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
||||||
<figure>
|
<figure>
|
||||||
<img src="http://placekitten.com/420/420" alt="Image alt text">
|
<img src="https://placekitten.com/420/420" alt="Image alt text">
|
||||||
<figcaption>Here is a caption for this image.</figcaption>
|
<figcaption>Here is a caption for this image.</figcaption>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
|
<article id="embedded__bgimages">
|
||||||
|
<header><h2>Background images</h2></header>
|
||||||
|
<div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<article id="embedded__audio">
|
<article id="embedded__audio">
|
||||||
<header><h2>Audio</h2></header>
|
<header><h2>Audio</h2></header>
|
||||||
<div><audio controls="">audio</audio></div>
|
<div><audio controls="">audio</audio></div>
|
||||||
@@ -268,6 +309,16 @@
|
|||||||
<div><iframe src="index.html" height="300"></iframe></div>
|
<div><iframe src="index.html" height="300"></iframe></div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
|
<article id="embedded__embed">
|
||||||
|
<header><h2>Embed</h2></header>
|
||||||
|
<div><embed src="index.html" height="300"></div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
|
<article id="embedded__object">
|
||||||
|
<header><h2>Object</h2></header>
|
||||||
|
<div><object data="index.html" height="300"></object></div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
<section id="forms">
|
<section id="forms">
|
||||||
<header><h1>Form elements</h1></header>
|
<header><h1>Form elements</h1></header>
|
||||||
@@ -284,7 +335,7 @@
|
|||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="input__webaddress">Web Address</label>
|
<label for="input__webaddress">Web Address</label>
|
||||||
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
|
<input id="input__webaddress" type="url" placeholder="https://yoursite.com">
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="input__emailaddress">Email Address</label>
|
<label for="input__emailaddress">Email Address</label>
|
||||||
@@ -310,6 +361,10 @@
|
|||||||
<label for="input__text4" class="valid">Valid</label>
|
<label for="input__text4" class="valid">Valid</label>
|
||||||
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
|
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="input__file" class="button">File Input</label>
|
||||||
|
<input id="input__file" type="file">
|
||||||
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
<fieldset id="forms__select">
|
<fieldset id="forms__select">
|
||||||
@@ -386,15 +441,30 @@
|
|||||||
<label for="idtl">Datetime-local input</label>
|
<label for="idtl">Datetime-local input</label>
|
||||||
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
||||||
</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<label for="idl">Datalist</label>
|
||||||
|
<input type="text" id="idl" list="example-list">
|
||||||
|
<datalist id="example-list">
|
||||||
|
<option value="Example #1">
|
||||||
|
<option value="Example #2">
|
||||||
|
<option value="Example #3">
|
||||||
|
</datalist>
|
||||||
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
<fieldset id="forms__action">
|
<fieldset id="forms__action">
|
||||||
<legend>Action buttons</legend>
|
<legend>Action buttons</legend>
|
||||||
<p>
|
<p>
|
||||||
<input type="submit" value="Input">
|
<input type="submit" value="<input type=submit>">
|
||||||
<button type="submit">Button</button>
|
<input type="button" value="<input type=button>">
|
||||||
<input type="reset" value="Reset">
|
<input type="reset" value="<input type=reset>">
|
||||||
<input type="submit" value="Disabled" disabled>
|
<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>
|
</p>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
@@ -402,7 +472,7 @@
|
|||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<footer role="contentinfo">
|
<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>
|
<p>Made by <a href="https://twitter.com/cbracco">@cbracco</a>. Code on <a href="https://github.com/cbracco/html5-test-page">GitHub</a>.</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "html5-test-page",
|
"name": "html5-test-page",
|
||||||
"version": "0.6.1",
|
"version": "0.9.1",
|
||||||
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
||||||
"main": "index.html",
|
"main": "index.html",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
Reference in New Issue
Block a user