2021-04-16

最新推荐文章于 2024-09-11 10:10:41 发布

周超&.

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量90

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/z12345zc/article/details/115757816

版权

本文介绍了HTML中的框架元素，包括frameset、rows、cols、frame等属性的使用，展示了如何创建多窗口布局。同时，讲解了div元素作为网页布局的基础，通过与CSS结合实现页面结构。示例代码演示了如何利用frameset创建复杂框架结构，以及div元素的样式应用。

摘要由CSDN通过智能技术生成

              **HTML基础**

HTML框架元素：

frameset：

标记–表示一个框架集【包含框架的集合】
定义了如何将窗口拆分成框架单元。使用 frameset 标签时候不需要 body 元素

rows：

属性–将窗口拆分成上下结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。

cols：

属性–将窗口拆分成左右结构，取值的个数决定了拆分成个数，取值大小数决定了拆分的每一个窗口的比例。

frame：

标记–表示一个框架[每个框架中放入什么文件]

src：

属性–指定每一个框架中所显示的网页的路径

frameborder：

属性用于定义

frame：

表示是否显示边框。
设置属性值为 “0” 移除frame的边框。
属性 frame 边框是否可以被拖动改变大小。
在这里插入图片描述

``<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
  <title></title>
</head> 
<frameset rows="20%,80%,10%"> 
<frame src="top.html" frameborder="no" noresize="noresize"></frame> <frameset cols="20%,80%">
 <frame src="left.html" frameborder="no"noresize="noresize"></frame> <frame name="iframe_right" src="right1.html" frameborder="no" noresize="noresize"> </frame>  </frameset> 
 <frame src="bottm.html" frameborder="no" noresize="noresize"></frame> 
 </frameset>
  </html>

html中的div《层》

div 标记实际上是网页中的一块空白区域。这一块空白区域可以包含其他的 html 元素。
在 div 元素的前面和后面的元素会自动换行。通常情况下与 css 一起使用，可以
制作网页的布局结构

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
  <title>div 标记</title>
<style>
div{
 width: 300px; 
 height: 300px; 
 background-color: blueviolet; } 
 </style>
  </head> 
  <body>
  <h3>div 标记实际上是网页中的一块空白区域</h3>
   <h3>这一块空白区域可以包含其他的 html 元素</h3> <h3>在 div 元素的前面和后面的元素会自动换行</h3> <h3>通常情况下与 css 一起使用，可以制作网页的布局结构</h3> div 之前 
   <div>
   <h1>包含 h1</h1> 
   <img src="imgs/avatar5.png" />img 之后 
 <div>div 之后
  </body>
  </html>