masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > H5学习之旅-H5的框架（13）

H5学习之旅-H5的框架（13）

黄舟
Lepaskan： 2017-02-17 14:43:25
asal
1687 orang telah melayarinya

H5框架语法介绍 ：frame：框架对于页面的设计有很大的作用 frameSet：框架集标签定义如何将窗口分割为框架 ，每一个frameset定义一些列行或者列，rowS/COLS规定了每行或者每列占据屏幕的面积 noresize：固定框架大小 cols：行比例 rows：列比例 iframe：内联框架

代码实例：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title></head>
   <frameset cols="20%,50%,30%">
       <frame src="framea.html">
       <frame src="frameb.html">
       <frame src="framec.html">
   </frameset></html>
Salin selepas log masuk
Salin selepas log masuk

！！！！！效果图

这里写图片描述

！！！！！！上面的两个标签都过时了，下面介绍内联标签iframe

使用了index，和framec，frameb，以及framea，层层以iframe的形式来嵌套，并且演示了a标签的target属性，parent，表示在上一个嵌套父控件中打开以及top表示在最顶部的控件中打开

index代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title></head>

    index    <iframe src="framec.html" width="800px" height="800px"></iframe></html>
Salin selepas log masuk
Salin selepas log masuk

framec代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="#ffd700">
    framec    <br/>
    <iframe src="frameb.html" width="600px" height="600px" ></iframe></body></html>
Salin selepas log masuk
Salin selepas log masuk

frameb代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="black">
    frameB    <br/>
    <iframe src="framea.html" width="400px" height="400px"></iframe></body></html>
Salin selepas log masuk
Salin selepas log masuk

framea代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="#ff1493">
    frameA    <a href="http://wwww.baidu.com" target="_self">百度一下</a></body></html>
Salin selepas log masuk
Salin selepas log masuk

self效果图

这里写图片描述

parent效果图

这里写图片描述

H5框架语法介绍 ：frame：框架对于页面的设计有很大的作用 frameSet：框架集标签定义如何将窗口分割为框架 ，每一个frameset定义一些列行或者列，rowS/COLS规定了每行或者每列占据屏幕的面积 noresize：固定框架大小 cols：行比例 rows：列比例 iframe：内联框架

代码实例：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title></head>
   <frameset cols="20%,50%,30%">
       <frame src="framea.html">
       <frame src="frameb.html">
       <frame src="framec.html">
   </frameset></html>
Salin selepas log masuk
Salin selepas log masuk

！！！！！效果图

这里写图片描述

！！！！！！上面的两个标签都过时了，下面介绍内联标签iframe

使用了index，和framec，frameb，以及framea，层层以iframe的形式来嵌套，并且演示了a标签的target属性，parent，表示在上一个嵌套父控件中打开以及top表示在最顶部的控件中打开

index代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>H5表格提交</title></head>

    index    <iframe src="framec.html" width="800px" height="800px"></iframe></html>
Salin selepas log masuk
Salin selepas log masuk

framec代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="#ffd700">
    framec    <br/>
    <iframe src="frameb.html" width="600px" height="600px" ></iframe></body></html>
Salin selepas log masuk
Salin selepas log masuk

frameb代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="black">
    frameB    <br/>
    <iframe src="framea.html" width="400px" height="400px"></iframe></body></html>
Salin selepas log masuk
Salin selepas log masuk

framea代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title></title></head><body bgcolor="#ff1493">
    frameA    <a href="http://wwww.baidu.com" target="_self">百度一下</a></body></html>
Salin selepas log masuk
Salin selepas log masuk

self效果图

这里写图片描述

parent效果图

这里写图片描述

 以上就是H5学习之旅-H5的框架（13）的内容，更多相关内容请关注PHP中文网（www.php.cn）！


Label berkaitan：
H5，学习之旅，框架
sumber：php.cn
Artikel sebelumnya：H5学习之旅-H5与Php交互（12） Artikel seterusnya：H5的学习之旅-H5的实体（14）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2052
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2206
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1862
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1749
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1772
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan