Heim > Artikel > Web-Frontend > Semantische H5-Tags
Semantische H5-Tags
- php中世界最好的语言Original
- 2018-03-27 14:01:572569Durchsuche
Dieses Mal bringe ich Ihnen das semantische -Tag von H5. Was sind die Vorsichtsmaßnahmen bei der Verwendung von H5-semantischen Tags?
Neue HTML5-Funktionen
Prägnanter DOCTYPE:
HTML5 hat nur einen einfachen Dokumenttyp ：<!DOCTYPE html> zeigt an, dass der Browser die Analyse gemäß dem Standardmodus durchführt.
Einfache und leicht zu merkende Codierungstypen
Sie können jetzt „charset“ in Meta-Tags verwenden: <meta charset=”utf-8″ />
Skripte und Links müssen nicht eingegeben werden
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
Mehr semantische neue Tags
Zum Beispiel:
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" /> Your browser does not support the video tag. </video>
Formularverbesserungen
Neue Eingabetypen: Farbe, E-Mail, Datum , Monat, Woche, Uhrzeit, Datum/Uhrzeit, Datum/Ortszeit, Nummer, Bereich, Suche, Telefonnummer und URL
Neue Attribute: erforderlichd, Autofokus, Muster, Liste, automatische Vervollständigung und Platzhalter
Neue Elemente:
Canvas-Tags zeichnen 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-Semantisierung
1. Was ist HTML-Semantisierung?
Bestimmen Sie die Semantik des Inhalts anhand von Tags. Bestimmen Sie beispielsweise anhand des h1-Tags, dass es sich bei dem Inhalt um einen Titel handelt, und bestimmen Sie anhand des Tags
, dass es sich bei dem Inhalt um einen Absatz handelt ;input>-Tag ist ein Eingabefeld usw.
2. Warum Semantik?
1). Wenn der Stil entfernt wird oder verloren geht, kann die Seite eine klare Struktur aufweisen.
2 Es ist praktisch für andere Geräte (z. B. Screenreader, Blindreader usw.). mobile Geräte), um die Darstellung von Webseiten sinnvoll zu gestalten
3). Förderlich für die Teamentwicklung und -wartung, Einhaltung der W3C-Standards, was die Differenzierung reduzieren kann
3. So ermitteln Sie Ihre Tags. Sind sie semantisch korrekt?
Entfernen Sie den Stil und prüfen Sie, ob die Webseitenstruktur gut organisiert und geordnet ist und ob sie immer noch gut lesbar ist.4. Gemeinsame semantische Tag-Module
Formular<form action="" method=""> <fieldset style="border: none"> <legend style="display: none">登录表单</legend> <p><label for="name">账号：</label><input type="text" id="name"></p> <p><label for="pw">密码：</label><input type="password" id="pw"></p> <input type="submit" name="登录" class="subBtn"> </fieldset> </form>Das Formularfeld sollte mit Fieldset-Tags umschlossen sein, und das Legenden-Tag sollte es sein Wird verwendet, um das Formular zu beschreiben. Der Beschreibungstext, der jedem
Einige Punkte, auf die bei semantischen Tags geachtet werden sollte
Verwenden Sie die unsemantischen Tags p und span so wenig wie möglich nicht offensichtlich. Wenn Sie p oder p verwenden können, versuchen Sie es mit p, da p standardmäßig über einen oberen und unteren Abstand verfügt, was für die Kompatibilität mit speziellen Terminals von Vorteil ist. Verwenden Sie keine reinen Stil-Tags wie: b, Schriftart, u usw., verwenden Sie stattdessen CSS-Einstellungen.
Text, der hervorgehoben werden muss, kann im Strong- oder Em-Tag eingefügt werden. Der Standardstil von Strong ist fett (nicht b verwenden), em ist kursiv (nicht i verwenden)
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So erzielen Sie den Animationseffekt beim Drehen von Bildern in HTML5Wie Sie automatisch Hintergrundmusik abspielen in H5-VideosDas obige ist der detaillierte Inhalt vonSemantische H5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：H5-MobilseitenzoomNächster Artikel：H5-Mobilseitenzoom
In Verbindung stehende Artikel
Mehr sehen- Das Vollbild-Bildlauf-Plug-in AlloyTouch erstellt in 30 Sekunden eine flüssige H5-Seite
- Tatsächlicher HTML5-Kampf und Analyse von Touch-Ereignissen (Touchstart, Touchmove und Touchend)
- Ausführliche Erläuterung der Beispiele für Bildzeichnungen in HTML5 Canvas 9
- Reguläre Ausdrücke und neue HTML5-Elemente
- So kombinieren Sie NodeJS und HTML5, um mehrere Dateien per Drag-and-Drop auf den Server hochzuladen