Premiers pas avec HTML5+CSS3 pour les débutants front-end

• Chapitre1 Introduction au cours et connaissances informatiques de base
• 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
• Chapitre2 Syntaxe et structure de base HTML
• 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
• Chapitre3 Balises HTML
• 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
• Chapitre4 Chemin relatif vs chemin absolu
• 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
• Chapitre5 Liens et ancres
• 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
• Chapitre6 Cas complet
• 6-1 Cas complet (partie 1)
• 6-2 Cas complets (partie 2)
• Chapitre7 Tableau HTML
• 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
• Chapitre8 liste HTML
• 8-1 liste non ordonnée
• 8-2 liste ordonnée
• 8-3 Liste customisée
• 8-4 Résumé de la liste
• Chapitre9 Formulaire HTML
• 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
• Chapitre10 Cas complet
• 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
• Chapitre11 Introduction à la table de démonstration en cascade CSS
• 11-1 Une introduction aux feuilles de style en cascade CSS
• 11-2 Introduction au CSS
• Chapitre12 spécifications de syntaxe CSS et style de code
• 12-1 Découvrez les spécifications de la syntaxe CSS
• 12-2 Style de code CSS
• Chapitre13 sélecteur 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
• Chapitre14 police CSS
• 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
• Chapitre15 texte css
• 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
• Chapitre16 feuille de style 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
• Chapitre17 Cas complet
• 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
• Chapitre18 syntaxe d'Emmet
• 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
• Chapitre19 sélecteur composé
• 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
• Chapitre20 Mode d'affichage des éléments
• 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
• Chapitre21 Petit boîtier de la barre latérale
• 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)
• Chapitre22 Trois fonctionnalités majeures du CSS
• 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
• Chapitre23 modèle de boîte
• 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
• Chapitre24 Cas complet
• 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
• Chapitre25 bordure arrondie
• 25-1 Principe de bordure arrondie
• 25-2 Utilisation de coins arrondis
• Chapitre26 ombre
• 26-1 boîte ombre
• 26-2 ombre de texte
• Chapitre27 flotter
• 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
• Chapitre28 flotteur clair
• 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
• Chapitre29 ps couper l'image
• 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
• Chapitre30 Cas en ligne Xuecheng
• 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
• Chapitre31 position
• 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.
• Chapitre32 Carte de mise au point Taobao
• 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
• Chapitre33 Cas de pommes de terre
• 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)
• Chapitre34 Conseils CSS avancés
• 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
• Chapitre35 HTML5 nouveau
• 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
• Chapitre36 Nouveau dans CSS3
• 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)
• Chapitre37 Projet Pinyougou
• 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