Connexion
Connexion

Galerie de cartes mentales Bases de la programmation bases du HTML

Bases de la programmation bases du HTML

Bases de la programmation : résumé des connaissances de base en HTML, y compris certains concepts de base, la structure HTML de base, les balises communes, les tableaux, les listes, les formulaires, etc.

Modifié à 2022-11-27 21:35:54

PlotWizard

Œuvres récentes Afficher plus d'œuvres>>

bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.

Bases de la programmation bases du HTML

PlotWizard

Œuvres récentes Afficher plus d'œuvres>>

Recommandé pour vous
Contour

Programme de formation de base HTML front-end CSS
- 10
PlotWizard
Carte mentale des balises HTML
- 3
PlotWizard

Bases de la programmation : bases du HTML

1 : Notions de base

Pages Web et sites Web

Un site Web est composé de pages Web

Le contenu Web comprend : du texte, des images, des liens et d’autres éléments

Les pages Web sont écrites à l'aide du langage de balisage hypertexte HTML

L'extension du fichier est .html

Navigateur et noyau du navigateur

Navigateurs courants : Google, Firefox, IE, Safari

Navigateurs et noyaux correspondants

L'image peut être agrandie

normes du Web

Consortium W3C sur le Web mondial

Contenu suffisamment standard

structure

La structure est utilisée pour organiser et classer les éléments d'une page Web. À ce stade, j'apprends principalement le HTML.

Performance

Les performances sont utilisées pour définir la mise en page, la couleur, la taille et d'autres styles d'apparence des éléments de la page Web, faisant principalement référence au CSS.

Comportement

Le comportement fait référence à la définition de modèles de pages web et à l'écriture d'interactions. A ce stade, j'apprends principalement Javascript.

2 : Structure de base du HTML

Spécifications de grammaire

Les balises sont encapsulées à l'aide de <>

La plupart d'entre eux apparaissent par paires, qui sont des étiquettes doubles, et s'ils apparaissent seuls, ce sont des étiquettes simples.

Les balises consistent en une relation parent-enfant (inclusive) et une relation fraternelle (parallèle).

Structure de base (balise squelette)

outils de développement

Il existe de nombreux éditeurs de code, le principe est que vous puissiez les utiliser confortablement

Il est recommandé d'utiliser VS Code

Touches de raccourci couramment utilisées pour VS Code

Nouveau fichier (Ctrl N)

Enregistrer (Ctr S), notez que le déplacement doit être enregistré en tant que fichier htm

La touche de signe Ctrl plus, la touche de signe Ctrl moins permettent de zoomer et dézoomer la vue.

Générez la structure du squelette de la page, entrez ! Appuyez sur la touche Tabulation

Utilisez le plug-in pour prévisualiser la page dans le navigateur : cliquez avec le bouton droit de la souris et cliquez sur "Ouvrir dans le navigateur par défaut" dans la sortie contextuelle

https://zhuanlan.zhihu.com/p/124233987

code squelette

<! DOCTYPE>Étiquette

La balise de déclaration de type de document indique au navigateur que cette page utilise la version HTML5 pour afficher la page.

langue langue

Dites au navigateur ou au moteur de recherche qu’il s’agit d’un site Web en anglais et cette page s’affichera en anglais.

jeu de caractères du jeu de caractères

Prenez l'UF-8 pour enregistrer le texte. Si vous ne l’écrivez pas, ce sera tronqué.

sémantique des balises

Selon la sémantique de la balise, donner la balise la plus raisonnable à l'endroit approprié peut rendre la structure de la page plus claire.

3 : Balises couramment utilisées

h balise de titre de série

h1 -> h6 diminue pas à pas

balise p, balise de paragraphe

Le navigateur appliquera automatiquement les sauts de ligne

balise de nouvelle ligne

forcer le saut de ligne

étiquette unique

formatage du texte

Audacieux

fort</ strong-ou<b></b>

inclinaison

barré

Souligner

Pas de balises sémantiques

div

