Einführung des neuen Inhalts in HTML5.1-H5-Tutorial-php.cn

HTML 5.1-Übersicht

Die Veröffentlichung des HTML5-Standards vor zwei Jahren war ein großes Ereignis für die Webentwicklungs-Community. Nicht nur, weil es eine beeindruckende Reihe neuer Funktionen enthält, sondern auch, weil es das erste große Versionsupdate für HTML seit der Veröffentlichung des HTML 4.01-Standards im Jahr 1999 ist. Es gibt immer noch Websites, die damit prahlen, den „modernen“ HTML5-Standard zu verwenden.

Glücklicherweise müssen wir nicht so lange auf das nächste Update des HTML-Standards warten. Im Oktober 2015 begann das W3C mit der Arbeit am HTML5.1-Entwurf mit dem Ziel, einige der verbleibenden Probleme von HTML5 zu beheben. Nach mehreren Iterationen erreichte der Entwurf im Juni 2016 die Phase „Kandidatenempfehlung“, im September 2016 die Phase „Vorgeschlagene Empfehlung“ und schließlich wurde im November 2016 die W3C-Empfehlung veröffentlicht. Diejenigen, die sich mit der neuen Norm befassen, haben vielleicht bemerkt, dass es ein kurvenreicher Weg war. Viele ursprünglich vorgeschlagene HTML5.1-Funktionen wurden aufgrund von schlechtem Design oder mangelnder Unterstützung des Browser-Anbieters aufgegeben.

Obwohl sich HTML5.1 noch in der Entwicklung befindet, hat das W3C mit der Arbeit an einem Entwurf von HTML5.2 begonnen, der voraussichtlich Ende 2017 veröffentlicht wird. Dieser Artikel gibt einen Überblick über einige interessante neue Funktionen und Verbesserungen in HTML5.1. Die Browserunterstützung für diese Funktionen ist noch nicht ausreichend, aber wir zeigen Ihnen zumindest einige Browser, die diese Funktionen unterstützen, um jedes Beispiel zu testen.

Das Kontextmenü verwendet Menü- und Menüelemente

Der HTML5.1-Entwurf führt zwei verschiedene Menüelemente ein: Kontext und Symbolleiste. Ersteres wird verwendet, um das lokale Kontextmenü zu erweitern, das normalerweise durch einen Rechtsklick mit der Maus auf der Seite aktiviert wird; letzteres wird verwendet, um eine normale Menükomponente zu definieren. Während des Entwicklungsprozesses wurde auf die Symbolleiste verzichtet, das Kontextmenü blieb jedoch erhalten.

Sie können das

-Tag verwenden, um ein Menü zu definieren, das ein oder mehrere -Elemente enthält, und es dann mithilfe des contextmenu-Attributs an ein beliebiges Element zu binden.

Jeder kann einer der folgenden drei Typen sein:

Kontrollkästchen – ermöglicht das Auswählen oder Abwählen einer Option;
Befehl – ermöglicht das Ausführen einer Aktion, wenn mit der Maus geklickt wird; Radio – ermöglicht die Auswahl einer aus einer Reihe von Optionen.
Hier ist ein einfaches Anwendungsbeispiel, das in Firefox 49 ausgeführt werden kann, derzeit jedoch nicht in Chrome 54.
Sehen Sie sich das HTML5.1-Menübeispiel von SitePoint (@SitePoint) auf CodePen an.
In einem unterstützten Browser sollte dieses Kontextmenü-Beispiel wie folgt aussehen:

Es gibt benutzerdefinierte Elemente im Kontextmenü.

Details und Zusammenfassungselemente

Die neuen Elemente

können per Mausklick zusätzliche Informationen ein- und ausblenden. Dies ist etwas, was Sie häufig tun, wenn Sie JavaScript verwenden, und jetzt können Sie dies mit dem Element

tun. Klicken Sie auf das Element , um den Rest des Detailelements anzuzeigen und auszublenden.

