Cadres HTML

王林
王林original
2024-09-04 16:15:29455parcourir

Les cadres HTML sont utiles pour diviser la page Web ou le navigateur Web en plusieurs sections ; ils séparent les sections puis se chargent différemment.

A-frame affiche le contenu indépendamment de son conteneur. Plusieurs cadres forment une collection et sont appelés un jeu de cadres. La disposition peut être considérée comme similaire à l’orientation des lignes et des colonnes dans un tableau. La balise frame est obsolète en HTML5.

Chaque cadre a une balise de cadre à indiquer. Le cadre horizontal est défini par l'attribut row de la balise frame, et l'attribut vertical est défini par l'attribut column de la balise frame dans le document HTML. La même fenêtre dans un cadre peut afficher une bannière statique, un deuxième menu de navigation, etc.

Syntaxe des frames

En HTML, il n'y a pas de balise de fin pour le étiqueter. Lorsque nous utilisons des cadres dans une page Web, nous utilisons au lieu d'une balise étiqueter. En utilisant C'est ainsi que nous demandons à la page Web de la diviser en cadres. Le la balise définit quel document HTML doit s'ouvrir en tant que cadre.

Les colonnes d'attribut prennent la valeur en pixels et aident à spécifier le nombre et la taille des colonnes dans un jeu de cadres.

<cols ="10%,80%,10%">

De même, comme nous l'avons vu ci-dessus, les lignes d'attributs prennent la valeur en pixels et aident à spécifier le nombre et la taille des lignes dans un jeu de cadres.

<rows ="10%,80%,10%">

Cependant, il convient de noter que le La balise est obsolète en HTML5 et elle n'est plus utilisée.

Différents types de cadres en HTML

L'une des utilisations des cadres a toujours été de charger les barres de navigation dans un cadre, puis de charger les pages principales dans un cadre séparé. La balise A-frame définit un seul cadre de fenêtre dans un .

prend en charge les navigateurs Chrome, Internet Explorer, Mozilla, Safari et Opera Mini.

Les différents attributs et certains attributs couramment utilisés dans le cadre sont des attributs tels que la bordure, le défilement, le src, le nom, etc.

Types de balises de cadre

Voici les différents types de balises de cadre :

Le Attribut de balise

Il existe cinq attributs importants du , et nous en discutons ici :

1. Col: L'attribut col donne les cadres verticaux. La largeur, cependant, peut être spécifiée de 4 manières :

  • Pixels : les valeurs absolues peuvent être mentionnées en pixels. Si nous devons créer trois cadres verticaux, nous pouvons donner la valeur : cols=”100,50,100”.
  • Pourcentage : Le pourcentage de la fenêtre du navigateur peut être mentionné. Si nous devons créer trois cadres verticaux, nous pouvons donner la valeur : cols=”40%,20%,40%.”

Nous pouvons également utiliser le caractère générique ici (*) et laisser le caractère générique prendre le reste de la fenêtre, qui reste non mentionné.

cols=”30%,*,30%”

Cadres HTML

Sortie :

Cadres HTML

2. Rows : L'attribut row donne les cadres horizontaux. Il spécifie les lignes d'un frameset. Si nous devons créer trois cadres horizontaux, nous utilisons :

Exemple : Lignes=”10%,80%,10%’.

On peut également régler la hauteur de chaque ligne comme nous l'avions fait dans le cas des colonnes précédemment.

Cadres HTML

Sortie :

Cadres HTML

3. Bordure : Il précise la largeur de la bordure de chaque cadre en pixels.

Par exemple, border=”4”. Si border=”0”, cela signifie qu’il n’y a pas de frontière.

4. Frameborder : Si une bordure tridimensionnelle doit être affichée entre les images, alors nous utilisons cet attribut. La valeur que prend l'attribut est 1 ou 0 (Oui ou Non).

Par exemple : frameborder=”0” signifie pas de bordure.

5. Framespacing : Cet attribut spécifie la quantité d'espace entre les images dans un jeu de cadres. N'importe quelle valeur entière peut être donnée ici pour cet attribut.

