mirror of
https://github.com/necolas/normalize.css.git
synced 2024-12-25 15:14:19 +00:00
178 lines
8.2 KiB
HTML
178 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, minimum-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>Grouped Heading 1</h1>
|
|
<h2>Grouped Heading 2</h2>
|
|
</hgroup>
|
|
<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>
|
|
</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>
|
|
|
|
<p>
|
|
The <a href="#">a element</a> example<br>
|
|
The <abbr title="Title text">abbr element</abbr> example<br>
|
|
The <b>b element</b> example<br>
|
|
The <cite>cite element</cite> example<br>
|
|
The <code>code element</code> example<br>
|
|
The <del>del element</del> example<br>
|
|
The <dfn>dfn element</dfn> example<br>
|
|
The <em>em element</em> example<br>
|
|
The <i>i element</i> example<br>
|
|
The img element <img src="http://placehold.it/16x16" alt=""> example<br>
|
|
The <ins>ins element</ins> example<br>
|
|
The <kbd>kbd element</kbd> example<br>
|
|
The <mark>mark element</mark> example<br>
|
|
The <q>q element <q>inside</q> a q element</q> example<br>
|
|
The <s>s element</s> example<br>
|
|
The <samp>samp element</samp> example<br>
|
|
The <small>small element</small> example<br>
|
|
The <span>span element</span> example<br>
|
|
The <strike>strike element</strike> example<br>
|
|
The <strong>strong element</strong> example<br>
|
|
The <sub>sub element</sub> example<br>
|
|
The <sup>sup element</sup> example<br>
|
|
The <var>var element</var> example<br>
|
|
The <u>u element</u> example
|
|
</p>
|
|
|
|
<address>Address: somewhere, World</address>
|
|
|
|
<blockquote>
|
|
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
|
|
</blockquote>
|
|
|
|
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>
|
|
|
|
<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>
|
|
|
|
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
|
|
<pre><code><html></code>
|
|
<code><head></code>
|
|
<code></head></code>
|
|
<code><body></code>
|
|
<code><div class="main"> <div></code>
|
|
<code></body></code>
|
|
<code></html></code></pre>
|
|
|
|
<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>
|
|
|
|
<form action="#">
|
|
<fieldset>
|
|
<legend>Form legend</legend>
|
|
<div><label for="i1">Optional Text input:</label><input type="text" id="i1" value="input text"></div>
|
|
<div><label for="i2">Required Text input:</label><input type="text" id="i2" required></div>
|
|
<div><label for="i3">Text input with pattern requirement and placeholder:</label><input type="text" id="i3" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"></div>
|
|
<div><label for="i4">Search input:</label><input type="search" id="i4"></div>
|
|
<div><label for="i5">Email input:</label><input type="email" id="i5"></div>
|
|
<div><label for="i6">URL input:</label><input type="url" id="i6"></div>
|
|
<div><label for="i7">Password input:</label><input type="password" id="i7" value="password"></div>
|
|
<div><label for="i8">Radio input:</label><input type="radio" id="i8"></div>
|
|
<div><label for="i9">Checkbox input:</label><input type="checkbox" id="i9"></div>
|
|
<div><input type="radio" id="i10"><label for="i10">Radio input</label></div>
|
|
<div><input type="checkbox" id="i11"><label for="i11">Checkbox input</label></div>
|
|
|
|
<div><label for="i12">Select field:</label><select id="i12"><option>Option 01</option><option>Option 02</option></select></div>
|
|
<div><label for="i13">Textarea:</label><textarea id="i13" cols="30" rows="5" >Textarea text</textarea></div>
|
|
|
|
<div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
|
|
<div><input type="reset" value="Reset (input)"></div>
|
|
<div><input type="button" value="Button (input)"></div>
|
|
<div><input type="submit" value="Submit (input)"></div>
|
|
|
|
<div><button type="reset">Reset (button)</button></div>
|
|
<div><button type="button">Button (button)</button></div>
|
|
<div><button type="submit">Submit (button)</button></div>
|
|
</fieldset>
|
|
</form>
|
|
|
|
</body>
|
|
</html> |