Was sind die gemeinsamen neuen Funktionen von HTML5?

Gemeinsame neue Funktionen von HTML5: 2. Formularelemente; 5. Drag-and-Drop-API; ; 10. SVG-Zeichnung. HTML5 ist der neueste HTML-Standard, der speziell für die Übertragung umfangreicher Webinhalte entwickelt wurde, ohne dass zusätzliche Plug-Ins erforderlich sind. Er bietet neue Elemente und neue APIs, die die Erstellung von Webanwendungen vereinfachen.

Das Betriebssystem dieses Tutorials: Windows 10-System, HTML5-Version, DELL G3-Computer.

Was ist HTML5:

1. HTML5 ist der neueste HTML-Standard.

2. HTML5 wurde speziell für das Hosten umfangreicher Webinhalte entwickelt, ohne dass zusätzliche Plug-Ins erforderlich sind.

3. HTML5 verfügt über neue Semantik, Grafiken und Multimedia-Elemente.

4. Die neuen Elemente und neuen APIs von HTML5 vereinfachen die Erstellung von Webanwendungen.

5. HTML5 ist plattformübergreifend und für die Ausführung auf verschiedenen Hardwaretypen (PC, Tablet, Mobiltelefon, Fernseher usw.) konzipiert.

Gemeinsame neue Funktionen von HTML5:

1. Canvas-Element

Das Canvas-Element wird zum Zeichnen von Grafiken auf Webseiten verwendet. Es verfügt über mehrere Methoden zum Zeichnen von Pfaden, Rechtecken, Kreisen, Zeichen und zum Hinzufügen Bilder. Canvas zeichnet 2D-Grafiken über js und rendert sie Pixel für Pixel. Wenn das Bild nach seiner Fertigstellung geändert wird, wird die gesamte Szene neu gezeichnet.

2. Formularelemente

(1) Neues Formularelement

: Bietet eine zuverlässige Möglichkeit, den Benutzer zu überprüfen. Die Bezeichnung gibt das Schlüsselpaargeneratorfeld für das Formular an.

: Für verschiedene Arten von Ausgaben, z Berechnungen oder Skriptausgabe.

(2) Neues Formularattribut

Placehoder-Attribut: Eine kurze Eingabeaufforderung wird im Eingabefeld angezeigt, bevor der Benutzer den Wert eingibt. Dies ist die Standardfeldeingabeaufforderung.

erforderliches Attribut: ist ein boolesches Attribut, das Folgendes erfordert auszufüllendes Eingabefeld Nicht leer;

pattern-Attribut: Beschreibt einen regulären Ausdruck, der verwendet wird, um den Wert des

max/min-Attributs zu überprüfen: maximale und minimale Werte; numerische Intervalle für das Eingabefeld;

height/width-Attribut: wird für die Bildhöhe und -breite des -Tags verwendet.

autofocus-Attribut: ist ein boolesches Attribut, das automatisch den Fokus erhält, wenn die Seite geöffnet wird geladen;

Multiple-Attribut: ist ein boolesches Attribut, das die Auswahl mehrerer Werte im angibt.

3. Semantische Tags

