一、内嵌标签

<!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. java File获取字节流

    /*文件64位编码*/ public static void main(String[] args) { byte[] fileByte = toByteArray(newFile); String ...

  2. Scrat

    前端工程化集成:Scrat UC团队在百度FIS基础上二次开发的模块化开发框架,可以与vue配合使用

  3. varnish流程图

    varnish流程图

  4. 【LuoguP3747】[六省联考2017] 相逢是问候

    题目链接 题意 给定一个长度为 n 的序列 a , 给定一个正整数 c 每次修改操作是把一段区间内的数 \(x_i\) 修改为 \(c^{x_i}\) 询问区间和模 p 的结果 Sol 修改是把一个数 ...

  5. Python---进阶---捕获异常

    一.编写一个计算减法的方法,当第一个数小于第二个数时,抛出“被减数不能小于减数”的异常 ------------------------------------------------- def ji ...

  6. ubuntu 14.04 安装openjdk 8

    最近准备在ubuntu14.04上安装Oracle,但是需要提前安装jdk,发现问题挺多的,后面看到了如下的操作步骤,成功安装,特意记录下来. 致谢:https://www.yangshenglian ...

  7. mybatis动态update语句

  8. 将HTML5封装成android应用APK文件若干方法（转）

          HTML5拥有很多让人期待已久的新特性.HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动设备上使用HTML5技术.随着HTML5跨平台支持的不断增强和智能手机的 ...

  9. Linux内核调试方法总结之Kprobes

    Kprobes [用途][参考kernel/Documentation/kprobes.txt帮助文档] Kprobes是一个轻量级内核调试工具,同时又是其他一些更高级的内核调试工具(如perf和sy ...

  10. AOF — Redis 设计与实现

    w AOF — Redis 设计与实现http://redisbook.readthedocs.io/en/latest/internal/aof.html