HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen

HTML-Grundlagen_Allgemeine Tags, allgemeine Tags und Tabellen

Teil 1 HTML

<html> – Start-Tag

<Kopf>

Kontrollinformationen auf der Webseite

<title>Seitentitel</title>

</Kopf>

<Text>

Auf der Seite angezeigter Inhalt

</body>

</html> -- End-Tag

<!--Kommentarinhalt--> Kommentar

Eigenschaften des Körpers:

bgcolor Seitenhintergrundfarbe

Textfarbe (gibt die Farbe des gesamten Textes an)

oberer Rand oberer Rand

linker Rand linker Rand

rechter Rand rechter Rand

unterer Rand unterer Rand

Hintergrund

Hinweis: Wählen Sie zwischen Hintergrundfarbe und Hintergrundbild.

1.1. Allgemeine Tags 1.1.1. Format-Kontroll-Tags

<font color="" face="" size=""></font> steuert die Schriftart; color="##FF0000"; Gesicht, Schriftart; Größe, Schriftgröße.

<b></b> Fette Schriftart

Neigung

<u></u> Unterstreichen

<strong></strong> Fette Schrift (zur Hervorhebung, um den Ton zu verstärken)

<em></em> Kursivschrift (zur Hervorhebung, Tonfall)

<center></center> Mitte

Hinweis: Stehen vor und nach <center></center> noch andere Zeichen, werden diese standardmäßig davor und danach umbrochen, sodass ein Ganzes entsteht und anschließend zentriert dargestellt.

<br> oder <br /> entspricht der Eingabetaste (Tastenkombination: Umschalt + Eingabe)

&nbsp; Um ein Leerzeichen anzuzeigen, können Sie auf der Entwurfsseite auch Strg+Umschalt+Leertaste drücken.

1.1.2 Inhaltscontainer-Tags

<h1></h1>…<h6></h6> Titel (werden automatisch umbrochen). HTML-Überschriften werden durch Tags wie <h1> – <h6> definiert.

Hinweis: Die Bedeutung von <h1></h1>…<h6></h6> nimmt der Reihe nach ab und sie nehmen basierend auf der vorhandenen Standardgröße zu oder ab. Wenn davor und danach weitere Zeilen stehen, werden diese umbrochen und leer gelassen, um sicherzustellen, dass sie ein Ganzes bilden.

<p></p> Absatz-Tags (Leerzeilen zwischen Absätzen)

Hinweis: Wenn vor und nach <p></p> andere Zeichen stehen, werden diese umbrochen und leer gelassen, um sicherzustellen, dass sie eine vollständige Einheit bilden.

<div></div> Layer-Tag (nimmt standardmäßig eine Zeile ein)

<span></span> Layer-Tags (der Standardwert für den Speicherplatz ist der belegte Speicherplatz)

<ol type="1"> -- Sortierte Liste, Seriennummer ist 1, 2, 3..., das Seriennummernformat kann in Anführungszeichen geändert werden

<li>Inhalt</li>

<li>Inhalt</li>

</ol>

Hinweis: Standardmäßig wird es mit einer Seriennummer und einem Zeilenumbruch geliefert. Wenn davor und danach andere Zeilen stehen, werden diese davor und danach umbrochen und es wird eine Leerzeile gelassen, um sicherzustellen, dass es ein Ganzes ist.

Wird das obige "ol" in "ul" geändert, entsteht eine ungeordnete Liste, die über keine eigene Zeilenumbruchfunktion verfügt.

1.2. Gemeinsame Tags

Hyperlink-Tags

<a href="Hyperlink-Adresse" target="_blank">Hyperlink-Text</a> --href (Hyperlink-Referenz); _blank bedeutet, dass der Text in einem neuen Fenster geöffnet wird.

Schritt 1: Beschriften Sie die Ankerpunkte. <a name=""></a>

Schritt 2: Erstellen Sie einen Ankerlink. <a href="Wert des Namens des Ziellinks"></a>

Bild-Tags

<img src="Bildadresse" alt="Text" width="" height="" /> --Legen Sie einfach eine der Höhe und Breite fest und das angezeigte Bild wird proportional skaliert. Wenn das Bild nicht geladen werden kann, wird über Alt ein Text angezeigt, der Suchmaschinen ebenfalls bei der Suche helfen kann.

<img /> muss alleine stehen.

1.3. Tabelle

<table></table> Tabelle

Breite: Breite. Kann in Pixeln oder als Prozentsatz ausgedrückt werden. Üblicherweise werden 960 Pixel verwendet.

Grenze: Grenze. Der allgemein verwendete Wert ist 0.

Cellpadding: Der Abstand zwischen Inhalt und Zellrand. Der allgemein verwendete Wert ist 0.

