web前端之HTML的大框架(body元素与frameset元素)

web前端之HTML的大框架

     body元素与frameset元素

对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head>标签对和<body>标签对,body元素定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。而我们想要在页面中显示出来的内容全部写在<body>标签对里。

例如:

<!DOCTYPE html>

<html>
  <head>
    <title></title>

    <meta charset="utf-8">
  </head>
  <body>

    <p>页面中能显示出来</p>

  </body>
</html>

但是还有另外一个大框架,就是<frameset>标签对,它被用来组织多个窗口(框架),不常用,估计也很少人知道的,不多说  上代码演示:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
  <frameset cols="25%,50%,25%">
    <frame  style="background-color: yellow ">
    <frame  style="background-color: green ">
    <frame  style="background-color: lightbl ">
  </frameset>
</html>

在其最简单的应用中,<frameset>标签对仅仅会规定在框架集中存在多少列或多少行,必须使用 cols 或 rows 属性。

代码中的cols表示的是所分的列,用相对宽度来表示的,第一列占整体宽度的25%,第二列占整体宽度的50%,第三列占整体宽度的25%,分别加上不同的背景色,看起来更明确。类似的也可以分成若干行rows 来划分整体的高度。如果所分的行或是列不能完全占据整体的宽度或是高度,就在最后加一个 * 来划分剩余的宽度或是高度。

<frameset>每个框架存有独立的文档,可以用src属性来调取,例如<frame src="a.html">就在一个框架中调取了 a.html文件。

需要注意的是 :不能与 <frameset></frameset> 标签一起使用 <body></body> 标签,它们是归属不同的框架架构。不过,如果需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!

时间: 2024-10-09 23:21:44

web前端之HTML的大框架(body元素与frameset元素)的相关文章

web前端Vue+Django&#160;rest&#160;framework&#160;框架&#160;生鲜电商项目实战视频教程 学习

web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 1.drf前期准备 1.django-rest-framework官方文档 https://www.django-rest-framework.org/ #直接百度找到的djangorestframework的官网是打不开的 2.安装依赖包 如图所示,django restframework的依赖模块,除了coreapi和django-guardian,已经在前面安装过了. 打开终端,执行安装命令

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端.Native客户端.Node.js. 大前端框架:React.Vue.js.Koa 跨终端技术:HTML 5.CSS 3.JavaScript 跨平台框架:React Native.Cordova 前端工程化:Grunt.Gulp.Webpack 前端预编译:Babel.Sass.Less 自动化测试:Jasmine.Mocha.Karma 一图在手,应有尽有! 更多信息参考:https://item.jd.com/12170351.h

web前端入门到实战:几种HTML标签伪元素绑定事件的方式

下面整理出几种简便方式实现 click 伪元素时进行事件处理,附上例子代码. HTML结构 首先 HTML 结构是这样的 <section> <span>按钮文字</span> </section> 实现方法 第一种 通过CSS3 的pointer-events 特性来实现. CSS 代码 <style> *{margin: 0; padding:0;} section{ border: 1px solid #abc; border-radius

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素

10个极客Web前端开发jquery资源大荟萃

1.基于TweenMax.js的网页幻灯片 今天给大家带来一款基于TweenMax.js的网页幻灯片.这款幻灯片以不规则的碎片百叶窗的形式切换.切换效果非常漂亮. 在线演示 源码下载 2.pagePiling.js - 创建漂亮的全屏滚动效果 全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果. 在线演示 源码下载 3.使用 CSS3 伪元素实现立体的照片堆叠效 CSS3 里引入的伪元素

Web前端开发——JS技术大梳理

什么是JS JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称 为javascript引擎,为浏览器的一部分,广泛用于客户端的脚本语言.JavaScript 是一种具有面向对象能力的.解 释型的程序设计语言.更具体一点,它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 因为他不需要 在一个语言环境下运行,而只需要支持它的浏览器即可.它的主要目的是,验证发往服务器端的数据.增加 Web互 动.加强用户体验度等. 下面对js从整体的角

web前端相关拓展库,框架集合

一.HTML5框架 1.Bootstrap 二.CSS3框架 1.sass 2.less 三.JavaScript拓展库 1.jQuery 2.Angular 3.react.js

10款web前端超实用jQuery插件大合集

1.HTML5截图功能 可拖拽图片 截图在我们平常电脑应用中非常的广泛,包括开发者和一般的使用用户.今天介绍的这款HTML5截图应用可以帮助你在上传头像前截取自己的头像,你只需要拖拽移动图片即可选中要截取的部分,HTML5会自动将选取的图片自动生成一张新的图片来保存,从而完成截图的功能.另外,该HTML5截图应用还支持按住shift键实现图片同比例缩放. 在线演示 源码下载 2.纯CSS3动画按钮效果 5种漂亮样式 这次我们要来分享一款很不错的CSS3按钮动画,这款CSS3按钮一共有5种动画方式

Web前端学习笔记:Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo