HTML: Difference between revisions
(→Range) |
No edit summary |
||
| Line 13: | Line 13: | ||
* <code>input</code> triggered when the value of the slider is changed | * <code>input</code> triggered when the value of the slider is changed | ||
* <code>change</code> triggered on mouse up | * <code>change</code> triggered on mouse up | ||
==Image== | |||
<syntaxhighlight lang="html"> | |||
<picture> | |||
<source srcset="bird.webp" type="image/webp"> | |||
<source srcset="bird.jpg" type="image/jpeg"> | |||
<img src="bird.jpg" alt="Great blue bird."> | |||
</picture> | |||
</syntaxhighlight> | |||
* <code>img</code> alone is sufficient to show an image. | |||
* Wrapping around a <code>picture</code> allows you to specify multiple image types. | |||
See also [https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images MDN: Responsive images] | |||
==Video== | ==Video== | ||
Latest revision as of 13:26, 10 February 2021
A reference for HTML5 elements
Inputs
See Bootstrap forms
Range
<input type="range" class="" id="myRange" min="1" max="100" value="50" step="1">
- Events
- See SO Answer
inputtriggered when the value of the slider is changedchangetriggered on mouse up
Image
<picture>
<source srcset="bird.webp" type="image/webp">
<source srcset="bird.jpg" type="image/jpeg">
<img src="bird.jpg" alt="Great blue bird.">
</picture>
imgalone is sufficient to show an image.- Wrapping around a
pictureallows you to specify multiple image types.
See also MDN: Responsive images
Video
See JavaScript
Canvas
See JavaScript