XHTML-Tutorial für den Einstieg: Häufig verwendete XHTML-Tags
|
<br />Genau wie ein Artikel sollten unsere Webseiten klare Absätze und Titel mit unterschiedlicher Wichtigkeit haben. In diesem Abschnitt werden die gängigen Tags vorgestellt, die zur Implementierung von Titeln, Absätzen usw. in XHTML verwendet werden. Titel-Tags <h1> bis <h6> Um einen Titel zu definieren, können wir die Tags von <h1> bis <h6> verwenden, und ihre entsprechenden End-Tags sind </h1> bis </h6>. Die Schriftgröße von <h1> bis <h6> nimmt der Reihe nach ab, und auch die Wichtigkeit nimmt allmählich ab. Der Browser lässt über und unter dem Titel automatisch eine Leerzeile. Absatz-Tag <p> Um einen Absatz zu definieren, verwenden Sie <p> und </p>. Der Inhalt zwischen <p> und </p> wird als Absatz erkannt, was dem ähnelt, was wir normalerweise einen „natürlichen Absatz“ nennen. Ähnlich wie bei Überschriften fügen Browser auch vor und nach dem Anfang und Ende eines Absatzes eine Leerzeile ein. Zeilenumbruch-Tag <br /> (<br>) Wenn wir Text in eine neue Zeile schreiben, aber keinen neuen Absatz beginnen möchten, können wir das Tag <br /> verwenden. Das <br>-Tag ist ebenfalls ein leeres Tag und muss mit einem "/" hinzugefügt werden, um die XHTML-Anforderungen zu erfüllen. Tag für horizontale Trennlinie <hr />(<hr>) Der Tag zum Implementieren einer horizontalen Trennlinie ist <hr />. Wie das <br>-Tag ist auch <hr> ein leeres Tag. Um den XHTML-Regeln zu entsprechen, muss ein "/" hinzugefügt werden. (Unten befindet sich eine Trennlinie) Hinweise Die ordnungsgemäße Verwendung der vier oben vorgestellten Tags kann den Benutzern, die Ihre Webseiten durchsuchen, das Gefühl vermitteln, dass die Webseiten eine klare Hierarchie aufweisen, während Kommentare Ihnen beim Lesen des Quellcodes Ihrer eigenen Webseiten das Gefühl vermitteln können, dass die Hierarchie klar ist, sodass Sie nicht verwirrt werden. Der Inhalt zwischen <!-- und --> ist der Kommentarinhalt, der nicht auf der Webseite angezeigt wird. Sehen Sie im folgenden Übungsbeispiel, wie wir Kommentare einfügen. Übungsbeispiel: Öffnen Sie jetzt die Webseite, die wir im vorherigen Abschnitt gespeichert haben, und üben Sie einige wichtige Tags, die Sie in diesem Abschnitt gelernt haben. Entfernen Sie „Dies ist meine erste <b>Webseite</b>.“ in <body></body> und geben Sie den folgenden Inhalt ein: <h1>Serviceankündigung</h1><!--Üben Sie die Verwendung von Titeln und sehen Sie, ob die Schriftgröße größer wird? --> <hr /><!--Horizontale Trennlinie, "/" nicht vergessen --> <h2>Derzeit biete ich Grundschülern und ihren Eltern im ganzen Land die folgenden Dienste an:</h2><!--Titel Nr. 2, prüfen Sie, ob die Schriftgröße kleiner ist als Titel Nr. 1--> <h3>Services für Studierende</h3> <p> Hausaufgaben für die Winter- und Sommerferien schreiben (Mathe kann nicht garantieren, dass keine Fehler drin sind, Chinesisch kann nicht garantieren, dass keine Tippfehler drin sind und Englisch-Hausaufgaben kann man von jemand anderem schreiben lassen) <br />Bei Mitwirkung bei der Schikanierung von Schülern unterhalb der vierten Klasse wird eine zusätzliche Gebühr erhoben. <br />Der Elternbeirat hilft bei der Nachahmung von Eltern. </p><!--Der obige Inhalt ist ein Absatz--> <h3>VIP-Dienst</h3> <p>Jeder, der alle drei Dienste kauft, wird automatisch zum VIP hochgestuft. Wir erstellen für Sie kostenlos eine persönliche Homepage, die vollständig den XHTML-Standards des W3C und ISO2009~ entspricht. </p> <!--Obwohl die Webseiten hier relativ übersichtlich gestaltet sind, finden Sie die Oberfläche nicht hässlich und grob? Beispielsweise gibt es keinen Abstand zwischen den Zeilen und die Überschrift der Größe 1 ist zu groß. Die Methoden zum Definieren des Erscheinungsbilds einer Webseite werden in einem späteren CSS-Tutorial vorgestellt. Ich habe vergessen, den wichtigsten Punkt zu erwähnen: Kommentare werden nicht auf der Webseite angezeigt, daher können wir hier eine Menge Unsinn tippen. Versuchen Sie jedoch, im zukünftigen Webdesign-Prozess einige Notizen zu machen, die Ihnen als Erinnerung dienen können. --> Nachdem Sie die Änderungen gespeichert haben, durchsuchen Sie die Webseite, um zu bestätigen, dass Ihre Webseite mit dieser Seite übereinstimmt, und Sie sind fertig. |
<<: Docker-Installations-Tutorial zu RocketMQ (am ausführlichsten)
>>: Detaillierte Erklärung zu MySQL und Springs Autocommit
Artikel empfehlen
So führen Sie py-Dateien direkt unter Linux aus
1. Erstellen Sie zuerst die Datei (wechseln Sie p...
Detailliertes Tutorial zur Installation und Deinstallation von MySql
In diesem Artikel finden Sie das Tutorial zur Ins...
Die Scroll-Ansicht des WeChat-Applets realisiert die Verknüpfung nach links und rechts
In diesem Artikel wird der spezifische Code für d...
Beispiele für die Verwendung des ES6-Spread-Operators
Inhaltsverzeichnis Was sind Spread- und Rest-Oper...
Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen
Problem: Die über IIS veröffentlichte Website wir...
Detaillierte Erklärung zur Konfiguration der OpenGauss-Datenbank im Docker
Für Windows-Benutzer Verwenden von openGauss in D...
Vue basierend auf einer Element-Button-Berechtigungsimplementierungslösung
Hintergrundanforderungen: Das ERP-System muss ein...
Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL
Inhaltsverzeichnis 1. Die Rolle des Index 2. Erst...
Einführung in den Aufbau von NFS-Diensten unter Centos7
Inhaltsverzeichnis 1. Server 2. Kunde 3. Testdien...
Detaillierte Erklärung der Lösung für den Absturz von Tomcat beim Doppelklicken auf startup.bat
Als Programmierer, der gerade Tomcat gelernt hat,...
So invertieren Sie die Implementierung einer Bézierkurve in CSS
Schauen wir uns zunächst einen CSS-Karussell-Anim...
Methode zum Knacken der Registrierung der FlashFXP-FTP-Clientsoftware
Die Downloadadresse von FlashFXP lautet: https://...
HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle
Code kopieren Der Code lautet wie folgt: <!DOC...
Popularisierung der Theorie – Benutzererfahrung
1. Konzeptanalyse 1: UE User Experience <br /&...
Verwendung des Linux-Befehls ln
1. Befehlseinführung Mit dem Befehl ln werden Lin...