搜索
首页web前端html教程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来实现的。









声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么?HTML中起始标签的示例是什么?Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?如何利用CSS的Flexbox布局实现菜单中虚线分割效果的居中对齐?Apr 05, 2025 pm 01:24 PM

如何设计菜单中的虚线分割效果?在设计菜单时,菜名和价格的左右对齐通常不难实现,但中间的虚线或点如何...

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具