HTML 5.1 enthüllt:14 neue Funktionen erklärt und praktische Anwendungen
HTML5 gehört dem World Wide Web Consortium (W3C), das Standards im gesamten Web bereitstellt, sodass auf Protokolle aus aller Welt zugegriffen werden kann. Im November 2016 aktualisierte das W3C das langjährige HTML 5, das erste kleinere Update seit zwei Jahren. Viele anfängliche HTML 5.1-Funktionen wurden aufgrund eines fehlerhaften Designs und mangelnder Unterstützung des Browser-Anbieters verworfen.
Obwohl in HTML 5.1 nur wenige Elemente und Verbesserungen eingeführt wurden, handelt es sich immer noch um ein kleines Update. Einige der neuen Elemente enthalten Combo-Tags, die jetzt
W3C hat bereits mit der Arbeit an einem Entwurf von HTML 5.2 begonnen, der voraussichtlich Ende 2017 veröffentlicht wird. In der Zwischenzeit stellen wir einige interessante neue Funktionen und Verbesserungen vor, die in Version 5.1 eingeführt wurden. Sie können diese Funktionen nutzen, ohne JavaScript zu verwenden. Nicht alle Browser unterstützen diese Funktionen. Überprüfen Sie daher besser die Browserunterstützung, bevor Sie sie in der Produktion verwenden.
14. Verhindern Sie Phishing-Angriffe
Die meisten Leute, die target=’_blank’ verwenden, haben keine Ahnung von einer merkwürdigen Tatsache – der neu geöffnete Tab kann die window.opener.location in eine Phishing-Seite ändern. Es führt in Ihrem Namen schädlichen JavaScript-Code auf der Startseite aus. Da Benutzer der bereits geöffneten Seite vertrauen, werden sie nicht misstrauisch.
Um dieses Problem vollständig zu beseitigen, hat HTML 5.1 die Verwendung des Attributs rel=“noopener“ standardisiert, das Browserkontexte trennt. Der rel=“noopener“ kann innerhalb der Tags und verwendet werden.
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore </a>
Lesen Sie:24 CSS3- und HTML5-Animationstools für Designer
13. Behandeln Sie Bildunterschriften flexibel
Das
HTML5.1 hat diese Einschränkung gelockert, und jetzt können Sie
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p> </article>
12. Rechtschreibprüfung
Die Rechtschreibprüfung ist ein aufgezähltes Attribut, dessen Schlüsselwörter die leere Zeichenfolge true und false sind. Der wahre Zustand gibt an, dass die Rechtschreibung und Grammatik des Elements überprüft werden soll.
Das element.forceSpellCheck() zwingt den Benutzeragenten, Rechtschreib- und Grammatikfehler im Textelement zu melden, auch wenn der Benutzer das Element nie fokussiert hat.
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label> </p>
11. Die leere Option
Mit der neuen HTML-Version können Sie ein leeres
10. Vollbild für Frames zulassen
Mit dem booleschen Attribut „allowfullscreen“, das für Frames entwickelt wurde, können Sie mithilfe der Methode „requestFullscreen()“ steuern, ob der Inhalt im Vollbildmodus angezeigt werden kann. Nehmen wir zum Beispiel einen Iframe, der einen Player von YouTube einbettet. Das Attribut „allowfullscreen“ ist erforderlich, damit der Player sein Video im Vollbildmodus anzeigen kann.
<article> <header> <p><img src="/usericons/16235"> <b>Fred Flintstone</b></p> <p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p> </header> <main> <p>Check out my new video!</p> <iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe> </main> </article>
9. Verschachtelte Kopf- und Fußzeile
Mit HTML 5.1 können Sie Kopf- und Fußzeilen in einer anderen Kopfzeile verschachteln. Sie können dem Kopfzeilenelement eine Kopf- oder Fußzeile hinzufügen, wenn diese selbst im Abschnittsinhalt enthalten sind.
Die Funktion kann sehr nützlich sein, wenn Sie semantischen Abschnittselementen wie
Im unten angegebenen Code enthält der
<article> <header> <h2>Lesson: How to cook chicken</h2> <aside> <header> <h2>About the author: Tom Hank</h2> <p><a href="./tomhank/">Contact him!</a></p> </header> <p>Expert in nothing but Cooking. The cookbook sideshow.</p> </aside> </header> <p><ins>Pour the marinade into the zip-top bag with the chicken and seal it. Remove as much air as possible from the bag and seal it. </ins></p> </article>
8. Bilder mit Nullbreite
Mit der neuen HTML-Version können Sie Bilder mit der Größe Null hinzufügen. Diese Funktion wird verwendet, wenn das Bild nicht für den Benutzer bestimmt ist. Wenn ein img-Element für andere Zwecke als die Anzeige eines Bildes verwendet wird, beispielsweise als Teil eines Dienstes zum Zählen der Anzahl von Seitenaufrufen, verwenden Sie das Attribut „width“ und „height“ mit dem Wert 0. Für Bilder mit der Breite Null wird empfohlen, leere Attribute zu verwenden.
<img src="theimagefile.jpg" width="0" height="0" alt="">
7. Formular validieren
Mit der neuen Methode „reportValidity()“ können Sie ein Formular validieren, die Ergebnisse abrufen und die Fehler direkt im Browser an die Benutzer melden. Benutzerprogramme melden möglicherweise mehr als eine Einschränkungsverletzung, wenn das Element gleichzeitig unter mehreren Problemen leidet. Wie in diesem Fall sollte die Eingabe „Passwort“ mit Fehler markiert werden, da sie obligatorisch, aber leer ist.
<h2>Form validation</h2>
<p>Enter details</p>
<form>
<label>
Mandatory input <input type="password" name="password" required />
</label>
<button type="submit">Submit</button>
</form>
<script>
document.querySelector('form').reportValidity()
</script> 6. Das Kontextmenü des Browsers
In HTML 5.1 können Sie das