1-1 parcours d'apprentissage

1-2 Introduction au HTML

1-3 Notions liées au Web

1-4 Navigateurs et noyaux courants

1-5 normes du Web

2-1 Introduction aux balises HTML

2-2 Spécification de la syntaxe HTML

2-3 Balises de structure de base HTML

2-4 Page de création de l'outil VSCode

2-5 DOCTYPE et lang et le rôle des jeux de caractères

3-1 sémantique des balises

3-2 balise de titre

3-3 Balises de paragraphe et balises de saut de ligne

3-4 Cas d'actualité sportive

3-5 balise de formatage du texte

3-6 balises div et span

3-7 Balises d'image (en haut)

3-8 Balises d'image (ci-dessous)

3-9 Points à noter concernant les balises d'image

4-1 Dossiers de répertoire et répertoires racine

4-2 Chemin relatif (en haut)

4-3 Chemin relatif (ci-dessous)

4-4 chemin absolu

5-1 Balise de lien (en haut)

5-2 Balises de lien (ci-dessous)

5-3 lien d'ancrage

5-4 Balises de commentaires et caractères spéciaux

6-1 Cas complet (partie 1)

6-2 Cas complets (partie 2)

7-1 Introduction aux balises HTML (Partie 2)

7-2 Utilisation de base des étiquettes de tableau

7-3 Libellé de la cellule d'en-tête

7-4 Propriétés liées aux tables (comprendre)

7-5 Nouveau cas de classement

7-6 Balise de structure de table

7-7 Fusionner des cellules

7-8 Résumé du tableau

8-1 liste non ordonnée

8-2 liste ordonnée

8-3 Liste customisée

8-4 Résumé de la liste

9-1 Scénarios et classifications d'utilisation des formulaires

9-2 champs de formulaire

9-3 Zone de texte d'attribut de type d'entrée et zone de mot de passe

9-4 Bouton radio et case à cocher de l'attribut de type d'entrée

9-5 Attributs de nom et de valeur d'entrée

9-6 Attributs vérifiés et maxlength de l'entrée

9-7 Questions et réponses en classe sur des scénarios d'utilisation de quatre attributs d'éléments de formulaire de saisie

9-8 Attribut de type d'entrée bouton de soumission et de réinitialisation

9-9 attribut de type d'entrée bouton ordinaire et champ de fichier

9-10 étiquette étiquette

9-11 sélectionner le formulaire déroulant

9-12 zone de texte étiquette de la zone de texte

9-13 Résumé des éléments du formulaire

10-1 Page d'inscription (1)

10-2 Page d'inscription (2)

10-3 Page d'inscription (3)

10-4 Page d'inscription (4)

10-5 Apprendre à lire des documents

11-1 Une introduction aux feuilles de style en cascade CSS

11-2 Introduction au CSS

12-1 Découvrez les spécifications de la syntaxe CSS

12-2 Style de code CSS

13-1 Le rôle du sélecteur CSS

13-2 sélecteur de balises

13-3 sélecteur de classe

13-4 Dessiner des boîtes à l'aide de sélecteurs de classe

13-5 Utilisation spéciale du sélecteur de classe - plusieurs noms de classe

13-6 sélecteur d'identifiant

13-7 sélecteur de caractères génériques

14-1 font-family définit la famille de polices

14-2 taille de la police taille de la police

14-3 épaisseur de police

14-4 style de police style de police

14-5 Comment écrire un attribut composite de police

14-6 Résumé des propriétés de la police

15-1 couleur du textecouleur

15-2 Alignement du texte

15-3 décoration de texte décoration de texte

15-4 retrait du texte retrait du texte

15-5 Espacement des lignes hauteur de ligne

15-6 Résumé des propriétés du texte CSS

16-1 feuille de style interne

16-2 feuille de style en ligne

16-3 feuille de style externe

16-4 Résumé des méthodes d'introduction CSS

17-1 page d'actualités

17-2 Modifier le style (1)

17-3 Modifier le style (2)

17-4 Modifier le style (3)

17-5 Utilisation des outils de débogage Chrome

18-1 guide css du deuxième jour

18-2 la syntaxe emmet génère des balises html

18-3 syntaxe emmet pour générer rapidement des styles CSS

18-4 Formater rapidement le code

19-1 Introduction aux sélecteurs composés

19-2 sélecteur de descendants

19-3 Sélecteur d'élément enfant

19-4 Exercices en classe

19-5 Sélecteur d'union

19-6 Sélecteur de pseudo-classe de lien (Partie 1)

19-7 Lien vers le sélecteur de pseudo-classe (ci-dessous)

19-8 focus sélecteur de pseudo-classe

19-9 Résumé du sélecteur de composés

20-1 Qu'est-ce que le mode d'affichage des éléments

20-2 élément de bloc

20-3 Élément en ligne

