2020-08-13 07:00:06 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2022-10-10 20:38:51 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
2020-08-14 08:08:56 +02:00
|
|
|
<title>HTML5 Feature Tips</title>
|
2022-10-10 20:38:51 +02:00
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="57x57"
|
|
|
|
|
href="./favicons/apple-icon-57x57.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="60x60"
|
|
|
|
|
href="./favicons/apple-icon-60x60.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="72x72"
|
|
|
|
|
href="./favicons/apple-icon-72x72.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="76x76"
|
|
|
|
|
href="./favicons/apple-icon-76x76.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="114x114"
|
|
|
|
|
href="./favicons/apple-icon-114x114.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="120x120"
|
|
|
|
|
href="./favicons/apple-icon-120x120.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="144x144"
|
|
|
|
|
href="./favicons/apple-icon-144x144.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="152x152"
|
|
|
|
|
href="./favicons/apple-icon-152x152.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="apple-touch-icon"
|
|
|
|
|
sizes="180x180"
|
|
|
|
|
href="./favicons/apple-icon-180x180.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
type="image/png"
|
|
|
|
|
sizes="192x192"
|
|
|
|
|
href="./favicons/android-icon-192x192.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
type="image/png"
|
|
|
|
|
sizes="32x32"
|
|
|
|
|
href="./favicons/favicon-32x32.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
type="image/png"
|
|
|
|
|
sizes="96x96"
|
|
|
|
|
href="./favicons/favicon-96x96.png"
|
|
|
|
|
/>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
type="image/png"
|
|
|
|
|
sizes="16x16"
|
|
|
|
|
href="./favicons/favicon-16x16.png"
|
|
|
|
|
/>
|
|
|
|
|
<link rel="manifest" href="./favicons/manifest.json" />
|
|
|
|
|
<meta name="msapplication-TileColor" content="#ffffff" />
|
|
|
|
|
<meta
|
|
|
|
|
name="msapplication-TileImage"
|
|
|
|
|
content="./favicons/ms-icon-144x144.png"
|
|
|
|
|
/>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
<link
|
|
|
|
|
href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
|
|
|
|
|
</head>
|
2020-08-14 08:59:54 +02:00
|
|
|
|
2022-10-10 20:38:51 +02:00
|
|
|
<body>
|
|
|
|
|
<a
|
2020-11-16 13:08:07 +01:00
|
|
|
href="https://github.com/atapas/html-tips-tricks"
|
2022-10-10 20:38:51 +02:00
|
|
|
target="_blank"
|
|
|
|
|
rel="tag noopener noreferrer"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
width="149"
|
|
|
|
|
height="149"
|
|
|
|
|
src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149"
|
|
|
|
|
class="attachment-full size-full"
|
|
|
|
|
alt="Fork me on GitHub"
|
|
|
|
|
data-recalc-dims="1"
|
|
|
|
|
/>
|
2020-11-16 13:08:07 +01:00
|
|
|
</a>
|
2020-08-13 07:00:06 +02:00
|
|
|
<div class="demo">
|
2022-10-10 20:38:51 +02:00
|
|
|
<h1>HTML5 Feature Tips</h1>
|
|
|
|
|
<img src="html5.png" alt="HTML5" style="height: 100px; width: 100px" />
|
|
|
|
|
<ul class="list">
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./details/index.html"> Details Tag</a> - Specify details that
|
|
|
|
|
the user can open and close on demand
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="./inputs/index.html"> Inputs</a> - Various useful tips</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./content-editable/index.html"> Content Editable</a> - Make
|
|
|
|
|
the content Editable
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./mark/index.html"> Mark Content</a> - Highlight things
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./data-attribute/index.html"> Custom Data</a> - Data with
|
|
|
|
|
elements
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./output/index.html"> Output Tag</a> - To perform a
|
|
|
|
|
calculation and show the result
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./datalist/index.html"> Datalist Tag</a> - Allows you to
|
|
|
|
|
search and add elements
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./range/index.html"> Range(Slider)</a> - Do you need a range
|
|
|
|
|
slider?
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./map/index.html"> Map</a> - Image map with coordinates
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./meter/index.html"> Meter and Progress</a> - Display a gauge
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./dialog/index.html"> Dialog</a> - Display a Modal Dialog
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./lazy-loading/index.html"> Lazy Loading</a> - Lazy Load html
|
|
|
|
|
images natively
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<a href="./drag&drop"> Drag & Drop</a> - grab an Image and drag it to
|
|
|
|
|
a different location.
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2020-08-13 07:00:06 +02:00
|
|
|
</div>
|
2022-10-10 20:38:51 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
