mirror of
https://github.com/necolas/normalize.css.git
synced 2024-10-08 18:54:17 +00:00
225 lines
5.8 KiB
HTML
225 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1.0, maximum-scale=1.0">
|
|
<title>Normalize CSS</title>
|
|
<link rel="stylesheet" href="normalize.css" />
|
|
<link rel="stylesheet" href="normalize.metrics.css" />
|
|
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<hgroup>
|
|
<h1>
|
|
Header Group Heading 1
|
|
</h1>
|
|
<h2>
|
|
Header Group Heading 2
|
|
</h2>
|
|
</hgroup>
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
First Page
|
|
</li>
|
|
<li>
|
|
Second Page
|
|
</li>
|
|
<li>
|
|
Third Page
|
|
</li>
|
|
<li>
|
|
Last Page
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
|
|
<section>
|
|
<h1>
|
|
Section Heading 1
|
|
</h1>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
|
</p>
|
|
<p>
|
|
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
</p>
|
|
<h2>
|
|
Section Heading 2
|
|
</h2>
|
|
<p>
|
|
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
</p>
|
|
<h3>
|
|
Section Heading 3
|
|
</h3>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
|
</p>
|
|
</section>
|
|
|
|
<article>
|
|
<h4>
|
|
Article Heading 4
|
|
</h4>
|
|
<p>
|
|
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
</p>
|
|
<h5>
|
|
Article Heading 5
|
|
</h5>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
|
|
</p>
|
|
<h6>
|
|
Article Heading 6
|
|
</h6>
|
|
<p>
|
|
Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
|
|
</p>
|
|
</article>
|
|
|
|
<ol>
|
|
<li>
|
|
Sed ut perspiciatis unde
|
|
</li>
|
|
<li>
|
|
omnis iste natus error
|
|
</li>
|
|
<li>
|
|
sit voluptatem accusantium
|
|
</li>
|
|
</ol>
|
|
|
|
<ul>
|
|
<li>
|
|
doloremque laudantium
|
|
</li>
|
|
<li>
|
|
totam rem aperiam eaque
|
|
</li>
|
|
<li>
|
|
ipsa quae ab illo
|
|
</li>
|
|
</ul>
|
|
|
|
<dl>
|
|
<dt>
|
|
Definition list term #1
|
|
</dt>
|
|
<dd>
|
|
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</dd>
|
|
<dt>
|
|
Definition list term #2
|
|
</dt>
|
|
<dd>
|
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
</dd>
|
|
</dl>
|
|
|
|
<nav>
|
|
<ul>
|
|
<li>
|
|
<a href="#">navigation item #1</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">navigation item #2</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">navigation item #3</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</pre>
|
|
|
|
<div class="spacer"></div>
|
|
|
|
<p>
|
|
<cite>Confucius, The Confucian Cite</cite>, (551 BC - 479 BC)
|
|
</p>
|
|
|
|
<table summary="Jimi Hendrix albums">
|
|
<caption>
|
|
Jimi Hendrix - albums
|
|
</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Album</th>
|
|
<th>Year</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Album</th>
|
|
<th>Year</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Are You Experienced</td>
|
|
<td>1967</td>
|
|
<td>$10.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Axis: Bold as Love</td>
|
|
<td>1967</td>
|
|
<td>$12.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Electric Ladyland</td>
|
|
<td>1968</td>
|
|
<td>$10.00</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Band of Gypsys</td>
|
|
<td>1970</td>
|
|
<td>$12.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<p>
|
|
Lorem ipsum dolor <a href="#">a element</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur <abbr title="Title text">abbr element</abbr> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor <b>b element</b> sit amet, consectetur <i>i element</i> adipisicing elit, sed <s>s element</s> do eiusmod tempor <u>u element</u> incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor <code>code element</code> sit amet, consectetur <kbd>kbd element</kbd> adipisicing elit, sed <samp>samp element</samp> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur <strong>strong element</strong> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor <cite>cite element</cite> sit amet, consectetur <dfn>dfn element</dfn> adipisicing elit, sed <em>em element</em> do eiusmod tempor <q>q element</q> incididunt ut labore <var>var element</var> et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur <del>del element</del> adipisicing elit, sed <strike>strike element</strike> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur <ins>ins element</ins> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <sub>sub element</sub> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <sup>sup element</sup> et dolore magna aliqua.
|
|
</p>
|
|
</body>
|
|
</html> |