Beispielanalyse semantischer Tags, neue Funktionen in HTML5

HTML5 hat nur einen einfachen Dokumenttyp: 8b05045a5be5764f313ed5b9168a17e6, was bedeutet, dass der Browser es gemäß dem Standardmodus analysiert. Heute stellt Ihnen der Editor das Semantic -Tag vor, eine neue Funktion von HTML5. Interessierte Freunde sollten einen Blick auf

Neue Funktionen von HTML5

Prägnanter DOCTYPE:

HTML5 hat nur einen einfachen Dokumenttyp

, was bedeutet, dass der Browser es gemäß dem Standardmodus analysiert. ：8b05045a5be5764f313ed5b9168a17e6

Einfache und leicht zu merkende Codierungstypen

Sie können jetzt „charset“ in Meta-Tags verwenden:

b6c06a3eac5ba315bbbfde6d7627c15a

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: 23c3de37f2f9ebcb477c4a90aac6fffd , 2f8332c8dcfd5c7dec030a070bf652c3, 15221ee8cba27fc1d7a26c47a001eb9b, d8eccd9ed644b68a6460a2bb84548c82, 1aa9e5d373740b65a0cc8f0a02150c53,c37f8231a37e88427e62669260f0074d, 46dd80ba616c57a652514755c74c4211, 24203f2f45e6606542ba09fd2181843a 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" />
    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: aa983b9eb8086376f1f6481364a02e5a, fc86e7b705049fc9d4fccc89a2e80ee3, be6d67dae90cc1ad6469079e163d0939, 49c6123c49c6be380cb91db06cd3bfa9 und 6ecb87e5318a36c03c59e25d55f43372

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 e388a4556c0f65e1904146cc1a846bee, 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 Webseiten sinnvoll zu rendern
3). >3. So ermitteln Sie Ihre Tags. Sind sie semantisch korrekt?

Entfernen Sie die Stile und prüfen Sie, ob die Webseitenstruktur gut organisiert und immer noch gut lesbar ist.

4. Gemeinsame semantische Tag-Module

Formular

Die Formularfelder sollten 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.

<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>

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, p zu verwenden, da p standardmäßig einen oberen und unteren Abstand hat, 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 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)

Das obige ist der detaillierte Inhalt vonBeispielanalyse semantischer Tags, neue Funktionen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!