Maison > Article > interface Web > Balises de formatage du texte HTML
Balises de formatage du texte HTML
- 王林original
- 2024-09-04 16:16:32880parcourir
Le formatage du texte est une partie importante des pages Web Internet modernes ; même lorsque nous étions limités à des navigateurs Web basés sur du texte, le formatage du texte, tel que la taille, l'orientation, etc., était disponible. Avec les révisions HTML modernes, il existe une tonne de balises HTML qui peuvent être utilisées pour donner l'apparence du texte à votre goût.
Formatage du texte avec des balises HTML
Ci-dessous, nous aborderons quelques balises HTML importantes utilisées pour formater le texte :
1. Formatage du texte en gras dans un HTML
HTML a deux balises différentes pour mettre le texte en gras. L'un est et l'autre est alors que les deux produisent un résultat similaire. Le La balise est une balise physique, uniquement pour afficher le texte en gras, et elle n'ajoute aucune valeur importante dans le navigateur.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> <b>Here is some text in bold. </b></p> </body> </html>
Sortie :
Le
Exemple
Code :
<!DOCTYPE> <html> <body> <p> <strong>This is an important content formatted using the strong tag </strong>, and this is just normally formatted text</p> </body> </html>
Sortie :
2. Définir le texte en italique en HTML5
Tout comme définir le texte en gras, vous pouvez utiliser balise et balise pour définir le texte en italique sur HTML5.
En utilisant est destiné, tout comme l'utilisation de , à l'affichage physique du texte en italique et à la balise tout en affichant également le texte en italique à l'écran, permet au navigateur de savoir qu'il a une importance sémantique.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> <i> This is the first para in italic text. </i></p> <p> <em> This content is made italics with the em tag</em>, This is normal text </p> </body> </html>
Sortie :
3. Surligner du texte avec du code HTML
Dans les situations où vous souhaitez surligner du texte avec un effet de surligneur, la balise peut être utilisé; avec le CSS par défaut, la balise rend l'arrière-plan du texte jaune, vous aidant ainsi à attirer facilement l'attention d'un visiteur sur ce texte.
Exemple
Code :
<!DOCTYPE> <html> <body> <h3> This text uses <mark> Mark</mark> tag to highlight text on the page </h3> </body> </html>
Sortie :
4. Souligner du texte en HTML
La balise HTML peut être utilisé pour ajouter un soulignement dans le texte. Veillez à ne pas utiliser le soulignement avec du texte bleu, car cela pourrait donner l'impression aux visiteurs que le texte est un lien.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> <u> This is Text with underline tag. </u> </p> </body> </html>
Sortie :
5. Texte barré
Dans les cas où vous devez tracer une ligne horizontale à travers le texte, balisez peut être utilisé. La ligne noyée est fine, de sorte que le texte qu'elle traverse peut toujours être lu facilement.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> <strike> Here is a sentence with strike through text </strike>. </p> </body> </html>
Sortie :
6. Écrire en police Monospace en HTML
L'utilisation de Monospace peut être utile dans les situations où vous souhaitez citer quelque chose ou afficher du code dans le navigateur. Le code Monospace, comme son nom l'indique, rend la largeur de chaque caractère identique. Pour l'obtenir sur un navigateur, nous devons utiliser le bouton étiquette.
Exemple
Code :
<!DOCTYPE>lt;html> <body> <p> This is normal text. <tt>This is some sample text in monospace fonts, neat. </tt> </p> </body> </html>
Sortie :
7. Texte en indice en HTML
En mathématiques et en chimie, l'utilisation de l'indice est une exigence absolue à plusieurs reprises. Dans la rédaction générale également, vous pouvez rencontrer des situations dans lesquelles un texte en indice peut être utilisé. En HTML, tout texte sous le la balise fonctionnera comme un indice dans le navigateur.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> This is normal text <sub>Notice something different with this text? </sub> </p> </body> </html>
Sortie :
8. Texte supprimé en HTML5
La balise est utilisée comme un moyen logique d'indiquer au navigateur que le texte à l'intérieur du texte est supprimé. Gardez à l'esprit que pour un utilisateur, le texte affiché est le même que la balise barrée, ce qui signifie qu'il est affiché au format barré.
Exemple
Code :
<!DOCTYPE> <html> <body> <p> This is normal text <del> This is text between del tag. </del> </p> </body> </html>
Sortie :
9. Superscript Text formatting in HTML5
Text in tag is shown in superscript. This is useful in math, chemistry and other places where math is involved. You can use the tag when citing with adding in-page links with too.
Example
Code:
<!DOCTYPE> <html> <body> <p> This is Normal text<sup> This text is in superscript. </sup> </p> </body> </html>
Output:
10. Making Text size larger with HTML formatting
In cases where you need some text in a larger size on the screen, but you don’t want to use a heading or increase the font size with a tag, use content between this tag will be displayed in noticeably larger text size.
Example
Code:
<!DOCTYPE> <html> <body> <p> This is Normal text <big> This text in in larger size. </big> </p> </body> </html>
Output:
11. Making Text smaller with HTML
Like the tag , you can use to make text smaller on the screen without using CSS or headings.
Example
Code:
<!DOCTYPE> <html> <body> <p> This is Normal text <small> the size of this text is smaller </small> </p> </body> </html>
Output:
Conclusion
Now that you have learned how the formatting of text in HTML works, you should be able to design pages with correct and professional-looking text layout and formatting. It would help if you used normal text and formatting where possible; using custom formatting only when needed gives your pages a neat look. The normal text size is important too, too small, and the readably will be affected negatively, and if it is too large, there will be less information on the screen at once.
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!