portée

Balise d'image <img />

Les attributs

src : chemin d'accès à l'image (source)

alt : texte affiché lorsque l'image est mal chargée

titre : texte affiché lorsque la souris survole l'image

width : largeur de l'image

hauteur : la hauteur de l'image

border : la bordure de l'image

Caractéristiques des propriétés

1. Ordre partiel parmi les attributs

2. Le nom de l'attribut et la valeur de l'attribut existent sous la forme de paires clé-valeur.

3. Le nom de l'attribut et la valeur de l'attribut sont séparés par un signe égal et la valeur de l'attribut doit être placée entre guillemets ;

chemins et connexions

chemin

chemin relatif

Rechercher le nom directement dans le même dossier

Monter d'un niveau ../

vers le bas /

chemin absolu

Balise de lien <a ></a>

Lien externe <a href="http://www.qq.com"></a> Écrire l'URL complète du nom de domaine du protocole

Lien interne <a href="index.html"></a> il suffit d'écrire directement le nom du fichier

Les attributs

href : spécifiez la page vers laquelle accéder

titre : texte affiché au survol de la souris

target: _self (écrasera la fenêtre d'origine par défaut) _blank (s'ouvrira comme une nouvelle fenêtre) Comment ouvrir la fenêtre

# : empêchera la page de sauter mais actualisera la page

point d'ancrage

Lien en utilisant #

La valeur de l'ID de balise cible est cohérente avec le numéro de connexion.

Commentaires et caractères spéciaux

L'éditeur utilise les touches Ctrl/raccourci

4:Tableau

Étiquette

<table></table> tableau

D'ACCORD

Cellule

<th></th> En-tête Gras Noirci Centré automatiquement

<caption></caption> Le titre du tableau est écrit à l'intérieur et affiché à l'extérieur Centré.

<thead></thead> En-tête de structure

Structure <tbody></tbody>

<tfoot></tfoot> Bas de la structure

Les attributs

border : bordure du tableau, valeur par défaut 0

largeur: largeur

hauteur : hauteur

cellpacing : la distance entre les cellules

cellpadding : la distance entre les cellules et le contenu

aligner : gauche/centre/droite

Remarque : Lorsque vous définissez le centre du tableau, le tableau entier sera centré (le texte ne sera pas centré). Lorsque tr ou td est spécifié, le texte sera centré.

colspan : fusion de colonnes

rowspan : fusion de lignes

5 : Liste

liste non ordonnée

liste ordonnée

Liste customisée

6 : Formulaire

attribut d'entrée

1.text : zone de texte

2.password : zone de mot de passe

3.radio : bouton radio

4.checkbox : case à cocher

5.bouton : bouton ordinaire

6.reset : Le bouton de réinitialisation doit être combiné avec le formulaire pour être efficace.

7.submit : bouton Soumettre

8.attribut d'imagesrc

9. bouton de fichier pour télécharger des images

attribut de nom

1.Envoyer l'arrière-plan......

2. Identification du nom Pour les boutons radio, un seul peut être sélectionné.

valeur : le texte affiché par défaut dans la zone de texte

coché : coché par défaut

Vous pouvez écrire un attribut ou un nom d'attribut = valeur d'attribut

utilisation de l'étiquette

1.<label>Veuillez saisir <input type="text"> <input type="text"></label>

2.<label for="a">Veuillez saisir</label> <input type="text" id="a">

Zone de texte : zone de texte : message utilisateur

la liste déroulante

<sélectionner> <option>Veuillez sélectionner</option> <option >Pomme</option> <option sélectionnée>Banane</option> <option>Orange</option> </sélectionner>

La sélection par défaut de la liste déroulante : sélectionnée

formulaire formulaire

La fonction principale : collecter les informations des utilisateurs et les envoyer en arrière-plan

action : Soumettez l'adresse de l'arrière-plan

method="get/post" Méthode de soumission (transmission) en arrière-plan

name = "a" indique au serveur quel formulaire a été soumis