Web-Frontend
HTML-Tutorial
Was bedeutet Klasse in HTML? Einführung in die Verwendung des Klassenattributs von HTML (mit Beispielen)
Was bedeutet Klasse in HTML? Einführung in die Verwendung des Klassenattributs von HTML (mit Beispielen)
In diesem Artikel werden hauptsächlich die Bedeutung von Klassen in HTML und die Analyse von Anwendungsbeispielen von Klassen in HTML vorgestellt. Hinten links finden Sie auch eine Erläuterung der Rolle der HTML-Klasse. Als nächstes lesen wir gemeinsam diesen Artikel
Lassen Sie uns zunächst die Bedeutung von Klasse in HTML vorstellen:
Das Klassenattribut gibt den Klassennamen des Elements an ( Klassenname ).
Das Klassenattribut wird am häufigsten verwendet, um auf die Klasse im Stylesheet zu verweisen. Sie können es jedoch auch verwenden, um HTML-Elemente mit bestimmten Klassen über JavaScript zu ändern.
Die Klasse = in HTML ist ein Selektor, der als Bezeichner verstanden werden kann, der zur Identifizierung bestimmter Tags verwendet wird.
Zum Beispiel:
Außerdem ist die allgemeine Flash-Datei unsichtbar, sie wird nur aufgerufen. Wenn Sie die Flash-Datei einzeln ansehen oder direkt herunterladen möchten, können Sie den Namen der Flash-Datei entsprechend dem Pfad in den Browser kopieren und sie direkt ansehen.
Hinweis: Das Klassenattribut kann nicht in den folgenden HTML-Elementen verwendet werden: Basis, Kopf, HTML, Meta, Param, Skript, Stil und Titel.
Tipp: Sie können HTML-Elementen mehrere Klassen zuweisen, zum Beispiel:
Tipp: Klassennamen dürfen nicht mit Zahlen beginnen! Nur Internet Explorer unterstützt diesen Ansatz.
Attributwert des Klassenattributs in HTML:
Klassenname: Gibt den Namen der Klasse des Elements an. Um mehrere Klassen für ein Element anzugeben, trennen Sie die Klassennamen durch Leerzeichen.
Jetzt werfen wir einen Blick auf die Verwendung des Klassenattributs in HTML:
Hier ist ein Beispiel für das Klassenattribut in HTML: Verwendung des Klassenattributs in HTML Dokumente:
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 id="PHP中文网">PHP中文网</h1>
<p>一个编程网站</p>
<p class="important">这里是PHP中文网</p>
</body>
</html>Der Effekt ist wie folgt:
Wir können sehen, dass dieses Bild die Wörter geändert hat, aber der Text eines p-Tags hat keine Auswirkung , weil Der Effekt wurde noch nicht festgelegt.
Klasse ist nur eine Selektor-ähnliche ID. Nach der Definition des Stils wird sie vom HTML-Tag aufgerufen, um das Seitenlayout, das Layout und den Stil zu realisieren.
Hier ist ein weiteres Beispiel einer HTML-Klasse:
<style>
#nav{float:left;}
/*id调用*/
.text{font-size:30px;}
.text2{font-size:10px;}
/*class调用*/
</style>
<body>
<div id="nav">
<p class="text">第一行文字PHP中文网</p>
<p class="text2">PHP中文网第二个文字</p>
</div>
<body>Der Effekt ist sehr offensichtlich, wie unten gezeigt:
Eine Schriftart hat 30 Pixel und die andere nur 10 Pixel. Ist das nicht offensichtlich? Dies ist nur das Layout des Definitionsstils des Klassenselektors.
Erklärung der Rolle der Klasse in HTML:
Klasse wird im Allgemeinen verwendet, um Stileinstellungen zu vereinheitlichen, wie z. B. alle Li in einem ul, seine Schriftart und Hintergrundfarbe usw. können Sie die Klassennamen aller Lis gleich machen, da in HTML beide Klassennamen wiederholt werden können, nachdem Sie beispielsweise die Stile vereinheitlicht haben , Sie geben IDs an mehrere Li unterschiedlicher Stile und steuern dann deren Attribute über IDs
Okay, das Obige ist die Erklärung der HTML-Klasse in diesem Artikel und die Verwendungsbeispiele der HTML-Klasse Funktionserklärung, wenn Wenn Sie Fragen haben, können Sie diese unten stellen.
[Empfehlung des Herausgebers]
Wie schreibe ich HTML-Leerzeichencode? Zusammenfassung des Ausdrucks des HTML-Leerzeichencodes
Das obige ist der detaillierte Inhalt vonWas bedeutet Klasse in HTML? Einführung in die Verwendung des Klassenattributs von HTML (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
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
1389
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.
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-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
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.
