Neue Funktionen von HTML5, die für das Front -End -Interview erforderlich sind

HTML5: HTML5 ist die nächste Generation von HTML, die zu neuen Standards für HTML, XHTML und HTML DOM wird. Lassen Sie uns heute über eine Frage sprechen, die mir jedes Mal gestellt wird, wenn das Front -End -Interview das neue Merkmal von HTML5 ist. Dies ist das Grundwissen, das am vorderen Ende des Lernens gemeistert werden muss.

HTML5 fügt einige bessere semantische Label -Elemente hinzu.

1. Das Artikelelement stellt einen unabhängigen Inhalt dar, der sich nicht mit dem Kontext bezieht, z. B. einen Artikel in einem Blog.
2. Abgesehen von Element repräsentiert andere Inhalte als Artikelinhalte, unterstützte Informationen.
3. Das Header -Element repräsentiert einen Inhaltsblock oder den Header der gesamten Seite auf der Seite.
4. Das HGroup -Element wird verwendet, um den Titel eines Blocks oder der gesamten Seite auf der Seite zu kombinieren.
5. Das Fußzeilenelement gibt einen Inhaltsblock oder eine vollständige Seite auf der Seite an.
6. Das Figurenelement repräsentiert die Gruppierung von Medieninhalten und deren Titel.
7. Das Abschnittselement repräsentiert einen Inhaltsblock auf der Seite, z. B. Kapitel.
8. NAV -Elemente geben den Navigationslink auf der Seite an.

1. Videoelement wird verwendet, um Video zu definieren.
2. Audioelement wird verwendet, um Audio zu definieren.
3. Das Canvas -Element wird verwendet, um Grafiken anzuzeigen, die selbst kein Verhalten und nur ein Stück Leinwand haben.
4. Einbettenelemente werden verwendet, um verschiedene Multimedien einzufügen.
5. Markelement wird verwendet, um Highlights anzuzeigen.
6. Das Fortschrittselement wird verwendet, um den Fortschritt jeglicher Art von Aufgabe zu zeigen.
7. Messelemente geben Maßnahmen an und definieren die Messung innerhalb des vordefinierten Bereichs.
8. Zeitelement wird verwendet, um Datum oder Uhrzeit anzuzeigen.
9. Befehlselement, die die Befehlstaste angibt.
10. Detailelemente werden verwendet, um die Detailinformationen anzuzeigen, die der Benutzer benötigt und das er erhalten werden kann.
11. Zusammenfassendes Element wird verwendet, um sichtbare Titel für Detailelemente zu definieren.
12. Das Datalist -Element wird verwendet, um optionale Datenlisten anzuzeigen.
13. Das DataGrid -Element wird auch verwendet, um die optionale Datenliste anzuzeigen, die in Form einer Baumliste angezeigt wird.
14. Das Keygen -Element zeigt einen Schlüssel an, um zu generieren.
15. Ausgangselemente geben verschiedene Arten von Ausgang an.
16. Quellelemente definieren Medienressourcen für Medienelemente.
17. Das Menüelement gibt die Menüliste an.
18. Ruby -Element repräsentiert Ruby -Kommentare, RT -Elemente repräsentieren die Interpretation oder Aussprache von Zeichen. Das RP -Element wird in Ruby -Notizen verwendet, um den vom Browser angezeigten Inhalt zu definieren, der Ruby -Elemente nicht unterstützt.
19. WBR -Elemente weisen auf ein weiches Schalter hin. Der Unterschied zum BR -Element besteht darin, dass das BR -Element bedeutet, dass das WBR -Element die Breite des Browserfensters oder das übergeordnete Element -Level -Element bedeutet. Ändern Sie die Linie nicht und wenn die Breite nicht ausreicht, nehmen Sie die Initiative, um die Bank zu ändern.
20. BDI -Elemente definieren die Textrichtung des Textes, damit er aus der Richtung des Textes um ihn herum ausgeschaltet wird.
21. Das Dialogelement gibt das Dialogfeld oder Fenster an.

