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

Detaillierte Erläuterung der Docker-Container-Lebenszyklusarchitektur und der Unterschiede zwischen dieser und VM

Container-Lebenszyklus Der Lebenszyklus einer Con...

Implementierungscode zur Verwendung von CSS-Texthervorhebung zum Hervorheben von Text

1. Einleitung Wenn Sie früher einen bestimmten Te...

Kapitel zur Entwicklung von WeChat-Applets: Fallstricke

Vor kurzem habe ich an der Entwicklung des ersten...

Detaillierte Erklärung der Top-Befehlsausgabe in Linux

Vorwort Ich glaube, jeder hat den Befehl top unte...

MySQL 8.0.25 Installations- und Konfigurations-Tutorial unter Linux

Das neueste Tutorial zur Installation von MySQL 8...

Detaillierte Erläuterung der Verwendung von Docker Commit

Manchmal müssen Sie bestimmte Abhängigkeiten im B...

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Inhaltsverzeichnis Zusammenfassung der Verzögerun...

Verstehen Sie die Grundlagen von Navicat für MySQL in einem Artikel

Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...

Häufige Tomcat-Ausnahmen und Lösungscodebeispiele

Das Unternehmensprojekt wurde in Java entwickelt ...

MySQL 5.7.19 neueste Binärinstallation

Laden Sie zunächst die Zip-Archivversion von der ...

Tutorial zur HTML-Tabellenauszeichnung (15): Tabellentitel

<br />Mit diesem Tag können Sie direkt einen...

Detaillierte Erläuterung des Master-Slave-Konfigurationstutorials von Redis unter Docker

1. Ziehen Sie das Redis-Image docker pull redis 2...

Beispielcode zur Installation von Jenkins mit Docker

Zwei Probleme, die bei der Installation von Docke...

Stellen Sie Ihre Website automatisch auf den IE7-Kompatibilitätsmodus ein, wenn Sie mit IE8 surfen

Vorwort Um sicherzustellen, dass Ihre Webseiten in...

Schritte zum Bereitstellen von Hyper-V zur Desktop-Virtualisierung (grafisches Tutorial)

Für die Bereitstellung von Hyper-V gelten die fol...