Beginnen Sie mit dem Erlernen der Frontend-Entwicklung

Man sagt, dass der beste Input der Output ist, also hören Sie zu, wenn ich Ihnen erzähle, was ich gelernt habe.

Wenn wir lernen, mit dem Frontend zu beginnen, wird uns überall gesagt, dass wir HTML+CSS+JS lernen müssen. Nach Google habe ich herausgefunden, dass HTML eine HyperText Markup Language ist (englisch: HyperText Markup Language, abgekürzt als: HTML). Markup-Sprache bedeutet, dass es sich hierbei nicht um eine Programmiersprache handelt, sondern um den Titel als Titel und den Absatz als Absatz zu markieren. Auf diese Weise kann der Browser erkennen, um welchen Text es sich handelt, und ihn in einem besseren Format anzeigen Mit anderen Worten: Wenn Sie zum Erstellen einer Webseite nur HTML+CSS verwenden, werden die verschiedenen Spezialeffekte und Formate darauf von Ihnen ausgewählt und nicht erstellt.

Sehen wir uns den Inhalt einer gewöhnlichen HTML-Datei an.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>         <span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>这是网页标题<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span>         <span style="color: #0000ff"><</span><span style="color: #800000">link </span><span style="color: #ff0000">rel</span><span style="color: #0000ff">="style"</span><span style="color: #ff0000"> type</span><span style="color: #0000ff">="text/css"</span><span style="color: #ff0000"> href</span><span style="color: #0000ff">="style.css"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span>         <span style="color: #0000ff"><</span><span style="color: #800000">style</span><span style="color: #0000ff">></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>         <span style="color: #0000ff"><</span><span style="color: #800000">script</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"></</span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>     <span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>         <span style="color: #0000ff"><</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>这是最大的标题<span style="color: #0000ff"></</span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>         <span style="color: #0000ff"><</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>这是段落<span style="color: #0000ff"></</span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">13</span>     <span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span>

Die Methode zum Markieren von Text in dieser Auszeichnungssprache ist sehr einfach, nämlich

Getaggte Inhalte

Sie erscheinen paarweise, mit einem „/“ mehr im letzteren „Tag“ als im ersteren

Es gibt einen anderen Tag-Typ, der nicht paarweise erscheint, wie zum Beispiel

Lassen Sie uns den Inhalt des obigen HTML-Dokuments von oben nach unten erklären.

1. Historisches Problem, wird verwendet, um dem Browser mitzuteilen, dass es sich um eine HTML5-Webseite handelt, was bedeutet, dass es eine alte HTML-Version gibt und die alte Version etwas anderes definieren muss. Aber keine Sorge, von nun an wird es wahrscheinlich sein.

2.html teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt, das ein Head-Tag und ein Body-Tag

enthält

3.Head und Body werden zum Speichern verschiedener Informationen und Einstellungen der Webseite verwendet, und Body wird zum Speichern des Inhalts der Webseite verwendet

4.head　Titel Der Titel der Webseite ist der Text, der nach dem Öffnen einer Webseite im Browser-Webseiten-Tag angezeigt wird

Der Link wird verwendet, um auf ein CSS-Stylesheet zu verweisen. Das sogenannte Stylesheet bedeutet, dass Sie den Stil selbst festlegen können, wenn Sie der Meinung sind, dass der Standardstil des Browsers zu hässlich ist

　 Stil Der Inhalt im CSS-Stylesheet kann auch im HTML-Dokument

platziert werden

　 Skript bezieht sich auf eine JS-Datei, und der Inhalt kann auch in ein HTML-Dokument geschrieben werden

Es gibt auch einige Tags wie Meta, Base usw. In jedem Fall werden die Dinge im Kopf zum Einrichten der Webseite verwendet, nicht der Inhalt der Webseite

5.Körper p Absatz

Die Schriftarten h1-Titel und h2 h3 h4 h5 werden nach und nach kleiner

Am Anfang ist alles schwierig. Ich habe endlich angefangen, den ersten Artikel zu schreiben, haha.