HTML - Grundlegende Tags

Überschriften-Tags

Jedes Dokument beginnt mit einer Überschrift. Sie können verschiedene Größen für Ihre Überschriften verwenden. HTML hat auch sechs Überschriftenebenen, die die Elemente verwenden<h1>, <h2>, <h3>, <h4>, <h5>, und <h6>. Während der Anzeige einer Überschrift fügt der Browser eine Zeile vor und eine Zeile nach dieser Überschrift hinzu.

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Absatz-Tag

Das <p>Tag bietet eine Möglichkeit, Ihren Text in verschiedene Absätze zu strukturieren. Jeder Textabschnitt sollte zwischen einem öffnenden <p> und einem schließenden </ p> -Tag stehen, wie im folgenden Beispiel gezeigt -

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Zeilenumbruch-Tag

Wann immer Sie die verwenden <br />Element, alles, was darauf folgt, beginnt in der nächsten Zeile. Dieses Tag ist ein Beispiel für einempty Element, bei dem Sie keine Tags öffnen und schließen müssen, da zwischen ihnen nichts zu tun ist.

Das <br /> -Tag hat ein Leerzeichen zwischen den Zeichen brund der Schrägstrich. Wenn Sie diesen Bereich weglassen, haben ältere Browser Probleme beim Rendern des Zeilenumbruchs. Wenn Sie den Schrägstrich verpassen und nur <br> verwenden, ist er in XHTML nicht gültig.

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Inhalt zentrieren

Sie können verwenden <center> Tag, um Inhalte in die Mitte der Seite oder in eine Tabellenzelle zu setzen.

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Horizontale Linien

Horizontale Linien werden verwendet, um Abschnitte eines Dokuments visuell aufzuteilen. Das<hr> Tag erstellt eine Linie von der aktuellen Position im Dokument bis zum rechten Rand und unterbricht die Linie entsprechend.

Beispielsweise möchten Sie möglicherweise eine Zeile zwischen zwei Absätzen wie im folgenden Beispiel angeben.

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Nochmal <hr /> Tag ist ein Beispiel für die empty Element, bei dem Sie keine Tags öffnen und schließen müssen, da zwischen ihnen nichts zu tun ist.

Das <hr /> Element hat ein Leerzeichen zwischen den Zeichen hrund der Schrägstrich. Wenn Sie diesen Bereich weglassen, haben ältere Browser Probleme beim Rendern der horizontalen Linie. Wenn Sie den Schrägstrich verpassen und nur verwenden<hr> Es ist in XHTML nicht gültig

Formatierung beibehalten

Manchmal möchten Sie, dass Ihr Text genau dem Format entspricht, wie er im HTML-Dokument geschrieben ist. In diesen Fällen können Sie das vorformatierte Tag verwenden<pre>.

Beliebiger Text zwischen der Eröffnung <pre> Tag und das Schließen </pre> Tag behält die Formatierung des Quelldokuments bei.

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis:

Versuchen Sie, denselben Code zu verwenden, ohne ihn im Inneren zu behalten <pre>...</pre> Stichworte

Nicht brechende Räume

Angenommen, Sie möchten den Ausdruck "12 böse Männer" verwenden. Hier möchten Sie nicht, dass ein Browser die "12, Angry" und "Men" in zwei Zeilen aufteilt -

An example of this technique appears in the movie "12 Angry Men."

In Fällen, in denen der Client-Browser keinen Text unterbrechen soll, sollten Sie eine nicht unterbrechende Space-Entität verwenden  anstelle eines normalen Raumes. Wenn Sie beispielsweise die "12 Angry Men" in einem Absatz codieren, sollten Sie etwas verwenden, das dem folgenden Code ähnelt:

Beispiel

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

Dies führt zu folgendem Ergebnis: