HTML5 hat nur einen einfachen Dokumenttyp ：<!DOCTYPE html> , was bedeutet, dass der Browser es gemäß dem Standardmodus analysiert.
Sie können jetzt den Zeichensatz in Meta-Tags verwenden: <meta charset=utf-8″ />
<link rel=stylesheet href=path/to/stylesheet.css /><script src=path/to/script.js></script>Semantischere neue Tags
Zum Beispiel: <article>, <section>, <aside>, <hgroup>, <header>,<footer>, <nav>, <time>, <mark>, <figure> und <figcaption> usw.
Video und Audio<video width=640 height=320 preload=auto poster=0.jpg Controls> <source src=movie.ogg type=video/ogg /> <source src=movie.mp4 type=video/mp4 /> Ihr Browser funktioniert nicht Unterstützen Sie das Video-Tag.</video>Formularverbesserung
Neue Eingabetypen: Farbe, E-Mail, Datum, Monat, Woche, Uhrzeit, Datum/Uhrzeit, Datum/Uhrzeit-Lokal, Nummer, Bereich, Suche, Telefonnummer und URL
Neue Eigenschaften: erforderlich, Autofokus, Muster, Liste, automatische Vervollständigung und Platzhalter
Neue Elemente: <keygen>, <datalist>, <output>, <meter> und <progress>
Das Canvas-Tag zeichnet 2D-Grafiken.
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');context.beginPath();context.moveTo(100,100);context.lineTo(300,300);context.lineTo(100,500) ;context.lineWidth = 5;context.StrokeStyle = red;Context.Stroke(); Geografische Standorterfassung HTML-Semantik 1. Was ist HTML-Semantik?Bestimmen Sie die Inhaltssemantik anhand von Tags. Bestimmen Sie beispielsweise anhand des h1-Tags, ob es sich bei dem Inhalt um einen Titel handelt, ermitteln Sie anhand des Tags <p>, ob es sich bei dem Inhalt um einen Absatz handelt, ermitteln Sie anhand des Tags <input>, ob es sich um ein Eingabefeld handelt usw.
2. Warum Semantik?1). Wenn der Stil entfernt wird oder verloren geht, kann die Seite eine klare Struktur aufweisen.
2) Bequem für andere Geräte (z. B. Screenreader, Blindreader, mobile Geräte), um Webseiten auf sinnvolle Weise darzustellen
3) Förderlich für SEO
4) Es ist praktisch für die Teamentwicklung und -wartung und folgt den W3C-Standards, um die Differenzierung zu reduzieren.
3. Wie können Sie feststellen, ob Ihre Tags semantisch korrekt sind?Entfernen Sie die Stile und prüfen Sie, ob die Webseitenstruktur gut organisiert und immer noch gut lesbar ist.
4. Gemeinsame semantische Tag-Modulebilden
<form action= method=> <fieldset style=border: none> <legend style=display: none>Anmeldeformular</legend> <p><label for=name>Konto:</label><input type=text id =name></p> <p><label for=pw>Passwort:</label><input type=password id=pw></p> <input type=submit name=Login class=subBtn> </fieldset></form>
Die Formularfelder sollten mit Fieldset-Tags umschlossen sein, und das Legenden-Tag sollte zur Beschreibung des Zwecks des Formulars verwendet werden. Der Beschreibungstext, der jedem Eingabe-Tag entspricht, muss das Label-Tag verwenden, und die Beschreibung sollte durch Festlegen der ID erfolgen Attribut für die Eingabe und Einstellung for=someld im Label-Tag. Text wird mit der entsprechenden Eingabe verknüpft.
5. Einige Punkte, die bei der Verwendung semantischer Tags beachtet werden solltenVerwenden Sie so wenige unsemantische Tags div und span wie möglich;
Wenn die Semantik nicht offensichtlich ist, können Sie div oder p verwenden. Versuchen Sie, p zu verwenden, da p standardmäßig über einen oberen und unteren Abstand verfügt, was der Kompatibilität mit speziellen Terminals zugute kommt.
Verwenden Sie keine reinen Stil-Tags wie b, Schriftart, u usw., sondern verwenden Sie stattdessen CSS-Einstellungen.
Text, der hervorgehoben werden muss, kann in das Strong- oder em-Tag eingefügt werden. Der Standardstil von strong ist fett (verwenden Sie nicht b) und em ist kursiv (verwenden Sie nicht i).
ZusammenfassenDas Obige ist das semantische Tag der neuen HTML5-Funktion, die Ihnen der Herausgeber vorgestellt hat. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!