Einfaches Beispiel für HTML-Textformatierung (ausführliche Erklärung)

Einfaches Beispiel für HTML-Textformatierung (ausführliche Erklärung)

1. Textformatierung: Dieses Beispiel zeigt, wie Text in einer HTML-Datei formatiert wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. < b > Dieser Text ist fett </ b >   
  6.   
  7. < br   />   
  8.   
  9. < strong > Dieser Text ist stark </ strong >   
  10.   
  11. < br   />   
  12.   
  13. < big > Dieser Text ist groß </ big >   
  14.   
  15. < br   />   
  16.   
  17. < em > Dieser Text ist hervorgehoben </ em >   
  18.   
  19. < br   />   
  20.   
  21. < i > Dieser Text ist kursiv </ i >   
  22.   
  23. < br   />   
  24.   
  25. < small > Dieser Text ist klein </ small >   
  26.   
  27. < br   />   
  28.   
  29. Dieser Text enthält
  30. <sub> Index </sub>​​​​   
  31.   
  32. < br   />   
  33.   
  34. Dieser Text enthält
  35. < sup > hochgestellt </ sup >   
  36.   
  37. </ Körper >   
  38. </ html >   

Die Wirkung ist wie folgt:

2. Vorformatierter Text: Dieses Beispiel zeigt, wie das Pre-Tag zur Steuerung von Leerzeilen und Leerzeichen verwendet wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. < vor >   
  6. Das ist
  7. Vorformatierter Text.
  8. Es bewahrt Räume
  9. und Zeilenumbrüche.
  10. </ vor >   
  11.   
  12. Das < p > -Pre-Tag eignet sich hervorragend zum Anzeigen von Computercode: </ p >   
  13.   
  14. < vor >   
  15. für i = 1 bis 10
  16. drucken
  17. als nächstes ich
  18. </ vor >   
  19.   
  20. </ Körper >   
  21. </ html >   

Die Wirkung ist wie folgt:

3. Beschriftung „Computerausgabe“: Dieses Beispiel demonstriert die Anzeigeeffekte verschiedener Beschriftungen „Computerausgabe“.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. <code> Computercode </code>​​​​   
  6. < br   />   
  7. < kbd > Tastatureingabe </ kbd >   
  8. < br   />   
  9. < tt > Fernschreibertext </ tt >   
  10. < br   />   
  11. < samp > Beispieltext </ samp >   
  12. < br   />   
  13. < var > Computervariable </ var >   
  14. < br   />   
  15.   
  16. < p >   
  17. < b > Kommentar: </ b > Diese Tags werden häufig verwendet, um Computer-/Programmcode anzuzeigen.
  18. </ p >   
  19.   
  20. </ Körper >   
  21. </ html >   

Die Wirkung ist wie folgt:

4. Adresse: Dieses Beispiel zeigt, wie eine Adresse in eine HTML-Datei geschrieben wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html >   
  3. < Textkörper >   
  4.   
  5. <Adresse>​​   
  6. Geschrieben von < a   href = "mailto:[email protected]" > Donald Duck </ a > . < br >     
  7. Besuchen Sie uns auf: < br >   
  8. Beispiel.com < br >   
  9. Postfach 564, Disneyland < br >   
  10. USA
  11. </ Adresse >   
  12.   
  13. </ Körper >   
  14. </ html >   

Die Wirkung ist wie folgt:

5. Abkürzungen und Akronyme: Dieses Beispiel zeigt, wie Abkürzungen oder Akronyme implementiert werden.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. < Abk.   Titel = "usw." > usw. </ abbr >   
  6. < br   />   
  7. < Akronym   Titel = "World Wide Web" > WWW </ Akronym >   
  8.   
  9. < p > In einigen Browsern kann der Titel verwendet werden, um die vollständige Version des Ausdrucks anzuzeigen, wenn Sie mit der Maus über die Abkürzung fahren. </ p >   
  10.   
  11. <p> Funktioniert in IE 5 nur mit Akronym-Elementen . </ p >   
  12.   
  13. < p > Gilt sowohl für die abbr- als auch für die acronym-Elemente in Netscape 6.2. </ p >   
  14.   
  15. </ Körper >   
  16. </ html >   

Die Wirkung ist wie folgt:

