9 nützliche HTML-Tricks

Grüße, Habr! Ich präsentiere Ihnen die Übersetzung des Artikels „9 extrem nützliche HTML-Tricks“ von Klaus .

HTML hat viele praktische Geheimnisse, die Sie vielleicht nützlich finden.


Im Folgenden finden Sie 9 äußerst nützliche HTML-Tricks.

1. Der Tag "Figur"

Es kann zum Markieren von Fotos verwendet werden.

Das figure- Element kann auch figcaption enthalten:

<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure> 

Und so wird es aussehen:


Abb. 1 - SWAT Kats

2. Der Tag "Video"

Hiermit können Sie einen Media Player für die Videowiedergabe einbetten.

Sie können Ihr Video beispielsweise in AWS S3 hochladen und mithilfe des Tags "video" in Ihre Website einbetten.

Die Verwendung von YouTube hierfür scheint unprofessionell zu sein.

Und mit Vimeo können Sie Ihre Videos nicht ohne Bezahlung einbetten.

Sie können bestimmte Merkmale wie Breite, Höhe, Autostart, Zyklus, Steuerelemente usw. angeben.

 <video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video> 

Und so wird es aussehen:


Sie können Live-Sendungen auch mit getUserMedia () oder WebRTC einbetten

3. Der Tag "Bild"

Mit diesem Tag können Bilder in einer öffentlichen Form angezeigt werden, wobei eine alternative Version des Bildes für kleine Anzeigefenster angezeigt wird.

Es muss ein oder mehrere "source" -Tags und ein "img" -Tag enthalten.

Das img- Tag wird nur verwendet, wenn der Viewer keinem der Quell- Tags entspricht oder wenn es vom Browser nicht unterstützt wird.

 <picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture> 

4. Der Tag "Fortschritt"

Das Fortschritts- Tag zeigt den Fortschritt der Aufgabe an.

Dieses Tag darf nicht mit dem Tag "meter" (bei dem es sich um einen Sensor handelt) verwechselt werden.

 <progress value="63" max="100"> </progress> 

So sieht es aus:


5. Tag "meter"

Mit dem Tag „meter“ können Sie Daten in einem bestimmten Bereich (Sensor) messen.

Das Ergebnis kann über den Minimal- und Maximalwert oder in Prozent eingestellt werden.

 <meter value="2" min="0" max="10">2 out of 10</meter> 

 <meter value="0.6">60%</meter> 

Und hier sind sie:

6. Der Tag "Karte"

Das Map- Tag wird zum Definieren einer Client-Image-Map verwendet.

Eine Imagemap ist ein Bild mit interaktiven Bereichen.

Sie müssen lediglich die X- und Y-Koordinaten in die Elemente der Karte eingeben.

Dies bedeutet, dass Sie eine Karte unseres Sonnensystems erstellen, einen Bereich für jeden Planeten definieren und Besucher für jeden angeklickten Planeten auf eine separate Seite umleiten.

 <img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map> 

7. Inhaltsbearbeitbares Attribut

Dieses Attribut gibt an, ob der Inhalt eines Elements bearbeitet werden kann.

 <p contenteditable="true">This is an editable paragraph.</p> 

8. Vorschläge für die Eingabe

 <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist> 

Ich hoffe es macht Ihnen nichts aus, dass ich nicht eine Vielzahl von Stilen hinzugefügt habe.

Ich gestalte lieber Beispiele nach meinem Geschmack, so schön wie möglich.


9. Der Tag "noscript"

Inhalte im noscript- Element werden vom Browser nur angezeigt, wenn JavaScript deaktiviert ist.

Dies bietet einen Fallback-Mechanismus für Komponenten, die ohne JavaScript nicht mehr funktionieren.

 <noscript><h2>JavaScript is disabled in your browser.</h2></noscript> 

Ich finde es wirklich cool, dass Sie nach HTML-Tricks suchen, aber sind Sie sicher, dass Ihre Webanwendung auf allen Browsern und Geräten korrekt funktioniert?

Mit Endtest können Sie schnell automatisierte Tests erstellen und in einer browserübergreifenden Cloud ausführen.

Sie benötigen nicht einmal Code, um ihn zu verwenden.

Im Ernst, lies einfach die Dokumentation .