20-4 élément de bloc en ligne

20-5 Résumé des modes d'affichage des éléments

20-6 Conversion du mode d'affichage

21-1 L'utilisation d'un petit outil snipaste

21-2 Version simple du boîtier de la barre latérale Xiaomi

21-3 Le principe du centrage vertical du texte sur une seule ligne

21-4 Couleur de l'arrière plan

21-5 Image d'arrière-plan

21-6 carrelage de fond

21-7 Nom d'orientation de position d'arrière-plan

21-8 Premier cas de localisation en arrière-plan

21-9 Cas de localisation en arrière-plan 2-Image d'arrière-plan du Roi de Gloire

21-10 Position d'arrière-plan - unités précises

21-11 Position d'arrière-plan - Unités mixtes

21-12 arrière-plan corrigé

21-13 Méthode d'écriture composite de l'attribut d'arrière-plan

21-14 couleur de fond translucide

21-15 Résumé du contexte

21-16 Cas complet de navigation en cinq couleurs (partie 1)

21-17 Cas complet de navigation Five-Cai (2)

22-1 Empilabilité

22-2 héritage

22-3 héritage de la hauteur des lignes

22-4 priorité

22-5 Questions prioritaires

22-6 Superposition de poids CSS

22-7 Deux exercices sur les poids

23-1 Introduction au modèle de boîte

23-2 Comprendre l'essence de la mise en page d'une page Web

23-3 Composants du modèle de boîte

23-4 bordure de modèle de boîte

23-5 Méthode d'écriture composée de la bordure

23-6 bordure de table fine

23-7 Les bordures affectent la taille réelle de la boîte

23-8 Remplissage de la marge intérieure du modèle de boîte

23-9 propriété du composé de rembourrage

23-10 le rembourrage affectera la taille réelle de la boîte

23-11 application de remplissage-Barre de navigation Sina (Partie 1)

23-12 application de remplissage-Sina Navigation (Partie 2)

23-13 Modification de la barre latérale Xiaomi

23-14 Le rembourrage ne maintiendra pas la boîte ouverte

23-15 Marge du modèle de boîte

23-16 Application typique des marges : les boîtes au niveau des blocs sont alignées horizontalement et centralement.

23-17 Les éléments en ligne et les éléments de bloc en ligne sont centrés horizontalement

23-18 Fusion des marges - marges verticales des éléments de bloc adjacents

23-19 Fusion des marges – effondrement des éléments de bloc imbriqués

23-20 marges intérieures et extérieures claires

24-1 Opérations de base de ps

24-2 Analyse complète de la disposition des modules cas-produits

24-3 Disposition complète des caisses

24-4 Production complète d’images de cas et de paragraphes

24-5 Évaluation complète des cas et production détaillée

24-6 Production complète de détails de lignes verticales de cas

24-7 L'enseignant explique

24-8 Analyse express de la disposition des modules

24-9 Production d'en-tête de module express

24-10 Création express de liste de modules

25-1 Principe de bordure arrondie

25-2 Utilisation de coins arrondis

26-1 boîte ombre

26-2 ombre de texte

27-1 Guide flottant

27-2 Trois façons de mettre en page une page Web traditionnelle

27-3 Pourquoi le flottement est nécessaire

27-4 qu'est-ce que le flotteur

27-5 Caractéristiques du flotteur hors norme

27-6 Propriétés flottantes : les éléments flottants sont affichés sur une seule ligne

27-7 Propriétés flottantes - Les éléments flottants ont des propriétés de bloc en ligne

27-8 Les éléments flottants sont souvent associés à des éléments parents de flux standard

27-9 Exercice de mise en page flottante-1

27-10 Exercice de mise en page flottante-2

27-11 Module d'exercice flottant pour téléphone portable (partie 1)

27-12 Module d'exercice flottant pour téléphone portable (partie 2)

27-13 Mises en page courantes des pages Web

27-14 Deux points à noter concernant le flottement

28-1 Pourquoi effacer le flotteur

28-2 Nature flottante claire et méthode d'étiquette supplémentaire

28-3 Effacer le débordement de l'élément parent flottant

28-4 Effacer le flottement après le pseudo-élément

28-5 Effacer les doubles pseudo-éléments flottants

28-6 flotteur clair

29-1 Formats d'images courants

29-2 Découpe de couches (en haut)

29-3 Découpe de calque (ci-dessous)

29-4 outil de tranche

29-5 installation de coupeur

29-6 Conseils d'utilisation de Cutterman

30-1 Préparation

30-2 ordre d'écriture des attributs CSS (important)

30-3 Idée globale de mise en page

30-4 Création de la zone d'en-tête

30-5 Production de zones de logo

30-6 Production de la zone de navigation de la barre de navigation (Partie 1)

30-7 Production de la zone de navigation de la barre de navigation (milieu)

