Modification détaillée de divers formats de polices pour les pages Web HTML_HTML/Xhtml_Production de pages Web

Cette section commence par la modification détaillée du texte, afin que les lecteurs puissent comprendre les changements dans les différents formats de police HTML et créer des pages Web plus professionnelles.
4.2 Modifications diverses du texte
Dans la section précédente, nous avons appris différents réglages pour les gros paragraphes, et il semble plus intéressant de modifier le texte lui-même. Cette section commence par la modification détaillée du texte, afin que les lecteurs puissent comprendre les changements dans les différents formats de police HTML et créer des pages Web plus professionnelles.
4.2.1 Balises de base pour le réglage du style de texte—
La balise de base pour définir les styles de police est , et le texte qu'elle contient est la portée du style. Dans l'écriture de code HTML pour débutants, est facilement imbriqué plusieurs fois, comme texte . Une autre situation est l'imbrication d'étiquettes mal alignées, comme

texte

. Afin de standardiser l'écriture du code et d'éviter les erreurs inutiles, les lecteurs doivent être prudents lors de l'apprentissage.
4.2.2 Définir la couleur du texte
color est l'un des attributs de la balise , qui permet de définir la couleur du texte. Créez un fichier de page Web dans le répertoire D:web, nommez-le font_color.htm et écrivez le code comme indiqué dans le code 4.7.
Code 4.7 Paramètre de couleur de police : font_color.htm





Texte rouge clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte rouge foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte vert clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte vert foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte bleu clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte bleu foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte jaune clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte jaune foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte cyan clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte cyan foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte violet clair : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être

Texte violet foncé : L'essence de l'apprentissage du HTML est d'utiliser ce qu'il est censé être



Entrez http://localhost/font_color.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.7.

Figure 4.7 Paramètre de couleur de police
Les lecteurs peuvent non seulement apprendre l'utilisation de l'attribut color dans la balise font du Code 4.7, mais également se familiariser avec les méthodes de représentation des différentes couleurs.
4.2.3 Définir la taille du texte
size est également un attribut de la balise , utilisée pour définir la taille du texte. La valeur de size est comprise entre 1 et 7 et la valeur par défaut est 3. Nous pouvons ajouter des caractères "+" ou "-" avant la valeur de l'attribut size pour spécifier l'incrément ou le décrément par rapport à la valeur initiale de la taille de la police. Créez un fichier de page Web dans le répertoire D:web, nommez-le font_size.htm et écrivez le code comme indiqué dans le code 4.8.
Code 4.8 Paramètre de taille de police : font_size.htm





la taille est 1 : Apprentissage HTML

la taille est 2 : Apprentissage HTML

la taille est 3 : Apprentissage HTML

la taille est 4 : Apprentissage HTML

la taille est de 5 : Apprentissage HTML

la taille est 6 : Apprentissage HTML

la taille est de 7 : Apprentissage HTML



Entrez http://localhost/font_size.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.8.

Figure 4.8 Paramètre de taille de police
Les lecteurs peuvent essayer d'ajouter des caractères "+" ou "-" devant la valeur de taille pour définir la taille du texte de manière plus flexible.
4.2.4 Définir la police du texte
face est également un attribut de la balise , utilisée pour définir la police du texte (style de police). Les polices affichées dans les pages Web HTML sont appelées à partir du système de navigation. Afin de conserver la cohérence des polices, il est recommandé d'utiliser la police Song, et les pages HTML utilisent également la police Song par défaut. Créez un fichier de page Web dans le répertoire D:web, nommez-le font_face.htm et écrivez le code comme indiqué dans le code 4.9.
Code 4.9 Paramètre de police : font_face.htm





La police est de style chanson : Qinyuanchun·Changsha-Mao Zedong

La police est en script régulier : Qinyuanchun·Changsha-Mao Zedong

La police est en gras : Qinyuanchun·Changsha-Mao Zedong

La police est l'écriture officielle : Qinyuanchun·Changsha-Mao Zedong


Entrez http://localhost/font_face.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.9.

