Wondershare EdrawMind
Galerie de cartes mentales Types de balises HTML
- 12
Types de balises HTML
Il s'agit d'une carte mentale sur les types de balises HTML. Le contenu principal comprend : 3. Les balises couramment utilisées dans le corps, 2. La structure de base des documents HTML, 1. Qu'est-ce que le HTML et qu'est-ce qui ne l'est pas ? .
Modifié à 2024-04-26 15:22:04
- 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.
Types de balises HTML
- 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.
- Recommandé pour vous
- Contour
Résumé des points de connaissances en matière de développement CSS, JS et HTML front-end
- 5
- 1
balise html
balise de script
1. Placez-le dans la balise <head>
Étant donné que les documents HTML sont chargés par le navigateur de haut en bas, si vous placez du code JavaScript dans la balise <head>, JavaScript ne peut pas obtenir les éléments requis à partir de la balise <body> et le DOM ne sera pas chargé. La page n'est pas rendue. et JavaScript ne peut pas être exécuté. Par conséquent, le code JavaScript est placé dans la balise <head>, qui est généralement utilisée pour se charger à l'avance en réponse aux actions de l'utilisateur. Elle n'affecte pas le contenu d'affichage du navigateur du document HTML et garantit que le script est chargé avant tout appel.
2. Placez-le dans la balise <body>
La balise <script> située dans la balise <body> peut contenir des fonctions ou des instructions qui peuvent être exécutées immédiatement. Cependant, si vous devez interagir avec des éléments de page Web (comme obtenir la valeur d'une certaine balise ou attribuer une valeur à une balise). certaine balise), vous devez mettre la balise <Le script> après l'élément de la page Web.
3. Placez-le après la balise <body>
Lors de la préparation de l'interprétation du code JavaScript ici, la page Web entière a déjà été chargée, c'est donc l'endroit le plus approprié pour les commandes qui doivent être exécutées immédiatement, mais les fonctions personnalisées et similaires ne conviennent pas.
rel = ne pas suivre
La balise nofollow empêche les araignées d'explorer et de suivre ce lien.
La balise méta robots empêche les robots de suivre ou d'indexer l'intégralité du lien de la page.
https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html
Balises communes
https://blog.csdn.net/qq_46137324/article/details/131971697
Éléments HTML5 standardisés
élément racine
Élément Description <html> Représente la racine d'un document HTML ou XHTML. Tous les autres éléments doivent être des enfants de cet élément.
Métadonnées du document
Élément Description <tête> Représente une collection de métadonnées sur un document, y compris des liens vers ou le contenu de scripts ou de feuilles de style. <titre> Définit le titre du document, qui sera affiché dans la barre de titre ou l'onglet du navigateur. Cet élément ne peut contenir que du texte, les balises contenues ne seront pas interprétées. <base> Définit l'URL de base pour les URL relatives sur la page. <lien> Utilisé pour lier du JavaScript ou du CSS externe à ce document. <méta> Définit les métadonnées qui ne peuvent pas être décrites par d'autres éléments HTML. <style> Utilisé pour le CSS en ligne.
scénario
Élément Description <script> Définissez un script en ligne ou un lien vers un script externe. Le langage de script est JavaScript. <noscript> Définit le texte alternatif affiché lorsque le navigateur ne prend pas en charge les scripts. Un conteneur qui instancie le contenu au moment de l'exécution via JavaScript.
chapitre
Élément Description <corps> Représente le contenu d'un document HTML. Il ne peut y avoir qu’un seul élément <body> dans un document. Définit une section dans le document. Définissez des sections contenant uniquement des liens de navigation. Définissez un bloc de contenu indépendant complet qui peut être indépendant du reste du contenu. Définissez un contenu moins pertinent par rapport au contenu de la page : s'il est supprimé, le contenu restant aura toujours un sens. <h1>,<h2>,<h3>,<h4>,<h5>,<h6> L'élément title implémente six niveaux de titres de documents, <h1> est le plus grand titre et <h6> est le plus petit titre. L'élément titre décrit brièvement le sujet du chapitre. Définit l'en-tête de la page ou de la section. Il comprend souvent un logo, un titre de page et une table des matières de navigation. Définit la fin d'une page ou d'une section. Il contient souvent des informations sur les droits d'auteur, des liens vers des informations juridiques et des adresses pour des suggestions de commentaires. <adresse> Définissez une section contenant les informations de contact. Définissez le contenu principal ou important du document.
Organiser le contenu
Élément Description <p> Définir un paragraphe. <hr> Représente le séparateur entre les paragraphes d'un chapitre, d'un article ou d'un autre contenu long. <pré> Cela signifie que le contenu a été composé à l’avance et que le format doit être conservé. <citation de bloc> Représente des citations provenant d’autres sources. <ol> Définir une liste ordonnée. <ul> Définissez une liste non ordonnée. <li> Définit un élément de liste dans une liste. <dl> Définir une liste de définitions (une liste de termes et leurs définitions). <dt> Représente un terme défini par le prochain <dd>. <jj> Représente la définition du terme qui le précède. Représente une légende associée au document. Représente la description d'une légende. <div> Représente un conteneur général sans signification particulière.
forme de texte
Élément Description <a> Représente un lien hypertexte vers une autre ressource. <em> Représente le texte d’emphase. <fort> Représente un texte particulièrement important. <petit> Représente des commentaires, tels que des clauses de non-responsabilité, des déclarations de droits d'auteur, etc., qui ne sont pas importants pour la compréhension du document. <s> Représente un contenu inexact ou non pertinent. <cite> Représente le titre de l'œuvre. <q> Représente une référence en ligne. <dfn> Représente la définition d’un terme tel que contenu dans son ancêtre le plus proche. <abbr> Représente une omission ou une abréviation, et son contenu complet se trouve dans l'attribut title. Associé à l'équivalent lisible par machine d'un élément de contenu (cet élément est uniquement dans la version WHATWG du standard HTML, pas dans la version W3C du standard HTML5). Représente une valeur de date et d'heure ; l'équivalent lisible par machine est spécifié via l'attribut datetime. <code> Représente le code informatique . <var> Représente les variables dans le code. <échantillon> Représente la sortie d’un programme ou d’un ordinateur. <kbd> Représente une entrée utilisateur, généralement une sortie du clavier, mais peut également représenter une autre entrée, telle qu'une entrée vocale. <sub>,<sup> Représente respectivement l'indice et l'exposant. <je> Représente un morceau de texte de différentes natures, comme des termes techniques, des expressions en langue étrangère, etc. <b> Représente un morceau de texte qui nécessite une attention particulière. <u> Représente un commentaire textuel qui doit être souligné, comme le marquage d'un texte mal orthographié, etc. Représente un texte cité qui doit être mis en évidence. Représente le texte marqué par des commentaires rubis, tels que des caractères chinois et leur pinyin. Représente les commentaires rubis, tels que le pinyin chinois. Représente du texte supplémentaire inséré autour des commentaires Ruby, utilisé pour fournir un affichage convivial des commentaires dans les navigateurs qui ne prennent pas en charge l'affichage des commentaires Ruby. Représente un morceau de texte qui doit être séparé de la direction du texte de l'élément parent. Il permet d'intégrer un texte dans un format d'orientation de texte différent ou inconnu. <bdo> Spécifie la direction du texte des éléments enfants, remplaçant explicitement la direction du texte par défaut. <envergure> Représente un morceau de texte sans signification particulière. Cet élément peut être utilisé lorsque d'autres éléments sémantiques ne conviennent pas au texte. <br> Représente une nouvelle ligne. Représente l'opportunité de saut de mot (Word Break Opportunity), où un saut de ligne sera ajouté lorsque le texte est trop long et doit être interrompu.
modifier
Élément Description <ins> La définition ajoute du contenu au document. <supprimer> Définit le contenu à supprimer du document.
Intégrer du contenu
Élément Description <img> représente une image. <iframe> Représente un frame en ligne. Représente une ressource externe intégrée, telle qu'une application ou un contenu interactif. <objet> Représente une ressource externe, telle qu'une image, un sous-document HTML, un plug-in, etc. <param> Représente les paramètres du plug-in spécifié par l'élément <object>. Représente une vidéo, ses fichiers vidéo et ses sous-titres, et fournit une interface utilisateur pour lire la vidéo. Représente un morceau de son ou un flux audio. Spécifiez la source multimédia pour les éléments multimédias tels que <video> ou <audio>. Spécifie une piste de texte (sous-titre) pour les éléments multimédias tels que <video> ou <audio>. Représente une zone bitmap sur laquelle des graphiques, tels que des graphiques, des dessins de jeu, etc., peuvent être rendus en temps réel via des scripts. <carte> Avec l'élément <area>, il définit la zone de mappage d'image. <zone> Avec l'élément <map>, il définit la zone de mappage d'image. Définir une image vectorielle intégrée . Définir une formule mathématique.
feuille
Élément Description <tableau> Définir des données multidimensionnelles. <légende> Représente le titre du tableau. <groupecol> Représente un groupe de colonnes uniques ou multiples dans un tableau. <col> Représente une colonne dans un tableau. <corps> Représente une donnée spécifique dans le tableau (le corps du tableau). <tête> Représente une étiquette de colonne (en-tête) dans le tableau. <pied> Représente un résumé de colonne (pied de page) dans le tableau. <tr> Représente une ligne dans le tableau. <td> Représente une cellule du tableau. <th> Représente la cellule d'en-tête dans le tableau.
formulaire
Élément Description <formulaire> Représente un formulaire composé de contrôles. <ensemble de champs> Représente le groupe témoin. <légende> Représente le titre du groupe de contrôle <fieldset>. <étiquette> Représente le titre du contrôle de formulaire. <entrée> Représente une zone de données (zone de texte, bouton radio, case à cocher, etc.) qui permet à l'utilisateur de modifier des données. <bouton> Représente le bouton . <sélectionner> Représente la zone déroulante. Représente un ensemble d’options prédéfinies fournies à d’autres contrôles. <groupe optant> Représente un groupe d’options. <option> Représente une option dans un élément <select> ou un élément <datalist> <zone de texte> Représente une zone de texte multiligne. Représente un contrôle générateur de paire de clés. Représente la valeur calculée. Représente une barre de progression. Représente le curseur.
éléments interactifs
Élément Description Représente un widget sur lequel l'utilisateur peut cliquer pour obtenir des informations ou des contrôles supplémentaires. Représente un résumé ou un titre de l'élément <details>. Représente un élément de menu sur lequel l'utilisateur peut cliquer. Représente le menu.
Types de balises HTML
1. 1. Qu'est-ce que le HTML et qu'est-ce qui ne l'est pas ?
1.1. Qu'est-ce que le HTML ?
Hypertext Markup Language (HTML) est un langage de balisage utilisé pour créer des pages Web.
Extension de fichier de page Web : .html ou .htm
Essentiellement, ce sont des règles qui peuvent être reconnues par le navigateur. Nous écrivons des pages Web selon les règles, et le navigateur restitue nos pages Web selon les règles. La même balise peut être interprétée différemment par différents navigateurs. (problème de compatibilité)
1.2. Ce que HTML n'est pas
HTML est un langage de balisage et non un langage de programmation. HTML utilise des balises pour décrire les pages Web.
2. 2. Structure de base du document HTML
Exemple de structure de base
<!DOCTYPEhtml> <html lang="zh-CN"> <tête> <méta charset="UTF-8"> <title>priorité du style CSS</title> </tête> <corps> </corps> </html>
Description du format de base du HTML
Remarque : Pour les pages Web en chinois, vous devez utiliser <meta charset="utf-8"> pour déclarer l'encodage, sinon des caractères tronqués apparaîtront. Certains navigateurs définiront GBK comme encodage par défaut, vous devez donc le définir sur <meta charset="gbk">.
2.1. Balises couramment utilisées dans la tête
<!--Classification des balises<h1></h1>--> <!DOCTYPEhtml> <!--lang="en" indique que la langue principale de la page Web est l'anglais--> <html lang="zh-CN"> <tête> <!--Définir les informations originales de la page web--> <méta charset="UTF-8"> <!--Il est pratique pour les moteurs de recherche de trouver. La première est que les mots-clés de recherche peuvent conduire à la page Web. La description est équivalente à un résumé-->. <meta name="keywords" content="méta résumé, méta html, méta attributs, méta saut"> <meta name="description" content="Old Boy Education Python Academy"> <!--Contenu affiché sur la page à onglet--> <title>Mon premier HTML</title> <!--Définir le style d'une balise--> <style> un{ couleur : rouge foncé ; } </style> <!-- Définir le code JS ou introduire des fichiers JS externes <script>alerte("Hello World")</script> --> <!--Introduire le fichier de feuille de style externe text.css pour changer la couleur de la balise a en vert--> <link rel="stylesheet" href="text.css"> <!-- Accédez à l'URL correspondante après 2 secondes, faites attention aux guillemets <méta http-equiv="refresh" content="2;URL=https://www.cnblogs.com/zaixiazhouzhou/default.html?page=1"> --> <!--Dites à IE de restituer le document dans le mode le plus avancé--> <méta http-equiv="x-ua-compatible" content="IE=edge"> </tête>
2.1.1. Complément à la balise Meta
• L'élément <meta> peut fournir des méta-informations (mata-informations) sur la page, une description et des mots-clés pour les moteurs de recherche et la fréquence de mise à jour. • La balise <meta> est située en tête du document et ne contient aucun contenu. • <meta> fournit des informations qui ne sont pas visibles pour l'utilisateur. La composition de la balise méta : La balise méta a deux attributs, qui sont l'attribut http-equiv et l'attribut name. Différents attributs ont des valeurs de paramètres différentes. Ces différentes valeurs de paramètres réalisent différentes fonctions de page Web.
1.attribut http-equiv :
Équivalent à la fonction d'en-tête de fichier de http, il peut renvoyer des informations utiles au navigateur pour aider à afficher correctement le contenu de la page Web. La valeur de l'attribut correspondante est le contenu, et le contenu du contenu est en fait la valeur variable de chaque paramètre.
<!--Allez à l'URL correspondante après 2 secondes, faites attention aux guillemets--> <méta http-equiv="refresh" content="2;URL=https://baidu.com"> <!--Spécifiez le type d'encodage du document--> <méta http-equiv="content-Type" charset=UTF8"> <!--Dites à IE de restituer le document dans le mode le plus avancé--> <méta http-equiv="x-ua-compatible" content="IE=edge">
Attribut 2.name :
Il est principalement utilisé pour décrire des pages Web, et la valeur d'attribut correspondante est le contenu. Le contenu du contenu est principalement utilisé par les robots des moteurs de recherche pour trouver des informations et les classer.
<meta name="keywords" content="méta résumé, méta html, méta attributs, méta saut"> <meta name="description" content="Old Boy Education Python Academy">
3. 3. Balises couramment utilisées dans le corps
3.1. Balises de base
<b>Gras</b> <i>italique</i> <u>Souligner</u> <s>Supprimer</s> <p>Balise de paragraphe</p> <h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6> <!--Saut de ligne--> <br> <!--Ligne horizontale--> <hr>
3.2.balise img
<img src="Chemin de l'image" alt="Inviter lorsque l'image n'est pas chargée correctement" title="Message d'invite lorsque la souris survole" width="Largeur" height="Hauteur (un seul des deux attributs de la largeur et la hauteur attendront automatiquement) que le zoom)">
En plus des attributs intégrés de la balise img, nous pouvons également y ajouter des attributs personnalisés.
<img format="jpg" sx="Attributs personnalisés" src="Chemin de l'image" >
3.3. une étiquette
3.3.1. Introduction à une balise
La balise a est notre balise de lien hypertexte commune. Le soi-disant lien hypertexte fait référence à la relation de connexion entre une page Web et une cible. La cible peut être une autre page Web ou un emplacement différent sur la même page Web. Il peut également s'agir d'une photo, d'une adresse email, d'un fichier ou encore d'une application. Par défaut, le lien apparaîtra dans le navigateur comme suit :
Un lien non visité apparaît en bleu et souligné.
Les liens visités apparaissent en violet et soulignés. Lorsque vous cliquez sur un lien, il apparaît en rouge et souligné.
Remarque : Si des styles CSS sont définis pour ces hyperliens, le style d'affichage sera affiché en fonction des paramètres CSS.
3.3.2. Format syntaxique d'une balise
<a href="http://www.oldboyedu.com" target="_blank" id="Valeur d'ID personnalisée">Cliquez sur moi</a>
L'attribut href spécifie l'adresse Web cible. L'adresse peut être de plusieurs types : • URL absolue - pointe vers un autre site (par exemple href="http://www.jd.com) • URL relative : fait référence au chemin exact dans le site actuel (href="index.htm") • URL d'ancrage : pointe vers une ancre dans la page (href="#top")
attribut cible : • _blank signifie ouvrir la page cible dans un nouvel onglet • _self signifie ouvrir la page Web cible dans l'onglet actuel
attribut d'identifiant : L'attribut id peut être utilisé pour créer un signet de document HTML. Astuce : Les signets ne sont pas affichés de manière particulière, c'est-à-dire qu'ils ne sont pas affichés dans la page HTML, ils sont donc masqués aux lecteurs.
Insérer l'ID dans le document HTML : <a id="ID is 1">C'est maintenant la position avec l'ID 1</a>
3.4. Caractères spéciaux en HTML
Bien que le HTML ne soit pas sensible à la casse, les caractères d'entité le sont.
3.5, balises div et span
La différence entre span et div est que div est un élément de niveau bloc et que les éléments qu'il contient seront automatiquement enveloppés. Span est un élément en ligne et il n'y aura aucun saut de ligne avant et après.
span n'a aucune signification structurelle, c'est juste une simple application de styles. L'élément span peut être utilisé lorsque d'autres éléments ne conviennent pas. span peut être utilisé comme élément enfant de div, mais div ne peut pas être un élément enfant de span. Si un div apparaît dans span, il n'est pas conforme à la norme de page ws3c.
3.6. Focus : Classification des balises
3.6.1. Le premier type : les balises au niveau du bloc
Caractéristiques : L'étiquette occupe une ligne et la largeur et la hauteur peuvent être spécifiées.
caractéristique: • Capacité à identifier la largeur et la hauteur • Les marges et le remplissage supérieur, inférieur, gauche et droit sont tous valables pour cela. • Peut automatiquement envelopper les lignes • Plusieurs balises d'éléments de bloc sont écrites ensemble et la disposition par défaut est de haut en bas. • Vous pouvez utiliser margin:0 auto pour centrer l'alignement.
Les éléments de bloc couramment utilisés comprennent : <div>, <p>, <h1>...<h6>, <ol>, <ul>, <dl>, <table>, <adresse>, <blockquote>, <form>
3.6.2. Le deuxième type : étiquette en ligne (étiquette en ligne)
Caractéristiques : l'étiquette est sur une seule ligne et la largeur et la hauteur sont déterminées par le contenu. Ce n'est que lorsque le contenu dépasse la largeur du HTML qu'il sera renvoyé à la ligne.
caractéristique: • Impossible de définir la largeur et la hauteur. • Les marges supérieure et inférieure ne sont pas valides, seules les marges gauche et droite ont un effet, et le remplissage a un effet, qui agrandira l'espace ; box-sizing:border-box ; n'est pas valide car cet attribut est destiné au modèle de boîte. • Pas de retour à la ligne automatique
Les éléments en ligne couramment utilisés sont : <a>, <span>, <i>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>
3.7. Liste des balises
Les attributs des balises de liste sont à peu près les suivants :
3.7.1.Attributs associés de la liste non ordonnée ul
attribut de type : • disque (point plein, par défaut) • cercle (cercle ouvert) • carré (carré plein) • aucun (pas de style)
<ul type="disque"> <li>Point par défaut solide</li> </ul> <ul type="cercle"> <li>Cercles remplis</li> </ul> <ul type="carré"> <li>Carré plein</li> </ul> <ul type="aucun"> <li>Aucun style</li> </ul>
Exemple de sortie :
3.7.2. Attributs associés de la liste ordonnée ol
valeur d'attribut de type de liste ordonnée Ce n'est pas qu'une liste ordonnée ne puisse utiliser que 1, 2, 3... pour représenter une séquence. Vous pouvez également utiliser la méthode suivante :
Autres propriétés des listes ordonnées
3.7.3. Attributs associés de la liste de titres
<dl> <dt>Titre 1</dt> <dd>Contenu sous le titre 1</dd> <dt>Titre 2</dt> <dd>Contenu sous le titre 2 1</dd> <dd>Contenu 2 sous le titre 2</dd> </dl>
Exemple de sortie
3.8. Balises de formatage du texte
https://blog.csdn.net/qq_44891434/article/details/113371490
https://blog.csdn.net/qq_46137324/article/details/131971697