Das folgende Beispiel kann in Firefox und Chrome getestet werden. A HTML 5.1 context menu

Einzelheiten und eine Zusammenfassung finden Sie in der HTML5.1-Demo von SitePoint (@SitePoint) auf CodePen.

Diese Demo sollte auf unterstützten Browsern so aussehen:

Weitere Eingabetypen – Monat, Woche und Datum/Uhrzeit-lokal

Die Eingabe erweitert drei Typen: Monat, Woche und Datum/Uhrzeit-lokal.

Bei den ersten beiden Typen können Sie Wochen oder Monate auswählen. In Chrome werden beide als Dropdown-Kalender dargestellt und Sie können eine bestimmte Woche oder einen bestimmten Monat auswählen. Wenn Sie ihre Werte mit JavaScript abrufen, erhalten Sie eine Zeichenfolge, die ungefähr so aussieht: „2016-W43“ (Wocheneingabe); „2016-10“ (Monatseingabe).

Ursprünglich wurden im HTML5.1-Entwurf zwei Datumstypeingaben eingeführt – datetime und datetime-local. Der Unterschied besteht darin, dass datetime-local die Zeitzone des Benutzers verwendet, während datetime Ihnen die Auswahl der Zeitzone ermöglicht. Während der Entwicklung wurde datetime aufgegeben und jetzt existiert nur noch datetime-local. Die datetime-local-Eingabe besteht aus zwei Teilen – dem Datum, das wie Woche und Monat ausgewählt werden kann, und der Uhrzeit, die separat eingegeben werden kann. Details and summary elements

Im Folgenden finden Sie ein Beispiel für alle neuen Eingabetypen. Sie können in Chrome normal angezeigt werden, in Firefox jedoch nicht.

Siehe SitePoint (@SitePoint) HTML 5.1-Eingaben für Woche, Monat und Datum/Uhrzeit auf CodePen.

Diese Demo sollte auf unterstützten Browsern so aussehen:

Week, month and datetime-local inputs

Responsive Bilder

HTML 5.1 enthält mehrere neue Funktionen zur Implementierung responsiver Bilder ohne Verwendung von CSS. Jede Funktion hat ihr eigenes separates Nutzungsszenario.

srcset-Attribut

Das srcset-Bildattribut ermöglicht die Auflistung mehrerer alternativer Bilddatenquellen mit unterschiedlichen Pixeldichten. Dadurch kann der Browser ein Bild mit geeigneter Qualität für das Gerät des Benutzers auswählen (bestimmt durch die Pixeldichte, Skalierung oder Netzwerkgeschwindigkeit des Geräts). Beispielsweise sollten bei langsamen Mobilfunknetzen und Telefonen mit kleinem Bildschirm den Nutzern Bilder mit niedriger Auflösung zur Verfügung gestellt werden.

Das srcset-Attribut akzeptiert eine durch Kommas getrennte Liste von URLs, jede mit einer Modifikation x, die das nächste Pixelverhältnis (die Anzahl der physischen Pixel, die durch ein CSS-Pixel dargestellt werden) zum angeforderten Bild darstellt. Hier ist ein einfaches Beispiel:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>

Nach dem Login kopieren

Wenn in diesem Beispiel das Pixelverhältnis des Benutzergeräts 1 ist, wird das Bild mit niedriger Auflösung angezeigt; wenn es 2 ist, wird das Bild mit hoher Auflösung angezeigt, wenn es 3 oder höher ist, wird das Bild mit ultrahoher Auflösung angezeigt -res wird angezeigt wird angezeigt.

Sie können das Bild auch in verschiedenen Größen anzeigen lassen. Dies erfordert die Verwendung von w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

Nach dem Login kopieren

In diesem Beispiel ist das Bild mit niedriger Auflösung als 600 Pixel breit, das Bild mit hoher Auflösung als 1000 Pixel breit und das Bild mit ultrahoher Auflösung als 1400 Pixel breit definiert.

