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.
Neues ElementHTML5 fügt einige bessere semantische Label -Elemente hinzu.
StrukturelementEinige reine Ausdruckselemente werden in HTML5 abgeschafft.
Reines AusdruckselementDie 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.
Elemente, die negative Auswirkungen auf die Verfügbarkeit habenFü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.
Nur einige Browser unterstützt ElementeFü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.
Neue API Canvas -APIDas 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 SvgSVG 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>Audio und Video
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.
<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>Erkennung von Browserunterstützung
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 = !!Geolocation API
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.
Woher kommen die Standortinformationen?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:
Drei -dimensionale Koordinaten
GPS
MAC -Adressen von RFID, WiFi und Bluetooth bis WiFi
// navigator.geolocation.getCurrentPosition (Updatelocation, Handlelocationeror); // Genauigkeit var timestamp = Position.coords.timestamp; Standort -Update Navigator.geolocation.ClearWatch (WatchID);Kommunikationsapi Cross -Dokument -Nachrichtenübertragung
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 Level2XMLHTTPREQUEST -API ermöglicht die AJAX -Technologie. Es gibt zwei Hauptaspekte:
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 APIWebSockets ist die leistungsstärkste Kommunikationsfunktion in HTML5.
Websockets HandshakeUm 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.
WebSockets -SchnittstelleZusä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.
Formen API Neues FormelementWenn 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>automatisch vervollständigt
Der Browser kann wissen, ob der Eingangswert durch automatische Vervollständigung erhalten bleiben sollte.
AutofokusDurch die Autofokuseigenschaften können Sie ein Tabellenelement angeben, um den Eingabefokus zu erhalten.
RechtschreibprüfungDie 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.
Listen Sie Funktionen und datalistische Elemente aufIn 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>Min und Max
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.
StufeBei den Steuerelementen vom Typ Input -Typ kann das Festlegen der Schritteigenschaften die Granularität des Zunahme oder verringerten Eingangswerts angeben.
ErforderlichSobald 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.
API ziehen und fallen lassen Draggable AttributWenn das draggierbare Element des Webelements wahr ist, kann dieses Element gezogen werden.
<Div draggable = true> draggable div </div>Ziehen und Drop
Der Drag -Prozess auslöst viele Ereignisse, hauptsächlich in Folgendes:
DraggableElement.AdDeVentListener ('DragStart', Funktion (e) {console.log ('Drag start!');}); DataTransfer -ObjektWä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!');}); Die Attribute des Datatransfer -Objekts sind: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 -APIWebspeicher ist eine sehr wichtige Funktion, die von HTML5 eingeführt wird.
SessionStorageSessionStorage speichert Daten in der Sitzung, und der Browser schaltet die Daten ab, um zu verschwinden.
LokalstorLocalStorage 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.
Der oben genannte Inhalt dieses Artikels.