Semantische H5-Tags

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 ： 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>
<script></script>

Mehr semantische neue Tags

Zum Beispiel:

,

,

,

,

,

, ,

usw.

Video und Audio

<video>
    <source></source>
    <source></source>
    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

    

        

登录表单

        

账号：

        

密码：

             

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

Eingabe-Tag entspricht, muss das Label-Tag verwenden und durch Festlegen des ID-Attributs für die Eingabe und Einstellung von for=someld im Label-Tag den Beschreibungstext ist mit dem entsprechenden Eingang verknüpft.

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 HTML5

Wie Sie automatisch Hintergrundmusik abspielen in H5-Videos

Das obige ist der detaillierte Inhalt vonSemantische H5-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!