Erste Schritte mit HTML5+CSS3 für Frontend-Neulinge

• Kapitel1 Kurseinführung und grundlegende Computerkenntnisse
• 1-1 Lernweg
• 1-2 Einführung in HTML
• 1-3 Webbezogene Konzepte
• 1-4 Gängige Browser und Kernel
• 1-5 Webstandards
• Kapitel2 Grundlegende HTML-Syntax und -Struktur
• 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
• Kapitel3 HTML-Tags
• 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
• Kapitel4 Relativer Pfad vs. absoluter Pfad
• 4-1 Verzeichnisordner und Stammverzeichnisse
• 4-2 Relativer Pfad (oben)
• 4-3 Relativer Pfad (unten)
• 4-4 absoluter Weg
• Kapitel5 Links und Anker
• 5-1 Link-Tag (oben)
• 5-2 Link-Tags (unten)
• 5-3 Ankerlink
• 5-4 Kommentar-Tags und Sonderzeichen
• Kapitel6 Umfangreicher Fall
• 6-1 Umfassender Fall (Teil 1)
• 6-2 Umfassende Fälle (Teil 2)
• Kapitel7 HTML-Tabelle
• 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
• Kapitel8 HTML-Liste
• 8-1 ungeordnete Liste
• 8-2 geordnete Liste
• 8-3 benutzerdefinierte Liste
• 8-4 Zusammenfassung der Liste
• Kapitel9 HTML-Formular
• 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
• Kapitel10 Umfangreicher Fall
• 10-1 Registrierungsseite (1)
• 10-2 Registrierungsseite (2)
• 10-3 Registrierungsseite (3)
• 10-4 Registrierungsseite (4)
• 10-5 Lernen Sie, Dokumente zu lesen
• Kapitel11 Einführung in die CSS-Cascading-Demotabelle
• 11-1 Eine Einführung in CSS Cascading Style Sheets
• 11-2 Einführung in CSS
• Kapitel12 CSS-Syntaxspezifikationen und Codestil
• 12-1 Erleben Sie CSS-Syntaxspezifikationen
• 12-2 CSS-Codestil
• Kapitel13 CSS-Selektor
• 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
• Kapitel14 CSS-Schriftart
• 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
• Kapitel15 CSStext
• 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
• Kapitel16 CSS-Stylesheet
• 16-1 internes Stylesheet
• 16-2 Inline-Stylesheet
• 16-3 externes Stylesheet
• 16-4 Zusammenfassung der CSS-Einführungsmethoden
• Kapitel17 Umfangreicher Fall
• 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
• Kapitel18 Emmet-Syntax
• 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
• Kapitel19 Verbindungsselektor
• 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
• Kapitel20 Elementanzeigemodus
• 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
• Kapitel21 Kleiner Sidebar-Koffer
• 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)
• Kapitel22 Drei Hauptmerkmale von CSS
• 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
• Kapitel23 Boxmodell
• 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
• Kapitel24 Umfangreicher Fall
• 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
• Kapitel25 abgerundeter Rand
• 25-1 Prinzip der abgerundeten Ränder
• 25-2 Verwendung abgerundeter Ecken
• Kapitel26 Schatten
• 26-1 Kastenschatten
• 26-2 Textschatten
• Kapitel27 schweben
• 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
• Kapitel28 klarer Schwimmer
• 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
• Kapitel29 PS Bild ausschneiden
• 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
• Kapitel30 Xuecheng Online-Fall
• 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
• Kapitel31 Position
• 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.
• Kapitel32 Taobao-Fokuskarte
• 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
• Kapitel33 Kartoffelkiste
• 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)
• Kapitel34 Erweiterte CSS-Tipps
• 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
• Kapitel35 HTML5 neu
• 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
• Kapitel36 Neu in CSS3
• 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)
• Kapitel37 Pinyougou-Projekt
• 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