|
<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">https://developer.mozilla.org/en-US/docs/Web/HTML/Element</a></p> |
|
|
|
<section> |
|
<h1>Heading 1</h1> |
|
<h2>Heading 2</h2> |
|
<h3>heading 3</h3> |
|
<h4>Heading 4</h4> |
|
<h5>Heading 5</h5> |
|
<h6>Heading 6</h6> |
|
</section> |
|
|
|
<section> |
|
<h1>Formatting</h1> |
|
|
|
<h2>paragraph and span</h2> |
|
<p> |
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi lacus, auctor sit amet purus vel, gravida |
|
luctus lectus. Aenean rhoncus dapibus enim, sit amet faucibus leo ornare vitae. <br> |
|
<span> span </span> |
|
</p> |
|
|
|
<h2>b, i, em, u, strike, link</h2> |
|
<b>Bold word</b> |
|
<i>italic</i> |
|
<em>emphasis</em> |
|
<u> Statements... </u> |
|
<strike> strikethrough </strike> |
|
<a href="#link">link</a> |
|
|
|
<h2>small, sub, sup</h2> |
|
<small> small </small> |
|
<sub> sub </sub> |
|
<sup> sup </sup> |
|
|
|
<h2>s, del, ins</h2> |
|
<s>s</s> |
|
<del>del</del> |
|
<ins>ins</ins> |
|
|
|
<h2>breaks</h2> |
|
<hr> |
|
<br> |
|
|
|
<h2>mark, cite, abbr</h2> |
|
<mark>mark</mark> |
|
<cite>cite</cite> |
|
<abbr title="National Aeronautics and Space Administration">NASA</abbr> |
|
|
|
<h2>ruby, tb, rt</h2> |
|
<ruby> |
|
<rb>ruby base</rb> |
|
<rt>annotation</rt> |
|
</ruby> |
|
|
|
<h2>kbd</h2> |
|
<kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>CANC</kbd> |
|
|
|
<h2>quotes</h2> |
|
<p> This is a <q>short quote</q></p> |
|
<blockquote> |
|
This instead is a long quote that is going to use a lot of words and also cite who said that. —<cite>Some People</cite> |
|
</blockquote> |
|
|
|
<h2>ordered list</h2> |
|
<ol> |
|
<li> |
|
<data value="21053">data tag</data> |
|
</li> |
|
<li> |
|
<data value="23452">data tag</data> |
|
</li> |
|
<li> |
|
<data value="42545">data tag</data> |
|
</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
</ol> |
|
|
|
<h2>unordered list</h2> |
|
<ul> |
|
<li>List item</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
<li>List item</li> |
|
</ul> |
|
|
|
<h2>definition</h2> |
|
<dl> |
|
<dt>Published</dt> |
|
<dd>17 August 2020</dd> |
|
<dt>Tags</dt> |
|
<dd>Sample Posts, html example</dd> |
|
</dl> |
|
|
|
</section> |
|
|
|
<section> |
|
<h1>Media</h1> |
|
|
|
<h2>img</h2> |
|
<img src="https://via.placeholder.com/350x150" alt="placeholder-image"> |
|
|
|
<map name="shapesmap"> |
|
<area shape="rect" coords="29,32,230,215" href="#square" alt="Square"> |
|
<area shape="circle" coords="360,130,100" href="#circle" alt="Circle"> |
|
</map> |
|
|
|
<h2>video</h2> |
|
<video width="640" height="480" src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4" controls> |
|
<track kind="subtitles" src="subtitles_de.vtt" srclang="de"> |
|
<track kind="subtitles" src="subtitles_en.vtt" srclang="en"> |
|
<track kind="subtitles" src="subtitles_ja.vtt" srclang="ja"> |
|
Sorry, your browser doesn't support HTML5 <code>video</code>, but you can |
|
download this video from the <a href="https://archive.org/details/Popeye_forPresident" target="_blank">Internet |
|
Archive</a>. |
|
</video> |
|
|
|
<h2>object</h2> |
|
<object data="flashmovie.swf" width="600" height="800" type="application/x-shockwave-flash"> |
|
Please install the Shockwave plugin to watch this movie. |
|
</object> |
|
|
|
<h2>audio</h2> |
|
<audio controls> |
|
I'm sorry. You're browser doesn't support HTML5 <code>audio</code>. |
|
<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.ogg" type="audio/ogg"> |
|
<source src="https://archive.org/download/ReclaimHtml5/ReclaimHtml5.mp3" type="audio/mpeg"> |
|
</audio> |
|
|
|
<h2>svg</h2> |
|
<svg width="100" height="100"> |
|
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/> |
|
</svg> |
|
|
|
<h2>iframe</h2> |
|
<iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A67HxeUADW4H3ERfaPW59ma?si=PogFcGg9QqapyoPbn2lVOw" width="300" height="380" frameborder="0" allowtransparency="true"></iframe> |
|
</section> |
|
|
|
<section> |
|
<h1>Code</h1> |
|
|
|
<h2>pre</h2> |
|
<pre> |
|
|
|
_,'/ |
|
_.-''._: |
|
,-:`-.-' .:.| |
|
;-.'' .::.| |
|
_..------.._ / (:. .:::.| |
|
,'. .. . . .`/ : :. .::::.| |
|
,'. . . . ./ \ ::. .::::::.| |
|
,'. . . . . / `.,,::::::::.;\ |
|
/ . . / ,',';_::::::,:_: |
|
/ . . . . / ,',','::`--'':;._; |
|
: . . / ,',',':::::::_:'_,' |
|
|.. . . . / ,',','::::::_:'_,' |
|
|. /,-. /,',':::::_:'_,' |
|
| .. . . /) /-:/,'::::_:',-' |
|
: . . . // / ,'):::_:',' ; |
|
\ . . // /,' /,-.',' ./ |
|
\ . . `::./,// ,'' ,' . / |
|
`. . . `;;;,/_.'' . . ,' |
|
,`. . :;;' `:. . ,' |
|
/ `-._,' .. ` _.-' |
|
( _,'``------'' |
|
`--'' |
|
|
|
</pre> |
|
|
|
<h2>code</h2> |
|
<code> |
|
// code tag |
|
#include |
|
<iostream> |
|
|
|
using namespace std; |
|
|
|
int main() |
|
{ |
|
cout << "Hello World!" << endl; return 0; } |
|
</code> |
|
|
|
<h2>var + samp</h2> |
|
<p> |
|
<var> variable </var> = 1000; |
|
<samp>Traceback (most recent call last):<br>NameError: name 'variabl' is not defined</samp> |
|
</p> |
|
</section> |
|
|
|
<section> |
|
<h1>Information</h1> |
|
|
|
<h2>table</h2> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th>Numbers</th> |
|
<th>Letters</th> |
|
<th>Colors</th> |
|
</tr> |
|
</thead> |
|
<tfoot> |
|
<tr> |
|
<td>123</td> |
|
<td>ABC</td> |
|
<td>RGB</td> |
|
</tr> |
|
</tfoot> |
|
<tbody> |
|
<tr> |
|
<td>1</td> |
|
<td>A</td> |
|
<td>Red</td> |
|
</tr> |
|
<tr> |
|
<td>2</td> |
|
<td>B</td> |
|
<td>Green</td> |
|
</tr> |
|
<tr> |
|
<td>3</td> |
|
<td>C</td> |
|
<td>Blue</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
|
|
<h2>details</h2> |
|
<details> |
|
<summary>Summary of content below</summary> |
|
<p>Content 1</p> |
|
<p>Content 2</p> |
|
<p>Content 3</p> |
|
<p>Content 4</p> |
|
</details> |
|
</section> |
|
|
|
<section> |
|
<h1>Form controls</h1> |
|
|
|
<h2>form with fieldset and legend</h2> |
|
<form> |
|
<fieldset> |
|
<legend>Personal Information</legend> |
|
<label for="name">Name</label><br> |
|
<input name="name" id="name"><br> |
|
<label for="dob">Date of Birth</label> |
|
<input name="dob" id="dob" type="date"> |
|
</fieldset> |
|
</form> |
|
|
|
<h2>form with dataset</h2> |
|
<form action="" method="get"> |
|
<label for="browser">Choose your browser from the list:</label> |
|
<input list="browsers" name="browser" id="browser"> |
|
<datalist id="browsers"> |
|
<option value="Edge"> |
|
<option value="Firefox"> |
|
<option value="Chrome"> |
|
<option value="Opera"> |
|
<option value="Safari"> |
|
</datalist> |
|
<input type="submit"> |
|
</form> |
|
|
|
<h2>textarea</h2> |
|
<textarea id="textarea" name="textarea" rows="4" cols="50">Write something in here</textarea> |
|
|
|
<h2>time</h2> |
|
<time datetime="2020-08-17 08:00">Monday at 8:00 AM</time> |
|
|
|
<h2>progress</h2> |
|
<progress value="33" max="100"></progress> |
|
|
|
<h2>meter</h2> |
|
<meter value="11" min="0" max="45" optimum="40">25 out of 45</meter> |
|
|
|
<h2>select</h2> |
|
<select> |
|
<optgroup label="Choice [1-3]"> |
|
<option value="1">One</option> |
|
<option value="2">Two</option> |
|
<option value="3">Three</option> |
|
</optgroup> |
|
<optgroup label="Choice [4-6]"> |
|
<option value="4">Four</option> |
|
<option value="5">Five</option> |
|
<option value="6">Six</option> |
|
</optgroup> |
|
</select> |
|
|
|
<h2>output</h2> |
|
<p> 2+2 = <output>4</output></p> |
|
|
|
</section> |
|
|
|
<section> |
|
<h1>Layout</h1> |
|
|
|
<h2>nav, menu</h2> |
|
<nav> |
|
<menu type="context" id="navmenu"> |
|
<menuitem label="Home" icon="icon.png"><a href="#">Home</a></menuitem> |
|
</menu> |
|
</nav> |
|
|
|
<h2>figure</h2> |
|
<figure> |
|
<img src="https://via.placeholder.com/350x150" alt="placeholder-image"> |
|
<figcaption> Caption.</figcaption> |
|
</figure> |
|
|
|
<h2>header</h2> |
|
<header> |
|
<h2>Title of Article</h2> |
|
<span>by Arthur T. Writer</span> |
|
</header> |
|
|
|
<h2>footer</h2> |
|
<footer> |
|
<p>This is a footer</p> |
|
</footer> |
|
|
|
<h2>Aside</h2> |
|
<aside> |
|
<p> P inside ASIDE tag </p> |
|
</aside> |
|
|
|
<footer> |
|
<address> relevant contacts <a href="mailto:[email protected]">mail</a>.</address> |
|
<div> created by <a href="https://blazardsky.space">@blazardsky</a></div> |
|
</footer> |
|
</section> |
|
|
