feat: add missing KF6 framework recipes

This commit is contained in:
2026-05-07 07:53:26 +01:00
parent d8d498f831
commit a69f479b52
2374 changed files with 2610246 additions and 0 deletions
@@ -0,0 +1,247 @@
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>test.htm</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (HTML) - Theme (Breeze Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
<span style="color:#2980b9;font-weight:bold">&lt;!DOCTYPE</span> HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"<span style="color:#2980b9;font-weight:bold">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">html</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">head</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">title</span><span style="color:#2980b9">></span>This is a title<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">title</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">/* comment */</span>
<span style="color:#27ae60;font-weight:bold">#xyz</span> { <span style="font-weight:bold">color</span><span style="color:#3daee9">:</span> <span style="color:#27aeae;font-weight:bold">red</span><span style="color:#3f8058">;</span> }
h1 { <span style="font-weight:bold">font</span><span style="color:#3daee9">:</span> <span style="color:#f44f4f">"Comic Sans"</span><span style="color:#3f8058">;</span> }
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">style</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">head</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">body</span><span style="color:#27ae60"> class</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"ui main"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">p</span><span style="color:#27ae60"> *ngFor</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"let name of names"</span><span style="color:#2980b9">></span>Hello, {{ name }}!<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">body</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- JavaScript code --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7f8c8d">document</span><span style="color:#3f8058">.</span><span style="color:#2980b9;font-style:italic">body</span><span style="color:#3f8058">.</span><span style="color:#8e44ad;font-style:italic">appendChild</span>(<span style="color:#7f8c8d">document</span><span style="color:#3f8058">.</span><span style="color:#8e44ad;font-style:italic">createTextNode</span>(<span style="color:#f44f4f">'Hello World!'</span>))<span style="color:#3f8058">;</span> <span style="color:#7a7c7d">// comment</span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- TypeScript code --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> type=</span><span style="color:#f44f4f">"text/typescript"</span><span style="color:#2980b9">></span>
<span style="font-weight:bold;font-style:italic">class</span> Student {
fullName<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span><span style="color:#3f8058">;</span>
<span style="font-weight:bold;font-style:italic">constructor</span>(<span style="font-weight:bold;font-style:italic">public</span> firstName<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span><span style="color:#3f8058">,</span> <span style="font-weight:bold;font-style:italic">public</span> middleInitial<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span><span style="color:#3f8058">,</span> <span style="font-weight:bold;font-style:italic">public</span> lastName<span style="color:#3f8058">:</span> <span style="color:#2980b9">string</span>) {
<span style="font-weight:bold">this</span><span style="color:#3f8058">.</span><span style="color:#2980b9">fullName</span> <span style="color:#3f8058">=</span> firstName <span style="color:#3f8058">+</span> <span style="color:#f44f4f">" "</span> <span style="color:#3f8058">+</span> middleInitial <span style="color:#3f8058">+</span> <span style="color:#f44f4f">" "</span> <span style="color:#3f8058">+</span> lastName<span style="color:#3f8058">;</span>
}
}
<span style="font-weight:bold;font-style:italic">let</span> a<span style="color:#3f8058">:</span> <span style="color:#2980b9">null</span> <span style="color:#3f8058">=</span> <span style="font-weight:bold">null</span><span style="color:#3f8058">;</span>
<span style="font-weight:bold;font-style:italic">let</span> b<span style="color:#3f8058">:</span> <span style="color:#2980b9">number</span> <span style="color:#3f8058">=</span> <span style="color:#f67400">12_3</span><span style="color:#3f8058">;</span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- JSX code --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> src</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"https://unpkg.com/babel-standalone@6/babel.min.js"</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> type=</span><span style="color:#f44f4f">"text/babel"</span><span style="color:#2980b9">></span>
ReactDOM<span style="color:#3f8058">.</span><span style="color:#8e44ad">render</span>(
<span style="font-weight:bold">&lt;h1></span>Hello, world!<span style="font-weight:bold">&lt;/h1></span><span style="color:#3f8058">,</span>
<span style="color:#7f8c8d">document</span><span style="color:#3f8058">.</span><span style="color:#8e44ad;font-style:italic">getElementById</span>(<span style="color:#f44f4f">'root'</span>)
)<span style="color:#3f8058">;</span>
<span style="font-weight:bold">function</span> <span style="color:#8e44ad">Story</span>(props) {
<span style="font-weight:bold">const</span> SpecificStory <span style="color:#3f8058">=</span> components[props<span style="color:#3f8058">.</span><span style="color:#2980b9">storyType</span>]<span style="color:#3f8058">;</span>
<span style="color:#fdbc4b;font-weight:bold">return </span><span style="color:#8e44ad;font-weight:bold">&lt;SpecificStory</span> <span style="color:#27ae60">story</span><span style="color:#3f8058">=</span><span style="color:#27aeae">{</span> props<span style="color:#3f8058">.</span><span style="color:#2980b9">story</span> <span style="color:#27aeae">}</span> <span style="color:#27ae60">attr2</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"</span><span style="color:#f67400">&amp;ref;</span><span style="color:#f44f4f">"</span> <span style="color:#27ae60">attr3</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"Hello\n"</span> <span style="color:#8e44ad;font-weight:bold">/></span><span style="color:#3f8058">;</span>
}
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Mustache/Handlebars --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> type=</span><span style="color:#f44f4f">"x-tmpl-mustache"</span><span style="color:#2980b9">></span>
<span style="color:#8e44ad;font-weight:bold">{{#movie}}</span>
<span style="font-weight:bold">&lt;div></span>
<span style="font-weight:bold">&lt;h1></span><span style="color:#27aeae">{{</span>title<span style="color:#27aeae">}}</span><span style="font-weight:bold">&lt;/h1></span>
<span style="font-weight:bold">&lt;img</span><span style="color:#27ae60"> src</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"</span><span style="color:#27aeae">{{</span>poster<span style="color:#27aeae">}}</span><span style="color:#f44f4f">"</span><span style="color:#27ae60"> alt</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"</span><span style="color:#27aeae">{{</span>title<span style="color:#27aeae">}}</span><span style="color:#f44f4f">"</span><span style="font-weight:bold">/></span>
<span style="font-weight:bold">&lt;/div></span>
<span style="font-weight:bold">&lt;div></span>
Rating - <span style="color:#27aeae">{{</span>ratings<span style="color:#3f8058">.</span>critics_rating<span style="color:#27aeae">}}</span>
<span style="font-weight:bold">&lt;/div></span>
<span style="color:#8e44ad;font-weight:bold">{{/movie}}</span>
<span style="color:#8e44ad;font-weight:bold">{{^movie}}</span>
<span style="font-weight:bold">&lt;div></span>
Movie Does Not Exist :(
<span style="font-weight:bold">&lt;/div></span>
<span style="color:#8e44ad;font-weight:bold">{{/movie}}</span>
<span style="color:#7a7c7d">{{! comment }}</span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- HTML template --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> type=</span><span style="color:#f44f4f">"text/html"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">>&lt;</span><span style="font-weight:bold">a</span><span style="color:#27ae60"> href</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"link"</span><span style="color:#2980b9">></span>Hello<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">a</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Close the block correctly after "?" in the JavaScript highlighter --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#3f8058">?</span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">html</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!--</span>
<span style="color:#7a7c7d">HTML Syntax Highlight Sample File (Standard)</span>
<span style="color:#7a7c7d">- Follow HTML5 standard.</span>
<span style="color:#7a7c7d">- Contain some valid, but not recommended syntax.</span>
<span style="color:#7a7c7d">- Can be rendered by modern web browsers.</span>
<span style="color:#7a7c7d">@author Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#7a7c7d">@date 2016-09-17</span>
<span style="color:#7a7c7d">--></span>
<span style="color:#2980b9;font-weight:bold">&lt;!DOCTYPE</span> html<span style="color:#2980b9;font-weight:bold">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">html</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">head</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">meta</span><span style="color:#27ae60"> charset</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"utf-8"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">title</span><span style="color:#2980b9">></span>HTML Syntax Highlight Sample File (Standard)<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">title</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">link</span><span style="color:#27ae60"> rel</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"stylesheet"</span><span style="color:#27ae60"> href</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"</span><span style="color:#27ae60"> integrity</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"</span><span style="color:#27ae60"> crossorigin</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"anonymous"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">link</span><span style="color:#27ae60"> rel</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"stylesheet"</span><span style="color:#27ae60"> href</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"</span><span style="color:#27ae60"> integrity</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"</span><span style="color:#27ae60"> crossorigin</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"anonymous"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">script</span><span style="color:#27ae60"> src</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</span><span style="color:#27ae60"> integrity</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"</span><span style="color:#27ae60"> crossorigin</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"anonymous"</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">script</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">head</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">body</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- HTML5 defined elements --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
This is a div. <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">span</span><span style="color:#2980b9">></span>This is a span<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">span</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
This is a div.
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
This is a paragraph. <span style="color:#2980b9">&lt;</span><span style="font-weight:bold">em</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">em</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h1</span><span style="color:#2980b9">></span>This is heading 1<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h1</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>This is heading 2<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h3</span><span style="color:#2980b9">></span>This is heading 3<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h3</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h4</span><span style="color:#2980b9">></span>This is heading 4<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h4</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h5</span><span style="color:#2980b9">></span>This is heading 5<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h5</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h6</span><span style="color:#2980b9">></span>This is heading 6<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h6</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">a</span><span style="color:#27ae60"> href</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"http://www.w3schools.com"</span><span style="color:#2980b9">></span>This is a link<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">a</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">br</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">img</span><span style="color:#27ae60"> src</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"http://placehold.it/200x150"</span><span style="color:#27ae60"> alt</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"This is an image"</span><span style="color:#27ae60"> width</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"200"</span><span style="color:#27ae60"> height</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"150"</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">hr</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">ul</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">ul</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">ol</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>List item<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">li</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">ol</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">table</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">tr</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">th</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">tr</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">tr</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>Table head<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">td</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">tr</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">table</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">form</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">input</span><span style="color:#27ae60"> type</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"email"</span><span style="color:#27ae60"> name</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"author"</span><span style="color:#2980b9">/></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">input</span><span style="color:#27ae60"> type</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"text"</span><span style="color:#27ae60"> name</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"message"</span><span style="color:#2980b9">/></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">button</span><span style="color:#27ae60"> type</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"button"</span><span style="color:#2980b9">></span>Send<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">button</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">form</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">main</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">header</span><span style="color:#2980b9">></span>This is a header.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">header</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">nav</span><span style="color:#2980b9">></span>This is a nav.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">nav</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">article</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>This is an article.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>This is an article.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">p</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">article</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">aside</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>This is an aside.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">h2</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">aside</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">footer</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">footer</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">main</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Custom elements --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">booklist</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">book</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">booktitle</span><span style="color:#2980b9">></span>Just For Fun: The Story of an Accidental Revolutionary<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">booktitle</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">author</span><span style="color:#2980b9">></span>Linus Torvalds<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">author</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">description</span>
<span style="color:#27ae60"> class</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"featured"</span><span style="color:#27ae60"> title</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"Click to read full text..."</span><span style="color:#2980b9">></span>
A humorous autobiography of Linus Torvalds, the creator of the Linux
kernel, co-written with David Diamond. The book primarily theorizes
the Law of Linus that all evolution contributed by humanity starts
for survival, sustains socially and entertains at last. As well as
this the book explains Torvalds' view of himself, the free software
movement and the development of Linux.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">description</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">book</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">booklist</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">large-space</span><span style="color:#2980b9">/></span>
<span style="color:#7a7c7d">&lt;!-- Ends for single tag elements --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">br</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">br</span><span style="color:#2980b9">/></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">br</span><span style="color:#27ae60"> </span><span style="color:#2980b9">/></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">br</span><span style="color:#2980b9">>&lt;/</span><span style="font-weight:bold">br</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Uppercase elements --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">DIV</span><span style="color:#2980b9">></span>
THIS IS A DIV.
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">P</span><span style="color:#2980b9">></span>THIS IS A PARAGRAPH.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">P</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">H2</span><span style="color:#2980b9">></span>THIS IS A HEADING.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">H2</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">DIV</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Arrtibutes --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">a</span><span style="color:#27ae60"> href</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"#"</span><span style="color:#27ae60"> style</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"background-color:rgba(0,0,0,0.3)"</span><span style="color:#27ae60"> title</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"Click me"</span><span style="color:#2980b9">></span>Magic button<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">a</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">img</span><span style="color:#27ae60"> src</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"http://placehold.it/200x150"</span><span style="color:#27ae60"> alt</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"This is an image"</span><span style="color:#27ae60"> width</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"200"</span>
<span style="color:#27ae60"> height</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"150"</span><span style="color:#27ae60"> title</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">"This is an image"</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Attribute without value --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">select</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">option</span><span style="color:#27ae60"> selected</span><span style="color:#2980b9">></span>GNU/Linux<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>BSD<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>Windows<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>macOS<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">option</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">select</span><span style="color:#2980b9">></span>
<span style="color:#7a7c7d">&lt;!-- Attribute without quotes --></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">div</span><span style="color:#27ae60"> id</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">name</span><span style="color:#27ae60"> class</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">a-sweet-block</span><span style="color:#27ae60"> data-counter</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">175</span><span style="color:#2980b9">></span>This is a div.<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">div</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;</span><span style="font-weight:bold">input</span><span style="color:#27ae60"> value</span><span style="color:#3f8058">=</span><span style="color:#f44f4f">abc</span><span style="color:#f67400">&amp;amp;</span><span style="color:#f44f4f">def/</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">body</span><span style="color:#2980b9">></span>
<span style="color:#2980b9">&lt;/</span><span style="font-weight:bold">html</span><span style="color:#2980b9">></span>
</pre></body></html>