Semantische H5-Tags
html5
标签
Semantik
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>
Nach dem Login kopieren
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>
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:
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 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>
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 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!
Erklärung dieser Website
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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
2 Wochen vor
By DDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
CakePHP-Tutorial
1377
52
1377
52
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
