HTML est un langage basé sur des balises utilisé pour le développement de pages Web ; HTML signifie Hyper Text Markup Language. L'hypertexte fait référence à la manière dont les pages Web sont liées entre elles. Ainsi, le lien disponible sur une page web est appelé Hypertexte. Il s'agit d'un langage de balisage dont les balises indiquent au navigateur comment la page y sera affichée. Berners-Lee l'a développé fin 1991, mais « HTML2.0 » a été la première spécification standard publiée en 1995. Plus tard, ses nombreuses versions HTML sont apparues comme HTML 4.0 ; actuellement, la dernière version est HTML5.0 qui est très célèbre dans le développement de sites Web front-end.
Structure du fonctionnement de la page HTML
Voyons la structure du fonctionnement de la page HTML.
<!DOCTYPE html>
<html>
<head>
<title>title tag of html</title>
</head>
<body>
<h1>heading tag of html</h1>
<p>paragraph tag of html<p>
</body>
</html>
Cette balise définit le type du document et la version HTML.
La balise ci-dessus contient le document complet en langage de programmation HTML, comprenant un en-tête de document représenté par
…
et le corps du document qui est représenté par …
balises.
la balise head représente l'en-tête du document qui peut conserver d'autres balises HTML telles que
, <link> etc.</p>
<h4 id="lt-titre-gt"><titre></h4>
<p>cette balise est utilisée à l'intérieur du <head> balise pour écrire le titre du document.</p>
<h4 id="lt-corps-gt"><corps></h4>
<p><corps> La balise représente le corps du document qui conserve d'autres balises HTML telles que <div>, <h1>, <p> etc.</p>
<h3 id="Différentes-balises-des-œuvres-HTML-et-leur-description">Différentes balises des œuvres HTML et leur description</h3>
<p>Les différentes balises du fonctionnement du HTML sont expliquées ci-dessous :</p>
<h4 id="lt-h-gt"><h1></h4>
<p> Balise de titre utilisée pour créer des variétés de l'exemple de titre donné ci-dessous </p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html></pre>
<p><strong>Sortie</strong></p>
<p>Titre 1<br>
Rubrique 2<br>
Rubrique 3<br>
Rubrique 4<br>
Rubrique 5<br>
Rubrique 6</p>
<h4 id="lt-p-gt"><p></h4>
<p>Il s'agit d'une balise de paragraphe qui peut être mieux comprise par l'exemple donné ci-dessous.</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>This is a first paragraph of text.</p>
<p>This is a second paragraph of text.</p>
<p>This is a third paragraph of text.</p>
</body>
</html></pre>
<p><strong>Sortie </strong></p>
<p>Voici le premier paragraphe du texte.<br>
Ceci est le deuxième paragraphe du texte.<br>
Ceci est le troisième paragraphe du texte.</p>
<h4 id="lt-br-gt"><br /></h4>
<p>Cette balise est utilisée pour casser la ligne ; nous pouvons utiliser cette balise chaque fois que nous voulons que quelque chose commence à partir de la ligne suivante. Il s'agit d'une balise d'une seule ligne qui ne nécessite pas de balise de fermeture.</p>
<h4 id="lt-centre-gt"><centre></h4>
<p>Mettez l'ensemble du contenu au centre de cette utilisation principale de cette balise dans la création de pages Web.</p>
<h4 id="lt-hr-gt"><hr></h4>
<p>Utilisé pour créer la ligne, principalement utilisé lorsque vous souhaitez dessiner une page Web sur une seule ligne.</p>
<h4 id="lt-pré-gt"><pré></h4>
<p>C'est une balise très importante du HTML ; dans certains scénarios, nous voulons tout afficher tel qu'il est écrit dans la page HTML ; dans ces cas-là, c’est une balise très utile. L'exemple est donné ci-dessous.</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre class="brush:php;toolbar:false">
Laravel is the PHP framework. It is an open source framework used in web application development. This framework is based on model view controller design pattern due to this project developed with help of this framework are more structured and manageable. This framework reuses the existing
</pre>
</body>
</html></pre>
<p><strong>Sortie</strong></p>
<p>Laravel est le framework PHP. C'est un framework open source utilisé dans le web<br>
développement d'applications. Ce framework est basé sur le contrôleur de vue modèle<br>
les modèles de conception dus à ce projet développés à l'aide de ce framework sont<br>
plus structuré et plus gérable. Ce framework réutilise l'existant</p>
<h4 id=""> </h4>
<p>Pour imprimer un seul espace, ceci est utilisé en HTML.</p>
<h4 id="Propriétés-des-balises">Propriétés des balises</h4>
<p>Nous pouvons définir la propriété au niveau de la balise Exemple donné ci-dessous</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>Align Attribute</title>
</head>
<body>
<p align = "left">Left aligned</p>
<p align = "center">Center aligned</p>
<p align = "right">Right aligned</p>
</body>
</html></pre>
<p><strong>Sortie</strong></p>
<p>Aligné à gauche<br>
Aligné au centre<br>
Aligné à droite</p>
<h3 id="Attributs-principaux-du-HTML">Attributs principaux du HTML</h3>
<p>Il y a quelques attributs de base qui ont été utilisés avec presque tous les éléments HTML suivants.</p>
<ul>
<li>Id</li>
<li>Titre</li>
<li>Classe</li>
<li>Tapez</li>
</ul>
<h4 id="Identifiant">1) Identifiant</h4>
<p>Ces attributs sont utilisés pour identifier de manière unique l'élément HTML dans la page ; il est possible que le même élément ait été utilisé dans la page HTML à plusieurs endroits grâce à l'attribut id, nous identifions l'élément et son contenu et pouvons être utilisés à d'autres fins en javascript. L'exemple est donné ci-dessous.</p>
<p><code><p id = "html">Ceci est le premier paragraphe qui explique ce qu'est le HTML comment l'utiliser</p><code><p id = "html">This is first paragraph which explains what is HTML how to use it</p><br>
<p id = "css">This it second para which explains what is Cascading Style Sheet and how to use it</p> </code>
<p id = "css">Ceci est le deuxième paragraphe qui explique ce qu'est une feuille de style en cascade et comment l'utiliser</p> </code></p>
<p>Explication – Dans l'exemple ci-dessus, le même élément est utilisé deux fois pour différencier cet élément uniquement par l'ID.</p>
<h4 id="Titre">2) Titre</h4>
<p>Cette syntaxe d'attribut est similaire aux attributs id, le but de ces attributs dépendra de l'élément qui le porte ; bien qu'il soit souvent affiché sous forme d'info-bulle lorsque le curseur passe sur l'élément, c'est l'utilisation principale de cet attribut. L'exemple est donné ci-dessous –</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title> title Attribute Example</title>
</head>
<body>
<h3 title = "Hello Title Example Test">Sleeping from the long time</h3>
</body>
</html></pre>
<p><strong>Sortie</strong></p>
<p>Dormir longtemps</p>
<p>If we try to bring our cursor over “Sleeping from a long time”, we will see that whatever title we have used in our code is coming out as a tooltip of the cursor.</p>
<h4 id="Class">3) Class</h4>
<p>The class attribute is used to associate an element with a style sheet and specifies the class of element. We will learn more about the use of the class attribute when we will learn Cascading Style Sheet (CSS).Its main use is CSS. Value for this attribute may also be a space-separated list of class names. The example is given below –</p>
<p><code>class = "className11 className12 className53"</code></p>
<h4 id="Style">4) Style</h4>
<p>It is used to writing the cascading style rule at the element level, which can be better explained by the example given below.</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">This is style example text , it is red color...</p>
</body>
</html></pre>
<p><strong>Output</strong></p>
<p>This is a style example text; it is red color…</p>
<h3 id="Conclusion">Conclusion</h3>
<p>As we saw many basics tags, the web page can be created with the help of these tags, which can be displayed to the end-user whenever a user requests the particular web page through his web browser, the work of displaying will be done by the web browser. Today lots of new tags exist into the market to make web pages more attractive.</p><p>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!</p>
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">Déclaration de ce site Web</div>
<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>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- <div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Article chaud</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796828723.html" title="Guide de construction d'Agnes Tachyon | Un joli Musume Derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction d'Agnes Tachyon | Un joli Musume Derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796827210.html" title="Oguri Cap Build Guide | Un joli Musume Derby" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Un joli Musume Derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796822997.html" title="Péx: comment raviver les joueurs" class="phpgenera_Details_mainR4_bottom_title">Péx: comment raviver les joueurs</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796823726.html" title="Pic comment émoter" class="phpgenera_Details_mainR4_bottom_title">Pic comment émoter</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/fr/article.html">Afficher plus</a>
</div>
</div>
</div> -->
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Outils d'IA chauds</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Images de déshabillage gratuites</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Application basée sur l'IA pour créer des photos de nu réalistes</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Outil d'IA en ligne pour supprimer les vêtements des photos.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Dissolvant de vêtements AI</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/fr/ai">Afficher plus</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Article chaud</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796828723.html" title="Guide de construction d'Agnes Tachyon | Un joli Musume Derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction d'Agnes Tachyon | Un joli Musume Derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796827210.html" title="Oguri Cap Build Guide | Un joli Musume Derby" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Un joli Musume Derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796822997.html" title="Péx: comment raviver les joueurs" class="phpgenera_Details_mainR4_bottom_title">Péx: comment raviver les joueurs</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 Il y a quelques mois</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796832397.html" title="Guide de construction de Grass Wonder | Uma musume joli derby" class="phpgenera_Details_mainR4_bottom_title">Guide de construction de Grass Wonder | Uma musume joli derby</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>2 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/1796823726.html" title="Pic comment émoter" class="phpgenera_Details_mainR4_bottom_title">Pic comment émoter</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 Il y a quelques semaines</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/fr/article.html">Afficher plus</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Outils chauds</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Bloc-notes++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/toolset/development-tools/92" title="Bloc-notes++7.3.1" class="phpmain_tab2_mids_title">
<h3>Bloc-notes++7.3.1</h3>
</a>
<p>Éditeur de code facile à utiliser et gratuit</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version chinoise" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/toolset/development-tools/93" title="SublimeText3 version chinoise" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version chinoise</h3>
</a>
<p>Version chinoise, très simple à utiliser</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Envoyer Studio 13.0.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/toolset/development-tools/121" title="Envoyer Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Envoyer Studio 13.0.1</h3>
</a>
<p>Puissant environnement de développement intégré PHP</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Outils de développement Web visuel</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="//m.sbmmt.com/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 version Mac" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="//m.sbmmt.com/fr/toolset/development-tools/500" title="SublimeText3 version Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 version Mac</h3>
</a>
<p>Logiciel d'édition de code au niveau de Dieu (SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/fr/ai">Afficher plus</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Sujets chauds</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/gmailyxdlrkzn" title="Où se trouve l'entrée de connexion pour la messagerie Gmail ?" class="phpgenera_Details_mainR4_bottom_title">Où se trouve l'entrée de connexion pour la messagerie Gmail ?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8647</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/java-tutorial" title="Tutoriel Java" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Java</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1790</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/cakephp-tutor" title="Tutoriel CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel CakePHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1732</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/laravel-tutori" title="Tutoriel Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutoriel Laravel</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1582</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="//m.sbmmt.com/fr/faq/php-tutorial" title="Tutoriel PHP" class="phpgenera_Details_mainR4_bottom_title">Tutoriel PHP</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1451</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="//m.sbmmt.com/fr/faq/zt">Afficher plus</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796835653.html" title="Intégrer efficacement CSS et JavaScript avec la structure HTML5." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175226046128038.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Intégrer efficacement CSS et JavaScript avec la structure HTML5." />
</a>
<a href="//m.sbmmt.com/fr/faq/1796835653.html" title="Intégrer efficacement CSS et JavaScript avec la structure HTML5." class="phphistorical_Version2_mids_title">Intégrer efficacement CSS et JavaScript avec la structure HTML5.</a>
<span class="Articlelist_txts_time">Jul 12, 2025 am 03:01 AM</span>
<p class="Articlelist_txts_p">HTML5, CSS et JavaScript doivent être combinés efficacement avec des balises sémantiques, un ordre de chargement raisonnable et une conception de découplage. 1. Utilisez des étiquettes sémantiques HTML5, telles que l'amélioration de la clarté structurelle et de la maintenabilité, qui est propice au référencement et à l'accès sans barrière; 2. CSS doit être placé, utiliser des fichiers externes et se séparer par module pour éviter les styles en ligne et les problèmes de chargement retardés; 3. JavaScript est recommandé d'être introduit à l'avant et d'utiliser un repère ou une asynchronisation pour charger de manière asynchrone pour éviter le blocage du rendu; 4. Réduisez une forte dépendance entre les trois, conduisez le comportement à travers les attributs de données * et l'état de contrôle du nom de classe et améliorez l'efficacité de la collaboration grâce à des spécifications de nommage unifiées. Ces méthodes peuvent optimiser efficacement les performances des pages et collaborer avec les équipes.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796831880.html" title="Implémentation de boutons clickables à l'aide de l'élément de bouton HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182671121571.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Implémentation de boutons clickables à l'aide de l'élément de bouton HTML" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796831880.html" title="Implémentation de boutons clickables à l'aide de l'élément de bouton HTML" class="phphistorical_Version2_mids_title">Implémentation de boutons clickables à l'aide de l'élément de bouton HTML</a>
<span class="Articlelist_txts_time">Jul 07, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">Pour utiliser des éléments de bouton HTML pour réaliser des boutons cliquables, vous devez d'abord maîtriser son utilisation de base et ses précautions communes. 1. Créer des boutons avec des balises et définir les comportements via des attributs de type (tels que le bouton, soumettre, réinitialiser), qui est soumis par défaut; 2. Ajouter des fonctions interactives via JavaScript, qui peuvent être écrites en ligne ou lier les écouteurs d'événements via ID pour améliorer la maintenance; 3. Utilisez CSS pour personnaliser les styles, y compris la couleur d'arrière-plan, la bordure, les coins arrondis et les effets de survol / statut actif pour améliorer l'expérience utilisateur; 4. Faites attention aux problèmes communs: assurez-vous que l'attribut désactivé n'est pas activé, les événements JS sont correctement liés, la mise en page d'occlusion et utilisent l'aide des outils de développement pour dépanner les exceptions. Maîtriser ceci</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796832574.html" title="Soumettre des données de formulaire à l'aide de nouvelles méthodes HTML5 (formdata)" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191288234525.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Soumettre des données de formulaire à l'aide de nouvelles méthodes HTML5 (formdata)" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796832574.html" title="Soumettre des données de formulaire à l'aide de nouvelles méthodes HTML5 (formdata)" class="phphistorical_Version2_mids_title">Soumettre des données de formulaire à l'aide de nouvelles méthodes HTML5 (formdata)</a>
<span class="Articlelist_txts_time">Jul 08, 2025 am 02:28 AM</span>
<p class="Articlelist_txts_p">Il est plus pratique de soumettre des données de formulaire à l'aide de l'API FormData de HTML5. 1. Il peut collecter automatiquement les champs de formulaire avec l'attribut de nom ou ajouter manuellement des données; 2. Il prend en charge la soumission au format multipart / format de format de format via Fetch ou XMLHTTPRequest, qui convient au téléchargement de fichiers; 3. Lors du traitement des fichiers, vous n'avez qu'à ajouter le fichier pour formerdata et envoyer une demande; 4. Notez que le champ du même nom sera écrasé et que la conversion JSON et aucune structure de nidification ne doivent être manipulées.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796833320.html" title="Configuration des métadonnées du document dans l'élément de tête HTML" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175199941149498.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Configuration des métadonnées du document dans l'élément de tête HTML" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796833320.html" title="Configuration des métadonnées du document dans l'élément de tête HTML" class="phphistorical_Version2_mids_title">Configuration des métadonnées du document dans l'élément de tête HTML</a>
<span class="Articlelist_txts_time">Jul 09, 2025 am 02:30 AM</span>
<p class="Articlelist_txts_p">Les métadonnées à HTMLhead sont cruciales pour le référencement, le partage social et le comportement du navigateur. 1. Définissez le titre et la description de la page, utilisez et gardez-le concis et unique; 2. Ajoutez des informations sur les cartes OpenGraph et Twitter pour optimiser les effets de partage social, faire attention à la taille de l'image et utiliser des outils de débogage pour tester; 3. Définissez le jeu de caractères et les paramètres de la fenêtre pour s'assurer que le support multi-langues est adapté au terminal mobile; 4. Les balises facultatives telles que l'auteur Copyright, le contrôle des robots et le contenu en double prévention canonique doivent également être configurés raisonnablement.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796832585.html" title="Comprendre les extensions de source de médias HTML5 (MSE)" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191311266895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comprendre les extensions de source de médias HTML5 (MSE)" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796832585.html" title="Comprendre les extensions de source de médias HTML5 (MSE)" class="phphistorical_Version2_mids_title">Comprendre les extensions de source de médias HTML5 (MSE)</a>
<span class="Articlelist_txts_time">Jul 08, 2025 am 02:31 AM</span>
<p class="Articlelist_txts_p">MSE (MediaSourceExtensions) fait partie de la norme W3C, permettant à JavaScript de construire dynamiquement des flux de médias, permettant ainsi des capacités de lecture vidéo avancées. Il gère les sources multimédias via MediaSource, stocke les données de SourceBuffer et représente la plage de temps tampon par Timeranges, permettant au navigateur de charger et de décoder dynamiquement des clips vidéo. Le processus d'utilisation de MSE comprend: ① Créer une instance MediaSource; ② Le lier à un élément; ③ Ajouter SourceBuffer pour recevoir des données dans un format spécifique; ④ Obtenez des données segmentées via fetch () et ajoutez-les au tampon. Les précautions courantes comprennent: ① Problèmes de compatibilité du format; ② Paire de coups horaires</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796833601.html" title="Quels sont les attributs globaux les plus couramment utilisés en HTML?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175211633258120.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Quels sont les attributs globaux les plus couramment utilisés en HTML?" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796833601.html" title="Quels sont les attributs globaux les plus couramment utilisés en HTML?" class="phphistorical_Version2_mids_title">Quels sont les attributs globaux les plus couramment utilisés en HTML?</a>
<span class="Articlelist_txts_time">Jul 10, 2025 am 10:58 AM</span>
<p class="Articlelist_txts_p">La classe, l'identification, le style, les données et le titre sont les attributs globaux les plus couramment utilisés en HTML. La classe est utilisée pour spécifier un ou plusieurs noms de classe pour faciliter le paramètre de style et les opérations JavaScript; ID fournit des identifiants uniques pour les éléments, adaptés aux sauts d'ancrage et au contrôle JavaScript; Le style permet d'ajouter des styles en ligne, adaptés au débogage temporaire mais pas recommandé pour une utilisation à grande échelle; Data-Properties est utilisé pour stocker des données personnalisées, ce qui est pratique pour l'interaction frontale et back-end; Le titre est utilisé pour ajouter des invites de souris, mais son style et son comportement sont limités par le navigateur. La sélection raisonnable de ces attributs peut améliorer l'efficacité du développement et l'expérience utilisateur.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796831875.html" title="Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182660162333.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?" />
</a>
<a href="//m.sbmmt.com/fr/faq/1796831875.html" title="Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?" class="phphistorical_Version2_mids_title">Comment associer des légendes avec des images ou des médias à l'aide de la figure HTML et des éléments FigCaption?</a>
<span class="Articlelist_txts_time">Jul 07, 2025 am 02:30 AM</span>
<p class="Articlelist_txts_p">L'utilisation de sommes HTML permet une clarté intuitive et sémantique pour ajouter du texte de légende aux images ou aux médias. 1. Utilisé pour envelopper le contenu multimédia indépendant, tels que des images, des vidéos ou des blocs de code; 2. Il est placé comme texte explicatif et peut être situé au-dessus ou en dessous des médias; 3. Ils améliorent non seulement la clarté de la structure de la page, mais améliorent également l'accessibilité et l'effet de référencement; 4. Lorsque vous l'utilisez, vous devez faire attention à éviter les abus et s'appliquer au contenu qui doit être mis en avant et accompagné d'une description, plutôt que des images décoratives ordinaires; 5. L'attribut Alt qui ne peut être ignoré, qui est différent de Figcaption; 6. La figue est flexible et peut être placée en haut ou en bas de la figure au besoin. L'utilisation de ces deux balises aide correctement à créer un contenu Web sémantique et facile à comprendre.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="//m.sbmmt.com/fr/faq/1796832564.html" title="Affichage des barres de progression avec la balise HTML5 ``." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175191268285760.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Affichage des barres de progression avec la balise HTML5 ``." />
</a>
<a href="//m.sbmmt.com/fr/faq/1796832564.html" title="Affichage des barres de progression avec la balise HTML5 ``." class="phphistorical_Version2_mids_title">Affichage des barres de progression avec la balise HTML5 ``.</a>
<span class="Articlelist_txts_time">Jul 08, 2025 am 02:24 AM</span>
<p class="Articlelist_txts_p">Les balises HTML5 peuvent implémenter directement les barres de progression de la page Web. 1. L'utilisation de base consiste à définir la valeur et les attributs max, tels que l'affichage de 30% de progrès; 2. Si la progression est inconnue, la valeur peut être omise et ne définir que maximum, ce qui signifie un état incertain; 3. Vous pouvez personnaliser le style via CSS et la compatibilité du navigateur doit être gérée; 4. Il est souvent utilisé dans des scénarios tels que le téléchargement de fichiers, la progression du formulaire et le chargement du jeu; 5. Faites attention à éviter de l'utiliser lorsque la tâche est terminée trop rapidement et considérez les problèmes de compatibilité de l'ancienne version de IE.</p>
</div>
</div>
<a href="//m.sbmmt.com/fr/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
</div>
<div class="footermid">
<a href="//m.sbmmt.com/fr/about/us.html">À propos de nous</a>
<a href="//m.sbmmt.com/fr/about/disclaimer.html">Clause de non-responsabilité</a>
<a href="//m.sbmmt.com/fr/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1753142117"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' 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 type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const mainNav = document.querySelector('.Article_Details_main1Lmain');
const header = document.querySelector('header');
if (mainNav) {
window.addEventListener('scroll', function() {
const scrollPosition = window.scrollY;
if (scrollPosition > 84) {
mainNav.classList.add('fixed');
} else {
mainNav.classList.remove('fixed');
}
});
}
});
</script>
</body>
</html> 
