HTML 5.1 Neue Funktionen und Anwendungsbeispiele für neue Funktionen und Anwendung

Wie wir alle wissen, gehört HTML5 zur Wanwei Network Alliance (W3C). Im November 2016 aktualisierte W3C den HTML 5 -Standard der Langzeitausübung, das das erste kleine Update seit 2 Jahren war. Viele vorgeschlagene HTML 5.1 -Funktionsfunktionen wurden aufgrund von Konstruktionsfehlern und mangelnder Unterstützung durch Browserhersteller entfernt.

Obwohl es einige Elemente und Funktionsverbesserungen gibt, wird es in HTML 5.1 eingebracht, es ist immer noch ein kleines Update. Einige dieser neuen Elemente enthalten kombinierte Etiketten.

W3C und der Beginn der Entwicklung des HTML 5.2 -Entwurfs werden voraussichtlich Ende 2017 veröffentlicht. Was wir hier präsentieren möchten, ist die in Version 5.1 eingeführten neuen funktionalen Eigenschaften und Funktionsverbesserungen. Sie müssen JavaScript nicht verschieben, um diese Funktionen zu verwenden. Nicht alle Browser unterstützen diese Funktionen. Daher sollten Sie sie überprüfen, um die Unterstützung des Browsers zu überprüfen, bevor Sie sie auf die Produktionsumgebung anwenden.

Die meisten Personen, die Target = '_ leer' verwenden, kennen keine interessante Tatsache-das neu geöffnete Etikett kann das Fenster ändern. Opener.location auf einige Netzwerkfischereiseiten. Es wird Sie auf der offenen Seite darstellen, um einen böswilligen JavaScript -Code durchzuführen. Da der Benutzer der Ansicht ist, dass die Öffnungsseite sicher ist, werden sie nicht zweifeln.

Um dieses Problem vollständig zu beseitigen, hat HTML 5.1 die Verwendung der Rel = Noopner -Eigenschaft standardisiert, die durch Isolierung des Browser -Kontexts standardisiert wird. Rel = noopener kann in <a> und <Re> Tags verwendet werden.

 <A href =# target = _blank Roth = noopner> Der Link will mehr Ärger machen </a>

Das <FigCaption> -Tag repräsentiert den Titel oder die Legende, die dem <Abus> -Element zugeordnet ist, das normalerweise als Container für visuelle Elemente wie Bilder, Diagramme und Abbildungen verwendet wird. In der frühen HTML -Version kann <FigCaption> nur als erstes oder letztes <Abus> sub -label verwendet werden. HTML5.1 hat diese Grenze entspannt, und jetzt können Sie <Figcaption> überall im Container <ABILIEN> verwenden.

 <Artlicle> <h1> Die Überschrift der heutigen Nachrichten/Figuren> <p> Dies ist die Forth -Erhöhung der Benzinpreise in zwei Monaten und der dritte für Diesel in vierzehn Tagen

Spellscheck ist ein Aufzählungsattribut, das den Wert der leeren Zeichenfolge wahr und falsch annehmen kann. Wenn der Staat als wahr angegeben ist, bedeutet dies, dass das Element die Rechtschreibung und die Grammatikinspektion davon akzeptiert.

Element.forcesPellCheck () zwingt die Benutzeragenten, Rechtschreib- und Grammatikfehler zu melden, die im Textelement erkannt wurden, auch wenn der Benutzer die Eingabe auf das Element nie konzentriert.

 <p bellscheck = true> <label> Name: <Eingabe buchstäse = false id = textbox> </label> </p>

Mit der neuen Version von HTML können Sie ein leeres <option> -Element erstellen. Es kann sich um eine Unterelement von <Optgroup>, <datalist> oder <Select> sein. Sie werden feststellen, dass diese Funktion beim Entwerfen einer einseitigen benutzerfreundlichen Tabelle helfen kann.

Mit der für den Frame entwickelten Boolean Variable Den0 -Screen -Eigenschaft können Sie steuern, ob der Inhalt über den Bildschirm mit der Methode RequestFullCreen () angezeigt werden kann. Zum Beispiel verwenden wir als Beispiel Iframes, die in YouTube eingebettet sind. Sie müssen die Eigenschaft zum zulässigen Bildungsschutz festlegen, damit der Player das Video mit vollem Bildschirm anzeigen kann.

 <Artadicle> <header> <p> <img src =/usericons/16235> <b> Fred Flintstone </b> </p> <p> <a href =/posts/30934 r = bookmark> 12:44 < /a> - <a href =#A.503439551> Privatpost </a> </p> </header> <p> <p> Schauen Sie sich mein neues Video an! >

Mit HTML5.1 können Sie Header und Fußzeile in einen anderen Header einbetten. Sie können den Kopfelementen einen Header oder Fußzeile hinzufügen, wenn sie sich im Absatzinhalt enthalten. Wenn Sie detaillierte Ausarbeitung wie <Abschnitt> und <artikels> Tags zu semantischen Absatzelementen hinzufügen möchten, wird diese Funktion sehr nützlich.

Im folgenden Code enthält die <artikelslabel> -bezeichnung ein <header> -Tag, das mit einem <Weader> -Tag über ein <Versabschnitt> -Tag verfügt.

 <Arter> <header> <h2> Lektion: Wie man Hühnchen kocht </H2> <Abrechtig> <Hace> <h2> Über den Autor: Tom Haank </h2> <a href =./Tomhank/> Kontaktieren Sie ihn! </a/p> </header> <p> Experte in nichts als Kochen. In die Reißverschlussbeutel mit dem Huhn in die Luft entfernen