Semantische Tags verleihen den Tags nicht nur ihre eigene Bedeutung, sondern bieten auch die Vorteile semantischer Tags: (1) Machen Sie die Codestruktur der Schnittstelle klarer und erleichtern Sie so das Lesen des Codes und mit dem Team zusammenarbeiten, um zu entwickeln; (2) ) Bequem für andere Geräte zum Parsen (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf semantische Weise darzustellen (3) Förderlich für die Suchmaschinenoptimierung (SEO); .

4. Medienelemente

Elemente zum Abspielen von Audiodateien

(1) Das Steuerattribut bietet Wiedergabepause und Lautstärkeregelung

(2) ein, das der Browser nicht unterstützt.

(4) unterstützt drei Audioformatdateien: mp3, wax, ogg.

Elemente zum Abspielen von Videodateien

(1) Das Steuerattribut stellt Wiedergabepause und Lautstärkesteuerung bereit, und Sie können auch Dom-Operationen verwenden: play() und pause(2) Das Videoelement stellt bereit Breite und Höhe steuern die Größe des Videos. Wenn es festgelegt ist, bleibt es beim Laden der Seite erhalten. Wenn es nicht festgelegt ist, wird es nicht beibehalten und die Seite wird basierend auf dem Originalvideo geändert.

5. Geolocation

HTML5 verwendet die Methode getCurrentPosition(), um den Standort des Benutzers zu ermitteln, und auf dieser Grundlage kann die Standortentfernung berechnet werden.

6. Drag-and-Drop-API

Drag-and-Drop ist eine häufige Funktion, das heißt, ein Objekt zu greifen und an einen anderen Ort zu ziehen. In HTML5 gehört Drag & Drop zum Standard und jedes Element kann per Drag & Drop verschoben werden. Der Drag-and-Drop-Vorgang ist in Quellobjekte und Zielobjekte unterteilt. Das Quellobjekt bezieht sich auf das Element, das Sie gerade ziehen, und das Zielobjekt bezieht sich auf die Zielposition, an der Sie es nach dem Ziehen platzieren möchten.

Die Ereignisse, die durch das Drag-and-Drop-Quellobjekt (das verschoben werden darf) ausgelöst werden können – 3 Ereignisse: Dragstart: Drag-Start Drag: Drag-Vorgang läuft Dragend: Drag-Ende

Zusammensetzung des gesamten Drag-Vorgangs: Drag-Start * 1 + Drag*n + Dragend*1.

Die Ereignisse, die durch das Drag-and-Drop-Zielobjekt (das sich nicht bewegt) ausgelöst werden können – 4:

dragenter: Ziehen in Dragover: Ziehen und Schweben Dragleave: Wegziehen Drop: Loslassen

der gesamten Drag-Komposition 1 des Ziehvorgangs: Dragenter*1 + Dragover*n + Dragleave*1

Zusammensetzung 2 des gesamten Ziehvorgangs: Dragenter*1 + Dragover*n + Drop*1.

7. Web Worker

Beim Ausführen eines Skripts in einer HTML-Seite ist der Status der Seite nicht reaktionsfähig, bis das Skript abgeschlossen ist. Web Worker ist JavaScript, das unabhängig von anderen Skripten im Hintergrund ausgeführt wird und die Leistung der Seite nicht beeinträchtigt. Sie können weiterhin tun, was Sie wollen: klicken, Inhalte auswählen usw., während der Web Worker im Hintergrund läuft.

8. Web Storage

Web Storage ist eine wichtige Funktion, die von H5 eingeführt wurde, um den lokalen Cache der Cookie-Speicherung aufzulösen. Früher wurden beim lokalen Speicher Cookies verwendet. Der Webspeicher muss jedoch sicherer und schneller sein, und der Webspeicher hat eine Kapazität von 5 MB und Cookies sind nur 4 KB groß.

9. Web Socket

Das WebSocket-Protokoll bietet einen Vollduplex-Kommunikationsmechanismus zwischen dem Webanwendungsclient und dem Server. In der WebSocket-API müssen der Browser und der Server lediglich eine Handshake-Aktion ausführen. Anschließend wird ein schneller Kanal zwischen dem Browser und dem Server gebildet, und Daten können direkt zwischen beiden übertragen werden. Der Browser sendet eine Anfrage an den Server, um über JavaScript eine WebSocket-Verbindung herzustellen. Nachdem die Verbindung hergestellt wurde, können Client und Server Daten direkt über die TCP-Verbindung austauschen. Nachdem Sie die Web-Socket-Verbindung hergestellt haben, können Sie über die send()-Methode Daten an den Server senden und vom Server zurückgegebene Daten über das onmessage-Ereignis empfangen.

10. SVG-Zeichnung

SVG bezieht sich auf skalierbare Vektorgrafiken, eine Sprache, die XML zur Beschreibung von 2D-Grafiken verwendet. In SVG wird jede gezeichnete Form als Objekt behandelt. Ändern sich die Eigenschaften eines SVG-Objekts, kann der Browser die Grafik automatisch reproduzieren.

Erweiterte Lektüre

Übliche HTML5-Ereignisse sind: 1. Allgemeine Ereignisse; 3. Formularbezogene Ereignisse; 5. Bearbeiten Ereignisse; 6. Ausgelöste Ereignisse; 7. Externe Ereignisse.

1. Allgemeine Ereignisse

onClick: Mausklick-Ereignis, wird hauptsächlich für Mausklicks innerhalb des Steuerbereichs eines Objekts verwendet; onMouseDown: Die Taste auf der Maus wird gedrückt Tastendruck: Ereignisse, die ausgelöst werden, wenn die Maus über den Bereich eines Objekts bewegt wird; onMouseOver: Ereignisse, die ausgelöst werden, wenn sich die Maus über den Bereich eines Objekts bewegt; onKeyPress: Ein Ereignis, das ausgelöst wird, wenn eine Taste auf der Tastatur gedrückt und losgelassen wird; onKeyDown: Ein Ereignis, das ausgelöst wird, wenn eine Taste auf der Tastatur gedrückt wird; onKeyUp: Ein Ereignis, das ausgelöst wird, wenn eine Taste auf der Tastatur gedrückt wird;

2. Seitenbezogene Ereignisse

onAbort: Das Bild wird beim Herunterladen unterbrochen; onBeforeUnload: Ein Ereignis, das ausgelöst wird, wenn der Inhalt der aktuellen Seite geändert werden soll; onError: Erfasst Fehler, die auf der aktuellen Seite auftreten Seite aus irgendeinem Grund, z. B. Skriptfehler und externe Datenreferenzfehler; onLoad: ein Ereignis, das ausgelöst wird, wenn die Seite leer ist und an den Browser übertragen wird, einschließlich des Abschlusses der externen Dateieinführung; ; onResize: Das Ereignis wird ausgelöst, wenn sich die Fenstergröße ändert. onStop: Das Ereignis wird ausgelöst, wenn die Stopp-Schaltfläche des Browsers gedrückt wird unterbrochen; onUnload: Das aktuelle Seitenereignis, das bei Änderung ausgelöst wird.

3. Formularbezogene Ereignisse

onBlur: ein Ereignis, das ausgelöst wird, wenn das aktuelle Element den Fokus verliert [kann sowohl durch Maus als auch durch Tastatur ausgelöst werden]; onChange: ein Ereignis, das ausgelöst wird, wenn das aktuelle Element den Fokus verliert und der Inhalt des Elementänderungen [Maus und kann über die Tastatur ausgelöst werden]; onFocus: ein Ereignis, das ausgelöst wird, wenn ein Element den Fokus erhält; onReset: ein Ereignis, das ausgelöst wird, wenn das RESET-Attribut im Formular aktiviert wird; .

4. Fortlaufendes Untertitelereignis

onBounce: ein Ereignis, das ausgelöst wird, wenn der Inhalt im Marquee den Anzeigebereich verlässt; onFinish: ein Ereignis, das ausgelöst wird, wenn das Marquee-Element den anzuzeigenden Inhalt vervollständigt; Das Marquee-Element vervollständigt den anzuzeigenden Inhalt. Das Ereignis wird ausgelöst, wenn die Anzeige des Inhalts beginnt.

5. Ereignis bearbeiten

onBeforeCopy HTML: Ein Ereignis, das ausgelöst wird, bevor der aktuell ausgewählte Inhalt der Seite in die Zwischenablage des Betrachters kopiert werden soll; onBeforeCut: Wenn ein Teil oder der gesamte Inhalt der Seite entfernt wird die aktuelle Seite [Clip] Ereignis, das ausgelöst wird, wenn ein Element in die Systemzwischenablage des Betrachters verschoben wird.

6. Ausgelöste Ereignisse

onBeforeEditFocus: Das aktuelle Element geht in den Bearbeitungsstatus über; onBeforePaste: Das Ereignis wird ausgelöst, wenn der Inhalt aus der Systemzwischenablage des Betrachters auf die Seite übertragen [eingefügt] wird; onBeforeUpdate: Benachrichtigt das Zielobjekt, wenn der Betrachter einfügt der Inhalt in der Systemzwischenablage; onContextMenu: Ein Ereignis, das ausgelöst wird, wenn der Browser die rechte Maustaste drückt, um das Menü anzuzeigen, oder das Seitenmenü über Tastaturtasten auslöst [versuchen Sie, onContentMenu="return false" zur Seite hinzuzufügen, um die Verwendung von zu deaktivieren rechte Maustaste]; onCopy: Ein Ereignis, das ausgelöst wird, wenn der aktuell ausgewählte Inhalt auf der Seite kopiert wird; onCut: Ein Ereignis, das ausgelöst wird, wenn der aktuell ausgewählte Inhalt auf der Seite ausgeschnitten wird; ]; onDragDrop: Ein externes Objekt wird mit der Maus in das aktuelle Fenster oder Frame gezogen; onDragEnd HTML: Ereignis wird ausgelöst, wenn das Ziehen mit der Maus beendet wird, d. h. die Maustaste wird losgelassen; der Geltungsbereich seines Containerereignisses; onDragLeave: ein Ereignis, das ausgelöst wird, wenn ein mit der Maus gezogenes Objekt den Geltungsbereich seines Containers verlässt; onDragOver: ein Ereignis, das ausgelöst wird, wenn ein gezogenes Objekt in den Geltungsbereich eines anderen Objekts gezogen wird [Aktivitätsereignis]; : ein Ereignis, das ausgelöst wird, wenn ein Objekt gezogen werden soll; onDrop: ein Ereignis, das ausgelöst wird, wenn die Maustaste während eines Ziehvorgangs losgelassen wird; onLoseCapture: ein Ereignis, das ausgelöst wird, wenn ein Element den durch die Mausbewegung gebildeten Auswahlfokus verliert; wenn Inhalt eingefügt wird; onSelect: Ereignis, das ausgelöst wird, wenn Textinhalt ausgewählt wird; onSelectStart HTML: Ereignis, das ausgelöst wird, wenn die Auswahl von Textinhalten beginnt.

7. Externe Ereignisse

onAfterPrint: ein Ereignis, das ausgelöst wird, wenn das Dokument gedruckt wird; onFilterChange: ein Ereignis, das ausgelöst wird, wenn sich der Filtereffekt eines Objekts ändert; : Ereignis, das ausgelöst wird, wenn der Betrachter F1 oder die Hilfeauswahl des Browsers drückt; onPropertyChange: Ereignis, das ausgelöst wird, wenn sich eine der Eigenschaften des Objekts ändert; onReadyStateChange: Ereignis, das ausgelöst wird, wenn sich der Initialisierungseigenschaftswert des Objekts ändert;

Das obige ist der detaillierte Inhalt vonWas sind die gemeinsamen neuen Funktionen von HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!