mirror of
https://github.com/cbracco/html5-test-page.git
synced 2025-08-22 13:43:10 +02:00
Compare commits
28 Commits
0.4.0
...
jKratzik-m
| Author | SHA1 | Date | |
|---|---|---|---|
|
1fecd23aa7 | ||
|
|
66a77835cc | ||
|
ab4675eae5 | ||
|
|
3b85be264e | ||
|
|
d4d5224177 | ||
|
|
23c3d5f7c9 | ||
|
ffd3e00512 | ||
|
|
3a0973f6fa | ||
|
|
58308fc6bd | ||
|
|
f54b5040be | ||
|
c7d89818d6 | ||
|
|
5ff15df75d | ||
|
|
5c388acf5e | ||
|
a6d11b25a2 | ||
|
|
e437f3a7c2 | ||
|
|
d0784b7184 | ||
|
|
334369bc88 | ||
|
|
c227c4daa6 | ||
|
|
bacedcf473 | ||
|
|
d9bb5636a4 | ||
|
|
c3cae26738 | ||
|
|
3a5d46820b | ||
|
|
6c099a4351 | ||
|
|
0d014c55f7 | ||
|
|
4727a9b233 | ||
|
|
5921d0d7c9 | ||
|
|
7f81d9f7a3 | ||
|
|
6314722406 |
37
CHANGELOG.md
37
CHANGELOG.md
@@ -1,3 +1,40 @@
|
|||||||
|
# 0.9.0 (March 19, 2018)
|
||||||
|
|
||||||
|
- 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`.
|
||||||
|
- Rename `LICENSE.md` to `LICENSE`.
|
||||||
|
- Update `README.md` content.
|
||||||
|
|
||||||
|
# 0.6.0 (February 1, 2016)
|
||||||
|
|
||||||
|
- Update indentation and whitespace.
|
||||||
|
- Add to npm.
|
||||||
|
|
||||||
|
# 0.5.0 (December 13, 2015)
|
||||||
|
|
||||||
|
- Update `<iframe>` source attribute to point to `index.html` (so meta).
|
||||||
|
- Add viewport `<meta>` tag to `<head>` of `index.html`.
|
||||||
|
|
||||||
|
# 0.4.0 (August 17, 2015)
|
||||||
|
|
||||||
|
- Add `<meter>` element (thanks @haroenv!). Reorganize a few existing elements.
|
||||||
|
|
||||||
# 0.3.1 (August 17, 2015)
|
# 0.3.1 (August 17, 2015)
|
||||||
|
|
||||||
- Change placeholder image dimensions to one that works properly (thanks @haroenv!).
|
- Change placeholder image dimensions to one that works properly (thanks @haroenv!).
|
||||||
|
|||||||
117
CONTRIBUTING.md
117
CONTRIBUTING.md
@@ -1,114 +1,7 @@
|
|||||||
# Contributing to this project
|
# Contributing Guidelines
|
||||||
|
|
||||||
*This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*
|
- ⇄ Pull requests and ★ Stars are always welcome.
|
||||||
|
- For bugs and feature requests, please create an issue.
|
||||||
|
- Pull requests must be accompanied by passing all existing automated tests (`$ npm test`).
|
||||||
|
|
||||||
Before making a contribution, please take a moment to review this document. It will make the process easier and more enjoyable for everyone involved.
|
Thanks in advance for helping out!
|
||||||
|
|
||||||
Following the guidelines in this document shows that you respect the time of the maintainers of this open-source project. In return, maintainers should show their respect for you by addressing your requests, issues, and contributions in a timely fashion.
|
|
||||||
|
|
||||||
## Submitting issues
|
|
||||||
|
|
||||||
GitHub’s built-in issue tracker is the preferred channel for bug reports, feature requests, and submitting pull requests.
|
|
||||||
|
|
||||||
**Do not** use the issue tracker for personal support questions. They will probably not be addressed.
|
|
||||||
**Do not** derail or troll issues. Please try to keep things on topic and be respectful to others.
|
|
||||||
|
|
||||||
## Bug reports
|
|
||||||
|
|
||||||
*Demo or it didn’t happen.*
|
|
||||||
|
|
||||||
A bug is a problem that you can demonstrate to a maintainer on this open-source project. Good bug reports are very helpful, and encouraged!
|
|
||||||
|
|
||||||
If you are thinking about reporting a bug, please do the following:
|
|
||||||
|
|
||||||
1. **Search for existing issues** - it could have already been reported.
|
|
||||||
2. **Check for fixes** - try to reproduce the bug using the latest release on the `master` branch in the repository.
|
|
||||||
3. **If the bug persists**, submit an issue and create a live example of the bug using a public service like [jsFiddle](http://jsfiddle.net) or [Codepen](http://codepen.io). Link to your example in the issue that you submit.
|
|
||||||
|
|
||||||
Please be as detailed as possible. Ask yourself: What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome?
|
|
||||||
|
|
||||||
## Feature requests
|
|
||||||
|
|
||||||
Feel free to request whatever you like, but please take a moment to think about whether your request is within the scope of the project. You should make a strong case for your request, otherwise the maintaining developers will probably not consider it. Provide as much detail as you can.
|
|
||||||
|
|
||||||
## Pull requests
|
|
||||||
|
|
||||||
Good pull requests are awesome. Bad pull requests are a headache. They should always be limited by the scope of the request, and avoid including unrelated commits.
|
|
||||||
|
|
||||||
**Please file an issue first** before deciding to do a lot of work. Otherwise, you run the risk of wasting time working on something that might not get merged into the project.
|
|
||||||
|
|
||||||
Follow this process if you’d like your work to be considered for inclusion in the project:
|
|
||||||
|
|
||||||
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
|
|
||||||
and configure the remotes:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# Clone your fork of the repo into the current directory
|
|
||||||
git clone https://github.com/<your-username>/html5-test-page
|
|
||||||
# Navigate to the newly cloned directory
|
|
||||||
cd html5-test-page
|
|
||||||
# Assign the original repo to a remote called "upstream"
|
|
||||||
git remote add upstream https://github.com/cbracco/html5-test-page
|
|
||||||
```
|
|
||||||
|
|
||||||
2. If you cloned a while ago, get the latest changes from upstream:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git checkout master
|
|
||||||
git pull upstream master
|
|
||||||
```
|
|
||||||
|
|
||||||
3. **Never work directly on `master`**. Create a new topic branch (off the latest version of `master`) to contain your feature, change, or fix:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git checkout -b <topic-branch-name>
|
|
||||||
```
|
|
||||||
|
|
||||||
4. Commit your changes in logical chunks. Please adhere to these [git commit
|
|
||||||
message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
|
|
||||||
or your code is unlikely be merged into the main project. Use Git’s
|
|
||||||
[interactive rebase](https://help.github.com/articles/interactive-rebase)
|
|
||||||
feature to tidy up your commits before making them public.
|
|
||||||
|
|
||||||
Please add a test to the `test.html` file if appropriate, and test
|
|
||||||
your change(s) in all supported browsers.
|
|
||||||
|
|
||||||
5. Locally rebase the upstream development branch into your topic branch:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git pull --rebase upstream master
|
|
||||||
```
|
|
||||||
|
|
||||||
6. Push your topic branch up to your fork:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
git push origin <topic-branch-name>
|
|
||||||
```
|
|
||||||
|
|
||||||
10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description.
|
|
||||||
|
|
||||||
**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
|
|
||||||
license your work under the same license as that used by the project.
|
|
||||||
|
|
||||||
## Maintainers
|
|
||||||
|
|
||||||
If you have commit access, please follow this process for merging patches and
|
|
||||||
cutting new releases.
|
|
||||||
|
|
||||||
### Accepting patches
|
|
||||||
|
|
||||||
1. Check that a patch is within the scope and philosophy of the project.
|
|
||||||
2. Check that a patch has any necessary tests and a proper, descriptive commit
|
|
||||||
message.
|
|
||||||
3. Test the patch locally.
|
|
||||||
4. Do not use GitHub’s merge button. Apply the patch to `master` locally
|
|
||||||
(either via `git am` or by checking the whole branch out). Amend minor
|
|
||||||
problems with the author’s original commit if necessary. Then push to GitHub.
|
|
||||||
|
|
||||||
### Releasing a new version
|
|
||||||
|
|
||||||
1. Include all new functional changes in the CHANGELOG.
|
|
||||||
2. Use a dedicated commit to increment the version. The version needs to be added to the `README.md` and `CHANGELOG.md` (inc. date) files.
|
|
||||||
3. The commit message must be of `v0.0.0` format.
|
|
||||||
4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`.
|
|
||||||
5. Push the changes and tags to GitHub: `git push --tags origin master`
|
|
||||||
|
|||||||
20
README.md
20
README.md
@@ -1,10 +1,10 @@
|
|||||||
# HTML5 Test Page
|
# HTML5 Test Page
|
||||||
|
|
||||||
|
[](https://badge.fury.io/js/html5-test-page)
|
||||||
|
|
||||||
This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
|
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.
|
I have not been able to find a dead-simple, standalone test page out there, so I made one. The HTML elements are loosely categorized as either text, embedded content, or form elements.
|
||||||
|
|
||||||
The HTML elements are loosely categorized as either text, embedded content, or form elements.
|
|
||||||
|
|
||||||
## Versioning
|
## Versioning
|
||||||
|
|
||||||
@@ -16,16 +16,10 @@ HTML5 Test Page will be maintained using the [Semantic Versioning](http://semver
|
|||||||
* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
|
* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
|
||||||
* Bug fixes and other small changes increment `patch`.
|
* Bug fixes and other small changes increment `patch`.
|
||||||
|
|
||||||
## Contributing
|
## Credits
|
||||||
|
|
||||||
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!
|
Made by [@cbracco](http://cbracco.me). This project is based on the [test file](https://github.com/necolas/normalize.css/blob/master/test.html) included in [@necolas](https://github.com/necolas/)’s [normalize.css](https://github.com/necolas/normalize.css/) project.
|
||||||
|
|
||||||
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.
|
## [Contributing](CONTRIBUTING.md)
|
||||||
|
|
||||||
## License
|
## [License](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://cbracco.me).
|
|
||||||
|
|||||||
942
index.html
942
index.html
@@ -1,488 +1,472 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>HTML5 Test Page</title>
|
<title>HTML5 Test Page</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="top" class="page" role="document">
|
<div id="top" class="page" role="document">
|
||||||
<header role="banner">
|
<header role="banner">
|
||||||
<h1>HTML5 Test Page</h1>
|
<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>
|
<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>
|
</header>
|
||||||
|
<nav role="navigation">
|
||||||
<nav role="navigation">
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="#text">Text</a>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li><a href="#text__headings">Headings</a></li>
|
||||||
<a href="#text">Text</a>
|
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
||||||
<ul>
|
<li><a href="#text__lists">Lists</a></li>
|
||||||
<li><a href="#text__headings">Headings</a></li>
|
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
||||||
<li><a href="#text__paragraphs">Paragraphs</a></li>
|
<li><a href="#text__details">Details / Summary</a></li>
|
||||||
<li><a href="#text__blockquotes">Blockquotes</a></li>
|
<li><a href="#text__address">Address</a></li>
|
||||||
<li><a href="#text__lists">Lists</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>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#embedded">Embedded content</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#embedded__images">Images</a></li>
|
|
||||||
<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__meter">Meter</a></li>
|
|
||||||
<li><a href="#embedded__progress">Progress</a></li>
|
|
||||||
<li><a href="#embedded__svg">Inline SVG</a></li>
|
|
||||||
<li><a href="#embedded__iframe">IFrames</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="#forms">Form elements</a>
|
|
||||||
<ul>
|
|
||||||
<li><a href="#forms__input">Input 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__textareas">Textareas</a></li>
|
|
||||||
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
|
||||||
<li><a href="#forms__action">Action buttons</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</li>
|
||||||
|
<li>
|
||||||
<main role="main">
|
<a href="#embedded">Embedded content</a>
|
||||||
<section id="text">
|
<ul>
|
||||||
<header><h1>Text</h1></header>
|
<li><a href="#embedded__images">Images</a></li>
|
||||||
|
<li><a href="#embedded__audio">Audio</a></li>
|
||||||
<article id="text__headings">
|
<li><a href="#embedded__video">Video</a></li>
|
||||||
<header>
|
<li><a href="#embedded__canvas">Canvas</a></li>
|
||||||
<h1>Headings</h1>
|
<li><a href="#embedded__meter">Meter</a></li>
|
||||||
</header>
|
<li><a href="#embedded__progress">Progress</a></li>
|
||||||
|
<li><a href="#embedded__svg">Inline SVG</a></li>
|
||||||
<div>
|
<li><a href="#embedded__iframe">IFrames</a></li>
|
||||||
<h1>Heading 1</h1>
|
<li><a href="#embedded__embed">Embed</a></li>
|
||||||
<h2>Heading 2</h2>
|
<li><a href="#embedded__object">Object</a></li>
|
||||||
<h3>Heading 3</h3>
|
</ul>
|
||||||
<h4>Heading 4</h4>
|
</li>
|
||||||
<h5>Heading 5</h5>
|
<li>
|
||||||
<h6>Heading 6</h6>
|
<a href="#forms">Form elements</a>
|
||||||
</div>
|
<ul>
|
||||||
|
<li><a href="#forms__input">Input fields</a></li>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<li><a href="#forms__select">Select menus</a></li>
|
||||||
</article>
|
<li><a href="#forms__checkbox">Checkboxes</a></li>
|
||||||
|
<li><a href="#forms__radio">Radio buttons</a></li>
|
||||||
<article id="text__paragraphs">
|
<li><a href="#forms__textareas">Textareas</a></li>
|
||||||
<header><h1>Paragraphs</h1></header>
|
<li><a href="#forms__html5">HTML5 inputs</a></li>
|
||||||
|
<li><a href="#forms__action">Action buttons</a></li>
|
||||||
<div>
|
</ul>
|
||||||
<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>
|
</li>
|
||||||
</div>
|
</ul>
|
||||||
|
</nav>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<main role="main">
|
||||||
</article>
|
<section id="text">
|
||||||
|
<header><h1>Text</h1></header>
|
||||||
<article id="text__blockquotes">
|
<article id="text__headings">
|
||||||
<header><h1>Blockquotes</h1></header>
|
<header>
|
||||||
|
<h1>Headings</h1>
|
||||||
<div>
|
</header>
|
||||||
<blockquote>
|
<div>
|
||||||
<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>
|
<h1>Heading 1</h1>
|
||||||
<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>
|
<h2>Heading 2</h2>
|
||||||
<cite><a href="#!">Said no one, ever.</a></cite>
|
<h3>Heading 3</h3>
|
||||||
</blockquote>
|
<h4>Heading 4</h4>
|
||||||
</div>
|
<h5>Heading 5</h5>
|
||||||
|
<h6>Heading 6</h6>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
</div>
|
||||||
</article>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<article id="text__lists">
|
<article id="text__paragraphs">
|
||||||
<header><h1>Lists</h1></header>
|
<header><h1>Paragraphs</h1></header>
|
||||||
|
<div>
|
||||||
<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>
|
||||||
<h3>Definition list</h3>
|
</div>
|
||||||
<dl>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<dt>Definition List Title</dt>
|
</article>
|
||||||
<dd>This is a definition list division.</dd>
|
<article id="text__lists">
|
||||||
</dl>
|
<header><h1>Lists</h1></header>
|
||||||
|
<div>
|
||||||
<h3>Ordered List</h3>
|
<h3>Definition list</h3>
|
||||||
<ol>
|
<dl>
|
||||||
<li>List Item 1</li>
|
<dt>Definition List Title</dt>
|
||||||
<li>List Item 2</li>
|
<dd>This is a definition list division.</dd>
|
||||||
<li>List Item 3</li>
|
</dl>
|
||||||
</ol>
|
<h3>Ordered List</h3>
|
||||||
|
<ol>
|
||||||
<h3>Unordered List</h3>
|
<li>List Item 1</li>
|
||||||
<ul>
|
<li>List Item 2</li>
|
||||||
<li>List Item 1</li>
|
<li>List Item 3</li>
|
||||||
<li>List Item 2</li>
|
</ol>
|
||||||
<li>List Item 3</li>
|
<h3>Unordered List</h3>
|
||||||
</ul>
|
<ul>
|
||||||
</div>
|
<li>List Item 1</li>
|
||||||
|
<li>List Item 2</li>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<li>List Item 3</li>
|
||||||
</article>
|
</ul>
|
||||||
|
</div>
|
||||||
<article id="text__hr">
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<header><h1>Horizontal rules</h1></header>
|
</article>
|
||||||
|
<article id="text__blockquotes">
|
||||||
<div>
|
<header><h1>Blockquotes</h1></header>
|
||||||
<hr>
|
<div>
|
||||||
</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>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<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>
|
||||||
</article>
|
<cite><a href="#!">Said no one, ever.</a></cite>
|
||||||
|
</blockquote>
|
||||||
<article id="text__tables">
|
</div>
|
||||||
<header><h1>Tabular data</h1></header>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<table>
|
<article id="text__details">
|
||||||
<caption>Table Caption</caption>
|
<header><h1>Details / Summary</h1></header>
|
||||||
<thead>
|
<details>
|
||||||
<tr>
|
<summary>Expand for details</summary>
|
||||||
<th>Table Heading 1</th>
|
<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>
|
||||||
<th>Table Heading 2</th>
|
</details>
|
||||||
<th>Table Heading 3</th>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<th>Table Heading 4</th>
|
</article>
|
||||||
<th>Table Heading 5</th>
|
<article id="text__address">
|
||||||
</tr>
|
<header><h1>Address</h1></header>
|
||||||
</thead>
|
<address>
|
||||||
|
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
|
||||||
<tfoot>
|
Visit us at:<br>
|
||||||
<tr>
|
Example.com<br>
|
||||||
<th>Table Footer 1</th>
|
Box 564, Disneyland<br>
|
||||||
<th>Table Footer 2</th>
|
USA
|
||||||
<th>Table Footer 3</th>
|
</address>
|
||||||
<th>Table Footer 4</th>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<th>Table Footer 5</th>
|
</article>
|
||||||
</tr>
|
<article id="text__hr">
|
||||||
</tfoot>
|
<header><h1>Horizontal rules</h1></header>
|
||||||
|
<div>
|
||||||
<tbody>
|
<hr>
|
||||||
<tr>
|
</div>
|
||||||
<td>Table Cell 1</td>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<td>Table Cell 2</td>
|
</article>
|
||||||
<td>Table Cell 3</td>
|
<article id="text__tables">
|
||||||
<td>Table Cell 4</td>
|
<header><h1>Tabular data</h1></header>
|
||||||
<td>Table Cell 5</td>
|
<table>
|
||||||
</tr>
|
<caption>Table Caption</caption>
|
||||||
<tr>
|
<thead>
|
||||||
<td>Table Cell 1</td>
|
<tr>
|
||||||
<td>Table Cell 2</td>
|
<th>Table Heading 1</th>
|
||||||
<td>Table Cell 3</td>
|
<th>Table Heading 2</th>
|
||||||
<td>Table Cell 4</td>
|
<th>Table Heading 3</th>
|
||||||
<td>Table Cell 5</td>
|
<th>Table Heading 4</th>
|
||||||
</tr>
|
<th>Table Heading 5</th>
|
||||||
<tr>
|
</tr>
|
||||||
<td>Table Cell 1</td>
|
</thead>
|
||||||
<td>Table Cell 2</td>
|
<tfoot>
|
||||||
<td>Table Cell 3</td>
|
<tr>
|
||||||
<td>Table Cell 4</td>
|
<th>Table Footer 1</th>
|
||||||
<td>Table Cell 5</td>
|
<th>Table Footer 2</th>
|
||||||
</tr>
|
<th>Table Footer 3</th>
|
||||||
<tr>
|
<th>Table Footer 4</th>
|
||||||
<td>Table Cell 1</td>
|
<th>Table Footer 5</th>
|
||||||
<td>Table Cell 2</td>
|
</tr>
|
||||||
<td>Table Cell 3</td>
|
</tfoot>
|
||||||
<td>Table Cell 4</td>
|
<tbody>
|
||||||
<td>Table Cell 5</td>
|
<tr>
|
||||||
</tr>
|
<td>Table Cell 1</td>
|
||||||
</tbody>
|
<td>Table Cell 2</td>
|
||||||
</table>
|
<td>Table Cell 3</td>
|
||||||
|
<td>Table Cell 4</td>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<td>Table Cell 5</td>
|
||||||
</article>
|
</tr>
|
||||||
|
<tr>
|
||||||
<article id="text__code">
|
<td>Table Cell 1</td>
|
||||||
<header><h1>Code</h1></header>
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
<div>
|
<td>Table Cell 4</td>
|
||||||
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
<td>Table Cell 5</td>
|
||||||
<p><strong>Inline code:</strong> <code><div>code</div></code></p>
|
</tr>
|
||||||
<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
|
<tr>
|
||||||
|
<td>Table Cell 1</td>
|
||||||
<h2>Pre-formatted text</h2>
|
<td>Table Cell 2</td>
|
||||||
|
<td>Table Cell 3</td>
|
||||||
<pre>P R E F O R M A T T E D T E X T
|
<td>Table Cell 4</td>
|
||||||
! " # $ % & ' ( ) * + , - . /
|
<td>Table Cell 5</td>
|
||||||
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
</tr>
|
||||||
@ A B C D E F G H I J K L M N O
|
<tr>
|
||||||
P Q R S T U V W X Y Z [ \ ] ^ _
|
<td>Table Cell 1</td>
|
||||||
` a b c d e f g h i j k l m n o
|
<td>Table Cell 2</td>
|
||||||
p q r s t u v w x y z { | } ~ </pre>
|
<td>Table Cell 3</td>
|
||||||
</div>
|
<td>Table Cell 4</td>
|
||||||
|
<td>Table Cell 5</td>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
</tr>
|
||||||
</article>
|
</tbody>
|
||||||
|
</table>
|
||||||
<article id="text__inline">
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<header><h1>Inline elements</h1></header>
|
</article>
|
||||||
|
<article id="text__code">
|
||||||
<div>
|
<header><h1>Code</h1></header>
|
||||||
<p><a href="#!">This is a text link</a>.</p>
|
<div>
|
||||||
|
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
|
||||||
<p><strong>Strong is used to indicate strong importance.</strong></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>
|
||||||
<p><em>This text has added emphasis.</em></p>
|
<h2>Pre-formatted text</h2>
|
||||||
|
<pre>P R E F O R M A T T E D T E X T
|
||||||
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
|
! " # $ % & ' ( ) * + , - . /
|
||||||
|
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
|
||||||
<p>The <i>i element</i> is text that is offset from the normal text.</p>
|
@ 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 [ \ ] ^ _
|
||||||
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
|
` 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>
|
||||||
<p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
|
</div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<p><s>This text has a strikethrough</s>.</p>
|
</article>
|
||||||
|
<article id="text__inline">
|
||||||
<p>Superscript<sup>®</sup>.</p>
|
<header><h1>Inline elements</h1></header>
|
||||||
|
<div>
|
||||||
<p>Subscript for things like H<sub>2</sub>O.</p>
|
<p><a href="#!">This is a text link</a>.</p>
|
||||||
|
<p><strong>Strong is used to indicate strong importance.</strong></p>
|
||||||
<p><small>This small text is small for for fine print, etc.</small></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>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></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><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></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><cite>This is a citation.</cite>
|
<p>Superscript<sup>®</sup>.</p>
|
||||||
|
<p>Subscript for things like H<sub>2</sub>O.</p>
|
||||||
</p><p>The <dfn>dfn element</dfn> indicates a definition.</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>The <mark>mark element</mark> indicates a highlight.</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 <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
|
||||||
|
<p>The <mark>mark element</mark> indicates a highlight.</p>
|
||||||
<p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
|
<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
|
||||||
</div>
|
<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>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
</section>
|
<article id="text__comments">
|
||||||
|
<header><h1>HTML Comments</h1></header>
|
||||||
<section id="embedded">
|
<div>
|
||||||
<header><h1>Embedded content</h1></header>
|
<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>
|
||||||
<article id="embedded__images">
|
<!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
|
||||||
<header><h2>Images</h2></header>
|
<p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
|
||||||
<div>
|
<p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
|
||||||
<h3>No <code><figure></code> element</h3>
|
</div>
|
||||||
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<h3>Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>
|
</article>
|
||||||
<figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
|
</section>
|
||||||
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
<section id="embedded">
|
||||||
<figure>
|
<header><h1>Embedded content</h1></header>
|
||||||
<img src="http://placekitten.com/420/420" alt="Image alt text">
|
<article id="embedded__images">
|
||||||
<figcaption>Here is a caption for this image.</figcaption>
|
<header><h2>Images</h2></header>
|
||||||
</figure>
|
<div>
|
||||||
</div>
|
<h3>No <code><figure></code> element</h3>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
|
||||||
</article>
|
<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>
|
||||||
<article id="embedded__audio">
|
<h3>Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>
|
||||||
<header><h2>Audio</h2></header>
|
<figure>
|
||||||
<div><audio controls="">audio</audio></div>
|
<img src="http://placekitten.com/420/420" alt="Image alt text">
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<figcaption>Here is a caption for this image.</figcaption>
|
||||||
</article>
|
</figure>
|
||||||
|
</div>
|
||||||
<article id="embedded__video">
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<header><h2>Video</h2></header>
|
</article>
|
||||||
<div><video controls="">video</video></div>
|
<article id="embedded__audio">
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<header><h2>Audio</h2></header>
|
||||||
</article>
|
<div><audio controls="">audio</audio></div>
|
||||||
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<article id="embedded__canvas">
|
</article>
|
||||||
<header><h2>Canvas</h2></header>
|
<article id="embedded__video">
|
||||||
<div><canvas>canvas</canvas></div>
|
<header><h2>Video</h2></header>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<div><video controls="">video</video></div>
|
||||||
</article>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<article id="embedded__meter">
|
<article id="embedded__canvas">
|
||||||
<header><h2>Meter</h2></header>
|
<header><h2>Canvas</h2></header>
|
||||||
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
|
<div><canvas>canvas</canvas></div>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
</article>
|
</article>
|
||||||
|
<article id="embedded__meter">
|
||||||
<article id="embedded__progress">
|
<header><h2>Meter</h2></header>
|
||||||
<header><h2>Progress</h2></header>
|
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
|
||||||
<div><progress>progress</progress></div>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
</article>
|
||||||
</article>
|
<article id="embedded__progress">
|
||||||
|
<header><h2>Progress</h2></header>
|
||||||
<article id="embedded__svg">
|
<div><progress>progress</progress></div>
|
||||||
<header><h2>Inline SVG</h2></header>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
|
</article>
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<article id="embedded__svg">
|
||||||
</article>
|
<header><h2>Inline SVG</h2></header>
|
||||||
|
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
|
||||||
<article id="embedded__iframe">
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<header><h2>IFrame</h2></header>
|
</article>
|
||||||
<div><iframe src="http://www.google.com" height="300"></iframe></div>
|
<article id="embedded__iframe">
|
||||||
<footer><p><a href="#top">[Top]</a></p></footer>
|
<header><h2>IFrame</h2></header>
|
||||||
</article>
|
<div><iframe src="index.html" height="300"></iframe></div>
|
||||||
</section>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
|
</article>
|
||||||
<section id="forms">
|
<article id="embedded__embed">
|
||||||
<header><h1>Form elements</h1></header>
|
<header><h2>Embed</h2></header>
|
||||||
|
<div><embed src="index.html" height="300"></div>
|
||||||
<form>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<fieldset id="forms__input">
|
</article>
|
||||||
<legend>Input fields</legend>
|
<article id="embedded__object">
|
||||||
|
<header><h2>Object</h2></header>
|
||||||
<p>
|
<div><object data="index.html" height="300"></object></div>
|
||||||
<label for="input__text">Text Input</label>
|
<footer><p><a href="#top">[Top]</a></p></footer>
|
||||||
<input id="input__text" type="text" placeholder="Text Input">
|
</article>
|
||||||
</p>
|
</section>
|
||||||
<p>
|
<section id="forms">
|
||||||
<label for="input__password">Password</label>
|
<header><h1>Form elements</h1></header>
|
||||||
<input id="input__password" type="password" placeholder="Type your Password">
|
<form>
|
||||||
</p>
|
<fieldset id="forms__input">
|
||||||
<p>
|
<legend>Input fields</legend>
|
||||||
<label for="input__webaddress">Web Address</label>
|
<p>
|
||||||
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
|
<label for="input__text">Text Input</label>
|
||||||
</p>
|
<input id="input__text" type="text" placeholder="Text Input">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__emailaddress">Email Address</label>
|
<p>
|
||||||
<input id="input__emailaddress" type="email" placeholder="name@email.com">
|
<label for="input__password">Password</label>
|
||||||
</p>
|
<input id="input__password" type="password" placeholder="Type your Password">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__phone">Phone Number</label>
|
<p>
|
||||||
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
|
<label for="input__webaddress">Web Address</label>
|
||||||
</p>
|
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__search">Search</label>
|
<p>
|
||||||
<input id="input__search" type="search" placeholder="Enter Search Term">
|
<label for="input__emailaddress">Email Address</label>
|
||||||
</p>
|
<input id="input__emailaddress" type="email" placeholder="name@email.com">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__text2">Number Input</label>
|
<p>
|
||||||
<input id="input__text2" type="number" placeholder="Enter a Number">
|
<label for="input__phone">Phone Number</label>
|
||||||
</p>
|
<input id="input__phone" type="tel" placeholder="(999) 999-9999">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__text3" class="error">Error</label>
|
<p>
|
||||||
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
|
<label for="input__search">Search</label>
|
||||||
</p>
|
<input id="input__search" type="search" placeholder="Enter Search Term">
|
||||||
<p>
|
</p>
|
||||||
<label for="input__text4" class="valid">Valid</label>
|
<p>
|
||||||
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
|
<label for="input__text2">Number Input</label>
|
||||||
</p>
|
<input id="input__text2" type="number" placeholder="Enter a Number">
|
||||||
</fieldset>
|
</p>
|
||||||
|
<p>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<label for="input__text3" class="error">Error</label>
|
||||||
|
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">
|
||||||
<fieldset id="forms__select">
|
</p>
|
||||||
<legend>Select menus</legend>
|
<p>
|
||||||
|
<label for="input__text4" class="valid">Valid</label>
|
||||||
<p>
|
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
|
||||||
<label for="select">Select</label>
|
</p>
|
||||||
<select id="select">
|
<p>
|
||||||
<optgroup label="Option Group">
|
<label for="input__file" class="button">File Input</label>
|
||||||
<option>Option One</option>
|
<input id="input__file" type="file">
|
||||||
<option>Option Two</option>
|
</p>
|
||||||
<option>Option Three</option>
|
</fieldset>
|
||||||
</optgroup>
|
<p><a href="#top">[Top]</a></p>
|
||||||
</select>
|
<fieldset id="forms__select">
|
||||||
</p>
|
<legend>Select menus</legend>
|
||||||
</fieldset>
|
<p>
|
||||||
|
<label for="select">Select</label>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<select id="select">
|
||||||
|
<optgroup label="Option Group">
|
||||||
<fieldset id="forms__checkbox">
|
<option>Option One</option>
|
||||||
<legend>Checkboxes</legend>
|
<option>Option Two</option>
|
||||||
|
<option>Option Three</option>
|
||||||
<ul class="list list--bare">
|
</optgroup>
|
||||||
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
</select>
|
||||||
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
</p>
|
||||||
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
</fieldset>
|
||||||
</ul>
|
<p><a href="#top">[Top]</a></p>
|
||||||
</fieldset>
|
<fieldset id="forms__checkbox">
|
||||||
|
<legend>Checkboxes</legend>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<ul class="list list--bare">
|
||||||
|
<li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
|
||||||
<fieldset id="forms__radio">
|
<li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
|
||||||
<legend>Radio buttons</legend>
|
<li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
|
||||||
|
</ul>
|
||||||
<ul class="list list--bare">
|
</fieldset>
|
||||||
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
|
<p><a href="#top">[Top]</a></p>
|
||||||
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
|
<fieldset id="forms__radio">
|
||||||
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
|
<legend>Radio buttons</legend>
|
||||||
</ul>
|
<ul class="list list--bare">
|
||||||
</fieldset>
|
<li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
|
||||||
|
<li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
|
||||||
|
</ul>
|
||||||
<fieldset id="forms__textareas">
|
</fieldset>
|
||||||
<legend>Textareas</legend>
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__textareas">
|
||||||
<p>
|
<legend>Textareas</legend>
|
||||||
<label for="textarea">Textarea</label>
|
<p>
|
||||||
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
|
<label for="textarea">Textarea</label>
|
||||||
</p>
|
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
|
||||||
</fieldset>
|
</p>
|
||||||
|
</fieldset>
|
||||||
<p><a href="#top">[Top]</a></p>
|
<p><a href="#top">[Top]</a></p>
|
||||||
|
<fieldset id="forms__html5">
|
||||||
<fieldset id="forms__html5">
|
<legend>HTML5 inputs</legend>
|
||||||
<legend>HTML5 inputs</legend>
|
<p>
|
||||||
|
<label for="ic">Color input</label>
|
||||||
<p>
|
<input type="color" id="ic" value="#000000">
|
||||||
<label for="ic">Color input</label>
|
</p>
|
||||||
<input type="color" id="ic" value="#000000">
|
<p>
|
||||||
</p>
|
<label for="in">Number input</label>
|
||||||
<p>
|
<input type="number" id="in" min="0" max="10" value="5">
|
||||||
<label for="in">Number input</label>
|
</p>
|
||||||
<input type="number" id="in" min="0" max="10" value="5">
|
<p>
|
||||||
</p>
|
<label for="ir">Range input</label>
|
||||||
<p>
|
<input type="range" id="ir" value="10">
|
||||||
<label for="ir">Range input</label>
|
</p>
|
||||||
<input type="range" id="ir" value="10">
|
<p>
|
||||||
</p>
|
<label for="idd">Date input</label>
|
||||||
<p>
|
<input type="date" id="idd" value="1970-01-01">
|
||||||
<label for="idd">Date input</label>
|
</p>
|
||||||
<input type="date" id="idd" value="1970-01-01">
|
<p>
|
||||||
</p>
|
<label for="idm">Month input</label>
|
||||||
<p>
|
<input type="month" id="idm" value="1970-01">
|
||||||
<label for="idm">Month input</label>
|
</p>
|
||||||
<input type="month" id="idm" value="1970-01">
|
<p>
|
||||||
</p>
|
<label for="idw">Week input</label>
|
||||||
<p>
|
<input type="week" id="idw" value="1970-W01">
|
||||||
<label for="idw">Week input</label>
|
</p>
|
||||||
<input type="week" id="idw" value="1970-W01">
|
<p>
|
||||||
</p>
|
<label for="idt">Datetime input</label>
|
||||||
<p>
|
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
|
||||||
<label for="idt">Datetime input</label>
|
</p>
|
||||||
<input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
|
<p>
|
||||||
</p>
|
<label for="idtl">Datetime-local input</label>
|
||||||
<p>
|
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
||||||
<label for="idtl">Datetime-local input</label>
|
</p>
|
||||||
<input type="datetime-local" id="idtl" value="1970-01-01T00:00">
|
<p>
|
||||||
</p>
|
<label for="idl">Datalist</label>
|
||||||
</fieldset>
|
<input type="text" id="idl" list="example-list">
|
||||||
|
<datalist id="example-list">
|
||||||
<p><a href="#top">[Top]</a></p>
|
<option value="Example #1">
|
||||||
|
<option value="Example #2">
|
||||||
<fieldset id="forms__action">
|
<option value="Example #3">
|
||||||
<legend>Action buttons</legend>
|
</datalist>
|
||||||
|
</p>
|
||||||
<p>
|
</fieldset>
|
||||||
<input type="submit" value="Input">
|
<p><a href="#top">[Top]</a></p>
|
||||||
<button type="submit">Button</button>
|
<fieldset id="forms__action">
|
||||||
<input type="reset" value="Reset">
|
<legend>Action buttons</legend>
|
||||||
<input type="submit" value="Disabled" disabled>
|
<p>
|
||||||
</p>
|
<input type="submit" value="<input type=submit>">
|
||||||
</fieldset>
|
<input type="button" value="<input type=button>">
|
||||||
|
<input type="reset" value="<input type=reset>">
|
||||||
<p><a href="#top">[Top]</a></p>
|
<input type="submit" value="<input disabled>" disabled>
|
||||||
</form>
|
</p>
|
||||||
</section>
|
<p>
|
||||||
</main>
|
<button type="submit"><button type=submit></button>
|
||||||
|
<button type="button"><button type=button></button>
|
||||||
<footer role="contentinfo">
|
<button type="reset"><button type=reset></button>
|
||||||
<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>
|
<button type="button" disabled><button disabled></button>
|
||||||
</footer>
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
<p><a href="#top">[Top]</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>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
24
package.json
Normal file
24
package.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"name": "html5-test-page",
|
||||||
|
"version": "0.9.0",
|
||||||
|
"description": "A page filled with common HTML elements to be used for testing purposes.",
|
||||||
|
"main": "index.html",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/cbracco/html5-test-page.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"HTML5",
|
||||||
|
"test",
|
||||||
|
"page"
|
||||||
|
],
|
||||||
|
"author": "Chris Bracco",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/cbracco/html5-test-page/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/cbracco/html5-test-page#readme"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user