30-8 Production de la zone de navigation de la barre de navigation (Partie 2)

30-9 Production d'entrées du module de recherche de recherche

30-10 Production de boutons du module de recherche de recherche

30-11 Réalisation de modules utilisateurs

30-12 Production de modules de bannières

30-13 Production du module Subnav (Partie 1)

30-14 Production du module Subnav (Partie 2)

30-15 Production de modules de cours (Partie 1)

30-16 production de modules de cours (moyen)

30-17 Production de modules de cours (Partie 2)

30-18 Module de recommandation Premium (Partie 1)

30-19 Module de recommandation Premium (moyen)

30-20 Module de recommandation Premium (Partie 2)

30-21 production de modules box-hd

30-22 production de modules box-bd

30-23 module de boîte terminé

30-24 production de modules de pied de page

30-25 production de modules de droits d'auteur

30-26 liens production de modules

31-1 Guide de positionnement

31-2 Pourquoi le positionnement est nécessaire

31-3 Composition de positionnement

31-4 positionnement relatif

31-5 Positionnement absolu - pas de positionnement parent ou pas de positionnement parent

31-6 Positionnement absolu - le parent a le statut de positionnement

31-7 Un positionnement absolu hors standard n'occupe pas sa position d'origine.

31-8 origine paternelle

31-9 Le cas du module absolument chaud du père du fils

31-10 Positionnement fixe

31-11 Conseils pour un positionnement fixe : fixez-le sur le côté droit du centre de la page

31-12 Positionnement collant (Comprendre)

31-13 Résumé du positionnement

31-14 Ordre d'empilement de positionnement

31-15 Algorithme de centrage de boîte en position absolue

31-16 Particularités du positionnement

31-17 Les éléments flottants ne supprimeront pas le positionnement du texte du flux standard.

32-1 analyse de la disposition

32-2 production en grande surface

32-3 Production du bouton fléché gauche

32-4 Production du bouton fléché droit

32-5 production de modules ul box

32-6 production de modules li à petits points

32-7 Résumé de la mise en page Web

33-1 l'écran affiche les éléments cachés

33-2 visibilitéafficher les éléments cachés

33-3 débordement afficher masquer

33-4 Cas de pommes de terre (partie 1)

33-5 Cas de pommes de terre (partie 2)

34-1 Introduction

34-2 Pourquoi la technologie elfe est nécessaire

34-3 Utilisation de sprite charts (principe)

34-4 Utilisation du diagramme de sprite (code)

34-5 Exemple de sprite - épelez votre nom

34-6 Génération d'icônes de police et avantages

34-7 Téléchargement de l'icône de police

34-8 Utilisation d'icônes de police

34-9 Principe d'ajout et de chargement d'icônes de police

34-10 Comment utiliser le triangle CSS

34-11 Application de triangle CSS-Effet Jingdong

34-12 Interface utilisateur - Style de souris

34-13 Interface utilisateur – Supprimer le contour du formulaire et empêcher le glissement des champs de texte

34-14 vertical-align implémente l'alignement central vertical des blocs en ligne et du texte

34-15 Solution à l'espace vide en bas de l'image

34-16 Le texte d’une seule ligne déborde de l’affichage des points de suspension

34-17 Le texte multiligne déborde de l'affichage des points de suspension

34-18 Compétences en mise en page - utilisation intelligente des marges négatives (Partie 1)

34-19 Compétences en mise en page - utilisation intelligente des marges négatives (Partie 2)

34-20 Techniques de mise en page - utilisation intelligente du texte autour des éléments flottants

34-21 Techniques de mise en page - utilisation intelligente des blocs en ligne

34-22 Compétences en mise en page - utilisation intelligente du triangle CSS (Partie 1)

34-23 Compétences en mise en page - utilisation intelligente du triangle CSS (Partie 2)

34-24 Initialisation CSS

35-1 HTML5CSS3 améliore la navigation

35-2 Ajouter des balises sémantiques

35-3 Ajouter une balise vidéo

35-4 Ajouter une balise audio

35-5 Ajouter un formulaire de saisie

35-6 Ajouter de nouvelles propriétés de formulaire

36-1 Sélecteur d'attribut (en haut)

36-2 Sélecteur d'attribut (ci-dessous)

36-3 Sélecteur de pseudo-classe structurelle - sélectionne le nième élément

36-4 sélecteur de nième enfant (en haut)

36-5 sélecteur de nième enfant (ci-dessous)

36-6 La différence entre le nième enfant et le nième de type

36-7 Scénarios d'utilisation et origines des sélecteurs de pseudo-éléments

36-8 Utilisation de base des sélecteurs de pseudo-éléments

36-9 Scénarios d'utilisation du sélecteur de pseudo-éléments correspondant aux icônes de police

36-10 Scénario d'utilisation de pseudo-éléments - effet de pomme de terre d'imitation

