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
Verwenden Sie CSS, um einige häufig auftretende seltsame Schaltflächen einfach zu implementieren
Hintergrund In der Gruppe werden einige Studieren...
Erklärung der Funktionsweise und Verwendung von Redux
Inhaltsverzeichnis 1. Was ist Redux? 2. Das Redux...
6 Lösungen für die Unfähigkeit von IDEA, eine Verbindung zur MySQL-Datenbank herzustellen
In diesem Artikel werden hauptsächlich 6 Lösungen...
CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung
will-change teilt dem Browser mit, welche Änderun...
Sonderzeichen in HTML anzeigen (mit Sonderzeichen-Korrespondenztabelle)
Reproduktion des Problems Beim Bearbeiten mit HTM...
Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen
Inhaltsverzeichnis Fremdschlüssel So ermitteln Si...
Vue implementiert Tab-Beschriftung (Beschriftung übertrifft automatisches Scrollen)
Wenn die erstellte Registerkartenbeschriftung den...
Erläuterung zu JavaScript-Anti-Shake und -Throttling
Inhaltsverzeichnis Stabilisierung Drosselung Zusa...
Detaillierte Diskussion der InnoDB-Sperren (Record-, Gap-, Next-Key-Sperre)
Die Datensatzsperre sperrt einen einzelnen Indexd...
Zusammenfassung der Lösungen für MySQL, das „Gruppieren nach“ nicht unterstützt
Ich habe die neueste Version von MySQL 5.7.x heru...
Sollten nullbare Felder in MySQL auf NULL oder NOT NULL gesetzt werden?
Personen, die MySQL häufig verwenden, können mit ...
Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen
Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...
Beheben Sie den Fehler beim Löschen von MySQL-Benutzern
Als der Autor MySQL zum Hinzufügen eines Benutzer...
Drei Möglichkeiten zum Teilen der Komponentenlogik in React
Ohne weitere Umschweife sind dies diese drei Meth...
Nginx-Reverseproxy und Lastausgleichspraxis
Reverse-Proxy Unter Reverse-Proxy versteht man de...