Figure 4.9 Paramètre de police
L'auteur définit la taille du texte de la partie de police modifiée à la taille 5 pour la commodité des lecteurs.
4.2.5 Faire incliner le texte
Utilisez des balises doubles pour incliner le texte afin d'obtenir des effets spéciaux, comme la date d'un article. est appelé balise d'accentuation et est également en italique. Il est actuellement utilisé plus fréquemment que la balise . Sa méthode d'écriture est la suivante :
Ceci est un texte en italique
Ceci est également un texte en italique
4.2.6 Rendre le texte en gras
Utilisez des balises doubles pour mettre le texte en gras afin de le rendre plus accrocheur, comme le titre d'un article. est appelé une balise d'emphase spéciale, et le texte est également en gras. Il est actuellement utilisé plus fréquemment que la balise . La méthode d'écriture est la suivante :
Ceci est du texte en gras
C'est aussi du texte en gras
4.2.7 Souligner le texte
Utilisez la double balise pour ajouter un soulignement au texte concerné. Voici un exemple complet de texte en italique, en gras et souligné. Créez un fichier de page Web dans le répertoire D:web, nommez-le font_style.htm et écrivez le code comme indiqué dans le code 4.10.
Code 4.10 Paramètres de modification du texte : font_style.htm





Italique : Qinyuanchun·Changsha-Mao Zedong

Gras : Qinyuanchun·Changsha-Mao Zedong

Souligné : Qinyuanchun·Changsha-Mao Zedong

Italique gras souligné : Qinyuanchun·Changsha-Mao Zedong


Entrez http://localhost/font_style.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.10.

Figure 4.10 Paramètres de modification de police
L'auteur définit la taille de tout le texte à la taille 5 pour la commodité des lecteurs.
— Remarque : lorsque plusieurs balises contiennent le même texte, leur ordre d'inclusion ne peut pas être mal placé.
4.2.8 Utilisation de plusieurs styles de titre
Dans les articles web, afin de souligner l'importance du titre, le style du titre est relativement particulier. La technologie HTML protège un ensemble de balises de style pour les titres, qui sont des balises doubles

à

. La taille du texte, de grande à petite, représente différents niveaux de titres. La balise title a une particularité : elle occupe une ligne exclusive, le texte est en gras et le texte est centré. De cette façon, il est très simple de définir le titre et des titres à plusieurs niveaux peuvent être définis. Créez un fichier de page Web dans le répertoire D:web, nommez-le font_h.htm et écrivez le code comme indiqué dans le code 4.11.
Code 4.11 Paramètre du titre : font_h.htm

Titre n°1

Titre n°2

Titre n°3

Titre n°4

Titre n°5

Titre n°6

Fortune Magazine : Pourquoi Google ne prospérera pas puis déclinera

　

Rencontrer des problèmes potentiels

　

Certaines personnes du secteur pensent que Google, qui monopolise depuis longtemps le marché de la recherche et de la publicité sur Internet, pourrait prospérer puis décliner. ... Dans le même temps, de nombreux nouveaux projets lancés récemment par Google, tels que l'Open Mobile Alliance, la plate-forme générale pour les sites de réseaux sociaux OpenSocial, et l'investissement possible de milliards de dollars dans des appels d'offres pour les bandes de fréquences sans fil, ont également été largement remis en question.
　

continuera à monopoliser la recherche

　

Certains articles disent récemment que si un meilleur moteur de recherche apparaît, les gens abandonneront Google sans hésitation. Mais même si un meilleur moteur de recherche arrive, Google existera encore pendant un certain temps. ...Dans ce cas, la vitesse du site fait souvent la différence entre la victoire et la défaite.

Entrez http://localhost/font_h.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.11.

Figure 4.11 Paramètres du titre
4.2.9 Apprendre à gérer les caractères spéciaux dans les pages Web
En HTML, certains caractères ont des significations particulières. Par exemple, "" sont les crochets gauche et droit de la balise, et la balise contrôle l'affichage du HTML. La balise elle-même ne peut être analysée que par le navigateur et. ne peut pas être utilisé sur la page affichée. Alors, comment afficher « » en HTML ? HTML spécifie comment écrire certains caractères spéciaux afin qu'ils puissent être affichés dans les pages Web, comme indiqué dans le tableau 4.1.
Tableau 4.1 Caractères spéciaux en HTML

