Maison  >  Article  >  interface Web  >  Comment fonctionne le HTML ?

Comment fonctionne le HTML ?

WBOY
WBOYoriginal
2024-09-04 16:13:21727parcourir

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><titre></h4> <p>cette balise est utilisée à l'intérieur du <head> balise pour écrire le titre du document.</p> <h4><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>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><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><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><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><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><hr></h4> <p>Utilisé pour créer la ligne, principalement utilisé lorsque vous souhaitez dessiner une page Web sur une seule ligne.</p> <h4><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> </h4> <p>Pour imprimer un seul espace, ceci est utilisé en HTML.</p> <h4>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>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>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>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>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>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>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 class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">laravel</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">print</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">require</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">break</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">everything</a><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="Carrière en HTML" href="http://m.php.cn/fr/faq/1796600021.html">Carrière en HTML</a></span><span>Article suivant:<a class="dBlack" title="Carrière en HTML" href="http://m.php.cn/fr/faq/1796600024.html">Carrière en HTML</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><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/fr/faq/348757.html" title="Résumé des connaissances HTML" class="aBlack">Résumé des connaissances HTML</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348804.html" title="Comment apprendre le HTML rapidement" class="aBlack">Comment apprendre le HTML rapidement</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348873.html" title="La différence entre htmlxhtmlxml" class="aBlack">La différence entre htmlxhtmlxml</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/fr/faq/348884.html" title="La différence entre les attributs src et href" class="aBlack">La différence entre les attributs src et 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><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><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>