一、内嵌标签

<!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. vector auto

    #include <iostream>#include <vector>#include <string>using namespace std;using std ...

  2. 安装suds，提示No module named 'client'

    最近在研究webservice,但是在线安装suds的时候提示No module named 'client' 提示没有client模块,提示这个错误主要还是因为没有安装client模块 在线安装cl ...

  3. java Byte源码分析

    源码: public static int toUnsignedInt(byte x) { return ((int) x) & 0xff; } 原理: -128(byte) 原码:10000 ...

  4. 搭建DHCP服务实现动态分配IP地址-NTP网络时间同步

    本节所讲内容: DHCP服务器工作原理 使用DHCP为局域网中的机器分配IP地址 使用DHCP为服务器分配固定IP地址 ntpdate加计划任务同步服务器时间   实验环境: 服务端:xuegod63 ...

  5. 初始化一个React项目

    1.create-react-app是一个通过npm发布的安装包,在确认Node.js和npm安装好之后,输入下面命令创建. 2.安装结束后,使用下面命令创建应用目录. 3.打开目录 4.运行项目 5 ...

  6. 【NOIP2013模拟】导弹防御塔

    题目 Freda的城堡-- "Freda,城堡外发现了一些入侵者!" "喵...刚刚探究完了城堡建设的方案数,我要歇一会儿嘛lala~" "可是入侵者 ...

  7. 数据结构--排序--直接插入（python）

    ... def insertSort(nums): length = len(nums) for i in range(1,length): x = nums[i] for j in range(i, ...

  8. springboot自定义异常数据

    一.源码分析 自定义异常数据之前我们先看看一下源码             上述代码意思是如果你没有提供就使用springboot提供的类     这是springboot提供的异常属性类,我们想要自 ...

  9. RN组件的生命周期

    来自:http://www.devio.org/tags/#React%20Native

  10. minilzo使用流程

    /* testmini.c -- very simple test program for the miniLZO library This file is part of the LZO real- ...