36-11 Sélecteur de pseudo-éléments - Le pseudo-élément efface la nature flottante

36-12 Modèle de boîte CSS3 border-box

36-13 Traitement du flou d'image CSS3

36-14 Calculer la fonction de calcul de la largeur de la boîte

36-15 Transition des nouveaux attributs CSS3 (Partie 1)

36-16 Transition des nouveaux attributs CSS3 (partie 2)

36-17 Exercices de transition CSS3

36-18 H5 généralisé (comprendre)

37-1 Introduction

37-2 Processus de création de sites Web

37-3 Planification du projet Pinyougou

37-4 Construction du projet Pinyougou

37-5 Projet Pinyougou-Développement modulaire des styles

37-6 Production d'icônes de favicon du projet Pinyougou

37-7 Projet Pinyougou-TDK optimisation du référencement de trois grands labels

37-8 Construction de la structure du raccourci de navigation rapide de la page d'accueil de Pinyougou

37-9 Page d'accueil de Pinyougou - Navigation rapide Production côté gauche

37-10 Page d'accueil de Pinyougou - navigation rapide construite sur le côté droit

37-11 Icône de police de la page d'accueil de Pinyougou sur le côté droit de la navigation rapide

37-12 Construction du module d'en-tête de la page d'accueil de Pinyougou

37-13 Page d'accueil-logo de PinyougouOptimisation SEO (Partie 1)

37-14 Page d'accueil-logo de PinyougouOptimisation SEO (Partie 2)

37-15 Module de recherche de recherche sur la page d'accueil de Pinyougou (Partie 1)

37-16 Module de recherche de recherche sur la page d'accueil de Pinyougou (Partie 2)

37-17 Module de mots clés de la page d'accueil de Pinyougou

37-18 Production du module page d'accueil-shopcar de Pinyougou

37-19 Module de statistiques de panier d'achat du nombre de pages d'accueil de Pinyougou

37-20 Construction du module de navigation de la page d'accueil de Pinyougou

37-21 Production du module déroulant de la page d'accueil de Pinyougou

37-22 Page d'accueil de Pinyougou - Production de la classification détaillée de la navigation (Partie 1)

37-23 Page d'accueil de Pinyougou - Production de la classification détaillée de la navigation (Partie 2)

37-24 Production du module page d'accueil de Pinyougou-navitems

37-25 Construction du module inférieur de la page d'accueil de Pinyougou

37-26 Production du module Pinyougou homepage-mod-servcie (Partie 1)

37-27 Production du module Pinyougou homepage-mod-servcie (Partie 2)

37-28 Page d'accueil de Pinyougou-mod_help production du module

37-29 Page d'accueil de Pinyougou-mod_copyright module production

37-30 Page d'accueil de Pinyougou - construction de la boîte principale

37-31 Module flash de la page d'accueil de Pinyougou

37-32 Production du module Pinyougou homepage-news-hd

37-33 Page d'accueil de Pinyougou-nouvelle production de modules bd

37-34 Production de la page d'accueil de Pinyougou-lifeservice (Partie 1)

37-35 Production de la page d'accueil de Pinyougou-lifeservice (Partie 2)

37-36 Recom de module recommandé par la page d'accueil de Pinyougou (Partie 1)

37-37 Module recommandé par la page d'accueil de Pinyougou (Partie 2)

37-38 Page d'accueil de Pinyougou - Construction de modules d'appareils électroménagers

37-39 Page d'accueil de Pinyougou-Production de tête de module d'électroménager

37-40 Exigences de mise en page du principe des onglets de la barre d'onglets

37-41 Disposition de la page d'accueil de Pinyougou-tab_list-item (Partie 1)

37-42 Disposition de la page d'accueil de Pinyougou-tab_list-item (au milieu)

37-43 Disposition de la page d'accueil de Pinyougou-tab_list-item (Partie 2)

37-44 Liste d'achat de produits-Construction de structure

37-45 Production de modules de vente flash de page de liste Pinyougo

37-46 Modification du module de navigation dans la page de la liste Pinyougou

37-47 Page de liste Pinyougou - un petit problème

37-48 Fin de page de la liste Pinyougou

37-49 Production d'en-tête de page d'inscription Pinyougou

37-50 Page de liste Pinyougo - production d'en-tête du module principal d'enregistrement

37-51 Page d'inscription Pinyougou - production du sujet d'inscription (Partie 1)

37-52 Page d'inscription Pinyougou - production du sujet d'inscription (Partie 2)

37-53 Page d'inscription Pinyougou-module de sécurité

37-54 Page d'inscription Pinyougou - module d'accord et module d'inscription complet

37-55 Les pages du projet Pinyougou sautent les unes aux autres et les modalités de travail

37-56 qu'est-ce que le serveur

37-57 Demander un espace gratuit et télécharger un site Web