Maison > interface Web > tutoriel HTML > Comment utiliser les cadres en HTML

Comment utiliser les cadres en HTML

下次还敢
Libérer: 2024-04-27 19:25:37
original
1249 Les gens l'ont consulté

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> 标记,并在其中指定框架的行或列:

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

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

嵌套框架

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

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

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

命名框架

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

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

JavaScript 中的框架操作

JavaScript 可以通过 window.frames

<code class="javascript">window.frames[0].location = "new_header.html"; //更改第一个框架的源
window.frames["content"].reload(); //刷新“content”框架</code>
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!

source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal