1-1 Lernweg

1-2 Einführung in HTML

1-3 Webbezogene Konzepte

1-4 Gängige Browser und Kernel

1-5 Webstandards

2-1 Einführung in HTML-Tags

2-2 HTML-Syntaxspezifikation

2-3 HTML-Grundstruktur-Tags

2-4 Seite zur Erstellung des VSCode-Tools

2-5 DOCTYPE und lang und die Rolle von Zeichensätzen

3-1 Tag-Semantik

3-2 Titel-Tag

3-3 Absatz-Tags und Zeilenumbruch-Tags

3-4 Sportnachrichtenfall

3-5 Textformatierungs-Tag

3-6 div- und span-Tags

3-7 Bild-Tags (oben)

3-8 Bild-Tags (unten)

3-9 Was Sie bei Bild-Tags beachten sollten

4-1 Verzeichnisordner und Stammverzeichnisse

4-2 Relativer Pfad (oben)

4-3 Relativer Pfad (unten)

4-4 absoluter Weg

5-1 Link-Tag (oben)

5-2 Link-Tags (unten)

5-3 Ankerlink

5-4 Kommentar-Tags und Sonderzeichen

6-1 Umfassender Fall (Teil 1)

6-2 Umfassende Fälle (Teil 2)

7-1 Einführung in HTML-Tags (Teil 2)

7-2 Grundlegende Verwendung von Tabellenetiketten

7-3 Beschriftung der Kopfzelle

7-4 Tabellenbezogene Eigenschaften (verstehen)

7-5 Neuartiger Ranking-Fall

7-6 Tabellenstruktur-Tag

7-7 Zellen zusammenführen

7-8 Tabellenzusammenfassung

8-1 ungeordnete Liste

8-2 geordnete Liste

8-3 benutzerdefinierte Liste

8-4 Zusammenfassung der Liste

9-1 Formularverwendungsszenarien und -klassifizierungen

9-2 Formularfelder

9-3 Textfeld für Eingabetypattribut und Kennwortfeld

9-4 Optionsfeld und Kontrollkästchen für Eingabetypattribute

9-5 Geben Sie Namens- und Wertattribute ein

9-6 Überprüfte und maximale Längenattribute der Eingabe

9-7 Fragen und Antworten im Klassenzimmer zu Verwendungsszenarien von vier Attributen von Eingabeformularelementen

9-8 Schaltfläche zum Senden und Zurücksetzen des Eingabetypattributs

9-9 Eingabetypattribut: normale Schaltfläche und Dateifeld

9-10 Etikett Etikett

9-11 Dropdown-Formular auswählen

9-12 textarea Textbereichsbezeichnung

9-13 Zusammenfassung der Formularelemente

10-1 Registrierungsseite (1)

10-2 Registrierungsseite (2)

10-3 Registrierungsseite (3)

10-4 Registrierungsseite (4)

10-5 Lernen Sie, Dokumente zu lesen

11-1 Eine Einführung in CSS Cascading Style Sheets

11-2 Einführung in CSS

12-1 Erleben Sie CSS-Syntaxspezifikationen

12-2 CSS-Codestil

13-1 Die Rolle des CSS-Selektors

13-2 Tag-Selektor

13-3 Klassenselektor

13-4 Zeichnen Sie Kästchen mithilfe von Klassenselektoren

13-5 Besondere Verwendung des Klassenselektors – mehrere Klassennamen

13-6 ID-Selektor

13-7 Wildcard-Selektor

14-1 Schriftfamilie legt die Schriftfamilie fest

14-2 Schriftgröße Schriftgröße

14-3 Schriftstärke, Schriftstärke

14-4 Schriftstil im Schriftstil

14-5 So schreiben Sie ein Schriftart-Composite-Attribut

14-6 Zusammenfassung der Schriftartattribute

15-1 Textfarbe

15-2 Textausrichtung, Textausrichtung

15-3 Textdekoration Textdekoration

15-4 Texteinzug Texteinzug

15-5 Zeilenabstand Zeilenhöhe

15-6 Zusammenfassung der CSS-Texteigenschaften

16-1 internes Stylesheet

16-2 Inline-Stylesheet

16-3 externes Stylesheet

16-4 Zusammenfassung der CSS-Einführungsmethoden

17-1 Nachrichtenseite

