Heim > Web-Frontend > HTML-Tutorial > Wie füge ich Untertitel mit HTML hinzu? Um diese Frage ins Chinesische zu übersetzen, wäre es: Wie füge ich Untertitel mit HTML hinzu?

Wie füge ich Untertitel mit HTML hinzu? Um diese Frage ins Chinesische zu übersetzen, wäre es: Wie füge ich Untertitel mit HTML hinzu?

PHPz
Freigeben: 2023-08-25 20:13:02
nach vorne
1838 Leute haben es durchsucht

如何使用HTML添加子标题?

To translate this question into Chinese, it would be:

如何使用HTML添加子标题?

Untertitel ist ein Textelement, das in HTML zum Organisieren und Strukturieren von Webinhalten verwendet wird. Unterüberschriften werden häufig verwendet, um große Textblöcke aufzuteilen und Benutzern eine klare Informationshierarchie zu bieten. Untertitel werden normalerweise mit den Tags „H2“, „H3“, „H4“, „H5“ oder „H6“ in HTML erstellt. Diese Tags geben die Ebene der Überschrift an, wobei H1 die Überschrift der höchsten Ebene und H6 die Unterüberschrift der niedrigsten Ebene ist.

Untertitel mit HTML hinzufügen

HTML ist eine Auszeichnungssprache, die zum Strukturieren und Formatieren von Inhalten auf Webseiten verwendet wird. Ein wichtiger Aspekt von HTML ist die Möglichkeit, Überschriften und Unterüberschriften zu erstellen, um Text zu organisieren und zu strukturieren. In diesem Artikel besprechen wir verschiedene Möglichkeiten zum Hinzufügen von Untertiteln mithilfe von HTML.

  • Methode 1 – Verwenden Sie das „H“-Tag

  • Methode 2 – Verwenden Sie das „P“-Tag mit CSS

  • Ansatz 3 − Verwendung des „Div“-Tags mit CSS

Ansatz 1: Verwendung der „H“-Tags

Dies ist die gebräuchlichste Methode zum Erstellen von Überschriften und Unterüberschriften in HTML. Diese Tags reichen von H1 bis H6, wobei H1 die Überschrift auf der höchsten Ebene und H6 die unterste ist. Zum Erstellen einer Unterüberschrift verwenden wir hauptsächlich H2, H3 und H4 , H5- oder H6-Tags: Um beispielsweise eine Unterüberschrift mit dem H3-Tag zu erstellen, würden Sie den folgenden Code verwenden:

<h3>This is a subheading</h3> 
Nach dem Login kopieren

Beispiel

Dieses Beispiel zeigt die erste Methode zum Hinzufügen von Unterüberschriften in HTML

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      body{
         background-color:#d1d0b4; 
      }
   </style>
</head>
<body>
   <h1>This is a Main Heading</h1>
   <h2>This is a Sub Heading</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</body>
</html>
Nach dem Login kopieren

Ansatz 2: Verwendung des „P“-Tags mit CSS

Die zweite Methode zum Erstellen von Unterüberschriften in HTML besteht darin, das Tag „P“ zu verwenden und es mit CSS zu formatieren. Diese Methode ist nützlich, wenn wir eine Unterüberschrift erstellen möchten, die keine herkömmliche Überschrift ist "-Tag und geben Sie ihm eine Klasse oder ID, die Sie zum Anwenden von CSS-Stilen verwenden können. Um beispielsweise eine Unterüberschrift mit dem p-Tag zu erstellen, würden Sie den folgenden HTML- und CSS-Code verwenden −

CSS

.subheading {
   font-size: 24px;
   font-weight: bold;
}
Nach dem Login kopieren

HTML

<p class="subheading">This is a subheading</p> 
Nach dem Login kopieren

Beispiel

Dieses Beispiel zeigt die zweite Methode zum Hinzufügen von Unterüberschriften in HTML

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      div {
         margin: auto;
         height: 250px;
         width: 500px;
         padding-left:10px;
         background-color: #d1d0b4;
         border: 2px solid #000000;
      }
      .subheading {
         font-size: 24px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div>
      <h1>This is a Main Heading</h1>
      <p class="subheading">This is a Sub Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </div>
</body>
</html>
Nach dem Login kopieren

So verwenden Sie das CSS-Tag „Div“

Eine dritte Methode zum Erstellen von Unterüberschriften in HTML ist die Verwendung des „Div“-Tags und dessen Formatierung mit CSS. Diese Methode ähnelt der „P“-Tag-Methode

Beispiel

Dieses Beispiel zeigt die „div“-Tag-Methode, wie Unterüberschriften in HTML hinzugefügt werden

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      div {
         margin: auto;
         height: 200px;
         width: 450px;
         padding-left:10px;
         background-color: #2596;
         bder: 2px solid #000000;
         border-radius:10px;
      }
      .subheading {
         font-size: 24px;
      }
   </style>
</head>
<body>
   <div>
      <h1>This is a Main Heading</h1>
      <p class="subheading">This is a Sub Heading</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </div>
</body>
</html> 
Nach dem Login kopieren

Fazit

Es gibt viele Möglichkeiten, Untertitel mithilfe von HTML hinzuzufügen. Das „H“-Tag, das „P“-Tag mit CSS und das „Div“-Tag mit CSS sind allesamt gültige Methoden. Es ist wichtig zu beachten, dass Überschriften und Unterüberschriften zur Organisation und Strukturierung von Webinhalten und nicht nur aus Stilgründen verwendet werden sollten.

Das obige ist der detaillierte Inhalt vonWie füge ich Untertitel mit HTML hinzu? Um diese Frage ins Chinesische zu übersetzen, wäre es: Wie füge ich Untertitel mit HTML hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage