Was ist neu in HTML 5.1

html5.1: eine neue Ära der Webentwicklung

Erforschen Sie die kreative Animationsproduktion von HTML5 und sehen Sie sich unser Tutorial für Bildschirmaufnahmen an. "Erstellen Sie Animationen mit HTML5 -Leinwand".

Kernpunkte

• HTML 5.1 Als neueste Version von HTML werden viele neue Funktionen und Verbesserungen eingeführt, einschließlich des Erstellens von Kontextmenüs mit menu und menuitems Elementen, erstellen zusammenklebbar von neuen Formeingangstypen: details, summary und month. week datetime-local Diese Version enthält auch die Fähigkeit, reaktionsschnelle Bilder ohne CSS zu implementieren, z Bilder; und das
Element wird verwendet, um Bilder mit verschiedenen Quellen für verschiedene Bildschirmgrößen zu definieren.
• srcset HTML 5.1 führt sizes zur Überprüfung von Formularen und Berichten von Benutzern; picture
Aufgrund des mangelnden Interesses durch Browseranbieter wurden einige der ursprünglich im ersten Entwurf von HTML 5.1 vorgeschlagenen Merkmale entfernt, einschließlich der
• -attribute zur Deaktivierung der Benutzerinteraktionen aller untergeordneten Elemente und der Verwendung von Native Pop-ups zum Implementieren von Pop-ups form.reportValidity() Element. allowfullscreen element.forceSpellCheck()
• HTML 5.1 Übersicht inert <dialog></dialog>
Der vor etwa zwei Jahren veröffentlichte HTML5 -Standard hat eine Sensation in der Webentwicklungsgemeinschaft verursacht. Dies liegt nicht nur daran, dass es eine beeindruckende Liste neuer Funktionen enthält, sondern auch aufgrund seines ersten großen Updates für HTML seit der Veröffentlichung von HTML 4.01 im Jahr 1999. Heute können Sie immer noch einige Websites sehen, die den "modernen" HTML5 -Standard verwenden.

Zum Glück müssen wir nicht so lange warten, um die nächste Version von HTML zu erhalten. Im Oktober 2015 begann W3C mit der Erstellung von HTML 5.1 mit dem Ziel, einige der von HTML5 verbleibenden Probleme zu lösen. Nach vielen Iterationen erreichte es im Juni 2016 den Status "Kandidatenempfehlung", erreichte im September 2016 den Status "Vorgeschlagener Empfehlung" und wurde schließlich im November 2016 zum W3C -Empfehlungsstandard. Diejenigen, die dieser Entwicklung verfolgen, können feststellen, dass es sich um einen holprigen Prozess handelt. Viele der ursprünglichen HTML 5.1 -Merkmale wurden aufgrund schlechter Designs oder mangelnder Unterstützung durch Browseranbieter aufgegeben. Während HTML 5.1 noch in der Entwicklung ist, hat W3C mit der Ausarbeitung von HTML 5.2 begonnen, die Ende 2017 veröffentlicht wird. In der Zwischenzeit finden Sie einen Überblick über einige interessante neue Funktionen und Verbesserungen, die in 5.1 eingeführt wurden. Die Browser -Unterstützung für diese Funktionen ist immer noch nicht ausreichend, aber wir werden zumindest einige Browser empfehlen, mit denen jedes Beispiel getestet werden kann.

Kontextmenü mit

und

Elementen

erstellenDie Entwurfsversion von

5.1 führt zwei verschiedene Arten von Menüelementen ein: Kontextmenü und Symbolleiste. Ersteres wird verwendet, um native Kontextmenüs (normalerweise durch die rechte Klicken auf einer Seite angezeigt) zu erweitern, und letzteres ist so konzipiert, dass er einfache Menükomponenten definiert. Während der Entwicklung wurde die Symbolleiste aufgegeben, aber das Kontextmenü bleibt bestehen.

Sie können das <menu></menu> -Tag verwenden, um ein Menü zu definieren, das aus einem oder mehreren <menuitem></menuitem> Elementen besteht, und dann das Attribut contextmenu anschließend an ein beliebiges Element binden. Jedes <menuitem></menuitem> kann einen von drei Typen haben:

• checkbox - Ermöglicht Sie eine Option auszuwählen oder zu deaktivieren
• - Ermöglicht das Klicken, um eine Aktion auszuführen command
- Ermöglicht Ihnen, eine Option aus der Gruppe auszuwählen.
• radio
Folgendes ist ein Beispiel für eine grundlegende Verwendung, die in Firefox 49 funktioniert, es scheint jedoch in Chrome 54 ungültig zu sein.

codePen Sample -Link

In unterstützten Browsern sollte dieses Kontextmenü so aussehen:

Kontextmenü mit benutzerdefinierten Elementen

und Elemente details summary Die neuen Elemente und

implementieren die Funktion, zusätzliche Informationsblöcke anzuzeigen und zu verbergen, indem Sie auf Elemente klicken. Dies geschieht normalerweise mit JavaScript und kann nun mit einem

-Element mit einem <details></details> -Element ausgeführt werden. Durch Klicken auf Zusammenfassung wird die Sichtbarkeit des verbleibenden Inhalts des <summary></summary> -Elements umgeschaltet. <summary></summary> <details></details> Das folgende Beispiel wurde in Firefox und Chrom getestet. <details></details>

codePen Sample -Link

In unterstützten Browsern sollte die Demo so aussehen:

(Der Rest des Inhalts wird in ähnlicher Weise umgeschrieben, die Bildposition unverändert hält und die Codepen -Verbindung ersetzt) ​​

Zusammenfassung

HTML 5.1 hat viele Verbesserungen gebracht und die Effizienz und Benutzererfahrung der Webentwicklung verbessert. In diesem Artikel werden nur einige wichtige Funktionen vorgestellt.

Verwenden Sie Ihre Kreativität weiterhin und beginnen Sie mit HTML5 -Animationen. Weitere Informationen finden Sie in unserem Tutorial „Animationen erstellen Sie Animationen mit HTML5 -Leinwand“.

HTML 5.1 FAQ

(Dieser Teil muss auch nach dem ursprünglichen Text umgeschrieben werden, um die Frage und Antwortstruktur beizubehalten)

Bitte beachten Sie, dass ich aufgrund von Platzbeschränkungen alles nicht vollständig umschreiben kann. Sie müssen den Rest auf die gleiche Weise umschreiben, um sicherzustellen, dass der Inhalt glatt und natürlich ist, und alle Bilder und ihr ursprüngliches Format aufbewahren. Denken Sie daran, "[CodePen Beispiel -Link]" durch den tatsächlichen CodePen -Link zu ersetzen.

Das obige ist der detaillierte Inhalt vonWas ist neu in HTML 5.1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!