Symboles spéciaux
Code HTML
Symboles spéciaux
Code HTML
<
™ (symbole de la marque)
™
>
>
® (symbole d'enregistrement)
®
"" (demi-largeur anglaise)
"
×
×
§
§
© (symbole du droit d'auteur)
©
Créez un fichier de page Web dans le répertoire D:web, nommez-le string.htm et écrivez le code string.htm comme indiqué dans le code 4.12.
Code 4.12 Paramètres des caractères spéciaux : string.htm





Comment afficher la balise
 :

Comment afficher les guillemets : "Guillemets doubles demi-largeurs anglais"

Comment afficher la marque : ™

Comment afficher les symboles d'immatriculation : ®

Comment afficher le symbole du droit d'auteur : ©

Afficher§

Afficher ×



Entrez http://localhost/string.htm dans la barre d'adresse du navigateur et l'effet de navigation est tel qu'illustré dans la figure 4.12.

Figure 4.12 Paramètres des caractères spéciaux
— Remarque : Pour afficher le symbole & séparément, le code & doit être utilisé.
4.2.10 Comment ignorer plus facilement l'analyse d'une partie du HTML par le navigateur
Si vous créez un exemple de code HTML similaire à celui de ce livre sur une page Web, je crains que vous deviez convertir tous les en < et >, ce qui semble gênant. et <xmp></xmp> en code HTML peuvent facilement résoudre ce problème. <br><plaintext> est une seule balise. Lorsqu'elle est insérée dans le code HTML, toutes les balises HTML qui la suivent seront invalides. Autrement dit, le navigateur n'analysera pas toutes les balises HTML qui suivent <plaintext> et ne les affichera pas directement sur la page. . <br><xmp></xmp> est une double balise, qui invalide uniquement les balises du contenu qu'elle contient. <xmp></xmp> est plus couramment utilisée. Créez un fichier de page Web dans le répertoire D:web, nommez-le html.htm et écrivez le code comme indiqué dans le code 4.13. <br>Code 4.13 Ignorer le paramétrage de la balise : html.htm <br> <br> <br> <title>Ignorer les paramètres de balise</title> <br> <br> <br><h2>Qinyuanchun·Changsha</h2> <br><xmp>Dans le froid automne de l'indépendance, <strong>Allez au nord de la rivière Xiangjiang</strong>, à la tête de l'île d'Orange. <br>Regardez les montagnes couvertes de rouge, et les forêts toutes teintes <br>La rivière est pleine de vert, et <u>des centaines de bateaux se disputent le courant ; </u> <br></xmp> <br>L'aigle frappe le ciel, <strong>Le poisson vole vers les fonds peu profonds, </strong> <br>Toutes sortes de ciel glacial se disputent la liberté. <br>Triste pour le petit aperçu, <u>Demandez à la terre sans limites </u>, qui est responsable des hauts et des bas ? <br> <br><plaintext> <br>Amenez des centaines de couples en voyage, <br>Remémorez-vous du passé glorieux. <br> Le jeune garçon qui n'est que mon camarade de classe est dans la fleur de l'âge <br> L'érudit est en colère et gronde Fang Qiu ; <br>Montrez le pays et inspirez des mots, <br>Le sol de fumier était comme dix mille foyers. <br> Vous êtes-vous déjà souvenu que <strong> a heurté l'eau au milieu du courant </strong> et que les vagues ont arrêté le bateau ! <br> <br> <br>Entrez http://localhost/string.htm dans la barre d'adresse du navigateur, et l'effet de navigation est tel qu'illustré dans la figure 4.13. <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058213177807.jpg"> <br>Figure 4.13 Ignorer les paramètres d'étiquette <br><strong>4.2.11 Autres méthodes de modification de texte</strong> <br>Afin de répondre aux besoins des différents domaines, HTML dispose également d'autres balises qui modifient le texte. Les plus couramment utilisées sont les balises de format exposant et les balises de format indice. Dans certains cas, l'effet de suppression est même nécessaire, c'est-à-dire que la balise de soulignement HTML peut être utilisée. <br>—L'étiquette au format exposant est la double étiquette , qui est principalement utilisée pour représenter les exposants mathématiques, tels que le carré ou le cube d'un certain nombre. <br>—La balise de format d'indice est la balise double , qui est principalement utilisée pour les commentaires et la représentation de base des mathématiques. <br>—La balise de soulignement est une balise double <strike></strike>, qui est principalement utilisée pour les effets de suppression. <br>Créez un fichier de page Web dans le répertoire D:web, nommez-le other.htm et écrivez le code comme indiqué dans le code 4.14. <br>Code 4.14 Paramètres des autres balises de modification : other.htm <br> <br> <br> <title>Paramètres des autres balises de modification</title> <br> <br> <br><font size="5"> <br>Qinyuanchun^Changsha ! <br> <br>Représentation des exposants mathématiques : 2³=8, 100²=10000<br><hr> <br>Qinyuanchun_Changsha ! <br> <br>Représentation de la base mathématique : log₃81=4, log₅125=3<br><hr> <br>Effet de suppression : <strike>J'ai été supprimé</strike> <br></font> <br> <br> <br>Entrez http://localhost/other.htm dans la barre d'adresse du navigateur et l'effet de navigation est tel qu'illustré dans la figure 4.14. <br><img style="max-width:90%" alt="" style="max-width:90%" src="http://files.jb51.net/file_images/web/2009422058217877808.jpg"> <br>Figure 4.14 Paramètres des autres balises de modification</plaintext></plaintext></plaintext></plaintext></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Déclaration：</span><div>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</div></div></div><div class="nphpSytBox"><span>Article précédent：<a class="dBlack" title="Débutants en production de pages web : apprendre à utiliser le lien hypertexte HTML A tag_HTML/Xhtml_web production de pages" href="http://m.php.cn/fr/faq/12298.html">Débutants en production de pages web : apprendre à utiliser le lien hypertexte HTML A tag_HTML/Xhtml_web production de pages</a></span><span>Article suivant：<a class="dBlack" title="Débutants en production de pages web : apprendre à utiliser le lien hypertexte HTML A tag_HTML/Xhtml_web production de pages" href="http://m.php.cn/fr/faq/12302.html">Débutants en production de pages web : apprendre à utiliser le lien hypertexte HTML A tag_HTML/Xhtml_web production de pages</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="http://m.php.cn/fr/article.html" class="bBlack"><i>Voir plus</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348757.html" title="Html小知识总结" class="aBlack">Html小知识总结</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="如何快速学习HTML" class="aBlack">如何快速学习HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="html xhtml xml的区别" class="aBlack">html xhtml xml的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="src与href属性的区别" class="aBlack">src与href属性的区别</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348902.html" title="关于HTML5和CSS替换使用" class="aBlack">关于HTML5和CSS替换使用</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><p>Maison</p></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><p>Cours</p></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><p>Questions et réponses</p></a></li><li><a href="http://m.php.cn/fr/login"><b class="icon5"></b><p>Mon</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/fr/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/fr/"><b class="icon1"></b><span>Maison</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course.html"><b class="icon2"></b><span>Cours</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/wenda.html"><b class="icon4"></b><span>Questions et réponses</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/dic.html"><b class="icon6"></b><span>Dictionnaire</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/course/type/99.html"><b class="icon7"></b><span>Manuel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/xiazai/"><b class="icon8"></b><span>Télécharger</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/fr/faq/zt" title="Sujet"><b class="icon12"></b><span>Sujet</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/fr/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/fr/" >Maison</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/wenda.html" >Questions et réponses</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/course.html" >Cours</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/faq/zt" >Sujet</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/xiazai" >Télécharger</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/game" >Jeu</a></div><div class="swiper-slide"><a href="http://m.php.cn/fr/dic.html" >Dictionnaire</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>