`
izuoyan
  • 浏览: 8966893 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

HTML系列之七-框架

阅读更多
HTML框架


使用框架,可以在一个浏览器窗口中显示不止一个页面。



示例

垂直分栏:



这个例子说明了如何创建一个有三个页面的垂直分栏。


水平分栏:



这个例子说明了如何创建一个有三个页面的水平分栏。


如何使用<noframes>标签:



这个例子说明了如何使用<noframes>标签。


在这个页面的底部,还有更多例子。



框架

使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面,它们是相互独立的。

使用框架的不利因素有:

  • 网站开发者需要关心更多HTML文档的情况。
  • 打印整个页面变得困难。


frameset标签

  • <frameset>标签定义了如何将窗口拆分成框架。
  • 每个frameset标签定义了一组行和列。
  • 行/列的值指明了每个行/列在屏幕上所占的大小。


frame标签

  • <frame>标签定义了每个框架中放入什么文件。
下面这个例子中,有一个两列的分栏。第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。

<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>



基本注意点——有用的技巧

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。如果不想让用户改变大小,可以在<frame>标签中加入:noresize="noresize"。

给不支持框架的浏览器写上<noframes>标签。



更多示例:

混合框架:


这个例子说明了怎样把三个页面以行列混合的方式放在框架中。


使用了noresize="noresize"的框架:


这个例子说明了noresize属性。这个框架是不可改变大小的,把鼠标移动到框架边界上,你会发现无法调整大小。


导航框架:


这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接,它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接,链接的代码如下:

<a href ="frame_a.htm" target ="showframe">Frame a</a>
<a href ="frame_b.htm" target ="showframe">Frame b</a>
<a href ="frame_c.htm" target ="showframe">Frame c</a>

第二个框架将显示链接到的页面。


内联框架:


这个例子说明了如何创建一个内联框架(包含在HTML页面里的框架)。


在框架内跳转到指定章节:


这个例子显示了两个框架页。其中一个的源是一个文件的指定章节,该章节在文件“frame_section.htm”中使用代码<a name="C10">指定。


使用导航框架跳转到指定章节:


这个例子显示了两个框架页。左边的导航框架包含了一系列以第二个框架为目标的链接(“frame_linksection.htm”),第二个框架显示链接文件(“frame_section.htm”)。导航框架中的一个链接指向目标文件中的指定章节。文件“frame_link”中的HTML代码是像这样的:

<a href ="frame_section" target ="showframe">没有命名锚的链接</a>
<a href ="frame_section#C10" target ="showframe">有命名锚的链接</a>


分享到:
评论

相关推荐

    HTML5系列教程-HTML5框架、背景和实体

    WEB开发系列教程,HTML5是新一代开发语言,在WEB项目开发,移动项目开发中必不可少的标记语言,本教程是你进行HTML5学习完整、系统的教材。

    ASP.NET MVC框架开发系列课程(20):HTML Helper的使用与扩展

    ASP.NET MVC框架开发系列课程(20):HTML Helper的使用与扩展

    开源贡献者最多的.net开源web框架ServiceStack.zip

     ServiceStack 是一系列事物的综合体:包含高性能 Razor Engine 的 Web 应用框架支持例如 HTML,XML,JSON,SOAP 等多种格式的基于消息的 Web 服务框架包含内建 IOC 的容器若干内建库文件,诸如:Text serializer...

    模块化的 CSS 框架

    YAML 提供一系列完整的匹配构建模块来创建复杂的网页界面。网格,导航,表格,字体排版模块和所有附件都能进行无缝的协同合作。所有的布局模块都能兼容 HTML5 和 CSS 3,还很容易兼容其他最新的 web 开发技术。 ...

    完美ui前台框架Qui v3.3试用版

    她是所有前端框架中组件库最全的框架之一。并且提供非常详尽的使用文档,目前包含642个章节,涉及框架使用中可能会遇到的方方面面。 QUI 框架是目前所有同类产品中最漂亮的前端框架,拥有上百套美观的、风格各异的...

    Cocos2d-html5-v2.0

    一款基于HTML5的Web开发和HTML5移动开发的著名框架,其库和内容相当的丰富。是由object-C移植而来的JavaScript版本。 主要功能:  流程控制(Flow control):非常容易地管理不同场景(scenes)之间的流程控制   ...

    Web组件构建框架Polymer.zip

    因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不...

    JSValidation-----强大而灵活的表单客户端验证框架

    在目前的测试环境下,支持IE5及以上版本,Mozilla系列和支持DOM2模型的其他浏览器。你不用再考虑在多浏览器下如何兼容,JSValidation帮你做到了这些。 &lt;br&gt;2. JSValidation能做什么,不能做什么? 如上所述,...

    前端html5框架ZUI1.2版

    前端html5框架ZUI发布1.2正式版本了! 此版本增加了很多新特性,同时修复问题,文档也得到大幅完善。 欢迎大家使用并反馈问题, 更新明细: 1、新增日历视图组件,方便实现日程的展示 2、新增数据表格视图组件,更...

    轻量级MVVM框架Vue.js快速上手视频教程下载

    Vue.js是一套构建用户界面的...聊天室程序则体现了Vue和HTML5技术的整合,而OLTP管理界面应用在很多系统之内,是很常用的案例,里面包括CRUD的操作、数据分页、Ajax等等。通过这些案例,最终强化学生驾驭Vue.js的水平。

    Android显示框架详细分析

    神作。。从高通7系列硬件架构,Android Display SW架构,到Android显示系统的C/S架构,SurfaceFlinger系统服务等,详细分析了Android的显示机制。

    web渗透系列教学下载共64份.zip

    web渗透系列教学下载共64份: 内容如下; web渗透--1--web安全原则.pdf web渗透--10--不安全的HTTP方法.pdf web渗透--11--登录认证安全测试.pdf web渗透--12--浏览器缓存攻击测试.pdf web渗透--13--目录遍历文件包含...

    HTML 学习总结2 框架 表单

    这是HTML学习总结系列的第二篇,第一篇在这里: HTML 学习总结1入门 基本概念、格式 文字标签 图片标签 链接标签 表格标签 注释 这次的学习内容相较第一次分类少,但是比较杂。 框架集标签 框架标签是将网页设置成...

    ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)之前的代码

    (1)ASP.NET MVC+EF框架+EasyUI实现权限管理系列(12)-实现用户异步登录和T4模板:...(2)ASP.NET MVC+EF框架+EasyUI实现权限管理系列之开篇:http://www.cnblogs.com/hanyinglong/archive/2013/03/22/2976478.html

    dwz富客户端框架文档

    DWZ系列开源项目: dwz富客户端框架 - jUI dwz4j(Java Web)快速开发框架 + jUI整合应用 J-HI(Java Web)快速开发平台 + jUI整合应用(Eclipse插件生成项目代码) ThinkPHP2.1 + jUI整合应用 YII + jUI整合应用 常见...

    HTML5 移动端 UI框架 Mobile Angular UI.zip

    Mobile Angular UI 是个 HTML5 移动端 UI 框架,允许使用 Angular JS 和 Bootstrap 3 来开发移动端应用。 Mobile Angular UI 在 Bootstrap 3 的基础上新增了: switches, overlays, sidebars, scrollable areas, ...

    flask-bulma-template:后端框架Flask的模板以及前端CSS框架Bulma

    烧瓶和布尔玛模板此代码是后端框架Flask和前端框架Bulma的模板。 它基于YouTuber Corey Schafer的Flask系列。 它还不遵循应用程序工厂模式; 我认为这样更好。 该模板组织良好,分为文件夹和文件,其中包含特定用途...

    郜振宇php职业培训系列讲座006:玩转html中的框架应用.rar

    框架在实战中并不常用,但又很有用。因此用多讲来详解了这一技术点。

    html5-exercises:一系列练习,将设计转换为HTML5页面以及Angular和ReactJS等框架中的组件

    html5-练习 一系列练习,将设计转换为HTML5页面以及Angular和ReactJS等框架中的组件

Global site tag (gtag.js) - Google Analytics