Les balises en HTML sont comme des mots-clés. Chaque balise a sa propre sémantique (signification). Par exemple, la balise <p> représente un paragraphe et la balise <b> représente le gras. En fonction de la balise, le navigateur affichera le contenu de la balise de différentes manières.
Dans le développement réel, nous appelons parfois également les balises HTML des éléments HTML.
propriété
↓
<div class=foo>Réseau de langage C</div>
↑ ↑ ↑
balise de début balise de fin du contenu
En plus de l'attribut class, la balise de début peut également contenir d'autres informations d'attribut, telles que l'identifiant, le titre, etc., que nous expliquerons plus tard.
Remarque : Bien que la syntaxe des balises HTML ne soit pas sensible à la casse, dans un souci de standardisation et de professionnalisme, il est fortement recommandé d'utiliser des minuscules lors de la définition des balises.
(1) Sémantique des balises
L'apprentissage des balises est délicat, l'accent est mis sur la mémorisation de la sémantique de chaque balise. Une compréhension simple fait référence à la signification de l’étiquette, c’est-à-dire à quoi sert l’étiquette. Selon la sémantique du label. Donner l’étiquette la plus raisonnable au bon endroit peut rendre la structure de la page plus claire.
(2) Balise de titre h1-h6
Afin de rendre les pages Web plus sémantiques, nous utilisons souvent des balises de titre dans les pages. HTML fournit 6 niveaux de titres de pages Web, à savoir <h1> - <h6>
<h1>Je suis un tag de premier niveau</h1>
h est l'abréviation du mot head, qui signifie titre du titre.
Sémantique des balises : utilisée comme titre et par ordre décroissant d’importance.
● Caractéristiques :
1. Le texte avec le titre deviendra gras et la taille de la police augmentera également dans l'ordre.
2. Un titre occupe sa propre ligne.
(3) Balises de paragraphe et balises de saut de ligne
Vous souhaitez que le texte soit affiché dans les sections d'une page Web. La balise <p> est utilisée pour définir les styles de paragraphe.
<p>Je suis une balise de paragraphe</p>
p signifie paragraphe, ce qui signifie que le paragraphe HTML peut être divisé en plusieurs paragraphes, et les lignes seront automatiquement renvoyées à la ligne en fonction de la taille de la fenêtre du navigateur, laissant des espaces entre les paragraphes.
En HIML, le texte d'un paragraphe est disposé de gauche à droite jusqu'à ce qu'il atteigne l'extrémité droite de la fenêtre du navigateur, puis revient automatiquement à la ligne. Si vous souhaitez qu'une certaine section de texte soit forcée à être renvoyée dans une nouvelle ligne, vous devez utiliser la balise de saut de ligne <br/>.
break force une nouvelle ligne avec un petit espacement entre les lignes d'une seule étiquette.
Cas d'actualité :
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Actualités internationales</title></head><body><h1>Actualités internationales</h1><h4>L'Ukraine a envoyé des drones pour attaquer les aéroports militaires des oblasts de Riazan et de Saratov en Russie ce matin-là</ h4><p> Le 5 décembre, heure locale, le ministère russe de la Défense a publié une déclaration indiquant que l'Ukraine avait envoyé ce matin-là des drones pour attaquer les aéroports militaires des régions russes de Riazan et de Saratov, mais qu'ils avaient été interceptés par le système de défense aérienne russe. Trois soldats russes ont été tués et quatre autres blessés lors de l'attaque. </p><p>En outre, le crash d'un drone ukrainien au-dessus d'un aéroport militaire a causé des dommages aux corps de deux avions de combat russes. Quelques heures plus tard, l’Ukraine a annoncé que la Russie avait lancé une nouvelle série d’attaques de missiles. </p><h4>Il est impossible pour la Russie de céder le contrôle de la centrale nucléaire de Zaporozhye</h4><p>La porte-parole du ministère russe des Affaires étrangères, Zakharova, a déclaré à l'agence de presse Sputnik qu'il est impossible pour la Russie de céder le contrôle de Zaporozhye. Centrale Nucléaire Contrôle des centrales thermonucléaires. </p><h4>Biden n'envisagera pas d'utiliser le pétrole russe pour reconstituer ses réserves stratégiques de pétrole.</h4><p>La Maison Blanche a déclaré qu'elle n'était pas surprise par la réaction de la Russie face au plafonnement des prix. Biden n’envisagera pas d’utiliser le pétrole russe pour reconstituer la réserve stratégique de pétrole. L'envoyé américain à la sécurité énergétique, Hochstein, a déclaré que les États-Unis disposaient encore de suffisamment de réserves stratégiques de pétrole (SPR) pour faire face aux urgences. L'administration Biden tiendra une réunion en ligne avec des dirigeants de l'industrie pétrolière américaine le 8 décembre pour discuter de la manière de soutenir l'infrastructure énergétique de l'Ukraine. Le secrétaire américain à l'Energie rencontrera le 14 de nombreux dirigeants de compagnies pétrolières. </p><p>Réseau de langage C<br/>2022-12-6</p></body></html>
Affiché comme suit :
(4) Balises de formatage du texte
Dans les pages Web, vous devez parfois définir des effets de gras, d'italique ou de soulignement pour le texte. Dans ce cas, vous devez utiliser des balises de formatage de texte en HTML. Faites apparaître le texte d'une manière spéciale.
Sémantique des balises : la mise en évidence de l'importance est plus importante que le texte ordinaire.
<strong>Gras</strong><b>Gras</b><em>Italique</em><i>Italique</i><del>Barré</del><s>Barré</ s><ins >Souligner</ins><u>Souligner</u>
Montré ci-dessous :
(5) balises div et span
<div> et <span> n'ont pas de sémantique. Ce sont juste des boîtes utilisées pour contenir du contenu.
division diviser partition travée travée travée
● Caractéristiques :
La balise <div> est utilisée pour la mise en page, mais désormais un seul <div> peut être placé dans une ligne. La grande boîte occupe une ligne.
La balise <span> est utilisée pour la mise en page. Il peut y avoir plusieurs <span> sur une seule ligne.
(6) Balises et chemins d'image
1. Balises d'image
Dans les balises HTML, la balise <img> est utilisée pour définir les images dans les pages HTML.
<img src=imageURL />
Abréviation du mot image. Signification de l'image.
src est un attribut obligatoire de la balise <img>. Il est utilisé pour spécifier le chemin et le nom du fichier image.
Les soi-disant attributs : une compréhension simple concerne les caractéristiques de cette balise d'image.
<imgsrc=bg.pngalt=/>
Propriétés supplémentaires pour les balises d'image
Points à noter lors de l'utilisation de balises d'image
(1) Les balises d'image peuvent avoir plusieurs attributs, qui doivent être écrits après le nom de la balise.
(2) Les attributs ne sont pas classés dans un ordre particulier. Les noms et attributs des balises sont séparés par des espaces.
(3) Les attributs prennent le format de paires clé-valeur, c'est-à-dire clé = format "valeur", attribut = valeur d'attribut"
2. Chemin
(1) Dossier répertoire et répertoire racine :
Dans le travail réel, nos fichiers ne peuvent pas être placés au hasard, sinon il sera difficile de les retrouver rapidement, nous avons donc besoin d'un dossier pour les gérer.
Dossier de répertoire : Il s'agit d'un dossier ordinaire, qui stocke uniquement les éléments pertinents dont nous avons besoin pour créer des pages, tels que des fichiers HTML, des images, etc.
Répertoire racine : Le premier niveau du dossier de répertoire ouvert est le répertoire racine.
(2) VSCode ouvre le dossier du répertoire
Fichier - ouvrez le dossier. La sélection du dossier du répertoire est très pratique pour gérer les fichiers ultérieurement ou faites-le glisser directement.
Il y aura beaucoup d'images sur la page. Habituellement, nous créerons un nouveau dossier pour stocker ces fichiers image (images). Lors de la recherche d'images, nous devons utiliser la méthode "path" pour spécifier l'emplacement des fichiers image.
Les chemins peuvent être divisés en :
(1) Chemin relatif, un chemin de répertoire établi en fonction de l'emplacement du fichier référencé.
(2) Le chemin absolu fait référence à la position absolue dans le répertoire, qui atteint directement l'emplacement cible, généralement le chemin commençant par la lettre de lecteur.
(7) Balises de lien hypertexte
1. Format de syntaxe du lien
<ahref=jump target target=méthode popup de la fenêtre cible>texte ou image</a>
Abréviation du mot ancre : ancre
Les deux attributs fonctionnent comme suit
2. Classement des liens
(1) Liens externes, tels que <a href=http://www.baidu.com>baidu<a>.
(2) Les liens internes, les liens mutuels entre les pages internes du site Web, peuvent relier directement les noms de pages internes, tels que <a href=index.html>Page d'accueil<a>.
(3) Lien vide, lorsque la cible du lien n'est pas déterminée, <a href=#>Page d'accueil<a>.
(4) Lien de téléchargement, si l'adresse dans href est un fichier ou un package compressé, le fichier sera téléchargé.
(5) Liens vers les éléments de page Web Divers éléments de page Web dans la page Web, tels que des images de texte, des tableaux, de l'audio, de la vidéo, etc., peuvent être ajoutés avec des hyperliens.