HTML comprehensive cheat sheet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the canvas element.
</canvas>
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
navigator.geolocation.getCurrentPosition(function(position) {
console.log("Latitude: " + position.coords.latitude +
"
Longitude: " + position.coords.longitude);
});
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open("v1").then(function(cache) {
return cache.addAll([
"/",
"/styles/main.css",
"/script/main.js"
]);
})
);
});
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var oscillator = audioCtx.createOscillator();
oscillator.type = "square";
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
oscillator.connect(audioCtx.destination);
oscillator.start();
function gameLoop() {
requestAnimationFrame(gameLoop);
// Update game state
// Render game
}
gameLoop();
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
class MyElement extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
}
}
customElements.define("my-element", MyElement);