HTML 하위 페이지를 만드는 방법-HTML 튜토리얼-php.cn

HTML 하위 페이지를 만드는 방법

王林

풀어 주다： 2024-02-22 17:15:03

원래의

1173명이 탐색했습니다.

HTML 하위 페이지를 만드는 방법

HTML 하위 페이지의 구축 및 사용

인터넷과 웹페이지 기술의 발전으로 정보를 정리하고 관리하기 위해 하위 페이지를 사용해야 하는 웹사이트와 애플리케이션이 점점 더 많아지고 있습니다. HTML 하위 페이지는 웹 사이트를 더욱 모듈화하고 유지 관리하기 쉽게 만들면서 더 나은 사용자 경험을 제공할 수 있습니다. 이 문서에서는 HTML로 하위 페이지를 만드는 방법을 설명하고 구체적인 코드 예제를 제공합니다.

1. 하위 페이지 만들기

먼저 상위 페이지를 만들어야 합니다. 상위 페이지는 일반적으로 하위 페이지를 로드하고 표시하는 기본 HTML 파일입니다. 상위 페이지에서 <iframe></iframe> 요소를 사용하여 하위 페이지를 삽입할 수 있습니다. 샘플 코드는 다음과 같습니다.

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

로그인 후 복사

<iframe>

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

로그인 후 복사

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

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

로그인 후 복사

二、使用子页面

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

로그인 후 복사

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

rrreee

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

总结

通过使用HTML子页面，我们可以将复杂的网站和应用程序分割成多个模块化的部分，使其更易于维护和管理。通过嵌套<iframe></iframe>다음으로 하위 페이지를 생성해야 합니다. 하위 페이지는 일반적으로 특정 콘텐츠와 기능을 포함하는 별도의 HTML 파일입니다. 하위 페이지에서는 임의의 HTML 코드를 작성할 수 있습니다. 샘플 코드는 다음과 같습니다: rrreee

2. 서브 페이지 사용🎜🎜🎜브라우저에서 상위 페이지를 열면 서브 페이지가 동시에 로드되고 표시됩니다. 상위 페이지에서 <iframe></iframe> 요소의 src 속성은 하위 페이지의 파일 경로를 지정합니다. 브라우저는 파일 경로를 기반으로 하위 페이지를 자동으로 로드하고 상위 페이지에 포함시킵니다. 샘플 코드는 다음과 같습니다: rrreee

<iframe></iframe>

contentWindow

rrreee🎜위 코드는 changeContent()라는 JavaScript 함수를 정의합니다. 이 함수는 하위 항목에서 <h2> -page.</h2> 요소를 선택하고 해당 텍스트 내용을 수정합니다. 그런 다음 상위 페이지에 버튼을 추가하고 onclick 이벤트를 통해 함수를 바인딩합니다. 버튼을 클릭하면 상위 페이지에서 changeContent() 함수를 호출하여 하위 페이지의 콘텐츠를 수정합니다. 🎜🎜요약🎜🎜HTML 하위 페이지를 사용하면 복잡한 웹사이트와 애플리케이션을 모듈식 부분으로 분할하여 유지 관리가 더 쉬워집니다. <iframe></iframe> 요소를 중첩하면 상위 페이지 내에 하위 페이지를 로드하고 표시할 수 있습니다. JavaScript를 통해 상위 페이지에서 하위 페이지를 조작하고 제어할 수 있습니다. 이 문서에 제공된 코드 예제가 HTML 하위 페이지를 이해하고 사용하는 데 도움이 되기를 바랍니다. 🎜

위 내용은 HTML 하위 페이지를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!