HTML学习3--框架网页

简介:

 1.框架的基本概念:http://www.w3school.com.cn/

 

2.框架的基本结构:

 

注意事项:1.框架网页是没有body的!!!!

 


 
 
  1. <html> 
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title>框架网页-cols</title> 
  5. </head> 
  6.     <frameset rows="80,*" border="5"> 
  7.         <frame name="top" src="top.html"/> 
  8.         <frameset cols="400,*"> 
  9.             <frame name="left" src="http://www.baidu.com"/> 
  10.             <frame name="right" src="http://www.google.com.hk"/> 
  11.         </frameset> 
  12.     </frameset> 
  13. </html> 

注意事项:如果你想让框架网页之间的边框消失,要在frame标签中加上frameborder="0"这个属性!!


如果你不想框架网页之间的边框可以被随意拖动,那么你需要再frame标签中加上noresize="noresize"这个属性!

 

eg.


 
 
  1. <html> 
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title>框架网页-cols</title> 
  5. </head> 
  6.     <frameset rows="80,*" border="5"> 
  7.         <frame name="top" src="http://www.sina.com" frameborder="0"/> 
  8.         <frameset cols="400,*"> 
  9.             <frame name="left" src="http://www.baidu.com" frameborder="0"/> 
  10.             <frame name="right" src="http://www.w3school.com.cn/" frameborder="0" noresize="noresize"/> 
  11.         </frameset> 
  12.     </frameset> 
  13. </html> 

3.框架网页中的超链接:

 

target="blank" → 新窗口


target="parent" → 父窗口


target="right" → 去框架中的某个name="right"的窗口。当然,还可以有left,top等。

 

3.当你想在普通网页中引入其他的网页时,可以用iframe这个标签!

用法:

 


 
 
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2. <head> 
  3.     <meta http-equiv="Content-Type" content="text/html;charset=GBK" /> 
  4.     <title>iframe</title> 
  5. </head> 
  6. <body> 
  7.     <iframe src="http://www.baidu.com" frameborder="2" width="200" height="200" scrolling="no"/> 
  8. </html> 

它的一些属性:

 

 

 



     本文转自韩立伟 51CTO博客,原文链接:http://blog.51cto.com/hanchaohan/927271,如需转载请自行联系原作者








相关文章
|
1月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
73 0
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
21天前
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
|
21天前
HTML 框架1
HTML框架允许在同一个浏览器窗口中同时显示多个页面。`&lt;iframe&gt;`标签用于嵌入其他网页,基本语法为 `&lt;iframe src=&quot;URL&quot;&gt;&lt;/iframe&gt;`。可以通过设置 `height` 和 `width` 属性来调整 iframe 的大小,例如:`&lt;iframe src=&quot;demo_iframe.htm&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/iframe&gt;`。属性值可以是像素或百分比。
|
1月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
50 1
【HTML】构建网页的基石
|
1月前
|
人工智能
|
2月前
|
数据可视化 前端开发
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
本文介绍了如何在Twaver-HTML5中使用鹰眼(Overview)可视化视图组件,它作为Network的缩略图,允许用户通过缩略图导航Network,支持单击、双击和框选操作来控制Network视图。
43 5
Twaver-HTML5基础学习(39)鹰眼可视化视图组件(OverView)
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件(List),展示了如何创建列表、设置列表属性(如行高、间隔颜色等)、实现数据绑定和排序,以及如何通过React代码示例进行操作。
34 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
|
2月前
Twaver-HTML5基础学习(38)劈分面板SplitPane
本文介绍了如何在Twaver-HTML5中使用SplitPane组件来创建可分割的面板,通过动态调整分割条来改变面板的大小,支持水平和垂直分割。
34 2
Twaver-HTML5基础学习(38)劈分面板SplitPane
下一篇
无影云桌面