forked from guyjin/htmlClass
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsyntaxExamples.html
More file actions
96 lines (84 loc) · 5.9 KB
/
syntaxExamples.html
File metadata and controls
96 lines (84 loc) · 5.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
<title>
Simple HTML file.
</title>
<meta charset="utf-8"/>
</head>
<body>
<!--<h1>Doctypes</h1>-->
<!--<p>-->
<!--Doctypes generally tell a browser how to render a page. Typically there are three modes.<a href="http://diveintohtml5.info/semantics.html#the-doctype"><sup>1</sup></a>-->
<!--</p>-->
<!--<ul>-->
<!--<li>Standards Mode</li>-->
<!--<li>Almost Standards Mode</li>-->
<!--<li>Quirks Mode</li>-->
<!--</ul>-->
<!--<p>-->
<!--Classic doctypes look like this:-->
<!--</p>-->
<!--<pre>-->
<!--<code>-->
<!--<!DOCTYPE html-->
<!--PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"-->
<!--"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<!--</code>-->
<!--</pre>-->
<!--<p>-->
<!--In the interest of a more standards centric mode, an easier version was developed:-->
<!--</p>-->
<!--<pre>-->
<!--<code>-->
<!--<!doctype html>-->
<!--</code>-->
<!--</pre>-->
<!--<p>-->
<!--This new doctype signals the browser to use the HTML5 specificiation for rendering. In the event that the browser doesn't support that version of HTML, it will at least move into it's Standards compliant rendering mode.-->
<!--</p>-->
<h1>
Nonsense copy
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet cupiditate ea esse, illum, incidunt, libero minima natus non provident quidem repellendus velit. Aperiam eaque officia quos repellat temporibus, velit voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab adipisci amet aut libero placeat reprehenderit. Eaque exercitationem ipsa laboriosam mollitia nihil, odio perspiciatis quos rem sed sunt totam, veniam voluptas!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur dolorem doloribus eaque eius eligendi in inventore laudantium libero, necessitatibus quisquam quod repellendus, reprehenderit rerum tempore temporibus vitae? Accusantium, eius!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus fuga ipsum libero mollitia numquam omnis provident quaerat, reiciendis suscipit velit! Autem corporis doloremque maxime quasi reprehenderit totam veritatis voluptatem voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<br>
Ad aperiam, assumenda corporis deserunt dicta dolores doloribus eos fugit iure minima natus nisi porro possimus quidem quis repellat sequi tempora ut?</p>
<h2>Slightly smaller header</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, aliquam amet, aperiam architecto commodi culpa dignissimos, dolorem dolores eos ipsum iste libero neque quasi recusandae sapiente sunt suscipit veritatis voluptatum?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem blanditiis delectus deleniti dicta dolore id in laboriosam magnam magni minima, neque perspiciatis quidem repudiandae saepe sapiente tenetur vel voluptas voluptatibus?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab adipisci ducimus fugit nulla perspiciatis praesentium soluta. At, debitis dolores est excepturi exercitationem numquam, provident quasi reprehenderit sed voluptate voluptatum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, consequuntur corporis cum debitis doloribus eveniet incidunt ipsa laborum natus nobis officiis quae, rerum. Explicabo, id inventore magni natus nostrum quam.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cumque dignissimos error est et eum fugiat, illum, ipsam iure labore obcaecati porro quia quibusdam quisquam quo sapiente sunt. Amet, architecto.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus explicabo id laboriosam maxime molestiae necessitatibus neque veniam. Commodi eum impedit ipsam maxime mollitia nisi numquam provident tenetur vel velit? Maxime!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquam animi architecto, debitis, error expedita hic iure iusto odit officia perspiciatis rem voluptates! Aliquid architecto numquam placeat quia quos!</li>
</ul>
<hr/>
<h3>
And again slightly smaller header
</h3>
<pre>
This text
has weird
spacing.
</pre>
<h4>Ordered list</h4>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum expedita fuga, iusto laborum quia unde! Aliquam, assumenda corporis, eius est et explicabo fuga iusto maxime nemo praesentium sit, sunt ut?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque delectus expedita fugit iure labore mollitia nemo possimus? Ad aliquam cupiditate, deserunt dolores eveniet magni natus, neque numquam odio repellendus tempora.</li>
</ol>
<h4>
In text formatting Examples
</h4>
<p>
<strong>Lorem ipsum dolor sit amet</strong>, <small>consectetur adipisicing elit</small>. Ab distinctio dolores eveniet id nesciunt numquam, officiis porro provident quasi quo. Consectetur deserunt dolorem eaque hic labore libero praesentium qui veritatis?
</p>
<p>
<em>
Lorem ipsum dolor sit amet, <sup>consectetur adipisicing elit</sup>. Amet aperiam eaque hic illum laboriosam laudantium odio optio quas quo veritatis! Aspernatur facilis hic itaque nobis odio? <sub>Autem laudantium officia perspiciatis?</sub>
</em>
</p>
</body>
</html>