Quelles sont les balises de texte en HTML

Les balises de texte HTML sont : h1, h2, h3, h4, h5, h6, p, hr, br, q, blockquote, b, strong, i, em, s, u, small, big, sub, sup, code , pré, abbr, bdo, tt, kbd, dfn, var, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur Dell G3.

Le texte HTML est le contenu principal affiché sur la page Web. Les principales balises qui doivent être utilisées sont les suivantes : balises de titre, balises de paragraphe, balises de texte, balises de ligne horizontale et balises de symboles spéciaux. Ces balises se trouvent à l’intérieur de la balise body.

1. Balises de titre h1~h6

Abréviation du mot : head Titre

Afin de rendre la page Web plus sémantique, nous utilisons souvent des balises de titre dans la page HTML propose 6 niveaux Les titres.

~

, représentent six niveaux de titres,

représente le titre le plus grand et

Sémantique de la balise de titre : utilisée comme titre, et par ordre décroissant d'importance.

Remarque : Parce que la balise h1 est importante, utilisez-la le moins possible

2. p balise de paragraphe

Abréviation de mot : paragraphe paragraphe

Dans la page Web, le texte doit être affiché de manière ordonnée, sans balises de paragraphe, tout comme la rédaction d'un article, la page Web entière peut être divisée en plusieurs paragraphes.

Conseils : p est une balise de niveau texte, et seuls le texte, les images et les éléments de formulaire peuvent être placés dans p.

Les balises de paragraphe sont les balises les plus courantes dans les documents HTML. Par défaut, le texte d'un paragraphe sera automatiquement renvoyé à la ligne en fonction de la taille de la fenêtre du navigateur.

<p>这是一个段落。。。</p>

3. Étiquette de ligne horizontale hr (étiquette unique)

Abréviation du mot : ligne horizontale horizontale.

Dans les pages Web, nous voyons souvent des lignes horizontales séparant les paragraphes les uns des autres, rendant la structure du document claire et superposée. Ces lignes horizontales peuvent être obtenues en insérant des images, ou simplement via des balises,

---

est une balise qui crée une ligne horizontale sur la page Web.

4. Balise de saut de ligne br (balise unique)

Abréviation de mot : saut, saut, saut de ligne

En HTML, le texte d'un paragraphe sera disposé de gauche à droite jusqu'à ce que le navigateur l'extrémité droite de la fenêtre, puis s'enroule automatiquement. Si vous souhaitez qu'un certain morceau de texte soit forcé d'être enveloppé dans une nouvelle ligne, vous devez utiliser une balise de saut de ligne

5. Les balises de citation

des citations courtes et les navigateurs entourent souvent le contenu cité. Ajoutez des guillemets ;

Définissez une citation en bloc, le texte qu'il contient sera séparé du texte normal, les côtés gauche et droit seront en retrait et parfois affichés dans italique.

<q>细节决定成败</q>
<blockquote>
     <p>生命在于折腾啊！</p>
 </blockquote>

Conseils : Un morceau de texte ne peut pas être placé directement dans l'élément blockquote, mais doit être inclus dans un élément block, tel qu'un élément p.

6. 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 pour faire apparaître le texte dans. une manière particulière de s'afficher.

标签	显示效果
和	文字以粗体方式显示（XHTML推荐使用 strong）
和	文字以斜体方式显示（XHTML推荐使用em）
和	文字以加删除线方式显示（XHTML推荐使用del）
和	文字以加下划线方式显示（XHTML不赞成使用u）
	定义小号字体，标签包含的文本比周围小一号，下限1号文本
	定义大号字体，标签包含的文字比周围大一号，上限7号文本
	定义下标文本，以当前文本流中字符高度一半显示，但是与文本流中字符字体字号一致
	定义上标文本，以当前文本流中字符高度一半显示，但是与文本流中字符字体字号一致

Tips: b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈

Tips: _{、^{标签，在数学公式、科学符号和化学公式中非常有用。}}

七、输出文本

HTML元素提供了如下输出信息的标签：

标签	说明
	表示代码字体，显示源代码
