Comment envelopper le texte dans la balise pre en HTML ? Exemples d'utilisation de balise pré html-tutoriel HTML-php.cn

Comment envelopper le texte dans la balise pre en HTML ? Exemples d'utilisation de balise pré html

寻∝梦

Libérer： 2018-08-28 13:41:59

original

10069 Les gens l'ont consulté

Cet article présente principalement des exemples d'utilisation de la balise pré html, et présente également le rôle de la balise pré HTML. Il utilise des exemples pour prouver à tout le monde que les balises pré sont effectivement utiles. au début, il est beaucoup plus facile d’utiliser des balises pré que d’autres balises. Bon, jetons maintenant un œil à l'article suivant

Tout d'abord, comprenons ce que peut faire la balise pre en HTML ?

Que peut faire la balise pre en HTML ? En termes simples, la balise pre peut afficher tous les formats de texte qu'elle contient sur la page Web, tels que les espaces, les sauts de ligne, etc. sans aucune trace par le navigateur. Voyons d'abord l'effet

Commençons par comprendre le rôle de la balise pre :

est une balise

 qui peut afficher correctement le format de texte à l'intérieur du navigateur, tout comme le format de saut de ligne, enveloppez la ligne à l'intérieur (si vous voulez en savoir plus sur HTML, veuillez rechercher " Site Web PHP chinois" à regarder) <p><strong>La première doit être pour comprendre comment ça emballe les lignes : </strong><br></p><p>Par exemple, je crée une nouvelle page web dans la balise pre : </p><pre class="brush:html;toolbar:false"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大家来到PHP中文网

Copier après la connexion

Il s'agit d'une page Web normale, comme le montre l'image :

Comment envelopper le texte dans la balise pre en HTML ? Exemples dutilisation de balise pré html

Maintenant, j'y enveloppe le paragraphe ci-dessus pour l'afficher it

<body>
<pre class="brush:php;toolbar:false">欢迎大家来到
PHP中文网

Copier après la connexion

Maintenant, jetez un œil à l'effet :

Comment envelopper le texte dans la balise pre en HTML ? Exemples dutilisation de balise pré html

Regardez, l'image ci-dessus a complètement changé une ligne, et tout le les espaces au milieu sont affichés, vous n'avez pas besoin d'ajouter de balises dans pre pour réaliser la fonction de saut de ligne

La seconde consiste à jeter un œil à l'affichage des espaces

Balise pré HTML La fonction d'espace est similaire au branchement de ligne Si vous entrez trois espaces dans le texte, les trois espaces seront affichés dans le navigateur

Voyons l'exemple : <🎜. >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<pre class="brush:php;toolbar:false">欢迎大 家来到PHP中文网（这里是一个空格）

Copier après la connexion

欢迎大  家来到PHP中文网（这里是两个空格）

Copier après la connexion

欢迎大   家来到PHP中文网（这里是三个空格）

Copier après la connexion

这是一个普通的p标签，这里我用了五个空格，你看到了没有

Voyons l'effet

Comment envelopper le texte dans la balise pre en HTML ? Exemples dutilisation de balise pré html

C'est l'effet de l'espace affiché ci-dessus. Avec comparaison, on constate facilement que l'espace du dessus est aussi un. space lorsqu'il est affiché dans le navigateur, trois espaces peuvent être affichés dans le navigateur, mais j'ai utilisé cinq espaces dans la balise p, et quand il s'agit du navigateur, cela ne ressemble même pas à un espace.

C'est la meilleure utilisation de la balise HTML pre pour moi. Dans n'importe quel paragraphe, vous pouvez saisir le format de votre choix en ajoutant la balise

, ce qui est très pratique. ><pre class="brush:php;toolbar:false"> en termes officiels est un format de pré-texte (texte préformaté) <p>, qui affiche le format du texte dans le navigateur (si vous souhaitez en savoir plus sur HTML, veuillez cliquer sur : <strong>http:// www.php.cn</strong> à regarder) <a href="http://www.php.cn" target="_blank"></a>D'accord, ce qui précède est une introduction au rôle des pré-balises HTML et des exemples sur la façon d'utiliser les espaces et de renvoyer à la ligne. Si vous ne comprenez pas quelque chose, vous pouvez poser des questions ci-dessous. </p><p>【Recommandation de l'éditeur】</p><p></p>Comment écrire un chemin relatif pour la balise de base en HTML ? (Instructions d'utilisation incluses) <p><a href="http://www.php.cn/div-tutorial-409122.html" target="_blank"></a><br></p>Quelle est l'utilisation de l'attribut src de la balise HTML img ? Analyse des méthodes d'utilisation spécifiques (avec exemples inclus) <p><a href="http://www.php.cn/div-tutorial-409121.html" target="_blank"></a></p>

Copier après la connexion

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!