H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列,rowS/COLS规定了每行或者每列占据屏幕的面积 noresize:固定框架大小 cols:行比例 rows:列比例 iframe:内联框架

代码实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
</head>
   <frameset cols="20%,50%,30%">
       <frame src="framea.html">
       <frame src="frameb.html">
       <frame src="framec.html">
   </frameset>

</html>

!!!!!效果图

!!!!!!上面的两个标签都过时了,下面介绍内联标签iframe

使用了index,和framec,frameb,以及framea,层层以iframe的形式来嵌套,并且演示了a标签的target属性,parent,表示在上一个嵌套父控件中打开以及top表示在最顶部的控件中打开

index代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
</head>

    index
    <iframe src="framec.html" width="800px" height="800px"></iframe>

</html>

framec代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#ffd700">
    framec
    <br/>
    <iframe src="frameb.html" width="600px" height="600px" ></iframe>
</body>
</html>

frameb代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="black">
    frameB
    <br/>
    <iframe src="framea.html" width="400px" height="400px"></iframe>
</body>
</html>

framea代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#ff1493">
    frameA
    <a href="http://wwww.baidu.com" target="_self">百度一下</a>
</body>
</html>

self效果图

parent效果图

H5学习之旅-H5的框架(13)的更多相关文章

  1. H5学习之旅-H5的基本标签(2)

    H5的标签和html的标签没什么区别,主要介绍H5的基本标签 1.基础标签header和body,header的<title>元素主要是显示在标签页面里面,以及设置使用的语言和编码格式.b ...

  2. H5学习之旅-H5的新特性(1)

    随着H5的发展,网页开发呈现了跨平台的特性,目前H5是兼容各大平台的,这也为一些其他的技术的跨平台开发提供了基础,所以我预测后H5会成为很重要的开发语言 新特性介绍 1.用于回话的canvas标签 2 ...

  3. H5学习之旅-H5列表(8)

    列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...

  4. H5 学习之旅-H5表格(7)

    表格语法 table:简历表格 captian:表格标题 th:表格行表头 tr:表格行 td:单元格 thead:表格页眉 tfoot:表格页脚 tbody:表格主体 col:列属性 !!!代码实例 ...

  5. H5学习之旅-H5的超链接以及图片链接(6)

    链接内容 1.文本链接 2.图片链接 属性 href:指向另一个文档的链接 name:文档内部的链接 img标签属性 alt:替换文本属性 width:宽 height:高 代码实例 <!DOC ...

  6. H5学习之旅-H5的样式(5)

    样式的引入方式 外部样式表 link rel = "stylesheet" type = "text/css" href = "mystyle.css ...

  7. H5学习之旅-H5的格式化(4)

    H5的格式设置: b代表是粗体 i斜体 big 字体变大 small变小 em强调 strong 加强和变粗差不多 sub 定义下标字 sup 定义上标字 ins 插入字 del 删除字 代码实例 & ...

  8. H5学习之旅-H5与Php交互(12)

    1.首先介绍PHP开发环境的搭建 ,在Google搜apachefriends,会有xampp的下载链接,这个工具集成了apache的很多服务 2.搭建php的编辑环境,选取eclipse安装php插 ...

  9. H5学习之旅-H5的表单(11)

    H5的表单元素 form:表单 input:输入域,type属性可以设置text,password,button等不同的属性 textarea:文本域 lable:控制标签 fieldset:定义域 ...

随机推荐

  1. 基于AOP的iOS用户操作引导框架设计

    背景 有一种现象,App设计者觉得理所当然的操作方式,却常常被用户所忽视,为了防止这种现象发生,就要为App设计一个帮助,一种低成本的方案是将帮助文档写成HTML然后展示给用户,这样的方式常常不能带来 ...

  2. Android自定义异常类

    当一个项目中,异常可能出现地方非常多的时候就需要考虑封装处理异常信息.本篇博客就对自定义异常做一个封装,模拟实际开发中的异常处理. 新建一个基类异常HException: public class H ...

  3. UIKit视图动画的微扩展

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 好久没写blog了,还不快快写来- ;] 我们知道在UIKit ...

  4. android 图片网络下载github开源框架之Universal-Image-Loader

    最近在做妙趣剪纸项目,剪纸应用项目链接.发扬传统文化,大家多多关注. 需要自己搭建服务器,我用的是新浪sae,简直秒杀京东云几条街,把图片放在网上下载,但是图片经常下载要遇到很多问题,包括oom等.所 ...

  5. BeanUtils制作自定义的转换器

    一般来说,BeanUtils自带的Converter基本上可以满足我们在开发过程中的使用了,然而很多时候我们还是需要自定义一些转换器. MyBean.java package beanutils; i ...

  6. Windows2008 R2上完全卸载Oracle操作步骤

    Windows2008 R2上完全卸载Oracle操作步骤 1.关闭Oracle所有的服务,按[win+R]运行[services.msc]找到所有Oracle开头的服务,点击停止. 2.使用Orac ...

  7. redhat7 上安装dummynet

    更多请访问 http://www.webpersonaldeveloper.cn 摘要: 在redhat 上部署dummynet 需要将ipfw 编译为内核模块,而ipfw需要调用linux kern ...

  8. 服务端技术进阶(八)GitHub入门篇

    服务端技术进阶(八)GitHub入门篇 前言 在投递简历的过程中,发现有的公司会要求填写自己的GitHub地址,而自己却还没有GitHub帐号,准确点说是自己还不太会使用GitHub.(貌似开源社区中 ...

  9. Android开发学习之路--UI之基本布局

    上一篇文章中主要介绍了ui的控件,这里就学习下布局吧.android的基本布局在layout下主要如图: 从上图可以看出有FrameLayout(单帧布局),LinearLayout(线性布局),Ta ...

  10. J2EE进阶(六)SSH框架工作流程项目整合实例讲解

    J2EE进阶(六)SSH框架工作流程项目整合实例讲解 请求流程 经过实际项目的进行,结合三大框架各自的运行机理可分析得出SSH整合框架的大致工作流程. 首先查看一下客户端的请求信息: 对于一个Web项 ...