</td><td>表示预定义格式的源代码，保留源代码显示中的空格大小</td></tr><tr><td style="word-break: break-all;"><tt></td><td>表示打印机字体</td></tr><tr><td style="word-break: break-all;"><kbd></td><td>表示键盘字体</td></tr><tr><td style="word-break: break-all;"><dfn></td><td>表示定义的术语</td></tr><tr><td style="word-break: break-all;"><var></td><td>表示变量字体</td></tr><tr><td style="word-break: break-all;"><samp></td><td>表示代码范例</td></tr></tbody></table><p><span style="font-size: 18px;"><strong>八、缩写文本</strong></span></p><p><abbr> 标签可以定义简称或缩写，通过对缩写进行标记，能够为浏览器、搜索引擎提供有用的信息。</p><p><acronym>标签是定义首字母缩写。</p><pre class="brush:html;toolbar:false"><abbr titile="Hyper Markup Language">HTML</abbr> <acronym titile="Hyper Markup Language">HTML</acronym> Tips:可以使用 title 属性，设置在鼠标移动到上显示完整文本。 九、文本方向 使用 标签可以改变文本流的方向，包含一个属性：dir，取值包活 ltr(从左到右) 和 rtl(从右到左)。 <bdo dir="rtl">床前明月光</bdo> 推荐教程：《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! Étiquettes associées： html 文本标签 source：php.cn Article précédent：Le HTML appartient-il à Java ? Article suivant：Quels sont les stockages locaux en HTML5 ? Déclaration de ce site Web Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn Derniers articles par auteur Comprendre la sentinelle dans Redis en profondeur 2023-04-26 17:59:18 [Organisation et partage] 7 outils de gestion d'état React populaires 2023-04-26 17:47:48 Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3 2023-04-26 17:41:42 Un article pour parler du contrôle de la mémoire dans Node 2023-04-26 17:37:05 Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double ! 2023-04-26 17:31:25 Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière ! 2023-04-26 17:27:32 Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes 2023-04-25 19:57:58 Un article pour comprendre le modèle singleton en JavaScript 2023-04-25 19:53:11 En savoir plus sur les tampons dans Node 2023-04-25 19:49:11 Découvrez comment écrire des tests unitaires dans Vue3 2023-04-25 19:41:54 Derniers numéros Conversion automatique PX en erreur REM  <style>html {   taille de police : calc(100vw / 3,75);      }body {    taille de la... Depuis 2024-04-16 09:34:16 0 0 4687 La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi... Depuis 2024-04-06 21:58:04 0 1 800 Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co... Depuis 2024-04-06 20:22:15 0 1 454 Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3... Depuis 2024-04-06 20:02:10 0 2 543 Méthode de niveau supérieur pour remplacer une chaîne par du code HTML (généré à partir d'un tableau) Étant donné une chaîne comme celle-ci...$htmlPattern="Usernameis:#name#andusercompany... Depuis 2024-04-06 17:40:41 0 2 410 Rubriques connexes Plus> symbole de droit d'auteur HTML éditeur HTML en ligne réalisation de pages web html espace HTML qu'est-ce que le HTML Comment définir la taille de la police HTML html en txt Comment écrire du code de zone de texte HTML Recommandations populaires Qu'est-ce qu'une adresse URL Que signifie le côté Web ? Quels sont les langages de programmation ? Qu'est-ce que l'industrie informatique Que signifie l'erreur ? Tutoriels populaires Plus> Tutoriels associés Recommandations populaires Derniers cours Exemple de code HTML 140734 Démarrez rapidement avec HTML5 54455 Bases du développement Web_HTML+CSS 35175 Questions d'entretien frontales HTML5 25255 Pratique de développement HTML5 : production frontale du site Web mobile à emporter Baidu 63841 Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne) 1417102 temps d'étude Tutoriel vidéo JAVA pour débutants 2477717 temps d'étude Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle 503993 temps d'étude Introduction rapide au développement web front-end 215294 temps d'étude Maîtrisez les didacticiels vidéo PS à partir de zéro 877548 temps d'étude [Web front-end] Démarrage rapide de Node.js 6433 temps d'étude Collection complète de cours full-stack de développement Web étranger 5053 temps d'étude Aller au langage pratique GraphQL 4247 temps d'étude Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape 633 temps d'étude Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures 21602 temps d'étude Derniers téléchargements Plus> effets Web Code source du site Web Matériel du site Web Modèle frontal [bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery [Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3 [Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5 [bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery [Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS [effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique [Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image [Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3 [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet [Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG) [Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG) [image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS) [Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG) [Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG) [Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes [image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS) [Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG) [Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure [Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches [Modèle frontal] Modèle Web de CV de travail créatif de concepteur [Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne [Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs [Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne [Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet [Modèle frontal] Modèle de site Web de service de trading de devises de style violet À propos de nous Clause de non-responsabilité Sitemap Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！