Grundlagen der Webentwicklung HTML+CSS
Lernziele und Inhalte
1. In der Lage sein, die für die Webentwicklung erforderlichen technischen Punkte zu beschreiben
2. Die Funktion von HTML beschreiben können
3. Kann eine Liste implementieren
4. Möglichkeit, ein Formular zu erstellen
5. Fähigkeit, ein Formular zu implementieren
6. Sie können die Rolle von CSS beschreiben
7. Kann Selektoren verwenden, um Tags abzurufen
8. Möglichkeit, Schriftfarbe und -größe mithilfe von CSS festzulegen
1. Einführung in die Webentwicklung
1. Warum sollten Sie Webentwicklung lernen?
Betriebs- und Wartungsingenieur
Junior Engineer: Verantwortlich für die Wartung der Basisumgebung (Installation des Systems, Behandlung von Serverproblemen, Implementierung, Anzeige und Überwachung)
Fortgeschrittener Ingenieur: Pflege großer Cluster und Bereitstellung der Clusterarchitektur
==Leitender Ingenieur: Führen Sie eine seitenbasierte Entwicklung bestehender mühsamer Arbeiten durch und vereinfachen Sie Betriebs- und Wartungsarbeiten (bei 1.000 Servern verwenden Sie die Systemverwaltung)==
==Asset-Management-System==
Asset-Management-System, bezeichnet als ==cmdb==.
Das Open-Source-Asset-Management-System ==jumpserver== kann das Geschäft des Unternehmens nicht zu 100 % abwickeln
Um das Netzwerk und die Daten vor Eindringlingen und Schäden durch externe und interne Benutzer zu schützen, nutzen Bastion Machines verschiedene technische Mittel, um den Systemstatus, Sicherheitsereignisse und Netzwerkaktivitäten jeder Komponente in der Netzwerkumgebung in Echtzeit zu erfassen und zu überwachen und bereitzustellen Zentralisierte Alarme, rechtzeitige Verarbeitung und Prüfung.
Leitende Ingenieure müssen ähnliche Systeme entwickeln, um ihre eigenen Geschäftsanforderungen zu erfüllen
Demonstrationsbezogene Demoprojekte
2. Was Sie über Webentwicklung lernen sollten
HTML-Hypertext-Markup-Text
CSS Cascading Style Sheets
Dynamische JavaScript-Skriptsprache
DOM-Dokument
jQuery-JavaScript-Bibliothek
Bootstrap HTML+CSS+JS-Frontend-Vorlagenbibliothek
Ajax ist eine Reihe asynchroner Technologien+JavaScript+XML
Kombiniert mit dem Erlernen einer Back-End-Sprache (Java, PHP, ==Python==, Ruby[howbrew]~~~)
3. Relevante Lernmaterialien
MDN: Web-Eröffnung lernen | MDN
Rookie-Tutorial:Rookie-Tutorial – Lernen Sie nicht nur Fähigkeiten, sondern auch Träume!
2. HTML, die Grundlagen der Webentwicklung
Fähigkeit, Seiten mit HTML zu entwickeln
1. Einführung in Front-End-Sprachen
HTML stellt den Inhalt der Seite bereit (Struktur und Inhalt)
CSS verschönert Webseiten (Stile)
JavaScript steuert (kontrolliert) den Inhalt auf Webseiten
2. Vorbereitung von Entwicklungstools
Häufig verwendete Entwicklungstools:
Leichter Texttyp: ==VSCode==, Sublime
Gewicht IDE-Typ: WebStrom
3. Ursprüngliches HTML
Was ist HTML?
HTML (die Abkürzung für English Hyper Text Markup Language) wird ins Chinesische übersetzt als ==Hypertext Markup Language==
Verwenden Sie HTML-Tags, um Text, Bilder, Töne und andere Inhalte auf Webseiten zu beschreiben
Öffnen Sie eine Seite im Internet und zeigen Sie den Quellcode mit den Browser-Debugging-Tools an
HTML-Format
Grundformat
<html> <Kopf> <title>Titelanzeige</title> </head> <Körper> </body> </html>
HTML-Tag: der Wurzelknoten aller HTML-Tags
Head-Tag: Beschreibt einige Informationen der Webseite. Der darin enthaltene Inhalt wird nicht angezeigt.
Titel-Tag: der Titel der Webseite
==body== Tag: Der Thementeil der Seite, hauptsächlich zum Schreiben und Entwickeln von Inhalten
Tipp: Erstellen Sie schnell eine HTML-Seitenstruktur mit dem Editor
Geben Sie nach dem Erstellen einer neuen HTML-Datei in vscode ein! Drücken Sie die Tabulatortaste, um schnell eine Seitenstruktur basierend auf HTML5-Standards zu erstellen.
4. HTML-Tag-Klassifizierung
①Doppelte Beschriftung
Syntaxformat:
<Tag-Name>Inhalt</Tag-Name>
<Tag-Name> steht am Anfang des gesamten Tags, dem so genannten „Start-Tag“.
</tag name> Das Ende des gesamten Tags wird als „End-Tag“ bezeichnet.
Das End-Tag hat lediglich ein weiteres Schlusszeichen „/“ vor dem Start-Tag.
Zum Beispiel:
<body>Ich bin der Hauptinhalt der Seite</body>
②Einzeletikett
Syntaxformat:
<Tag-Name/>
Ein einzelnes Etikett wird auch als leeres Etikett bezeichnet. Dies bezieht sich auf ein Etikett, das eine bestimmte Funktion mit einem Etikettensymbol vollständig beschreiben kann.
Zum Beispiel:
<br /> Zeilenumbruch-Tag <hr /> Horizontale Linie Horizontale Linienbeschriftung
5. Zeichensatz
<meta charset=“UTF-8“>
==UTF-8== ist derzeit die am häufigsten verwendete Zeichensatzkodierungsmethode. Zu den häufig verwendeten Zeichensatzkodierungsmethoden gehören gbk und gb2312.
GB2312 Einfaches Chinesisch umfasst 6763 chinesische Schriftzeichen
BIG5 Traditionelles Chinesisch für Hongkong, Macao und Taiwan
GBK enthält alle chinesischen Schriftzeichen und ist eine Erweiterung von GB2312. Es bietet Unterstützung für traditionelle Schriftzeichen und ist mit GB2312 kompatibel.
UTF-8 enthält Zeichen, die von allen Ländern der Welt benötigt werden
Tipp: In Zukunft können wir den UTF-8-Zeichensatz einheitlich verwenden, um verstümmelte Zeichen zu vermeiden, die durch inkonsistente Zeichensätze verursacht werden.
6. Häufig verwendete HTML-Basis-Tags
6.1. Titel-Tag
Wortabkürzung: Kopfüberschrift
Grammatik:
<h1>Dies ist das h1-Tag</h1> <h2>Dies ist das h2-Tag</h2> <h3>Dies ist das h3-Tag</h3> <h4>Dies ist das h4-Tag</h4> <h5>Dies ist das h5-Tag</h5> <h6>Dies ist das h6-Tag</h6>
6.2. Absatz-Tags
Wortabkürzung: Absatz Absatz
Mithilfe von Absatz-Tags kann der Text auf der Webseite absatzweise formatiert werden.
Grammatik:
<p>Absatzinhalt</p>
6.3. Horizontale Linienbeschriftung
Wortabkürzung: horizontale horizontale Linie
Grammatik:
<hr /> ist ein einzelnes Tag
6.4. Zeilenvorschubetikett
Wortabkürzung: Pause, Pause, Zeilenumbruch
In HTML erfordert der standardmäßige Zeilenumbruch einen automatischen Zeilenumbruch am äußersten rechten Ende des Browserfensters, sodass der Rendering-Effekt auf jedem Gerät inkonsistent ist. Wenn Sie einen Zeilenumbruch für einen bestimmten Text erzwingen müssen, müssen Sie ein Zeilenumbruch-Tag verwenden.
Grammatik:
<br />
Übung: Implementieren Sie eine einfache Nachrichtenseite
6.5. div span-Tag
Zwei Layout-Methoden im Box-Modell:
Die Abkürzung „div Division“ bedeutet „Division“. Tatsächlich gibt es viele Divs zum Kombinieren von Webseiten. Elemente auf Blockebene
span span, span; range, Inline-Element
Grammatik:
<div>Dies ist der Header</div> <span>Heutiger Preis</span>
6.6. Etikettenattribute
Wenn Sie beim Erstellen einer Webseite mithilfe von HTML möchten, dass das Tag mehr Informationen bereitstellt, können Sie es mithilfe einiger Attribute des Tags festlegen.
Grammatik:
<Tag-Name Attribut 1="Attributwert 1" Attribut 2="Attributwert 2" ...> Inhalt </Tag-Name>
Beispiel:
<hr width="200" align="left" />
width-Attribut, Wert 200 steuert die Breite
align-Attribut, der Wert left steuert die horizontale Ausrichtung
6.7. Bild-Tag img
Wortabkürzung: Bild Bild
Grammatik:
<img src="Bild-URL" />
Legen Sie den Pfad und Dateinamen der Bilddatei über das src-Attribut fest. Es ist ein erforderliches Attribut des img-Tags.
6.8. Link-Tags
Abkürzung: Ankeranker
Grammatik:
<a href="Sprungziel">Text oder Bild</a>
Das href-Attribut gibt die Ziel-URL-Adresse an, mit der verlinkt werden soll.
URL-Adresse, Sie können den absoluten Pfad und den relativen Pfad verwenden. Einschließlich Vereinbarungen usw.
Tipp:
href kann „#“ verwenden, um eine leere Verbindung anzuzeigen, und es gibt vorerst keine Jump-Link-Adresse.
Öffnen Sie einen neuen Seitentab
6.9. Sonderzeichen-Tags
Einige Tags in HTML haben besondere Bedeutungen und werden direkt vom Browser analysiert. Wenn Sie diese Tags ausgeben müssen, müssen Sie Escape- und Substitutionssyntax verwenden.
6.10 Anmerkungs-Tags
Kommentar-Tags können HTML-Dokumenten Text hinzufügen, der leicht zu lesen und zu verstehen ist. Der Inhalt dieses Tags wird nicht direkt angezeigt und ist nur über den Quellcode sichtbar.
Grammatik:
<!-- Kommentaranweisung -->
7. Listen Sie das Tag ul li auf
Grammatik:
<ul> <li>Listenelement 1</li> <li>Listenelement 2</li> <li>Listenelement 3</li> ...... </ul>
Tipp:
①Im <ul></ul>-Tag kann nur das <li></li>-Tag verschachtelt werden. Eine direkte Verschachtelung anderer Tags ist aus syntaktischen Gründen nicht zulässig.
②<li></li>Das Tag dient als Container und kann andere Tag-Elemente aufnehmen.
③Die ungeordnete Liste hat einen Standardstil und kann mit CSS geändert werden.
8. Tisch
In der Regel ist es erforderlich, Tabellen zum Anzeigen von Daten zu verwenden, damit die Daten regelmäßiger dargestellt werden können.
8.1. Erstellen Sie eine Tabelle
Grammatik:
<Tabelle> <tr> <td>Text in Zelle</td> ... </tr> ... </table>
Tabelle definiert eine Tabelle
tr definiert eine Zeile in der Tabelle und muss im Tabellen-Tag verschachtelt sein. Mehrere Paare von tr-Tags geben an, wie viele Tabellenzeilen es gibt.
td definiert Zellen in der Tabelle und muss in tr-Tags verschachtelt sein. Ein tr-Tag-Paar enthält mehrere td-Tag-Paare, was bedeutet, wie viele Zellen sich in einer Zeile befinden. td kann als Container zur Aufnahme anderer Etikettenelemente verwendet werden.
8.2. Tabellenattribute
Tipp:
①Mit dem th-Tag können Sie den Header festlegen
②Sie können dann CSS verwenden, um den Stil der Tabelle zu ändern
9. Formular
9.1. Formulareinführung
In HTML wird das Formular-Tag zum Definieren eines Formulars verwendet. Wird verwendet, um benutzerbezogene Informationen zu sammeln und zu übertragen und mit dem Backend zu interagieren. Der gesamte Inhalt des Formulars wird an den Server übermittelt.
Grammatik:
<form action="url address" method="Submission method"> Verschiedene Formularsteuerelemente </form>
Gemeinsame Eigenschaften:
Der Aktionswert ist die an das Backend übermittelte URL-Adresse.
Methode legt die Formularübermittlungsmethode fest. Der Wert ist get oder post.
9.2. Formkontrollzusammensetzung
Das Formular bietet eine Vielzahl von Formularbereichen, wie z. B. einzeilige Texteingabefelder, Passworteingabefelder, Kontrollkästchen, Senden-Schaltflächen, Zurücksetzen-Schaltflächen usw.
9.3. Eingabekontrolle (Schlüsselpunkt)
Die Eingabesteuerung wird in Formularen am häufigsten verwendet und muss ebenfalls beherrscht werden. Das grundlegende Beschriftungsattribut ist das Typattribut, mit dem verschiedene Steuerelementtypen definiert werden.
Weitere gemeinsame Attribute:
9.4. Textbereichssteuerung (Textbereich)
Wenn eine große Menge an Informationen eingegeben werden muss, kann das Textarea-Tag verwendet werden. Implementieren Sie ein mehrzeiliges Texteingabefeld.
Grammatik:
<textarea cols="Anzahl der Zeichen in jeder Zeile" rows="Anzahl der angezeigten Zeilen"> Textinhalt </textarea>
9.5. Steuerung auswählen (Dropdown-Menü)
Das Auswahlsteuerelement kann Benutzern einige allgemeine Optionen bieten.
Grammatik:
<wählen> <option>Option 1</option <option>Option 2</option> <option>Option 3</option> ... </select>
Tipp:
Das Select-Tag muss ein Options-Tag enthalten.
Im Option-Tag können Sie selected="selected" definieren, um den aktuellen Wert als Standardoption festzulegen.
9.6, Etikettenetikett
Das Label label ist das Definitionslabel (Label) des Eingabeelements.
Es kann zum Binden eines Formularelements verwendet werden. Wenn auf die Beschriftung geklickt wird, erhält das gebundene Formularelement den Eingabefokus.
Grammatik:
<label for="male">Male</label> <input type="radio" Name="Geschlecht" id="männlich" value="männlich">
3. CSS, die Grundlagen der Webentwicklung
1. Einführung in CSS
1.1. Die Rolle von CSS
1.2. Was ist CSS?
CSS (Cascading Style Sheets), oft CSS-Stylesheets oder Cascading Style Sheets (Cascading Style Sheets) genannt
Wird hauptsächlich zum Festlegen des Textinhalts (Schriftart, Größe, Ausrichtung usw.), der Form des Felds (Breite und Höhe, Rahmenstil, Ränder usw.) und des Layouts des Layouts auf der HTML-Seite verwendet.
Basierend auf HTML bietet es eine Fülle von Funktionen wie Schriftart, Farbe, Hintergrundsteuerung und Gesamtschriftsatz usw.
2. Wo und wie CSS definiert ist
1.1. Inline-Stil (Inline-Stil)
Inline-Stile legen den Stil von Elementen über das style-Attribut des Tags fest.
Grammatik:
<Tag name style="Attribut 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3;"> Inhalt </Tag name>
Style ist ein Attribut des Tags. Jedes HTML-Tag verfügt über das Style-Attribut, das zum Festlegen des Inline-Stils verwendet wird.
1.2. Eingebettete Stile
Eingebettet besteht darin, CSS-Code in das Head-Tag des HTML-Dokuments zu schreiben und ihn mit dem Style-Tag zu definieren.
<Kopf>
<style type="text/CSS">
Selektor {Attribut 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3;}
</style>
</head>
Tipp:
①Das Style-Tag befindet sich im Allgemeinen im Head-Tag und kann tatsächlich an einer beliebigen Stelle im HTML-Dokument platziert werden.
②Das Attribut type = „text / css“ kann weggelassen werden. Durch das Hinzufügen wird es natürlich standardisierter.
1.3. Externes Stylesheet (importierte Datei)
Ein externes Stylesheet speichert alle Stile in einer oder mehreren Dateien mit der Endung .css. Verknüpfen Sie externe Stylesheet-Dateien über das Link-Tag mit HTML-Dokumenten.
Grammatik:
<Kopf> <link href="Pfad zur CSS-Datei" type="text/CSS" rel="stylesheet" /> </head>
href: Definiert die URL der durch den Link eingeführten Stylesheet-Datei. Sowohl relative als auch absolute Pfade sind akzeptabel.
Typ: Definiert den Typ des verknüpften Dokuments. „text/CSS“ gibt an, dass die verknüpfte externe Datei ein CSS-Stylesheet ist
rel: Definiert die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument. Es muss hier als „Stylesheet“ angegeben werden, um anzugeben, dass das verknüpfte Dokument eine Stylesheet-Datei ist.
Zusammenfassen:
| Stylesheet | Vorteil | Mangel | Verwendung | Kontrollbereich |
|---|---|---|---|---|
| Inline-Stylesheet | Leicht zu schreiben | Es wird keine Trennung von Stil und Struktur erreicht | weniger | Kontrollieren Sie ein Etikett (weniger) |
| internes Stylesheet | Teilweise Struktur- und Stiltrennung | nicht vollständig getrennt | mehr | Eine Seite steuern (mittel) |
| externes Stylesheet | Völlig separate Struktur und Stil | Muss vorgestellt werden | Sehr empfehlenswert | Kontrollieren Sie ganze Site(s) |
Priorität:
==inline>outside=inline==
3. CSS-Selektor
Wenn Sie in HTML CSS-Stile auf Tags anwenden möchten, müssen Sie zunächst das (Klassen-)Tag finden. In CSS kann es über Selektoren (Selektoren) gefunden werden.
3.1. Tag-Auswahl
Unter Tag-Selektor versteht man die Verwendung von ==HTML tag name== als Selektor, um einen einheitlichen CSS-Stil für Tags festzulegen, die mit solchen Tag-Namen auf der Seite definiert sind.
Grammatik:
Tag-Name {Attribut 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3; }
3.2. ID-Auswahl
Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind.
Grammatik:
#id name {Attribut 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3; }
Tipp:
①Der ID-Name ist der Wert des ID-Attributs im HTML-Tag
②Der ID-Wert eines Elements ist eindeutig und kann nur auf ein bestimmtes Element im Dokument angewendet werden.
3.3. Klassenauswahl
Der Klassenselektor wird verwendet, um den Stil einer Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor. Die Klasse kann in mehreren Elementen verwendet werden.
Grammatik:
.Klassenname {Attribut 1: Attributwert 1; Attribut 2: Attributwert 2; Attribut 3: Attributwert 3; }
Tipp:
Der Unterschied zwischen ID-Selektor und Klassenselektor:
①Der Klassenselektor kann mehrfach wiederverwendet werden
②Die eindeutige Kennung des ID-Selektors kann nur einmal verwendet und nicht wiederholt werden.
Mit anderen Worten, der Unterschied in der Anzahl der Nutzungen. Im selben HTML-Dokument ist derselbe ID-Attributwert in mehreren Tags nicht zulässig.
Tipp: Priorität des Selektors
==id > Klasse > tag==
3.4. Namensauswahl für mehrere Kategorien
Den Etiketten können mehrere Klassennamen zugewiesen werden, um mehr Auswahl zu ermöglichen.
<div class="font14 colorred">Ahn'Qiraj</div>
==Tipp: Kombinationsauswahl==
CSS-Kombinationsselektoren | Tutorial für Neulinge
In CSS3 stehen vier Kombinationsmethoden zur Verfügung:
① Nachkommenselektoren (durch Leerzeichen getrennt)
Der Nachkommenselektor wird verwendet, um Nachkommenelemente eines Elements auszuwählen.
Grammatik:
div p { Hintergrundfarbe:gelb; }②Unterelementselektor (getrennt durch ein Größer-als-Zeichen)
Im Vergleich zu untergeordneten Selektoren können untergeordnete Selektoren nur Elemente auswählen, die untergeordnete Elemente eines Elements sind.
div>p { Hintergrundfarbe:gelb; }③Benachbarter Geschwisterselektor (getrennt durch Pluszeichen) Der benachbarte Geschwisterselektor kann ein Element unmittelbar nach einem anderen Element auswählen, und beide haben dasselbe übergeordnete Element. Wenn Sie ein Element unmittelbar nach einem anderen Element auswählen müssen und die beiden Elemente dasselbe übergeordnete Element haben, können Sie den Selektor für benachbarte Geschwister (Angrenzende Geschwister > Selektor) verwenden.
div+p { Hintergrundfarbe:gelb; }④Gemeinsame Geschwisterselektoren (durch Bindestriche getrennt)
Der nachfolgende Geschwisterselektor wählt alle benachbarten Geschwisterelemente nach dem angegebenen Element aus.
div~p { Hintergrundfarbe:gelb; }
4. Grundlegende Stileigenschaften von CSS
4.1. CSS-Schriftarten
Schriftgröße Schriftgröße, die Einheit ist im Allgemeinen px (Pixel)
Schriftfamilie Schriftstil Microsoft Yahei Song Ti Kai Ti
4.2, CSS-Text (Text)
Farbe des Texts
Es gibt drei Einstellungsmethoden:
①Hexadezimaler Wert wie: #FF0000
②RGB-Wert wie: RGB(255,0,0)
③Der Name der Farbe, z. B.: Rot
Textausrichtung horizontale Ausrichtung
Es gibt drei Einstellungsmethoden:
①links linksbündig (Standard)
②rechts rechtsbündig
③zentrierte Ausrichtung
Textdekoration Textdekoration
| Wert | beschreiben |
|---|---|
| keiner | Standard. Text, der den Standard definiert. |
| unterstreichen | Definiert eine Zeile unter dem Text. In unseren Links sind auch Unterstriche enthalten. |
| überstreichen | Definiert eine Textzeile. |
| Line-Through | Definiert eine Zeile, die unter dem Text verläuft. |
4.3. Anzeigen und Ausblenden
display:none kann ein Element ausblenden und das ausgeblendete Element nimmt keinen Platz ein. Mit anderen Worten: Das Element wird nicht nur ausgeblendet, sondern auch der ursprünglich von dem Element eingenommene Platz verschwindet aus dem Seitenlayout.
Grammatik:
h1{display:none;}
4.4. Kartongröße
width legt die Breite des Felds fest, Einheit: px-Prozentsatz
height legt die Breite des Felds fest, Einheit: px-Prozentsatz
Grammatik:
div{
Breite:400px;
Höhe:200px;
}
4.5, Rand (Boxrand)
CSS-Rahmen | Tutorial für Anfänger
Grammatik:
Grenze: Randbreite || Randstil || Randfarbe
border-style legt häufig den Stil des Rahmens fest
- none: Es gibt keinen Rand, d. h. die Breite aller Ränder wird ignoriert (Standardwert)
- durchgezogen: Der Rand ist eine einzelne durchgezogene Linie (am häufigsten verwendet)
- gestrichelt: Der Rand ist gepunktet
- gepunktet: Der Rand ist eine gepunktete Linie
- doppelt: Der Rand ist eine doppelte durchgezogene Linie
4.6, Hintergrund (Hintergrund)
①Hintergrundfarbe
Körper {Hintergrundfarbe:rot;}
②Hintergrundbild
Körper {background-image:url('bg.jpg');}