Einige reine Ausdruckselemente werden in HTML5 abgeschafft.

Die Elemente des reinen Ausdrucks sind jene Elemente, die durch CSS ersetzt werden können. BaseFont, Big, Center, Schriftart, S, Streik, TT, U, ihre Funktionen werden nur für die Seitenanzeige angezeigt.

Für Frameset -Elemente, Rahmenelemente und NoFrames -Elemente, da das Frame -Framework negativ auf die Webverfügbarkeit wirkt, wird das Frame -Framework in HTML5 nicht mehr unterstützt und unterstützt nur das IFRame -Framework.

Für Applet, BGSound, Blink, Festzelt und andere Elemente, da nur einige Browser -Unterstützung, insbesondere BGSound -Elemente und Festzeltelemente, nur durch IE unterstützt werden, werden sie in HTML5 abgeschafft. Die Applet -Elemente können durch Einbettenelemente oder Objektelemente ersetzt werden, BGSound -Elemente können durch Audioelemente ersetzt und durch JavaScript -Programmierung ersetzt werden.

Das oben erwähnte Canvas -Element kann eine Leinwand für die Seite zur Anzeige der Grafik bereitstellen. In Kombination mit der Canvas -API können Sie verschiedene Grafiken, Diagramme, Bilder und Animationen auf dieser Leinwand dynamisch generieren und anzeigen. Leinwand ist im Wesentlichen grafisch. Es ist nicht erforderlich, jedes Diagramm als Objektspeicher zu verwenden, und die Leistungsleistung ist sehr gut.

Verwenden Sie die Canvas -API, um zuerst den Kontext des Canvas -Elements zu zeichnen, und verwenden Sie dann die verschiedenen im Kontext beschlossenen Zeichnungsfunktionen.

 <Canvas ID = Canvas> Inhalt < /Canvas> <Script> var canvas = document.getElementById ('Canvas'); / Praxis zeigt, dass der Standard -Fillstyle schwarzer Kontext ist

SVG ist eine weitere Grafikfunktion von HTML5. HTML5 führt die innere Union SVG ein, damit SVG -Elemente direkt in der HTML -Marke erscheinen können.

 <svg Höhe = 100 Breite = 100> <Kreis Cx = 50 Cy = 50 r = 50 /svg>

Die Entstehung von Audio- und Videoelementen hat HTML5 -Medienanwendungen neuer Auswahlmöglichkeiten getroffen. Für diese beiden Elemente bietet die HTML5 -Spezifikation eine allgemeine, vollständige und skript -kontrollierte API.

Bevor die HTML5 -Spezifikation herauskommt, besteht die typische Möglichkeit, Videos auf der Seite abzuspielen, um Flash, QuickTime oder Windows Media Plug -in zu verwenden, um Audio und Video in HTML zu integrieren. Tags.

1. Als Funktion der nativen Unterstützung des Browsers müssen die neuen Audio- und Videoelemente nicht installiert werden.
2. Medienelemente möchten, dass die Webseite APIs bereitstellt, die universell, integriert und Skript sind -kontrolliert.

 <Video src = Video.Webm Controls> <Objektdaten = videoplayer.swf type = application /x-shockwave-flash> <param name = movie vote = Video.swf /> < /Object> Ihr Browser unterstützt HTML5-Video nicht. </Video>

Unabhängig davon, ob die Browsererkennung Audioelemente oder Videoelemente unterstützt, ist die einfachste Möglichkeit, sie dynamisch mit Skripten zu erstellen, und dann festzustellen, ob bestimmte Funktionen existieren.

 var hasvideo = !!

Die HTML5 -Geolocation -API (geografische Positionierungs -API) kann Benutzer auffordern, ihre Position zu teilen. Die Nutzungsmethode ist sehr einfach. . Die Standortinformationen bestehen aus Breitengrad, Längengradkoordinaten und einigen anderen Metadaten.

