2021-03-06——html中的框架元素

最新推荐文章于 2024-03-27 21:39:01 发布

伟1314520

最新推荐文章于 2024-03-27 21:39:01 发布

阅读量329

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_53371536/article/details/114437322

版权

html中的框架元素

通过使用框架，你可以在同一个浏览器窗口中显示不止一个网页内容，不是层层叠叠的在一起，而是显示在不同的区域。

通常可以用来做网页的布局。

frameset标记--表示一个框架集【包含框架的集合】

定义了如何将窗口拆分成框架单元。

使用frameset标签时候不需要body元素

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

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

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

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

frameborder 属性用于定义frame表示是否显示边框。

设置属性值为 "0" 移除frame的边框。

noresize="noresize"属性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和span标记

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器

实际上就是网页中的一块空白区域，在这个区域中可以包含其他的html元素。

浏览器会在其前后显示折行。

通常与css一起使用，可以用来设置网页的布局。

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中的div</title>

                  <style>

                          div{

                                   width: 300px;

                                   height: 300px;

                                   background-color: chartreuse;

                          }

                  </style>

         </head>

         <body>

                  <h2>div标记【层】</h2>

                  <h2>实际上就是网页中的一块空白区域，在这个区域中可以包含其他的html元素。</h2>

                  <div>

                          <p>这个区域中可以包含其他的html元</p>

                          <img src="imgs/avatar2.png"/>

                          <br>

                          <font>通常与css一起使用,使用css设置div的尺寸个颜色</font>

                  </div>

                  <font size="6">浏览器会在其前后显示折行。自成一行，占满整行</font>

         </body>

</html>

<span> 元素是内联【行内】元素，可用作文本的容器。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中的span元素</title>

                  <style>

                          span{

                                   color: blue;

                                   font-size: 50px;

                          }

                  </style>

         </head>

         <body>

                  <h1>span 元素是内联【行内】元素，可用作文本的容器。</h1>

                  <h1>当与 CSS 一同使用时，span元素可用于为部分文本设置样式属性</h1>

                  <font size="7" color="red">测试span元素，<span>与CSS 一同使用修改部分文本的样式</span></font>

</h1>

         </body>

</html>