一、内嵌标签

<!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. poj3494Largest Submatrix of All 1’s(最大全1子矩阵)

    题目链接:http://poj.org/problem?id=3494 题目大意: 出1个M*N的矩阵M1,里面的元素只有0或1,找出M1的一个子矩阵M2,M2中的元素只有1,并且M2的面积是最大的. ...

  2. Manacher || Luogu P3805【模板】manacher算法

    题面:[模板]manacher算法 代码: #include<cstdio> #include<cstring> #include<iostream> #defin ...

  3. 微信公众号接口类(PHP版本)

    [项目需求] 通过微信提供的接口,实现微信公众号与后端的应用程序数据交互.消息响应等功能. [项目疑难点] 理解接口工作方式,统一接口API,响应速度.安全性等   [代码举例]   WeixinAp ...

  4. web页面调用app的方法

    use_app_goto_page: (skip_type, skip_target) => { // Android App if (/android/i.test(navigator.use ...

  5. 《扩展和嵌入python解释器》1.4 模块方法表和初始化函数

    <扩展和嵌入python解释器>1.4 模块方法表和初始化函数   1.4 模块方法表和初始化函数 下面,我演示如何从Python程序调用spam_system().首先,我们需要在’方法 ...

  6. Flask之 请求，应用 上下文源码解析

    什么是上下文? 每一段程序都有很多外部变量.只有像Add这种简单的函数才是没有外部变量的.一旦你的一段程序有了外部变量,这段程序就不完整,不能独立运行.你为了使他们运行,就要给所有的外部变量一个一个写 ...

  7. day02记

    一.Tomcat搭建 1.service和controller分别搭建独立的Tomcat且port不一致 2.部署项目选择带有exploded的 3.运行时应先启动service再启动controll ...

  8. luogu P1147 连续自然数和 x

    P1147 连续自然数和 题目描述 对一个给定的自然数M,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为M. 例子:1998+1999+2000+2001+2002 = 10000,所以 ...

  9. UVA 540 Team Queue（模拟+队列）

    题目代号:UVA 540 题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page ...

  10. Android Bluetooth 文件接收路径修改方法

    修改文件: packages/apps/Bluetooth/src/com/android/bluetooth/opp/BluetoothOppReceiveFileInfo.java 相关代码片段: ...