Größenattribut

Abhängig von der Bildschirmgröße des Benutzers möchten Sie möglicherweise Bilder unterschiedlich anzeigen. Beispielsweise möchten Sie möglicherweise ein Bild in zwei Spalten auf einem breiten Bildschirm und in einer Spalte auf einem schmaleren Bildschirm anzeigen. Dies kann mithilfe des Größenattributs erreicht werden. Damit können Sie einem Bild die Breite des Bildschirms zuweisen und dann über das srcset-Attribut das entsprechende Bild auswählen. Hier ist ein Beispiel:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>

Nach dem Login kopieren

Wenn die Breite des Ansichtsfensters größer als 40 em ist, definiert das Attribut „Größen“ die Breite des Bildes als 50 % der Breite des Ansichtsfensters. Wenn die Breite des Ansichtsfensters kleiner oder gleich 40 em ist, definiert das Attribut „Größe“ die Breite des Bildes als 100 % Breite des Ansichtsfensters.

Bildelement

Wenn das Ändern der Bildgröße je nach Bildschirm immer noch nicht Ihren Anforderungen entspricht und Sie unterschiedliche Bilder je nach Bildschirm anzeigen möchten, müssen Sie das Bildelement verwenden. Sie können Bilder mit unterschiedlichen Ressourcen für unterschiedliche Bildschirmgrößen definieren, indem Sie mit mehrere unterschiedliche -Elemente angeben. Das -Element dient als Quelle der URL zum Laden des Bildes.

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>

Nach dem Login kopieren

Wenn Sie mehr über responsive Bilder erfahren möchten, klicken Sie bitte auf So erstellen Sie responsive Bilder mit srcset.

Verwenden Sie form.reportValidity(), um das Formular

zu überprüfen Die in HTML5 definierte Methode form.checkValidity() kann prüfen, ob das Formular einem vordefinierten Validator entspricht und einen booleschen Wert zurückgeben. Die neue Methode „reportValidity()“ ist ähnlich – sie validiert ebenfalls ein Formular und gibt die Ergebnisse zurück, kann dem Benutzer aber auch Fehler melden. Hier ist ein Beispiel (bitte in Firefox oder Chrome testen):

Bitte sehen Sie sich die SitePoint (@SitePoint)-Beispiel-HTML 5.1-Berichtsgültigkeitsdemo auf CodePen an.

Das Eingabefeld „Vorname“ darf nicht leer sein. Wenn es nicht ausgefüllt ist, wird es mit einem Fehler markiert. Wenn es wie erwartet verläuft, sieht es so aus:

Working form validation with a message

Allowfullscreen-Eigenschaft von Frames

Das neue boolesche Attribut „allowfullscreen“ von Frames kann über die Methode „requestFullscreen()“ steuern, ob der Inhalt im Vollbildmodus angezeigt werden kann.

Verwenden Sie element.forceSpellCheck() zur Rechtschreibprüfung

Mit der neuen Methode element.forceSpellCheck() können Sie die Rechtschreibprüfung für Textelemente auslösen. Dies ist auch die erste in diesem Artikel aufgeführte Funktion, die noch von keinem Browser unterstützt wird. Möglicherweise könnte dies genutzt werden, um Elemente zu untersuchen, die nicht direkt vom Benutzer bearbeitet wurden.

Funktionen, die nicht in HTML5.1 geschrieben sind

Einige Funktionen waren im ersten Entwurf definiert, wurden aber schließlich entfernt, hauptsächlich aufgrund mangelnden Interesses seitens der Browser-Anbieter. Hier sind einige der lustigen:

inertes Attribut

Das Attribut „inert“ kann die Benutzerinteraktion für alle untergeordneten Elemente deaktivieren, genau wie das Hinzufügen des Attributs „disabled“ zu allen untergeordneten Elementen.

Dialogelement

Das