찾다

집  >  기사  >  웹 프론트엔드  >  HTML 프레임

HTML 프레임

王林
王林원래의
2024-09-04 16:15:29447검색

Html 프레임은 웹페이지나 웹 브라우저를 여러 섹션으로 나누는 데 유용합니다. 섹션을 분리한 후 다르게 로드합니다.

A-frame은 컨테이너와 별개로 콘텐츠를 표시합니다. 여러 프레임이 컬렉션을 형성하며 이를 프레임세트라고 합니다. 배열은 테이블의 행과 열 방향과 유사하다고 간주할 수 있습니다. 프레임 태그는 HTML5에서 더 이상 사용되지 않습니다.

각 프레임에는 표시할 프레임 태그가 있습니다. HTML 문서에서 가로 프레임은 프레임 태그의 행 속성으로 정의되고 세로 속성은 프레임 태그의 열 속성으로 정의됩니다. 한 프레임의 동일한 창에는 정적 배너, 두 번째 탐색 메뉴 등이 표시될 수 있습니다.

프레임 구문

HTML에는 꼬리표. 웹페이지에서 프레임을 사용할 때 태그 대신 꼬리표. <프레임세트> 사용 웹페이지를 프레임으로 나누도록 지시하는 방법입니다. 태그는 어떤 HTML 문서를 프레임으로 열어야 하는지 정의합니다.

cols 속성은 픽셀 단위로 값을 가지며 프레임세트의 열 수와 크기를 지정하는 데 도움이 됩니다.

<cols ="10%,80%,10%">

마찬가지로 위에서 본 것처럼 속성 행은 픽셀 단위로 값을 가지며 프레임세트의 행 수와 크기를 지정하는 데 도움이 됩니다.

<rows ="10%,80%,10%">

그러나 태그는 HTML5에서 더 이상 사용되지 않으며 더 이상 사용되지 않습니다.

HTML의 다양한 프레임 유형

프레임의 용도 중 하나는 항상 한 프레임에 탐색 모음을 로드한 다음 기본 페이지를 별도의 프레임에 로드하는 것이었습니다. A-프레임 태그는 <프레임세트> 내에서 하나의 단일 창 프레임을 정의합니다.

<프레임> Chrome, Internet Explorer, Mozilla, Safari 및 Opera Mini에서 브라우저를 지원합니다.

프레임에서 일반적으로 사용되는 다양한 속성은 테두리, 스크롤, src, 이름 등과 같은 속성입니다.

프레임 태그 종류

다음은 다양한 유형의 프레임 태그입니다.

<프레임셋> 태그속성

<프레임세트>에는 5가지 중요한 속성이 있으며 여기서 이에 대해 논의합니다.

1. Col: col 속성은 수직 프레임을 제공합니다. 그러나 너비는 4가지 방법으로 지정할 수 있습니다:

  • 픽셀: 절대값은 픽셀 단위로 언급될 수 있습니다. 세 개의 수직 프레임을 생성해야 하는 경우 cols=”100,50,100” 값을 지정할 수 있습니다.
  • 백분율: 브라우저 창의 백분율을 언급할 수 있습니다. 세 개의 수직 프레임을 만들어야 하는 경우 cols=”40%,20%,40%”라는 값을 제공할 수 있습니다.

여기서 와일드카드(*)를 사용할 수도 있고 언급되지 않은 창의 나머지 부분을 와일드카드로 사용할 수도 있습니다.

cols=”30%,*,30%”

HTML 프레임

출력:

HTML 프레임

2. 행: 행 속성은 수평 프레임을 제공합니다. 프레임세트의 행을 지정합니다. 세 개의 수평 프레임을 만들어야 하는 경우 다음을 사용합니다.

예: 행=”10%,80%,10%’.

이전 열의 경우와 마찬가지로 각 행의 높이를 설정할 수도 있습니다.

HTML 프레임

출력:

HTML 프레임

3. 테두리: 각 프레임의 테두리 너비를 픽셀 단위로 지정합니다.

예: border=”4”. border=”0”이면 테두리가 없다는 뜻입니다.

4. Frameborder: 프레임 사이에 3차원 테두리를 표시해야 하는 경우 이 속성을 사용합니다. 속성이 취하는 값은 1 또는 0(예 또는 아니요)입니다.

예:frameborder="0"은 테두리가 없음을 의미합니다.

5. Framespacing: 이 속성은 프레임세트의 프레임 사이의 공간 크기를 지정합니다. 이 속성에 대해 여기에 정수 값을 지정할 수 있습니다.