17-2 Stil ändern (1)

17-3 Stil ändern (2)

17-4 Stil ändern (3)

17-5 Verwendung von Chrome-Debugging-Tools

18-1 CSS-Guide für den zweiten Tag

18-2 Die Emmet-Syntax generiert HTML-Tags

18-3 Emmet-Syntax zum schnellen Generieren von CSS-Stilen

18-4 Code schnell formatieren

19-1 Einführung in zusammengesetzte Selektoren

19-2 Nachkommenselektor

19-3 Auswahl für untergeordnete Elemente

19-4 Klassenübungen

19-5 Union-Selektor

19-6 Link-Pseudoklassenselektor (Teil 1)

19-7 Link-Pseudoklassenselektor (unten)

19-8 Fokus-Pseudoklassenselektor

19-9 Zusammenfassung der Verbindungsauswahl

20-1 Was ist der Elementanzeigemodus?

20-2 Blockelement

20-3 Inline-Elemente

20-4 Inline-Blockelement

20-5 Zusammenfassung der Elementanzeigemodi

20-6 Konvertierung des Anzeigemodus

21-1 Die Verwendung eines kleinen Snipaste-Werkzeugs

21-2 Einfache Version der Xiaomi-Sidebar-Hülle

21-3 Das Prinzip der vertikalen Zentrierung von einzeiligem Text

21-4 Hintergrundfarbe

21-5 Hintergrundbild

21-6 Hintergrundkacheln

21-7 Hintergrund-Positionsorientierungsnomen

21-8 Hintergrundstandort Fall eins

21-9 Hintergrundstandort Fall 2 – Hintergrundbild „King of Glory“.

21-10 Hintergrundposition – genaue Einheiten

21-11 Hintergrundposition – Gemischte Einheiten

21-12 Hintergrund behoben

21-13 Zusammengesetzte Schreibmethode für Hintergrundattribute

21-14 Hintergrundfarbe durchscheinend

21-15 Hintergrundzusammenfassung

21-16 Umfassender Fall Fünf-Farben-Navigation (Teil 1)

21-17 Umfassender Fall Five-Cai Navigation (2)

22-1 Stapelbarkeit

22-2 Nachlass

22-3 Vererbung der Zeilenhöhe

22-4 Priorität

22-5 Vorrangige Probleme

22-6 Überlagerung von CSS-Gewichten

22-7 Zwei Übungen mit Gewichten

23-1 Einführung in das Boxmodell

23-2 Verstehen Sie die Essenz des Webseitenlayouts

23-3 Komponenten des Boxmodells

23-4 Rahmen des Boxmodells

23-5 Zusammengesetztes Schreiben von Grenzen

23-6 Tabellenrand mit dünner Linie

23-7 Ränder beeinflussen die tatsächliche Größe der Box

23-8 Innenrandpolsterung im Kastenmodell

23-9 Eigenschaft der Polstermasse

23-10 Die Polsterung wirkt sich auf die tatsächliche Größe der Box aus

23-11 Polsteranwendung – Sina-Navigationsleiste (Teil 1)

23-12 Polsteranwendung-Sina Navigation (Teil 2)

23-13 Modifikation der Xiaomi-Seitenleiste

23-14 Die Polsterung hält die Box nicht offen

23-15 Rand des Boxmodells

23-16 Typische Anwendung von Rändern: Boxen auf Blockebene werden horizontal und mittig ausgerichtet

23-17 Inline-Elemente und Inline-Block-Elemente sind horizontal zentriert

23-18 Randzusammenführung – vertikale Ränder benachbarter Blockelemente

23-19 Randzusammenführung – verschachtelte Blockelemente fallen zusammen

23-20 klare Innen- und Außenränder

24-1 Grundlegende Operationen von ps

24-2 Umfassende Fall-Produktmodul-Layoutanalyse

24-3 Umfassendes Koffer-Box-Layout

24-4 Umfassende Fallbild- und Absatzproduktion

24-5 Umfassende Fallbewertung und detaillierte Erstellung

24-6 Umfassende Herstellung von Gehäuse- und Vertikalliniendetails

24-7 Der Lehrer erklärt

24-8 Express-Modullayoutanalyse

24-9 Express-Modul-Header-Produktion

24-10 Express-Erstellung von Modullisten

25-1 Prinzip der abgerundeten Ränder

25-2 Verwendung abgerundeter Ecken

26-1 Kastenschatten

26-2 Textschatten

27-1 Schwimmender Leitfaden

27-2 Drei Möglichkeiten des traditionellen Webseitenlayouts

27-3 Warum Float benötigt wird

27-4 Was ist Float?

27-5 Float-Eigenschaften-Off-Standard

27-6 Floating-Eigenschaften-Floating-Elemente werden in einer Zeile angezeigt

27-7 Float-Eigenschaften – Float-Elemente verfügen über Inline-Blockeigenschaften

27-8 Schwebeelemente werden oft mit standardmäßigen übergeordneten Flusselementen gepaart

27-9 Floating-Layout-Übung-1

27-10 Floating-Layout-Übung-2

27-11 Schwimmendes Übungs-Handymodul (Teil 1)

27-12 Schwimmendes Übungs-Handymodul (Teil 2)

27-13 Gängige Webseitenlayouts

27-14 Zwei Punkte, die Sie beim Floating beachten sollten

28-1 Warum Clear Float?

28-2 Klare Floating-Natur und zusätzliche Etikettenmethode

28-3 Löschen Sie den Überlauf des schwebenden übergeordneten Elements

28-4 Floating nach Pseudoelement löschen

28-5 Löschen Sie schwebende doppelte Pseudoelemente

28-6 klarer Schwimmer

29-1 Gängige Bildformate

29-2 Lagenschneiden (oben)

29-3 Ebenenausschnitt (unten)

29-4 Slice-Werkzeug

29-5 Cutterman-Installation

29-6 Tipps zur Verwendung von Cutterman

30-1 Vorbereitung

30-2 Schreibreihenfolge der CSS-Attribute (wichtig)

30-3 Gesamtidee des Seitenlayouts

30-4 Erstellung des Headerbereichs

30-5 Produktion von Logoflächen

30-6 Produktion des Navigationsbereichs der Navigationsleiste (Teil 1)

30-7 Produktion des Navigationsbereichs in der Navigationsleiste (Mitte)

30-8 Produktion des Navigationsbereichs der Navigationsleiste (Teil 2)

30-9 Suche, Suchmodul, Eingabeproduktion

30-10 Produktion von Schaltflächen für das Suchmodul

30-11 Produktion von Benutzermodulen

30-12 Produktion von Bannermodulen

30-13 Produktion des Subnav-Moduls (Teil 1)

30-14 Subnav-Modulproduktion (Teil 2)

30-15 Kursmodulproduktion (Teil 1)

30-16 Kursmodul Produktion (mittel)

30-17 Kursmodulproduktion (Teil 2)

30-18 Premium-Empfehlungsmodul (Teil 1)

30-19 Premium-Empfehlungsmodul (mittel)

30-20 Premium-Empfehlungsmodul (Teil 2)

30-21 Produktion von Box-HD-Modulen

30-22 Produktion von Box-BD-Modulen

30-23 Box-Modul fertiggestellt

30-24 Produktion von Fußzeilenmodulen

30-25 Produktion des Urheberrechtsmoduls

30-26 verbindet die Modulproduktion

31-1 Positionierungsanleitung

31-2 Warum Positionierung notwendig ist

31-3 Komposition positionieren

31-4 relative Positionierung

31-5 Absolute Positionierung – keine übergeordnete oder keine übergeordnete Positionierung

31-6 Absolute Positionierung – das übergeordnete Element hat den Positionierungsstatus

31-7 Eine vom Standard abweichende Absolutpositionierung nimmt nicht die ursprüngliche Position ein.

31-8 väterlicher Herkunft

31-9 Der Fall des absolut vaterheißen Moduls des Sohnes

31-10 Feste Positionierung

31-11 Tipps zur festen Positionierung – Fixierung auf der rechten Seite der Seitenmitte

31-12 Sticky-Positionierung (verstehen)

31-13 Zusammenfassung der Positionierung

31-14 Positionierung der Stapelreihenfolge

31-15 Absolut positionierter Boxzentrierungsalgorithmus

31-16 Besonderheiten der Positionierung

31-17 Schwebende Elemente unterdrücken nicht die Textpositionierung des Standardflusses.

32-1 Layoutanalyse

32-2 Big-Box-Produktion

