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

Comment utiliser les cadres en HTML

下次还敢
下次还敢original
2024-04-27 19:25:371186parcourir

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>

上面的示例创建了一个两行框架集,其中“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>

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

命名框架

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

<code class="html"><frame name="header" src="header.html">
<frame name="content" src="content.html"></code>

JavaScript 中的框架操作

JavaScript 可以通过 window.frames

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