Die Geolocation -API gibt nicht an, welche zugrunde liegende Technologie mit dem Benutzer die Anwendung der Anwendung lokalisiert. Stattdessen wird nur verwendet, um die API von Standortinformationen abzurufen, und die durch die API abgerufenen Daten haben nur einen gewissen Grad an Genauigkeit, und es kann nicht garantieren, dass der Standort des Gerätsrendits korrekt ist. Das Gerät kann die folgende Datenquelle verwenden:

1. IP -Adresse

   Drei -dimensionale Koordinaten

   GPS

   MAC -Adressen von RFID, WiFi und Bluetooth bis WiFi

2. GSM- oder CDMA -Telefon -ID
3. Benutzeranpassete Daten

 // navigator.geolocation.getCurrentPosition (Updatelocation, Handlelocationeror); // Genauigkeit var timestamp = Position.coords.timestamp; Standort -Update Navigator.geolocation.ClearWatch (WatchID);

Bei Sicherheitsüberlegungen war die Kommunikation zwischen Rahmen, Registerkarten und Fenstern im selben Browser immer streng begrenzt. In Wirklichkeit besteht jedoch eine vernünftige Nachfrage nach Inhalt verschiedener Websites, die im Browser interagieren, um zu interagieren. In diesem Fall können diese Anwendungen, wenn der Browser einen direkten Kommunikationsmechanismus bereitstellen kann, besser organisiert werden.

Eine neue Funktion wird in HTML5, Cross -Dokument -Nachrichtenkommunikation eingeführt, mit der sichergestellt werden kann, dass Iframe, TAB -Seiten und Fenster sicher durchgeführt werden. Die Postmessage -API ist die Standardmethode zum Senden von Nachrichten.

 Window.postMessage ('Hallo, Welt', 'http://www.example.com/');

Wenn Sie die Nachricht erhalten, müssen Sie der Seite nur eine Ereignisverarbeitungsfunktion hinzufügen. Wenn eine Nachricht eintrifft, wird die Quelle der Nachricht festgelegt, um zu entscheiden, ob sie mit der Nachricht umgehen soll.

 Window.adDeVentListener (Message, MessageHandler, True); t erkennen // Die Nachricht wird ignoriert}}

Das Nachrichtenereignis ist ein DOM -Ereignis mit Daten (Daten) und Ursprungsattributen. Das Datenattribut ist die tatsächliche Nachricht, die vom Absender übergeben wurde, und das Ursprungsattribut ist die Sendungsquelle.

XMLHTTPREQUEST -API ermöglicht die AJAX -Technologie. Es gibt zwei Hauptaspekte:

1. Cross -Tource xmlhttprequest
2. Fortschritt

In der Vergangenheit beschränkte sich XMLHTTPrequest auf homologe Kommunikation, und XMLHTTPrequest Level2 realisierte den transnationalen XMLHTTPrequest durch CORs. Cross -Source -HTTP -Anforderung enthält einen Ursprungskopf, der dem Server die Quellinformationen von HTTP -Anforderungen zur Verfügung stellt.

WebSockets ist die leistungsstärkste Kommunikationsfunktion in HTML5.

Um eine WebSockets -Kommunikation festzulegen, aktualisieren der Client und Server das HTTP -Protokoll auf das WebSocket -Protokoll beim Schütteln von Händen auf das WebSocket -Protokoll. Sobald die Verbindung erfolgreich hergestellt wurde, können wir die WebSocket -Nachricht zwischen dem Client und dem Server im vollständigen Dual -Working -Modus hin und her übergeben.

Zusätzlich zur Definition des WebSockets -Protokolls definiert die Spezifikation auch die WebSocket -Schnittstelle für die JavaScript -Anwendung. Die Verwendung der Websockets -Oberfläche ist sehr einfach. Um den Remote -Host zu verbinden, müssen Sie nur eine neue WebSocket -Instanz erstellen, um ein Paar URLs bereitzustellen, die eine Verbindung herstellen.