32-3 Produktion der linken Pfeiltaste

32-4 Produktion der rechten Pfeiltaste

32-5 Produktion von UL-Box-Modulen

32-6 Li Small Dot-Modulproduktion

32-7 Zusammenfassung des Webseitenlayouts

33-1 Das Display zeigt ausgeblendete Elemente an

33-2 Sichtbarkeit: Versteckte Elemente anzeigen

33-3 Überlauf anzeigen ausblenden

33-4 Kartoffelkiste (Teil 1)

33-5 Kartoffelkiste (Teil 2)

34-1 Einführung

34-2 Warum Elfentechnologie benötigt wird

34-3 Verwendung von Sprite-Charts (Prinzip)

34-4 Verwendung von Sprite-Diagrammen (Code)

34-5 Sprite-Beispiel: Buchstabieren Sie Ihren Namen

34-6 Generierung von Schriftsymbolen und Vorteile

34-7 Herunterladen von Schriftartsymbolen

34-8 Verwendung von Schriftsymbolen

34-9 Prinzip des Anhängens und Ladens von Schriftsymbolen

34-10 So verwenden Sie das CSS-Dreieck

34-11 CSS-Dreiecksanwendung – Jingdong-Effekt

34-12 Benutzeroberfläche – Mausstil

34-13 Benutzeroberfläche – Entfernen Sie die Konturen von Formularen und verhindern Sie das Ziehen von Textfeldern

34-14 Vertical-Align implementiert die vertikale Mittelausrichtung von Inline-Blöcken und Text

34-15 Lösung für die Lücke am unteren Bildrand

34-16 Einzeiliger Text überläuft die Anzeige mit Auslassungspunkten

34-17 Mehrzeiliger Text überläuft die Anzeige mit Auslassungspunkten

34-18 Layoutfähigkeiten – Negative Ränder clever nutzen (Teil 1)

34-19 Layoutfähigkeiten – Negative Ränder geschickt nutzen (Teil 2)

34-20 Layouttechniken – geschickter Einsatz von Text um schwebende Elemente herum

34-21 Layouttechniken – cleverer Einsatz von Inline-Blöcken

34-22 Layout-Kenntnisse – cleverer Einsatz des CSS-Dreiecks (Teil 1)

34-23 Layout-Kenntnisse – CSS-Dreieck clever nutzen (Teil 2)

34-24 CSS-Initialisierung

35-1 HTML5CSS3 verbessert die Navigation

35-2 Fügen Sie semantische Tags hinzu

35-3 Video-Tag hinzufügen

35-4 Audio-Tag hinzufügen

35-5 Eingabeformular hinzufügen

35-6 Fügen Sie neue Formularattribute hinzu

36-1 Attributauswahl (oben)

36-2 Attributauswahl (unten)

36-3 Struktureller Pseudoklassenselektor – wählt das n-te Element aus

36-4 Selektor für das n-te Kind (oben)

36-5 Selektor für das n-te Kind (unten)

36-6 Der Unterschied zwischen nth-child und nth-of-type

36-7 Verwendungsszenarien und Ursprünge von Pseudoelementselektoren

36-8 Grundlegende Verwendung von Pseudoelementselektoren

36-9 Verwendungsszenarien für Pseudoelementselektoren – passende Schriftartsymbole

36-10 Pseudo-Element-Nutzungsszenario – Nachahmung des Kartoffeleffekts

36-11 Pseudo-Element-Selektor – Pseudo-Element löscht die schwebende Natur

36-12 CSS3-Boxmodell Border-Box

36-13 CSS3-Bildunschärfeverarbeitung

36-14 Berechnen Sie die Boxbreite mit der Berechnungsfunktion

36-15 Übergang neuer CSS3-Attribute (Teil 1)

36-16 Übergang neuer CSS3-Attribute (Teil 2)

36-17 CSS3-Übergangsübungen

36-18 Generalisiertes H5 (verstehen)

37-1 Einführung

37-2 Website-Erstellungsprozess

37-3 Pinyougou-Projektplanung

37-4 Bau des Pinyougou-Projekts

37-5 Pinyougou-Projekt – Modulare Entwicklung von Stilen

37-6 Pinyougou-Projekt-Favicon-Icon-Produktion

37-7 Pinyougou-Projekt – SEO-Optimierung für drei große Labels von TDK