Par exemple, framespacing=”12” signifie qu'entre les images, il doit y avoir un espacement de 12 pixels.

Le Attribut de balise

Il y a 8 attributs qui peuvent être répertoriés ici dans cette section.

1. src : Nous fournissons le nom du fichier à cet attribut qui est censé être chargé dans le cadre. La valeur de cet attribut peut être n'importe quelle URL.

Exemple : src= www.facebook.com

2. name : Cet attribut fournit un nom au cadre. Il définit dans quel cadre un document doit être chargé. Si vous avez plusieurs liens dans un cadre qui se chargent dans un autre cadre, nous utilisons cet attribut. Ensuite, la deuxième image a besoin d'un nom pour s'identifier comme cible du lien.

Par exemple, name=”abc.htm.”

3. frameborder: Cet attribut est spécifié pour indiquer si les bordures doivent être affichées ou non. La valeur prise est 1 ou 0 (Oui ou Non).

4. marginwidth : L'attribut est utile pour spécifier la largeur de l'espace entre la gauche et la droite de la bordure du cadre ainsi que le contenu du cadre. La valeur est donnée en pixel.

Par exemple, marginwidth=”10”.

5. marginheight : L'attribut est utile pour spécifier la hauteur de l'espace entre le haut et le bas de la bordure du cadre ainsi que le contenu du cadre. La valeur est donnée en pixel.

Par exemple, marginheight=”10”.

6. noresize : Cet attribut empêche essentiellement l'utilisateur d'apporter des modifications aux cadres déjà présents. En l'absence de cet attribut, n'importe quel cadre peut être redimensionné.

Par exemple, noresize=”noresize.”

7. scrolling : Cet attribut prend le contrôle de l'apparence des barres de défilement, qui sont présentes sur le cadre. La valeur est « oui, « non » ou « auto ».

Par exemple, scrolling=” no” signifie qu'il ne devrait pas avoir de barres de défilement.

8. longdesc :Cet attribut vous permet de fournir un lien vers une autre page contenant une longue description du contenu du cadre.

Par exemple, longdesc=”framedesc.htm.”

Prise en charge des cadres et du navigateur

Les anciens navigateurs ne prennent pas en charge les frames, alors les éléments doivent être affichés à l'utilisateur.</p> <p>En pratique le <body> L'élément doit être placé à l'intérieur de <noframes> car l'élément <frameset> est censé remplacer l'élément <body> élément. Si le navigateur ne parvient pas à comprendre <frameset> alors il comprend le contenu de l'élément <body> élément contenu dans <noframes> élément.</p> <p>C'est une bonne approche de publier un message dans de tels scénarios pour l'utilisateur qui utilise d'anciens navigateurs. Des messages comme « Désolé ! Votre navigateur ne prend pas en charge les frames. à prévenir.</p> <h3>Conclusion</h3> <p>La technologie Frame n'est pas prise en charge par un grand nombre de navigateurs de nos jours. On remarque souvent que le contenu de la page Web ne s’affiche pas correctement sur les petits appareils. Quoi qu'il en soit, il est bon de connaître ce qui existait pour pouvoir développer de meilleurs modèles compatibles avec les nouvelles technologies.</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);">html5</a> <a href="javascript:void(0);">chrome</a> <a href="javascript:void(0);">safari</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Static</a> <a href="javascript:void(0);">Integer</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Collection</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">column</a> <a href="javascript:void(0);">table</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="Éléments de formulaire HTML" href="https://m.php.cn/fr/faq/1796600034.html">Éléments de formulaire HTML</a></span><span>Article suivant:<a class="dBlack" title="Éléments de formulaire HTML" href="https://m.php.cn/fr/faq/1796600036.html">Éléments de formulaire HTML</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Articles Liés</h2><em><a href="https://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="https://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="https://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="https://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="https://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="https://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><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/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="https://m.php.cn/fr/about/us.html">À propos de nous</a><a href="https://m.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a><a href="https://m.php.cn/fr/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><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>