Chap 09 HTML使用框架结构_html/css_WEB-ITnose
9.1 框架的基本概念 框架是浏览器窗口中的一个区域,它可以显示与浏览器窗口的其余部分中所显示的内容无关的HTML文档。框架集是HTML文件,它定义一组框架的布局和属性,包括框架的数目、框架的大小和位置,以及在每个框架中初始显示页面的URL。框架集文件本身不包括要在浏览器中显示的HTML内容,但noframes部分除外。框架集文件只是向浏览器提供应如何显示一组框架,以及在这些框架中应显示哪些文档的有关信息。 框架结构是将两个或两个以上的网页组合起来,在同一个窗口中打开的网页结构。框架把一个网页分成几个单独的区域, 每个区域为一个单独的HTML文件。显示时,每个区域像一个单独的网页,可以有自己的滚动条、背景、标题等。 框架最常见的用途就是导航。一组框架通常包括含有一个导航条的框架和另一个显示主要内容的框架。 9.2 设置框架集的属性frameset框架页面的结构是在框架集中设置的,可以根据框架的分割方式分为水平分割窗口、垂直分割窗口和嵌套分割窗口。9.2.1 水平分割窗口rows水平分割窗口是将页面沿水平方向切割,也就是将页面分成上下排列的多个窗口。语法:<frameset rows="框架窗口的高度,框架窗口的高度,……"><frame ><frame >……</frameset> 说明:rows中可以取多个值,它由逗号分割的像素值或百分比组成。9.2.2 垂直分割窗口colscols属性指定了垂直框架的布局方法,它将页面沿垂直方向分割成多个窗口,由一组用逗号分割的像素值、百分比值或相对度量值组成列表。语法:<frameset cols="框架窗口的宽度,框架窗口的宽度,……"><frame ><frame >……</frameset> 9.2.3 嵌套分割窗口嵌套分割窗口就是在一个页面中,既有水平分割的框架,又有垂直分割的框架。语法:<frameset rows="框架窗口的高度,框架窗口的高度,……"><frame ><frameset cols="框架窗口的宽度,框架窗口的宽度,……"><frame >……</frameset>9.2.4 框架的边框frameborder在默认情况下,浏览器总是给每一个框架结构上加上一条有明显宽度的边框。通过frameborder可以控制边框的显示或隐藏。语法:<frameset frameborder="是否显示">说明:frameborder的取值只能为0、1或者yes、no。如果取值为0或no,那么边框将会隐藏;如果取值为1或yes,边框将会显示。在frameset中设置将会对整个框架集有效,在frame中设置则只对当前框架有效。9.2.5 框架的边框宽度framespacing在默认情况下框架的边框宽度是1,通过framespacing可以调整边框的宽度。语法:<frameset framespacing="边框宽度">说明:边框宽度就是在页面中各个边框之间的线条宽度,以像素为单位。边框宽度只能对框架集使用,对单个框架无效。9.2.6 框架的边框颜色bordercolor语法:<frameset bordercolor="边框颜色">9.3 设置窗口属性frame<frame>用来定义每一个单独的框架页面,框架页面的属性设置都在<frame>标记里进行。9.3.1 页面源文件src框架结构中的每一个页面都是一个单独的文件,这些文件都是通过src来指定一个文件地址。语法:<frame src="页面源文件地址">说明:页面的源文件可以是一个网页文件,也可以是一张图片,地址类型可以是相对地址、绝对地址和锚点地址。9.3.2 页面名称name页面名称是为了便于页面的查找和链接所提供的一个属性。例如一个左右框架结构,左侧为链接,右侧为正文,当单机左侧链接以后需要在右侧框架中打开正文,就需要用到<frame>的name属性。语法:<frame src="页面源文件地址" name="页面名称">说明:框架的页面名称中不允许包含特殊字符、连字符、空格等,必须是单个的单词或者字母组合。9.3.3 禁止调整窗口的尺寸nosize每一个框架都有其固定的宽度和高度,可以通过拖动边框进行调整。不过有时候需要框架的宽度和高度保持不变,禁止浏览器在访问框架的时候对弈改变框架尺寸,此时需使用moresize属性。语法:<frame src="页面源文件地址" noresize>9.3.4 边框与页面内容的水平间距marginwidth通过marginwidth可以设置框架边框与页面内容水平间距。语法:<frame src="页面源文件地址" marginwidth="水平间距">说明:水平间距用于设置页面的左右边缘与框架边框的距离。9.3.5 边框与页面内容的垂直边距marginheight语法:<frame src="页面源文件地址" marginheight="垂直边距">说明:垂直边距用来设置页面的上、下边缘与框架边框的距离。9.3.6 控制框架滚动条显示scrolling一个框架中的页面内容常常会超出整个框架的尺寸范围,在默认情况下,浏览器会在右侧或者下方显示滚动条,以便浏览者拖动查看全部内容。但有时希望不显示滚动条,可以通过scrolling属性自由控制滚动条的显示。语法:<frame src="页面源文件地址" scrolling="是否显示滚动条">说明: scrolling取值包括yes、no、或auto。其中,yes表示一直显示滚动条,no表示始终不显示滚动条,auto是系统默认值,根据具体情况进行调整,当页面长度超出浏览器窗口的范围时就会自动显示滚动条。9.3.7 不支持框架标记moframes(适用于不支持框架结构的浏览器或者浏览器的框架显示功能被用户关闭)使用noframes来设置替换内容,告诉浏览器用户无法打开框架页面。<noframes>替换显示内容(对不起,您的浏览器不支持框架效果)</noframes>9.4 浮动框架iframe浮动框架是一种较为特殊的框架,它是在浏览器窗口中嵌套的子窗口,整个页面并不一定是框架页面,但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度,并且可以放置在一个网页中的任何位置,浮动框架的使用极大地扩展了框架页面的应用范围。9.4.1 页面源文件src语法:<iframe src="浮动框架的源文件"></iframe>9.4.2 浮动框架的宽和高width、height<frameset>生成的框架结构是依赖上级空间尺寸的,它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。语法:<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高">9.4.3 浮动框架iframe的对齐方式<iframe src="浮动框架的源文件" align="对齐方式"></iframe>9.4.4 浮动框架滚动条显示属性scrolling浮动框架的scrolling属性有3种情况:yes:始终显示no:始终不显示auto:默认值,整个框架在页面中左对齐 滚动条根据需要显示语法:<iframe src="浮动框架的源文件" scrolling="是否显示滚动条"></iframe>9.5.1 普通框架结构的链接普通的框架结构之间通过target互相链接起来。一般情况下,一个页面中会有一个框架窗口作为导航页面,其中添加了对另一个框架内容的链接设置,而这些链接则是通过target来实现的。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...

GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
