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

So ändern Sie die CentOS-Serverzeit auf die Peking-Zeit

1. Ich habe ein VPS- und CentOS-System gekauft un...

Einführung und Installation von MySQL Shell

Inhaltsverzeichnis 01 ReplicaSet-Architektur 02 E...

CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen

Manchmal müssen wir Server stapelweise bedienen, ...

Zusammenfassung der Verwendung von MySQL-Datums- und Uhrzeitfunktionen

Dieser Artikel basiert auf MySQL 8.0 Dieser Artik...

Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung

Vor Kurzem musste ich das Projekt für die Mitglie...

Analyse der Verwendung von „replace“ und „regexp“ zum Ersetzen regulärer Ausdrücke in MySQL

Dieser Artikel veranschaulicht anhand von Beispie...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

js generiert dynamisch Tabellen (Knotenoperationen)

In diesem Artikelbeispiel wird der spezifische Co...

Aufzeichnungen zur Verwendung von SSH-Befehlen unter Windows 8

1. Öffnen Sie die virtuelle Maschine und das Git-...

Lösung für das Problem „/bin/sh: pip: Befehl nicht gefunden“ beim Erstellen der Docker-Datei

Der Inhalt des geschriebenen Dockerfiles ist: VON...

Tutorial-Diagramm zur Installation von CentOS 7.3 auf einer virtuellen VMware-Maschine

VMware-Vorbereitung CentOS-Vorbereitung, hier ist...

Installieren und konfigurieren Sie SSH in CentOS7

1. Installieren Sie openssh-server yum install -y...

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

Vorwort Manchmal habe ich das Gefühl, dass die na...

Was wir über absolute und relative CSS-Werte zu sagen haben

In der Einleitung steht: Absolute sagte: „Relativ...

nginx Konfigurationsort Zusammenfassungsort Regelmäßiges Schreiben und Umschreiben von Regeln

1. Regulärer Ausdruck für den Standort Schauen wi...