一、内嵌标签

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <!--在当前网页嵌入另一个网页，达到不同网页资源之间不相互干扰，并能在同一个页面进行显示

            iframe  多用于网页播放器如爱奇艺

            src:要显示网页的路径 可以是本地也可以是网络资源

            width和height 要显示网页的宽和高

            name：设置内嵌区域的名字 结合超链接

        -->

        <title>08 内嵌标签</title>

    </head>

    <body>

        <!--<iframe src="07 简历.html" width="50%" height="400px"></iframe>-->

        <!--_if是自己定义的，表示把加载一个边框当用户点击 “百度一下”后把百度首页加载到边框中-->

        <a href="http://www.baidu.com" target="_if"> 百度一下</a>

        <a href="http://www.jd.com" target="_jd"> 京东年货节</a> <br />

        <iframe src="" width="48%" height="300px" name="_if"></iframe>

        <iframe src="" width="48%" height="300px" name="_jd"></iframe>

    </body>

</html>

二、框架标签

<html>

    <head>

        <meta charset="UTF-8">

        <!--框架是把当前网页分成不同的块(是固定的)，每块独立加载显示不同的内容.删除body标签 比如邮箱

            内嵌是把在当前网页嵌入不同的网页

        -->

        <title>09 框架标签</title>

    </head>

    <frameset  rows="10%,*,20%"> <!--按行切3块 比值为 10% *(表示剩余的70%) 20% 上中下3部分 1块就是1个frame-->

        <frame src="../frameset/top.html"/> <!--写路径时前边记得加上...-->

        <!--中间的部分按左右切分-->

        <frameset cols="15%,*">

            <frame src="../frameset/left.html"/>

            <frame src="../frameset/righ.html" name="_right"/>

        </frameset>

        <frame src="../frameset/buttom.html"/>

    </frameset>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>登录页面</title>

    </head>

    <body>

        <h3>欢迎访问B507主页</h3>

        <hr />

        <a href="../html文件/09 框架标签.html" > 点我进入主页</a>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>顶端网页</title>

    </head>

    <body>

        欢迎回到邮箱 <!--target="_top" 这里指退出最初的网页 这里指登录界面 login.html-->

        <a href="../frameset/login.html" target="_top"> 点我退出</a>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 左边网页</title>

    </head>

    <body>

        收件箱<br />

        发件箱<br />

        <ul>

            <li> <a href="http://www.baidu.com" target="_right"> 百度一下</a></li>

            <li> <a href="http://www.jd.com" target="_right"> 京东</a></li>

        </ul>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 右边网页</title>

    </head>

    <body>

        <p>右边网页</p>

    </body>

</html>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 底部网页</title>

    </head>

    <body>

        版权所有：2019-2020; ID长安忆

    </body>

</html>

[19/05/17-星期五] HTML_body标签(内嵌标签)和框架标签的更多相关文章

  1. p标签内不能嵌套块级标签

    今天突然发现一个问题,那就是p标签内不能嵌套块级标签 例如: <p><p></p></p> 会被浏览器解析成 我又把 div 嵌套在里面,发现还是这样 ...

  2. 【实践】关于p 标签内嵌 p标签的bug

    项目中遇到了一点小问题: 是这样的,在输入框包裹元素 p标签中想内嵌一个p 标签用作显示提示字符,谁知发生了一下一幕: 页面结构: <p class="modify-info-wrap ...

  3. div style标签内嵌CSS样式

    我们在DIV标签内.SPAN标签内.p标签等html标签内使用style属性直接设置div的样式. 一.在<div>标签内使用style设置css样式   -   TOP 1.实例html ...

  4. html的<a>标签，表单，内嵌框架

      一.  <a>标签 0. 用图片当链接,就是把图片当成链接文字即可 <a href="http://www.baidu.com/" title="跳 ...

  5. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. [Tool] 透过PowerPoint Online在部落格文章里内嵌简报

    [Tool] 透过PowerPoint Online在部落格文章里内嵌简报 前言 讲课的时候,用PowerPoint做简报,好像已经成了讲课的惯例.而在课后,将课堂简报整理成部落格的文章,如果单纯是在 ...

  7. HTML5 在<a>标签内放置块级元素

    原文地址:HTML5: Wrap Block-Level Elements with A's 原文日期: 2010年06月26日 翻译日期: 2013年08月22日 对比起XHTML来说,HTML5通 ...

  8. pre标签内文本自动换行

    pre标签内文本自动换行 给pre标签添加一个css样式 pre { white-space: pre-wrap; /* css-3 */ white-space: -moz-pre-wrap; /* ...

  9. HTML框架标签

    与HTML框架有关的标签主要有三种: <frameset>框架结构标签 <frame>框架标签 <iframe>内联框架标签 一. 先来说第一种框架结构标签 < ...

随机推荐

  1. N^2取N

    序列合并 有两个长度都是N的序列A和B,在A和B中各取一个数相加可以得到N^2个和,求这N^2个和中最小的N个. 先把A B排序 然后pushA[1]+B[i](1<=i<=n)每次取出一 ...

  2. expect自动远程拷贝脚本

    expect自动远程拷贝脚本,利用rsync命令,脚本内容如下: #!/usr/bin/expect -- proc Usage_Exit {self} { puts "" put ...

  3. 【SaltStack官方版】—— states教程, part 4 - states 说明

    STATES TUTORIAL, PART 4 本教程建立在第1部分.第2部分.第3部分涵盖的主题上.建议您从此开始.这章教程我们将讨论更多 sls 文件的扩展模板和配置技巧. This part o ...

  4. sqlserver数据库脱机和分离的区别

    脱机和分离的区别: 分离和脱机都可以使数据库不能再被使用,但是分离后需要附加才能使用,而脱机后只需联机就可以用了. 附加数据库报错: 无法打开物理文件 XXX.mdf".操作系统错误 5:& ...

  5. NOI 2727:仙岛求药 x

    总时间限制:  1000ms 内存限制:  65536kB 描述 少年李逍遥的婶婶病了,王小虎介绍他去一趟仙灵岛,向仙女姐姐要仙丹救婶婶.叛逆但孝顺的李逍遥闯进了仙灵岛,克服了千险万难来到岛的中心,发 ...

  6. Histograms of Sparse Codes for Object Detection用于目标检测的稀疏码直方图

    AbstractObject detection has seen huge progress in recent years, much thanks to the heavily-engineer ...

  7. SQL GROUP BY两个列

    首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素:   (1) 出现在select后面的字段 要 ...

  8. 在命令行运行java代码

    因为尝试将运行结果通过管道命令保存,所以尝试在命令行(不借助lde来运行java代码,结果折腾了半天) 仿照的是eclipse创建文件目录的方式 最终解决方法是: #/bin/bash root_di ...

  9. ionic框架+angular开发项目

    ionic框架组件地址:https://ionicframework.com/docs/api/tab ionic文档地址:https://ionicframework.com/docs/angula ...

  10. Java数据结构与算法(2):栈

    栈是一种线性表,特点在于它只能在一个位置上进行插入和删除,该位置是表的末端,叫做栈的顶(top).因此栈是后进先出的(FIFO).栈的基本操作有push.peek.pop. 栈的示意图 进栈和出栈都只 ...