Maison interface Web tutoriel HTML Comment utiliser les cadres en HTML

Comment utiliser les cadres en HTML

Apr 27, 2024 pm 07:25 PM

Le framework HTML permet la création de plusieurs zones de document dans la fenêtre du document pour organiser le contenu du site Web. Pour créer des cadres, utilisez la balise <frameset> pour spécifier des lignes ou des colonnes, et la balise Les cadres peuvent être imbriqués, en utilisant l'attribut name pour nommer le cadre pour la manipulation JavaScript. Cependant, il est recommandé d'utiliser des technologies modernes telles que des grilles flexibles au lieu de cadres.

Comment utiliser les cadres en HTML

Utilisation des frames en HTML

En HTML, un frame spécifie un emplacement dans une fenêtre de document pouvant accueillir plusieurs documents. Les frames sont souvent utilisés pour organiser différentes parties d'un site Web en partitions logiques.

Créer un cadre

Pour créer un cadre, utilisez la balise <frameset> et spécifiez la ligne ou la colonne du cadre à l'intérieur : <frameset> 标记,并在其中指定框架的行或列:

<frameset rows="20%, 80%">
  <frame src="header.html">
  <frame src="content.html">
</frameset>
Copier après la connexion

上面的示例创建了一个两行框架集,其中“header.html”占据顶部 20%,而“content.html”占据底部 80%。

嵌套框架

一个框架集可以嵌套在另一个框架集内,允许创建更复杂的分区。例如:

<frameset cols="50%, 50%">
  <frameset rows="50%, 50%">
    <frame src="menu.html">
    <frame src="content1.html">
  </frameset>
  <frame src="content2.html">
</frameset>
Copier après la connexion

这个示例创建了一个 50/50 列框架集,其中左侧框架集包含一个 50/50 行框架集,用于“菜单”和“内容 1”,而右侧框架集包含“内容 2”。

命名框架

为了引用框架并对其进行操作(例如更改源或刷新内容),可以使用 name 属性来命名每个框架。例如:

<frame name="header" src="header.html">
<frame name="content" src="content.html">
Copier après la connexion

JavaScript 中的框架操作

JavaScript 可以通过 window.frames

window.frames[0].location = "new_header.html"; //更改第一个框架的源
window.frames["content"].reload(); //刷新“content”框架
Copier après la connexion
L'exemple ci-dessus crée un ensemble de cadres de lignes, Parmi eux, « header.html » occupe les 20 % supérieurs et « content.html » occupe les 80 % inférieurs.

Cadres imbriqués

🎜🎜Un jeu de cadres peut être imbriqué dans un autre jeu de cadres, permettant la création de partitions plus complexes. Par exemple : 🎜rrreee🎜Cet exemple crée un jeu de cadres de colonnes 50/50 où le jeu de cadres de gauche contient un jeu de cadres de lignes 50/50 pour "Menu" et "Contenu1" et le jeu de cadres de droite contient "Contenu 2". 🎜🎜🎜Nommer les cadres🎜🎜🎜Afin de référencer des cadres et d'opérer sur eux (comme changer la source ou actualiser le contenu), vous pouvez nommer chaque cadre en utilisant l'attribut name. Par exemple : 🎜rrreee🎜🎜Manipulation de cadres en JavaScript🎜🎜🎜JavaScript peut accéder et manipuler les cadres via le tableau d'objets window.frames. Par exemple : 🎜rrreee🎜🎜Remarque : 🎜Les cadres ne sont plus une pratique recommandée pour le HTML car ils peuvent entraîner des problèmes d'accessibilité et de complexité. La conception de sites Web modernes devrait utiliser des technologies plus modernes telles que des grilles flexibles et des mises en page réactives. 🎜

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!

Déclaration de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

See all articles