6. Textrichtung: Dieses Beispiel zeigt, wie die Textrichtung geändert wird.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. < p >   
  6. Wenn Ihr Browser bidirektionales Override (bdo) unterstützt, wird die nächste Zeile von rechts nach links (rtl) ausgegeben.
  7. </ p >   
  8.   
  9. < bdo   dir = "rtl" >   
  10. Hier ist ein hebräischer Text
  11. </ bdo >   
  12.   
  13. </ Körper >   
  14. </ html >   

Die Wirkung ist wie folgt:

7. Blockzitate: Dieses Beispiel zeigt, wie Sie Zitate unterschiedlicher Länge umsetzen können.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. Hier das lange Zitat:
  6. < blockquote >   
  7. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat. Dies ist ein langes Zitat.
  8. </ blockquote >   
  9.   
  10. Hier das kurze Zitat:
  11. < q >   
  12. Dies ist ein kurzes Zitat.
  13. </ q >   
  14.   
  15. < p >   
  16. Bei Verwendung des Blockquote-Elements fügt der Browser Zeilenumbrüche und Ränder ein, während das q-Element keine spezielle Darstellung aufweist.
  17. </ p >   
  18.   
  19. </ Körper >   
  20. </ html >   

Die Wirkung ist wie folgt:

8. Untereffekte löschen und Untereffekte einfügen.

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2.   
  3. < Textkörper >   
  4.   
  5. < p > Es gibt < del > zwanzig </ del > in einem Dutzend   <ins> zwölf </ins> Stücke .​​​ </ p >   
  6.   
  7. < p > Die meisten Browser schreiben dies so um, dass der Text durchgestrichen und unterstrichen wird. </ p >   
  8.   
  9. < p > Einige ältere Browser zeigen durchgestrichenen und unterstrichenen Text als normalen Text an. </ p >   
  10.   
  11. </ Körper >   
  12. </ html >   

Die Wirkung ist wie folgt:

Das obige einfache Beispiel für die HTML-Textformatierung (ausführliche Erklärung) ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

<<:  Einführung in die Apache-Bereitstellung von https in der Kryptografie

>>:  Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

Artikel empfehlen

Detaillierte Erläuterung des Prinzips verteilter Sperren und drei Implementierungsmethoden

Derzeit werden fast alle großen Websites und Anwe...

Tipps, um zu verhindern, dass andere meine Seite als meine Webseite speichern und kopieren

Heutzutage ist das Kopieren von Websites im Intern...

So setzen Sie den Anfangswert der Auto-Increment-Spalte in der MySQL-Tabelle zurück

So setzen Sie den Anfangswert der Auto-Increment-...

Implementierung von Debugging-Code über den Nginx-Reverse-Proxy

Hintergrund Heutzutage werden die Projekte des Un...

Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL

Für das, was ich heute schreiben werde, lief das ...

Detaillierte Erklärung der drei Möglichkeiten zum Umbrechen von Text in der El-Table-Kopfzeile

Inhaltsverzeichnis Problembeschreibung Rendern Dr...

MySQL 8.0.19 WinX64-Installations-Tutorial und Ändern des Initialpassworts unter Windows 10

In diesem Artikel finden Sie das Installations-Tu...

Grundlegende Ideen und Codes zur Implementierung von Videoplayern in Browsern

Inhaltsverzeichnis Vorwort Zusammenfassung der Au...

Zusammenfassung der XHTML-Tags auf Blockebene

* Adresse - Adresse * Blockzitat - Blockzitat * Mi...

MySQL 5.7.20 Win64 Installations- und Konfigurationsmethode

mysql-5.7.20-winx64.zipInstallationspaket ohne In...

So verwenden Sie die Glog-Protokollbibliothek in einer Linux-Umgebung

Linux-Bibliothek generieren Die Linux-Version ver...

Einige allgemeine erweiterte SQL-Anweisungen in MySQL

Erweiterte MySQL-SQL-Anweisungen benutze kgc; Tab...

Detaillierte Erläuterung des Ausführungsprozesses von MySQL-Abfrageanweisungen

Inhaltsverzeichnis 1. Kommunikationsmethode zwisc...

So erkennen Sie die Ubuntu-Version mithilfe der Befehlszeile

Methode 1: Verwenden Sie das Dienstprogramm lsb_r...

Einführung in das Batch-Cache-Löschskript von nginx proxy_cache

Vorwort: Ich habe zuvor den offiziellen Proxy-Cac...