Résumé des points de connaissances HTML+CSS

L'ensemble du workflow de développement front-end

1. Le chef de produit propose les exigences du projet

2. Projet de conception de l'interface utilisateur

3. Le personnel front-end est responsable du développement des pages statiques (le personnel back-end synchronisé avec le front-end prépare les données)

4. Interaction entre le front-end et back-end

5. Tests

6. Lancement du produit (maintenance post-projet)

Principes Internet

1. Lorsque l'utilisateur est dans le navigateur Lorsque vous saisissez une URL, elle sera envoyée au serveur correspondant pour demander les informations de la page Web correspondant à l'URL

2. Le serveur téléchargera les ressources Web correspondant à l'URL vers un fichier temporaire sur le dossier de votre ordinateur

3. Les ressources du dossier temporaire sont affichées via le navigateur (donc lorsque nous demandons le site Web pour la deuxième fois, la vitesse sera beaucoup plus rapide)

Élément

• Élément en ligne : Il y a n plusieurs éléments en ligne dans une rangée, et la largeur et la hauteur des éléments en ligne ne peuvent pas être définies

• élément de bloc : un élément de bloc, occupant une ligne à lui seul

• Élément de bloc en ligne : il peut y avoir plusieurs éléments de bloc en ligne sur une seule ligne, mais la largeur et la hauteur peuvent être définies

Structure du squelette HTML

• !DOCTYPE..En-tête de déclaration de document (html5, html4.01, XHTML)

• en html4.01 Il y a 3 petites spécifications en XHTML

1. strict strict

2. transitionnel ordinaire

3. frameset frame

• html : langage de balisage hypertexte ; toutes les "paires de balises" y sont utilisées

1. head

• meta（charset:UTF-8,GB2312）

• <meta name="description" content="要描述的内容"/>

• <meta name="keywords" content="关键字，关键词"/>
  (Les deux métas ci-dessus sont destinés à l'optimisation du référencement)

• <title>页面的标题</title>

• titre<h1></h1><h2></h2>

• paragraphe p : bien que p soit un élément de bloc, mais il contient également des images et du texte

• span : il est utilisé pour placer du texte : des images et du texte

• un lien <a href="要跳往的地址">

• Image<img src="相对地址/绝对地址"

• css : écrit en

  Syntaxe de base pour les styles à l'intérieur de

•  :
  sélecteur (div) {
  clé:valeur
  }

  p{
  height:40px;
  line-height:40px;
  background-color:red;
  }

  Copier après la connexion

• Sélecteur :

1. Sélecteur de balises : div,h,p,a,img,span

2. sélecteur de classe :.xinxi
   (N'utilisez jamais de caractères et de chiffres chinois commençant par le nom de la classe, assurez-vous d'utiliser l'anglais)

Plus d'interprétation du HTML

• Le HTML ne prend en compte que l'imbrication des balises et n'a rien à voir avec les tabulations et les espaces. D'innombrables espaces ne sont comptés que pour un seul
  

<. 🎜>
• Balise d'image

  <img src="相对路径/绝对路径"/>
  

• Chemin relatif : à partir de la page actuelle (./ ou sans écriture, trouver le parent. ./)

• Chemins absolus : tous commencent par http ; par exemple :

• Il y a deux attributs couramment utilisés sur la balise image, l'attribut src : Introduisez le adresse de l'image ; balise alt : le texte utilisé pour remplacer l'image lorsqu'elle ne peut pas être chargée normalement (alt peut également être omis)

• un attribut couramment utilisé des liens

href : 'l'adresse vers laquelle accéder', la fonction de href

Vous pouvez renseigner le chemin absolu et accéder à la page Web
Vous pouvez écrire # : 1) Lorsque vous n'êtes pas sûr de l'adresse 2) Revenez simplement à l'effet supérieur
Utilisez des points d'ancrage pour changer de page

Des sauts entre différents modules de cette page

• 2 Réaliser des sauts mutuels entre différentes pages et différents modules

1. 
   Liste<div id="#div1"></div>   <a href="#div1"></a>

<a href="detail.html#detail1"></a>Liste non ordonnée : li dans la liste non ordonnée est aussi un conteneur

• <ul>
  <li></li>
  <li></li>
  </ul>

  Copier après la connexion
  Liste de définition : dl, dt, dd sont tous des conteneurs

• <ol>
  <li></li>
  <li></li>
  </ol>

  Copier après la connexion
  Formulaire

• Le formulaire utilise la

  <dl>
  <dt>表头</dt>
  <dd>详情介绍</dd>
  </dl>

  Copier après la connexion

zone de texte de saisie

• Entrez le mot de passe

• <input type="text" placeholder="默认提示"/>

  Bouton radio : groupe de boutons radio, doit ajouter un nom, sinon l'effet de sélection radio ne peut pas être obtenu

• <input type="password" placeholder="默认提示"/>

  Boîte de sélection multiple

• <input type="radio" name="sex"/>男
  <input type="radio" name="sex"/>女

  Copier après la connexion
  Liste déroulante

• <input type="checkbox" checked/>

  le nom et la valeur sont principalement utilisés par le front-end pour soumettre des données au backend

• id :

  <select>
  <option name="city" value="bj">北京</option>
  <option name="city" value="sh">上海</option>
  <option name="city" value="sz">深圳</option>
  <select>

  Copier après la connexion
Définir le style (non recommandé)
Dans l'étape JS, utilisé pour obtenir l'élément

1. id pour correspondre à un lien pour définir le point d'ancrage

2. Boîte de message :
Bouton

• Type de bouton normal=bouton<textarea name="" value="" cols="" rows=""></textarea>

• Bouton Réinitialiser type=reset

• Sélecteur

• Sélecteur de balises : div h1~h6 p span a img ul li ol dl dt dd input select

• Allez sur le site officiel pour obtenir la photo (utilisez JD.com par exemple) :

Enregistrez l'image ci-dessus sur votre ordinateur

1. Remarque : placez l'icône dans le « répertoire racine » du dossier
   

Ajouter dans la page html :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!