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
js+css zur Realisierung eines dreistufigen Navigationsmenüs
In diesem Artikelbeispiel wird der spezifische Co...
jQuery-Plugin zur Implementierung des Minesweeper-Spiels (3)
In diesem Artikel wird der dritte Artikel zur Ver...
Diagramm des Prozesses zur Implementierung eines Richtungsproxys durch Nginx
Dieser Artikel stellt hauptsächlich den Prozess d...
Detaillierte Bereitstellung von Docker+Gitlab+Gitlab-Runner
Umfeld Server: centos7 Kunde: Fenster Stellen Sie...
Was ist Webdesign
<br />Originalartikel: http://www.alistapart...
Anfangseinstellungen nach der Installation von Ubuntu 16 in der Entwicklungsumgebung
Das Büro benötigt ein Ubuntu-System als Linux-Ent...
Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung
Die WEB-Entwicklung besteht hauptsächlich aus zwe...
Layui table wählt das Optionsfeld der angegebenen Zeile aus und scrollt zum Implementierungscode der Zeile
Die Layui-Tabelle enthält mehrere Datenzeilen. Üb...
Vorschläge zur Optimierung der Webseiten-Kopfzeile
Logo-Optimierung: 1. Das Logobild sollte so klein...
Die CSS-Priorität der Webseite wird für Sie ausführlich erklärt
Bevor wir über die CSS-Priorität sprechen, müssen...
Detaillierte Erläuterung der Implementierungsschritte von MySQL Dual-Machine Hot Standby und Load Balancing
Die MySQL-Datenbank verfügt nicht über einen inkr...
27 Linux-Befehle zum Bearbeiten von Dokumenten, die es wert sind, gesammelt zu werden
Linux-Befehl „col“ Der Linux-Befehl col wird zum ...
Implementierungscode der HTML-Floating-Promptbox-Funktion
Allgemeine Formulareingabeaufforderungen belegen ...
Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes
Stammverzeichnis und Indexdatei Die Root-Direktiv...
Erläuterung der Installation und Konfiguration zum Erstellen einer Go-Umgebung unter Linux
Es ist sehr einfach, eine Go-Umgebung unter Linux...