Comment créer une sous-page HTML-tutoriel HTML-php.cn

Comment créer une sous-page HTML

王林

Libérer： 2024-02-22 17:15:03

original

1035 Les gens l'ont consulté

Comment créer une sous-page HTML

Création et utilisation de sous-pages HTML

Avec le développement d'Internet et de la technologie Web, de plus en plus de sites Web et d'applications doivent utiliser des sous-pages pour organiser et gérer les informations. Les sous-pages HTML peuvent rendre un site Web plus modulaire et plus facile à maintenir tout en offrant une meilleure expérience utilisateur. Cet article explique comment créer des sous-pages en HTML et fournit des exemples de code spécifiques.

1. Créer une sous-page

Tout d'abord, nous devons créer une page parent. La page parent est généralement un fichier HTML principal qui charge et affiche les pages enfants. Dans la page parent, nous pouvons utiliser l'élément <iframe></iframe> pour intégrer la page enfant. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
</body>
</html>

Copier après la connexion

<iframe>

<!DOCTYPE html>
<html>
<head>
    <title>子页面</title>
</head>
<body>
    <h2>这是子页面</h2>
    <p>这是子页面的内容。</p>
</body>
</html>

Copier après la connexion

接下来，我们需要创建子页面。子页面通常是一个独立的HTML文件，包含特定的内容和功能。在子页面中，我们可以编写任意的HTML代码。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
</body>
</html>

Copier après la connexion

二、使用子页面

当我们在浏览器中打开父页面时，会同时加载并显示子页面。在父页面中，<iframe>元素的src属性指定了子页面的文件路径。浏览器会自动根据文件路径加载子页面，并将其嵌入到父页面中。示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>父页面</title>
    <script>
        function changeContent() {
            var iframe = document.getElementsByTagName('iframe')[0];
            var childWindow = iframe.contentWindow;
            var childDocument = childWindow.document;
            var childHeading = childDocument.getElementsByTagName('h2')[0];
            childHeading.innerText = '子页面内容已修改';
        }
    </script>
</head>
<body>
    <h1>这是父页面</h1>
    <iframe src="子页面.html"></iframe>
    <button onclick="changeContent()">修改子页面内容</button>
</body>
</html>

Copier après la connexion

如果需要在父页面中操作或控制子页面，我们可以使用JavaScript来实现。通过<iframe></iframe>元素的contentWindow属性，我们可以获取子页面的窗口对象。然后，我们可以使用子页面的窗口对象执行各种操作，如修改子页面的内容、调用子页面的函数等。示例代码如下：

rrreee

以上代码定义了一个名为changeContent()的JavaScript函数，该函数会获取子页面中的<h2></h2>元素，并修改其文本内容。然后，在父页面中添加一个按钮，并通过onclick事件绑定该函数。当点击按钮时，父页面会调用changeContent()函数，从而修改子页面的内容。

总结

通过使用HTML子页面，我们可以将复杂的网站和应用程序分割成多个模块化的部分，使其更易于维护和管理。通过嵌套<iframe></iframe>Ensuite, nous devons créer des sous-pages. Une sous-page est généralement un fichier HTML distinct contenant un contenu et des fonctionnalités spécifiques. Dans les sous-pages, nous pouvons écrire du code HTML arbitraire. L'exemple de code est le suivant : rrreee

2. Utilisation des sous-pages🎜🎜🎜Lorsque nous ouvrons la page parent dans le navigateur, la sous-page sera chargée et affichée en même temps. Dans la page parent, l'attribut src de l'élément <iframe></iframe> spécifie le chemin du fichier de la page enfant. Le navigateur chargera automatiquement la sous-page en fonction du chemin du fichier et l'intégrera dans la page parent. L'exemple de code est le suivant : rrreee

contentWindow

<iframe></iframe>

rrreee🎜Le code ci-dessus définit une fonction JavaScript nommée changeContent(), qui obtiendra le <h2> -page </h2> et modifiez son contenu textuel. Ensuite, ajoutez un bouton à la page parent et liez la fonction via l'événement onclick. Lorsque le bouton est cliqué, la page parent appellera la fonction changeContent() pour modifier le contenu de la page enfant. 🎜🎜Résumé🎜🎜En utilisant des sous-pages HTML, nous pouvons diviser des sites Web et des applications complexes en parties modulaires, ce qui les rend plus faciles à maintenir et à gérer. En imbriquant les éléments <iframe></iframe>, nous pouvons charger et afficher des pages enfants dans la page parent. Grâce à JavaScript, nous pouvons exploiter et contrôler les pages enfants de la page parent. J'espère que les exemples de code fournis dans cet article vous aideront à comprendre et à utiliser les sous-pages HTML. 🎜

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!