cellspacing: Der Abstand zwischen den Zellen. Der allgemein verwendete Wert ist 0.

ausrichten: Ausrichtung.

bgcolor: Hintergrundfarbe.

Hintergrund: Hintergrundbild.

<tr></tr> Zeile

align: Die horizontale Ausrichtung des Inhalts einer Zeile

valign: Die vertikale Ausrichtung des Inhalts einer Zeile

Höhe: Zeilenhöhe

bgcolor: Hintergrundfarbe

Hintergrund: Hintergrundbild

<td></td> Zelle

<th></th> Überschrift, der Zelleninhalt wird automatisch zentriert und fett dargestellt

align: Ausrichtung des Zellinhalts

valign: Die vertikale Ausrichtung des Zellinhalts

width: Zellenbreite

Höhe: Zellenhöhe

bgcolor: Hintergrundfarbe

Hintergrund: Hintergrundbild

Inhalte müssen in Zellen, Zellen in Zeilen und Zeilen in Tabellen platziert werden. Beim Einstellen der Zeilenhöhe oder Spaltenhöhe einer Zelle wird gleichzeitig die entsprechende Zeile oder Spalte beeinflusst.

Zellenzusammenführung: (Es wird empfohlen, die Tabellenverschachtelung so weit wie möglich zu nutzen.)

colspan="n"——Zellen in derselben Zeile zusammenführen (beim späteren Schreiben des Codes die entsprechenden Spalten subtrahieren)

rowspan="n"——Zellen in derselben Spalte zusammenführen (die entsprechende Spalte von der zweiten Zeile subtrahieren)

Basierend auf den oben genannten Grundkenntnissen sind der Programmcode und die Laufergebnisse unten angegeben

Programmcode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  3. <Kopf>​​   
  4. < Meta   http-equiv = "Inhaltstyp"   Inhalt = "Text/HTML; Zeichensatz=utf-8"   />   
  5. < Titel > 123WORDPRESS.COM </ Titel >   
  6. </ Kopf >   
  7.   
  8. < Textkörper   Hintergrundfarbe = "#00FFCC" >   
  9. <   Name = "oben" > </ a >   
  10. Heute < br >   
  11. Wetter   /> Nicht schlecht. < br   />   
  12. < br   />   
  13. < Schriftart   Größe = "45"   Farbe = "rot" >   
  14. Schriftformat-Steuerungs-Tags: < br   />   
  15. < b > Text fett formatieren Methode 1, b-Tag </ b > < br   />   
  16. < strong > Text fett Methode 2, strong-Tag </ strong > < br   />   
  17. < i > Textneigungsmodus 1, i-Tag </ i > < br   />   
  18. < em > Textneigungsmodus 2, em-Tag </ em > < br   />   
  19. < u > Text unterstreichen, u-Tag </ u >   
  20. 123 <center> Zentriertes Tag, zentriert . Wenn sich davor und danach andere Tags befinden, werden standardmäßig Zeilenumbrüche ausgeführt, um sicherzustellen, dass es ein Ganzes ist, und dann wird es in der Mitte angezeigt. </ center > 456 < br   />   
  21. < br   />   
  22. Inhaltscontainer-Tag: < br   />   
  23. 123 < p > p-Tag, Absatz-Tag. Wenn davor und danach andere Tags stehen, führen Sie davor und danach Zeilenumbrüche aus und lassen Sie eine Leerzeile, um sicherzustellen, dass es sich um ein Ganzes handelt. </ p > 456
  24. < ol > ol geordnete Liste
  25. < li > Standardmäßig mit Seriennummer geliefert </ li >   
  26. < li > Selbstverpackt </ li >   
  27. < li > Wenn davor und danach weitere Zeilen stehen, umbrechen Sie diese davor und danach und lassen Sie eine Leerzeile, um sicherzustellen, dass es ein Ganzes ist. </ li >   
  28. </ ol >   
  29. <ul> ul ungeordnete Liste
  30. < li > Standardmäßig keine Seriennummer </ li >   
  31. < li > Selbstverpackt </ li >   
  32. < li > Wenn davor und danach weitere Zeilen stehen, umbrechen Sie diese davor und danach und lassen Sie eine Leerzeile, um sicherzustellen, dass es ein Ganzes ist. </ li >   
  33. </ ul >   
  34. <   href = "http://www.baidu.com"   Ziel = "_top" > Baidu-Suche </ a > < br   />   
  35. < img   quelle = "123.jpg"   Titel = "Das sind zwei Schönheiten"   alt = "zheshilianggemeinv"   / > < br   / > < br   />   
  36.   
  37. <   href = "http://www.qq.com" > < img   quelle = "123.jpg"   Breite = "104"   /> </ a > < br   / > < br   />   
  38.   
  39. < img   quelle = "123.jpg"   Breite = "100"   Höhe = "200"   />   
  40.   
  41.   
  42. </Schriftart>​​   
  43. < h1 > h1~h6-Tags, Titel-Steuer-Tags </ h1 >   
  44. < h2 > Wenn davor und danach weitere Zeilen stehen, führen Sie davor und danach Zeilenumbrüche aus und lassen Sie eine Leerzeile, um sicherzustellen, dass es sich um eine ganze Zeile handelt. </ h2 >   
  45. < h3 > In absteigender Reihenfolge der Wichtigkeit </ h3 >   
  46. < h4 > Erhöhen oder verringern Sie die vorhandene Standardgröße </ h4 >   
  47. < div   style = "background-color:#0F0" > div-Layer-Tag, standardmäßig nimmt es eine ganze Zeile ein </ div >   
  48. < Spanne   style = "background-color:#CF0" > span layer tag, die Standardnutzung ist so viel wie nötig </ span > < br   />   
  49. < br   />   
  50. < Tabelle   ausrichten = "zentriert"   Breite = "480"   Höhe = "120"   Grenze = "1"   Zellenpadding = "0"   Zellenabstand = "0" >   
  51. < tr   ausrichten = "zentriert" >   
  52. < td   Breite = "120" > < a   href = " http://autohome.com " > Autohome </a> </td>   
  53. < td   Breite = "120" > Yiche.com </ td >   
  54. < td   colspan = "2 " > Sina Auto </td>   
  55. </tr>​​   
  56. < tr   ausrichten = "zentriert" >   
  57. < td > 58.com </ td >   
  58. < td > Ganji.com </ td >   
  59. < td   Zeilenspanne = "2"   bgcolor = " # FF0033" > JD.com </td>   
  60. < td > Anjuke </ td >   
  61. </tr>​​   
  62. < tr   ausrichten = "zentriert" >   
  63. < td > Klein </ td >   
  64. < td > Jumeiyoupin </ td >   
  65. < td > VIP-Shop </ td >   
  66. </tr>​​   
  67. </ Tabelle >   
  68. < br   />   
  69. <   href = "#top" > Zurück zum Anfang </a>   
  70. </ Körper >   
  71. </ html >   

Laufergebnisse:

Der obige Artikel HTML-Grundlagen – Allgemeine Tags, allgemeine Tags und Tabellen ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.cnblogs.com/H2921306656/p/5654635.html

<<:  CSS-Beispielcode zum Ausblenden der Bildlaufleiste und Scrollen des Inhalts

>>:  Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

Artikel empfehlen

Detailliertes Tutorial zum Bereitstellen eines SpringBoot + Vue-Projekts auf einem Linux-Server

Vorwort Lassen Sie mich Ihnen zeigen, wie ich ein...

Detaillierte Erklärung der JavaScript-Fehlererfassung

Inhaltsverzeichnis 1. Grundlegende Verwendung und...

Dropdown-Menü implementiert durch HTML+CSS3+JS

Ergebnisse erzielen html <div Klasse="Con...

Detaillierte Erläuterung der geplanten MySQL-Aufgaben (Ereignisereignisse)

1. Kurze Einführung in die Veranstaltung Ein Erei...

XHTML 1.0-Referenz

Nach Funktion sortierenNN: Gibt an, welche frühere...

Beispielanalyse für MySQL Oracle- und SQL Server-Paging-Abfragen

Ich habe vor Kurzem eine einfache Studie zur Date...

Bringen Sie Ihnen Schritt für Schritt das Tutorial zur MySQL-Abfrageoptimierungsanalyse bei

Vorwort MySQL ist eine relationale Datenbank mit ...

Prozessdiagramm zur Implementierung des CentOS-IP-Verbindungsnetzwerks

1. Melden Sie sich beim System an und geben Sie d...

So migrieren Sie lokales MySQL in eine Serverdatenbank

Wir können den scp-Befehl von Linux (scp kann unt...

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Inhaltsverzeichnis Hintergrund 1. Dokumentbeschre...

Javascript-Eingabebild-Upload und -Vorschau, FileReader-Vorschaubild

FileReader ist eine wichtige API für die Frontend...

Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen

Hier einige Tipps von Ausbildungsstätten und mein...

Schreiben von Methoden, die in nativem JS verboten sein sollten

Inhaltsverzeichnis Funktionen auf Blockebene Ände...

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Experimentelle Umgebung Eine minimal installierte...

So implementieren Sie vertikale Textausrichtung mit CSS (Zusammenfassung)

Die Standardanordnung von Text in HTML ist horizo...