1. Telelement, das die Telefonnummer angibt.
2. Das E -Mail -Element gibt das Textfeld von E -Mail -Adresse an.
3. Das URL -Element gibt die URL der Webseite an.
4. Suchelement für Suchmaschinen, wie das Suchfeld oben auf der Website.
5. Bereichselement, numerischer Selektor in einem bestimmten Bereich, typische Anzeige ist Schiebebalken.
6. Das Zahlenelement enthält nur Wertefelder.

1. Farbelement, Farbauswahl, basierend auf Farbpalette oder Malvorlagen zur Auswahl.
2. Das DateTime -Element zeigt das vollständige Datum und die vollständige Uhrzeit, einschließlich der Zeitzone.
3. DateTime-Local, Datum und Uhrzeit anzeigen.
4. Zeitelement, Zeitauswahl und Indikator für die Zeitzone.
5. Datumselement, Datumsauswahl.
6. Woche Element, wöchentlicher Selektor in einem bestimmten Jahr.
7. Monatelement, ein monatlicher Selektor in einem bestimmten Jahr.

Wenn der Benutzer nicht über den Eingabwert verfügt, kann die Eingabesteuerung eine deskriptive Beschreibung oder die Aufforderung an den Benutzer über die Platzhalterfunktion anzeigen.

 <Eingabename = Name Placeholder = Erster und Nachname>

Der Browser kann wissen, ob der Eingangswert durch automatische Vervollständigung erhalten bleiben sollte.

Durch die Autofokuseigenschaften können Sie ein Tabellenelement angeben, um den Eingabefokus zu erhalten.

Die Eingabesteuerung mit Textinhalt und der textarea räumlichen Steuerung SpecialCheck -Eigenschaft. Nach dem Einstellen fragen Sie den Browser, ob Sie Feedback aus den Ergebnissen der Rechtschreibprüfung geben sollten. Das Rechtschreibprüfungsattribut muss zugewiesen werden.

In Kombination mit den Listenmerkmalen und den Datalist -Elementen können Entwickler eine Wertschöpfungsliste für eine Eingabesteuerungsteuerung erstellen.

 <datalist id = contactList> <option [email protected]> </option> <Option [email protected]> </option> </datalist> <Eingabe type = E -Mail -ID = Kontaktliste = Kontaktliste>

Durch Einstellen der MIN- und Max -Funktionen kann der Werteingangsbereich des Bereichs Eingangsfeld zwischen dem Minimum und dem höchsten Wert begrenzt sein. Sie können nur ein oder zwei oder zwei festlegen oder nicht einstellen.

Bei den Steuerelementen vom Typ Input -Typ kann das Festlegen der Schritteigenschaften die Granularität des Zunahme oder verringerten Eingangswerts angeben.

Sobald eine erforderliche Funktion für eine Steuerung vom Typ Eingabe festgelegt ist, muss dieses Element ausgefüllt werden, andernfalls kann das Formular nicht eingereicht werden.

Wenn das draggierbare Element des Webelements wahr ist, kann dieses Element gezogen werden.

 <Div draggable = true> draggable div </div>

Der Drag -Prozess auslöst viele Ereignisse, hauptsächlich in Folgendes:

1. Dragstart: Das Webseite Element wird beim Ziehen ausgelöst.
2. Ziehen: Das gezogene Element wird während des Zuges weiterhin ausgelöst.
3. Dragenter: Wenn das gezogene Element beim Eingeben des Zielelements ausgelöst wird, sollte das Ereignis dem Zielelement angehört werden.
4. DragLeave: Wenn das gedrückte Element ausgelöst wird, sollte das Ereignis dem Objektelement angehört werden.
5. Dragover: Dauerhafte Auslöser Wenn das Dragelement im Zielelement bleibt und das Ereignis dem Zielelement angehört werden sollte.
6. DRAP: Ziehen Sie Element oder Datei, die aus dem Dateisystem ausgewählt wurden, beim Ziehen und Fallen aus.
7. Dragend: Das Webseitenelement wird am Ende ausgelöst.

 DraggableElement.AdDeVentListener ('DragStart', Funktion (e) {console.log ('Drag start!');});

Während des Drags haben die von der Rückruffunktion akzeptierten Ereignisparameter ein DataTransfer -Attribut, das auf ein Objekt hinweist, einschließlich verschiedener Informationen im Zusammenhang mit dem Ziehen.

 DraggableElement.AdDeVentListener ('DragStart', Funktion (Ereignis) {Event.Datatransfer.setData ('Text', 'Hallo Welt!');});

1. Dr.
2. Effektiv: Angeben der zulässigen Operationen sind die möglichen Werte Kopien, Verschieben, Link, CopyLink, Copymove, LinkMove, ALL, NONE und nicht initialisiert (der Standardwert entspricht allen, dh alle Operationen zuzulassen).
3. Dateien: Enthält ein filelistisches Objekt, das die Datei angibt, die in der Drag & Drop beteiligt ist, die hauptsächlich zum Verarbeiten von Dateien verwendet wird, die aus dem Dateisystem in den Browser gezogen werden.
4. Typen: Die Art der Daten, die im DataTransfer -Objekt gespeichert sind.

1. SetData (Format, Daten): Speichern Sie Daten im DataTransfer -Objekt. Das erste Parameterformat wird verwendet, um den Speicherdatentyp wie Text, URL, Text/HTML usw. anzugeben.
2. GetData (Format): Nehmen Sie die Daten aus dem DataTransfer -Objekt.
3. ClearData (Format): Löschen Sie die vom DataTransfer -Objekt gespeicherten Daten. Wenn der Formatparameter angegeben ist, werden nur die Daten des Formats gelöscht, andernfalls werden alle Daten entfernt.
4. SetDagimage (Imagelement, x, y): Geben Sie das während des Drag -Prozess angezeigte Bild an. Standardmäßig zeigen viele Browser eine halbtransparente Version des Dragging -Elements. Die Parameterimgelung muss ein Bildelement sein, nicht der Pfad des Bildes, und der Parameter x und y geben die Position des Bildes für die Maus an.

JavaScript ist ein einzelner Thread. Daher blockiert die Berechnung einer langen Dauer, um den UI -Thread zu blockieren, wodurch der Text den Text im Textfeld gefüllt, auf die Schaltfläche usw. klickt und in den meisten Browsern, sofern das Steuerelement zurückgegeben wird, nicht geöffnet wird Eine neue Registerkartenseite Die Lösung dieses Problems ist Web Worker, mit dem Webanwendungen Hintergrundverarbeitungsfunktionen haben, und die Unterstützung für Multi -Threads ist sehr gut.

Das in Webangestellten ausgeführte Skript kann jedoch auf der Seite nicht auf das Fensterobjekt zugreifen, dh Web -Mitarbeiter können nicht direkt auf die Webseite und die DOM -API zugreifen. Obwohl Webarbeiter nicht dazu führen, dass die UI der Browser nicht mehr reagiert, wird der CPU -Zyklus immer noch verbraucht, was zu einer langsameren Reaktionsgeschwindigkeit führt.

Webspeicher ist eine sehr wichtige Funktion, die von HTML5 eingeführt wird.

SessionStorage speichert Daten in der Sitzung, und der Browser schaltet die Daten ab, um zu verschwinden.

LocalStorage hat immer Daten über den Client gespeichert, es sei denn, es wird nicht manuell gelöscht, wird es aufbewahrt.

Unabhängig davon, ob es sich um SessionStorage oder LocalStorage handelt, ist die API, die verwendet werden kann, gleich.

1. Daten speichern: localStorage.setItem (Schlüssel, Wert);
2. Daten lesen: localStorage.getItem (Schlüssel);
3. Löschen einer einzelnen Daten: LocalStorage.RemoveItem (Schlüssel);
4. Alle Daten löschen: localStorage.clear ();
5. Schlüssel, um einen bestimmten Index zu erhalten: LocalStorage.Key (Index);

Der oben genannte Inhalt dieses Artikels.