HTML5 hat nur einen einfachen Dokumenttyp: , 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. ：<!DOCTYPE html>
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> Nach dem Login kopieren
Mehr semantische neue Tags
Zum Beispiel:
, , , , ,, , 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> Nach dem Login kopieren
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: , , , und
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(); Nach dem Login kopieren
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 Webseiten sinnvoll zu rendern
Entfernen Sie die Stile und prüfen Sie, ob die Webseitenstruktur gut organisiert und immer noch gut lesbar ist.
Formular
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> Nach dem Login kopieren
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!
was ist h5
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So implementieren Sie h5, um nach oben zu rutschen und die nächste Seite auf der Webseite zu laden
So bleiben Sie online auf TikTok unsichtbar
pcmark
Einführung in die Methode zum Abfangen von Zeichenfolgen in js
Was ist freier Speicherplatz?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