예:framespacing=”12”는 프레임 사이에 12픽셀의 간격이 있어야 함을 의미합니다.

<프레임> 태그속성

이 섹션에는 8가지 속성을 나열할 수 있습니다.

1. src: 프레임에 로드될 것으로 예상되는 이 속성에 파일 이름을 제공합니다. 이 속성의 값은 모든 URL이 될 수 있습니다.

예: src= www.facebook.com

2. name: 이 속성은 프레임에 이름을 제공합니다. 문서를 로드할 프레임을 정의합니다. 한 프레임에 다른 프레임으로 로드되는 여러 링크가 있는 경우 이 속성을 사용합니다. 그런 다음 두 번째 프레임에는 링크 대상임을 식별할 수 있는 이름이 필요합니다.

예: name=”abc.htm.”

3. Frameborder: 이 속성은 테두리 표시 여부를 표시하기 위해 지정됩니다. 차지하는 값은 1 또는 0(예 또는 아니요)입니다.

4. marginwidth: 이 속성은 프레임 테두리의 왼쪽과 오른쪽 사이의 공간 너비와 프레임 내용을 지정하는 데 유용합니다. 값은 픽셀 단위로 제공됩니다.

예: marginwidth=”10”.

5. marginheight: 이 속성은 프레임 테두리의 상단과 하단 사이의 공간 높이와 프레임 내용을 지정하는 데 유용합니다. 값은 픽셀 단위로 제공됩니다.

예: marginheight=”10”.

6. noresize: 이 속성은 기본적으로 사용자가 이미 존재하는 프레임을 변경하는 것을 방지합니다. 이 속성이 없으면 모든 프레임의 크기를 조정할 수 있습니다.

예: noresize=”noresize.”

7. scrolling: 이 속성은 프레임에 있는 스크롤 막대의 모양을 제어합니다. 값은 '예, '아니요' 또는 '자동'입니다.

예: scrolling="no"는 스크롤 막대가 없어야 함을 의미합니다.

8. longdesc: 이 속성을 사용하면 프레임 내용에 대한 긴 설명이 포함된 다른 페이지에 대한 링크를 제공할 수 있습니다.

예: longdesc=”framedesc.htm.”

프레임 및 브라우저 지원

이전 브라우저는 프레임을 지원하지 않으므로 요소는 사용자에게 표시되어야 합니다.</p> <p>실제로 <body> 요소는 <noframes> 안에 배치되어야 합니다. 요소는 <frameset> 요소는 <body> 요소. 브라우저가 <frameset>를 인식하지 못하는 경우 요소는 <body>의 내용을 이해합니다. <noframes>에 포함된 요소입니다. 요소.</p> <p>오래된 브라우저를 사용하는 사용자에게 이러한 상황에서 메시지를 표시하는 것은 좋은 접근 방식입니다. “미안해요! 귀하의 브라우저는 프레임을 지원하지 않습니다.' 알려드립니다.</p> <h3>결론</h3> <p>요즘에는 프레임 기술을 지원하지 않는 브라우저가 많습니다. 작은 장치에서는 웹페이지의 내용이 제대로 표시되지 않는 경우가 종종 있습니다. 어쨌든, 새로운 기술과 호환되도록 더 나은 모델을 개발할 수 있도록 기존의 내용에 대한 지식을 갖는 것이 좋습니다.</p><p>위 내용은 HTML 프레임의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">chrome</a> <a href="javascript:void(0);">safari</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Static</a> <a href="javascript:void(0);">Integer</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Collection</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">column</a> <a href="javascript:void(0);">table</a><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="HTML 양식 요소" href="https://m.php.cn/ko/faq/1796600034.html">HTML 양식 요소</a></span><span>다음 기사：<a class="dBlack" title="HTML 양식 요소" href="https://m.php.cn/ko/faq/1796600036.html">HTML 양식 요소</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/348757.html" title="HTML 지식 요약" class="aBlack">HTML 지식 요약</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348804.html" title="HTML을 빨리 배우는 방법" class="aBlack">HTML을 빨리 배우는 방법</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348873.html" title="html xhtml xml의 차이점" class="aBlack">html xhtml xml의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348884.html" title="src와 href 속성의 차이점" class="aBlack">src와 href 속성의 차이점</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348902.html" title="HTML5 및 CSS 대체 사용 정보" class="aBlack">HTML5 및 CSS 대체 사용 정보</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>