37-8 Pinyougou-Homepage – Strukturaufbau für schnelle Navigationsverknüpfungen

37-9 Pinyougou Homepage-Schnellnavigation Linke Seite Produktion

37-10 Pinyougou-Homepage – schnelle Navigation auf der rechten Seite

37-11 Pinyougou-Homepage-Schriftartsymbol auf der rechten Seite der Schnellnavigation

37-12 Aufbau des Pinyougou-Homepage-Header-Moduls

37-13 Pinyougou Homepage-LogoSEO-Optimierung (Teil 1)

37-14 Pinyougou Homepage-LogoSEO-Optimierung (Teil 2)

37-15 Pinyougou Homepage-Suche Suchmodul (Teil 1)

37-16 Pinyougou-Homepage-Suchmodul (Teil 2)

37-17 Pinyougou-Homepage-Hotwords-Modul

37-18 Pinyougou-Homepage-Shopcar-Modulproduktion

37-19 Pinyougou-Homepage-Count-Warenkorb-Statistikmodul

37-20 Aufbau des Pinyougou-Homepage-Navigations-Navigationsmoduls

37-21 Produktion des Pinyougou-Homepage-Dropdown-Moduls

37-22 Pinyougou-Homepage-Navigation, detaillierte Klassifizierungsproduktion (Teil 1)

37-23 Pinyougou-Homepage-Navigation, detaillierte Klassifizierungsproduktion (Teil 2)

37-24 Produktion des Pinyougou-Homepage-Navitems-Moduls

37-25 Aufbau des unteren Moduls der Pinyougou-Homepage-Fußzeile

37-26 Produktion des Pinyougou-Homepage-Mod-Service-Moduls (Teil 1)

37-27 Produktion des Pinyougou-Homepage-Mod-Service-Moduls (Teil 2)

37-28 Produktion des Moduls Pinyougou homepage-mod_help

37-29 Produktion des Pinyougou-Homepage-mod_copyright-Moduls

37-30 Pinyougou-Homepage – Haupt-Hauptbox-Konstruktion

37-31 Pinyougou-Homepage-Newsflash-Modul

37-32 Pinyougou Homepage-News-HD-Modulproduktion

37-33 Pinyougou-Homepage-neue-BD-Modulproduktion

37-34 Pinyougou-Homepage-Lifeservice-Produktion (Teil 1)

37-35 Pinyougou-Homepage-Lifeservice-Produktion (Teil 2)

37-36 Pinyougou-Homepage-empfohlenes Modul recom (Teil 1)

37-37 Pinyougou-Homepage-empfohlenes Modul recom (Teil 2)

37-38 Pinyougou-Homepage – Aufbau von Haushaltsgerätemodulen

37-39 Pinyougou-Homepage – Leiter der Produktion von Haushaltsgerätemodulen

37-40 Anforderungen an das Layout der Tab-Leiste

37-41 Pinyougou-Homepage-tab_list-item-Layout (Teil 1)

37-42 Pinyougou-Homepage-tab_list-item-Layout (Mitte)

37-43 Pinyougou-Homepage-tab_list-item-Layout (Teil 2)

37-44 Aufbau der Produkteinkaufslistenstruktur

37-45 Pinyougo-Listen-Page-Flash-Verkaufsmodulproduktion

37-46 Änderung des Seitennavigationsmoduls der Pinyougou-Liste

37-47 Pinyougou-Listenseite – ein kleines Problem

37-48 Ende der Seite der Pinyougou-Liste

37-49 Pinyougou-Registrierungsseiten-Header-Produktion

37-50 Pinyougo-Listenseitenregistrierung, Hauptmodul-Header-Erstellung

37-51 Pinyougou-Registrierungsseite – Registrierungsthemenproduktion (Teil 1)

37-52 Pinyougou-Registrierungsseite – Registrierungsthemenproduktion (Teil 2)

37-53 Pinyougou-Registrierungsseiten-Sicherheitsmodul

37-54 Pinyougo-Registrierungsseite – Zustimmungsmodul und vollständiges Registrierungsmodul

37-55 Die Projektseiten von Pinyougou springen zueinander und arbeiten nach Vereinbarungen

37-56 Was ist Server?

37-57 Beantragen Sie kostenlosen Speicherplatz und Website-Upload