Mit der neuen Version von HTML können Sie Bilder mit Null Breite hinzufügen. Diese Funktion kann verwendet werden, wenn das Bild nicht dem Benutzer angezeigt werden muss. Wenn ein IMG -Element andere Verwendungszwecke enthält, ist es nicht nur ein Bild, beispielsweise als Teil des Dienstes, um die Anzahl der Seitenansichten zu berechnen. Verwenden Sie 0 Werte in den Eigenschaften der Breite und der Höhe. Für Bilder von 0 Breite wird empfohlen, leere Attribute zu verwenden.

 <Img src = theimageFile.jpg width = 0 height = 0 src = "/uploads/allimg/170217/22010q544-0.jpg"/>
 Mit der neuen ReportValidy () -Methode können Sie ein Formular überprüfen und die Ergebnisse zurücksetzen und Fehler an Benutzer in der geeigneten Position des Browsers melden. Benutzeragenten können mehr als eine Restriktionsregel melden, wenn ein einzelnes Element gleichzeitig auf mehrere Probleme stoßen. Für diese Situation ist die Kennworteingabe ein Muss -Inhalt, aber nicht gefüllt und wird als Fehler identifiziert.
 <h2> Formularvalidierung </h2> <p> Geben Sie Details ein </p> <form> <label> Obligatorischer Eingangstyp = Kennwortname = Kennwort erforderlich/> </Label> <Schaltfläche Typ = Subm It> Senden </Taste > </Form> <script> document.qurySelector ('Form')
 6. Der Kontext des Browsers
 In HTML 5.1 können Sie die <emenümen -Marke verwenden, um das Menü zu definieren, das ein oder mehrere <Senuitem> -Elemente enthält, und dann die Kontextmenu -Eigenschaft verwendet, um sie an ein beliebiges Element zu binden. Die ID des Elements <em Menü> sollte mit dem Wert des kontextmenuen Attributs des Elements übereinstimmen, das wir dem Kontextmenü hinzufügen möchten.
 Jedes <menuitem> kann eine der folgenden drei Formen haben:
 Radio -get -Option einer Gruppe;
 Kontrollkästchen -Wählen Sie die Option aus oder stornieren Sie die Option;
 Befehl -Executieren Sie eine Aktion beim Klicken.
 <H2 ContextMenu = Popup-Menu> Klicken Sie mit der rechten Maustaste, um die Kontextmenü-Demo zu erhalten. Type = command Label = Befehl Onclick = alert ('WARNUNG')> Kontrollkästchen 2 </Menuitem> <Menuitem type = Radio Name = Group1> Optionsschaltfläche A </Menuitem t ype = funk Name = Gruppe1 Checked = True> Optionsschaltfläche B </Menuitem> <Menuitem type = Kontrollkästchen Deaktiviert> Menüpunkt deaktivieren </Menuitem> </Menü>
 5. Verwenden Sie verschlüsselte Zufallsnummern für Skripte und Stile
 Cryptographic Nonce ist eine zufällig generierte Zahl, die nur einmal verwendet werden kann, und für jede Seitenanforderung muss sie generiert werden. Dieses Nonce -Attribut kann in den Elementen <Script> und <style> verwendet werden.
 Es wird im Allgemeinen in der Inhaltssicherheitsstrategie einer Website verwendet, um festzustellen, ob ein bestimmter Stil und ein bestimmtes Skript auf der Seite implementiert werden sollen. In dem unten angegebenen Code ist dieser Wert hartcodiert, aber im tatsächlichen Verwendungsszenario wird dieser Wert zufällig generiert.
 <script nonce = 'd3ne7uwp43bhr0e'> Der JavaScript -Code </script>
 4. Reverse Sequence Link -Beziehung
 Das Rev -Attribut ist in HTML4 definiert, erscheint jedoch nicht in HTML5. W3C wird beschlossen, rev -Attribute in <a> und <Link> Elementen wieder zu integrieren. Die Beziehung zwischen dem aktuellen und der Reverse -Verbindungsdokumente der Rev. Attributidentifikation. Es wurde aufgenommen, um das weit verbreitete Datenstruktur -Markierungsformat RDFA zu unterstützen.
 Verwenden wir zwei Dokumente, um ein Beispiel zu geben.
 // Dokument mit URL Kapitel1.html <Link href = Lektion2.html rel = NEXT REV = PREV> // DOCKUPTE WITH URL CAPITEL2.HTML <Link HREF = Lektion1.html = Prev = Next> <Link HREF = Lektion3 ROTH = NEXT REV = PREV>
 3.. Informationen anzeigen/ausblenden
 Mit dem neuen <details> und <summary> Elemente können Sie einem Absatz Erweiterungsinformationen hinzufügen. Sie können einen zusätzlichen Informationsblock über das Klickelement anzeigen oder ausblenden. Standardmäßig sind die zusätzlichen Informationen versteckt.
 Im Code sollten Sie die < -Zusammenfassung> -Marke in die <details> -Marke einfügen, wie unten gezeigt. Nach dem Etikett <summary> können Sie andere Inhalte hinzufügen, um versteckt zu werden.
 <ABSECTION> <H3> Fehlermeldung </h3> <details> <Summary> Diese Datei hat keinen Download -DU -Netzwerkfehler. <dt> Dateigröße: </dt> <dd> 8 kb </dd> <dt> Fehlercode: </dt> <dd> 342a </dd> </dl> </details> </Abschnitt>
 2. Weitere Eingangselementtypen
 Das HTML-Eingangselementelement hat drei Eingangstypen für Woche, Monat und DateTime-Local erweitert.
 Wie der Name zeigt, ermöglichen die ersten beiden Elemente Benutzer, einen Wochenwert und einen Monatswert zu wählen. Abhängig von der Unterstützung des Browsers werden sie in einen Zeichnungskalender dargelegt, sodass Sie eine bestimmte Woche oder einen bestimmten Monat eines Jahres auswählen können.
 DataTime-Local repräsentiert eine Datums- und Uhrendomäne, aber es gibt keine Zeitzoneneinstellungen. Die Daten können in einer ähnlichen Methode wie das Eingabeelement für Monat oder Woche ausgewählt werden, und die Zeit kann allein eingegeben werden.
 <ABSECTION> <H2> Woche, Monat und DateTime-Local </H2> <Formion = action_page.php> Wählen Sie eine Woche: <Eingabe typ = Action_page.php> Geburtstag (Monat und Jahr): <Eingabe typ = Datetime-local name = bdaytime> <Eingabe type = Sendenwert = send> </form> </§>
 1. Antwortbild
 Der W3C führt einige funktionale Eigenschaften ein, und das Antwortbild kann ohne CSS erreicht werden. Sie sind ...
 SRCSET -Bildattribut
 Mit dem SRCSet -Attribut können Sie mehrere optionale Bildquellen angeben, die einer unterschiedlichen Pixelauflösung entsprechen. Damit kann der Browser die entsprechende Qualitätsimplementierung gemäß den verschiedenen Benutzergeräten anzeigen. Zum Beispiel ist es besser, ein Bild mit niedrigem Auflösungsbetrag für Benutzer mit langsamen mobilen Geräten anzuzeigen.
 Sie können die SRCSET-Eigenschaft verwenden und ihre eigenen X-Modifikationssymbole mitbringen, um das Pixelverhältnis jedes Bildes zu beschreiben, wenn das Pixelverhältnis des Benutzers gleich 3 ist, das Bild von hochauflösendem Bild wird angezeigt.
 <Img src = clicks/niedrig res.jpg srcset = clicks/low-res.jpg 1x, klicks/mittel-res.jpg 2x, klicks/hochres.jpg 3x>
 Zusätzlich zum Pixelverhältnis können Sie auch das W -Modifikationssymbol verwenden, um Bilder von verschiedenen Größen anzugeben. Im folgenden Beispiel wird das hochauflösende Bild als Anzeige definiert, wenn die Breite 1600px beträgt.
 <Img src = clicks/niedrig res.jpg srcset = clicks/niedrig res.jpg 500W, klicks/mittel-res.jpg 1000w, klicks/hochres.jpg 1600W>
 Größenbildattribut
 Meistens möchten Ersteller unterschiedliche Bilder für eine unterschiedliche Bildschirmgröße anzeigen. Dies kann mit dem Größenattribut erreicht werden. Sie können die Breite für die Größe des an die Bildanzeige verteilten Speicherplatzs einstellen und dann mit der SRCSet -Eigenschaft das entsprechende Bild aus auswählen. Zum Beispiel…
 <Img src = clicks/niedrig res.jpg Größen = (max-Width: 25EM) 60VW, 100VW Srcset = Klicks/Low-Res.jpg 500W, Klicks/mittel-res.jpg 1000W, Klicks/High-Res.JPG 1600W>
 Hier definiert das Größenattribut 100%der Bildbreite des Fensters, wenn das Fenster größer als 25 em oder 60%der Ansichtsbreite der Ansicht ist, wenn es weniger als 25em entspricht.
 Bildelement
 Mit dem Bildelement können Sie Bilder für eine andere Bildschirmgröße deklarieren. Dies kann implementiert werden, indem <img> mit <Bild> Element einkapselt und mehrere <quelle> sub -Elemente beschrieben werden.
 <piktion> allein zeigt nichts. Sie wurden angenommen, dass die Standard -Bildquelle als Wert des SRC -Attributs deklariert wird und die optionale Bildquelle im SCRSet -Attribut platziert wird.
 <picture> <Source Media = (max-Width: 25EM) srcset = klicks/klein/niedrig > <Source Media = (max-Width: 60EM) srcset = klicks/groß/niedrig. Jpg 1x, Klicks/Large/Medium-Res.jpg 2x, Clices/Large/High-Res.jpg 3x> <img Src = Klicks/Standard/Medium- res.jpg> </piction>
 Zusammenfassen
 Das oben genannte Inhalt dieses Artikels.