So erstellen Sie eine HTML-Unterseite-HTML-Tutorial-php.cn

So erstellen Sie eine HTML-Unterseite

王林

Freigeben： 2024-02-22 17:15:03

Original

1160 Leute haben es durchsucht

So erstellen Sie eine HTML-Unterseite

Die Einrichtung und Verwendung von HTML-Unterseiten

Mit der Entwicklung des Internets und der Webseitentechnologie müssen immer mehr Websites und Anwendungen Unterseiten verwenden, um Informationen zu organisieren und zu verwalten. HTML-Unterseiten können eine Website modularer und wartbarer machen und gleichzeitig ein besseres Benutzererlebnis bieten. In diesem Artikel wird erklärt, wie man Unterseiten in HTML erstellt, und es werden konkrete Codebeispiele bereitgestellt.

1. Erstellen Sie eine Unterseite

Zuerst müssen wir eine übergeordnete Seite erstellen. Die übergeordnete Seite ist normalerweise eine Haupt-HTML-Datei, die untergeordnete Seiten lädt und anzeigt. Auf der übergeordneten Seite können wir das Element <iframe></iframe> verwenden, um die untergeordnete Seite einzubetten. Der Beispielcode lautet wie folgt:

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

Nach dem Login kopieren

<iframe>

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

二、使用子页面

当我们在浏览器中打开父页面时，会同时加载并显示子页面。在父页面中，<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>

Nach dem Login kopieren

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

rrreee

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

总结

通过使用HTML子页面，我们可以将复杂的网站和应用程序分割成多个模块化的部分，使其更易于维护和管理。通过嵌套<iframe></iframe>Als nächstes müssen wir Unterseiten erstellen. Eine Unterseite ist in der Regel eine separate HTML-Datei, die bestimmte Inhalte und Funktionen enthält. In Unterseiten können wir beliebigen HTML-Code schreiben. Der Beispielcode lautet wie folgt: rrreee

2. Unterseiten verwenden🎜🎜🎜Wenn wir die übergeordnete Seite im Browser öffnen, wird die Unterseite gleichzeitig geladen und angezeigt. Auf der übergeordneten Seite gibt das Attribut src des Elements <iframe></iframe> den Dateipfad der untergeordneten Seite an. Der Browser lädt die Unterseite automatisch basierend auf dem Dateipfad und bettet sie in die übergeordnete Seite ein. Der Beispielcode lautet wie folgt: rrreee

contentWindow

<iframe></iframe>

rrreee🎜Der obige Code definiert eine JavaScript-Funktion namens changeContent(), die den <h2> erhält -page.</h2> Element und ändern Sie seinen Textinhalt. Fügen Sie dann der übergeordneten Seite eine Schaltfläche hinzu und binden Sie die Funktion über das onclick-Ereignis. Wenn auf die Schaltfläche geklickt wird, ruft die übergeordnete Seite die Funktion changeContent() auf, um den Inhalt der untergeordneten Seite zu ändern. 🎜🎜Zusammenfassung🎜🎜Durch die Verwendung von HTML-Unterseiten können wir komplexe Websites und Anwendungen in modulare Teile aufteilen, wodurch sie einfacher zu warten und zu verwalten sind. Durch die Verschachtelung von <iframe></iframe>-Elementen können wir untergeordnete Seiten innerhalb der übergeordneten Seite laden und anzeigen. Über JavaScript können wir untergeordnete Seiten auf der übergeordneten Seite bedienen und steuern. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele Ihnen helfen, HTML-Unterseiten zu verstehen und zu verwenden. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine HTML-Unterseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!