Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der semantischen HTML5-Tags und der Kompatibilitätsverarbeitung
wird hauptsächlich zur Einführung von Informationen am Kopf der Seite verwendet und kann auch für die Abschnittsüberschrift verwendet werden. Der Titel kombiniert einen Titel und einen Untertitel oder eine Kombination aus Slogans
Navigation (eine Liste mit Links)
< ;nav>
Wunderbares Klassenzimmer
< nav>
< ;h2>Wunderbare Premium-Kurse
< /ul>
< ;footer>Der untere Teil der Fußzeile oder der untere Teil des Abschnitts
wird verwendet, um Uhrzeit oder Datum auszudrücken
Wir öffnen jeden Morgen um
ParameterIch habe ein Date am .
Optionsliste.
wird mit dem Eingabeelement verwendet, um die möglichen Werte der Eingabe zu definieren.
Öffnen-Attribut wird standardmäßig erweitert
< Zusammenfassung> Titel des Elements
Eine bekannte IT-Ausbildungseinrichtung in China< /p>
Dialog definieren
< dt>Teacher
< ;mark> Wörter oder Sätze, die markiert werden müssen
76
tag
Für Browser wie IE6-8, die keine semantischen HTML5-Tags unterstützen, können wir Javascript verwenden, um sie wie folgt zu lösen:
Fügen Sie am Kopf der Seite hinzu:
<script></p> <p>document.createElement(“header”);</p> <p>document.createElement(“ nav");</p> <p>document.createElement("footer");</p> <p>......</p> <p></script>
Style
Semantische HTML5-Tags unter IE6-8, nachdem wir sie mit js erstellt haben, haben sie keinen Standardstil oder werden nicht einmal angezeigt, daher müssen wir die Standardanzeige für diese Tags im Stylesheet definieren
Neue Eingabesteuerung
E-Mail: E-Mail-Textfeld, nicht anders als bei normalen Eingaben. Wenn es sich bei der Eingabe nicht um eine E-Mail handelt, schlägt die Überprüfung fehl.
Tel: Telefonnummer
URL: URL der Webseite
Suche: Nach der Texteingabe im Suchmaschinen-Chrom wird ein zusätzliches geschlossenes X angezeigt
Bereich: Werteauswahl innerhalb eines bestimmten Bereichs min, max, Schritt (Anzahl der Schritte) Beispiel: Verwenden Sie JS, um den aktuellen Wert anzuzeigen
Neue Eingabesteuerung_2
Zahl: ein Eingabefeld, das nur Zahlen enthalten kann
color: Farbauswahl
datetime: Zeigt das vollständige Datum an
datetime-local: Zeigt das vollständige Datum ohne Zeitzone an
time: Zeigt die Zeit ohne Zeitzone an
Datum: Datum anzeigen
Woche: Woche anzeigen
Monat: Monat anzeigen
Neue Formularmerkmale und Funktionen
Platzhalter: Eingabefeld Beispiel einer Eingabeaufforderung Informationen: Weibo-Passwortfeld-Eingabeaufforderung
Autovervollständigung: Ob der Benutzereingabewert gespeichert werden soll, ist standardmäßig aktiviert. Um die Eingabeaufforderung auszuschalten, wählen Sie „Aus“ aus
Autofokus: Geben Sie das Formular an, um den Eingabefokus zu erhalten
Liste und Datenliste: Erstellen Sie eine Auswahlliste für das Eingabefeld. Der Listenwert ist die ID des Datenlisten-Tags
erforderlich: Dieses Element ist erforderlich und darf nicht leer sein
Muster: Reguläres Verifizierungsmuster="d{1 ,5}"
Formularverifizierung
Gültigkeitsobjekt Sie können überprüfen, ob die Verifizierung wie folgt bestanden wurde. true wird zurückgegeben. Wenn eine Überprüfung fehlschlägt, wird false zurückgegeben
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing: wenn der Eingabewert leer ist
typeMismatch: Der Steuerwert entspricht der erwarteten Typinkongruenz
patternMismatch: Der Eingabewert entspricht nicht der Musterregelmäßigkeit
tooLong: überschreitet die maxLength maximale Grenze
rangeUnderflow: der überprüfte Bereichsminimalwert
rangeOverflow: Der maximale Wert des überprüften Bereichs
stepMismatch: Überprüfen Sie, ob der aktuelle Wert des Bereichs dem entspricht Regeln für Min., Max. und Schritt
customError entspricht nicht der benutzerdefinierten Überprüfung
setCustomValidity(); Benutzerdefinierte Validierung
Ungültiges Ereignis: Validierungsfeedback
Eingabe .addEventListener('invalid',fn,false)
Standardvalidierung verhindern: ev.preventDefault()
formnovalidate-Attribut: Validierung ausschalten
Formaction Definieren Sie die Übermittlungsadresse in abschicken
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der semantischen HTML5-Tags und der Kompatibilitätsverarbeitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!