HTML에서 프레임을 사용하는 방법

下次还敢
풀어 주다: 2024-04-27 19:25:37
원래의
1186명이 탐색했습니다.

HTML 프레임워크를 사용하면 웹 사이트 콘텐츠를 구성하기 위해 문서 창에 여러 문서 영역을 만들 수 있습니다. 프레임을 만들려면 <frameset> 태그를 사용하여 행이나 열을 지정하고 태그를 사용하여 각 프레임의 소스를 지정합니다. JavaScript 조작을 위해 프레임 이름을 지정하기 위해 name 속성을 사용하여 프레임을 중첩할 수 있습니다. 그러나 프레임 대신 유연한 그리드와 같은 최신 기술을 사용하는 것이 좋습니다.

HTML에서 프레임을 사용하는 방법

HTML에서 프레임 사용

HTML에서 프레임은 여러 문서를 수용할 수 있는 문서 창의 위치를 ​​지정합니다. 프레임은 웹 사이트의 여러 부분을 논리 파티션으로 구성하는 데 자주 사용됩니다.

프레임 만들기

프레임을 만들려면 <frameset> 태그를 사용하고 그 안에 프레임의 행이나 열을 지정하세요. <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>
로그인 후 복사
위의 예에서는 두 개의 프레임을 만듭니다. row 프레임셋 중 "header.html"이 상위 20%를 차지하고 "content.html"이 하위 80%를 차지합니다.

중첩된 프레임

🎜🎜프레임세트를 다른 프레임세트 내에 중첩하여 더 복잡한 파티션을 생성할 수 있습니다. 예: 🎜rrreee🎜이 예에서는 왼쪽 프레임세트에 "Menu" 및 "Content1"에 대한 50/50 행 프레임세트가 포함되고 오른쪽 프레임세트에 "Content 2"가 포함된 50/50 열 프레임세트를 만듭니다. 🎜🎜🎜프레임 이름 지정🎜🎜🎜프레임을 참조하고 이에 대해 작업(예: 소스 변경 또는 콘텐츠 새로 고침)하려면 name 속성을 ​​사용하여 각 프레임의 이름을 지정할 수 있습니다. 예: 🎜rrreee🎜🎜JavaScript의 프레임 조작🎜🎜🎜JavaScript는 window.frames 객체 배열을 통해 프레임에 액세스하고 조작할 수 있습니다. 예: 🎜rrreee🎜🎜참고: 🎜프레임은 접근성 문제와 복잡성을 유발할 수 있으므로 더 이상 HTML에 권장되지 않습니다. 현대적인 웹사이트 디자인은 유연한 그리드와 반응형 레이아웃과 같은 보다 현대적인 기술을 사용해야 합니다. 🎜

위 내용은 HTML에서 프레임을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!