Web前端复习-2、表格与框架

最新推荐文章于 2024-03-30 23:35:49 发布

今天也是爱大大的一天吖

最新推荐文章于 2024-03-30 23:35:49 发布

阅读量1k

点赞数

分类专栏：复习文章标签： html web

本文链接：https://blog.csdn.net/qq_45560350/article/details/106763842

版权

复习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.表格

表格可以将数据有效的组织在一起，并以网格的形式进行显示
表格除了用【1】组织数据外，还可以【2】实现页面或局部页面的排版布局
表格使用行与列的方式组织信息
表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成
在HTML中，通过<table>标签创建表格元素

1.1表格的组成

<table> 
  <!-- 一行可以包含多个单元格 -->
  <tr>
    <td>单元格内容</td>
    <td>单元格内容</td>
    <!--更多单元格-->
    ......
  </tr>
   <!--更多行-->
   ......
</table>

其中：

表格的各组成部分均包含在<table>标签之内
单元格是表格的基本元素，使用 <td>标签 表示
行是表格的水平元素，使用<tr>标签表示
一行可以由一个或多个单元格（<td>）构成，而一个表格可以由一行或多行构成
默认情况下，表格的边框是隐藏的

1.2表格的基本属性

表格的常用属性有对齐方式、背景颜色、边框、高度、宽度等。
在这里插入图片描述
属性frame的取值：

区别表格属性cellpadding和cellspacing：

在这里插入图片描述
属性cellpadding表示单元格边界与单元格内容之间的距离
属性cellspacing表示单元格与单元格之间的距离

1.3单元格（`<td>`和`<th>`）标签

单元格是表的基本元素，包括<td>和<th>标签
<td>标签多用来包含表格中的数据部分，而<th>标签用来包含表格的标题部分
标签<th>用来定义表格头部信息，多用于表格的第一行或第一列，其内容通常使用粗体并水平居中显示
单元格常用的属性有水平对齐、垂直对齐、水平跨度、垂直跨度、宽度、高度、背景颜色等

小知识：
基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。请看下面的图示。

在这里插入图片描述

<table width="300" border="1">
    <tr>
      <th colspan="2">单元格占两列</th>
     <!-- <td>&nbsp;</td>--> <!--此空间因前面单元格的colspan而被占-->
      <td width="90">&nbsp;</td>
    </tr>
    <tr>
      <td width="75">&nbsp;</td>
      <td width="90">&nbsp;</td>
      <th rowspan="2">单元格占两行</th>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <!-- <td>&nbsp;</td>--> <!--此空间因前面单元格的rowspan而被占-->
    </tr>
</table>

在这里插入图片描述
注意：
大部分浏览器都会忽略空白单元格（即<td></td>之间没有内容）；
当空白单元格式时，需要在单元格标签内加入一个空白实体引用 ，以确保浏览器能正确显示该单元格。

1.4 行标签

行是表格的水平元素，一行可以包含一个或多个单元格
在HTML中，使用<tr>标签进行界定，<td>与<th>标签位于<tr></tr>标签之间
表格除了能对单元格进行设置外，还可以对行进行设置，常用的属性有水平对齐、背景颜色、垂直对齐、边框颜色等

1.5 表格的行分组

除了表格主体（行与列）外，表格还提供了标题、表头和表尾部分，使得表格的内容更加丰富，数据的组织更加清晰
使用<thead>、<tfoot>、<tbody>、<caption>标签可以对表格进行横向分组：
- <thead>标签定义表头，用于创建表格的头部信息
- <tfoot>标签定义表尾，用于创建表格的脚注部分
- <tbody>标签定义表格主体，用于表示表格的主体部分
- <caption>标签定义表格标题，显示在整个表格的上方
表格可以包含多个<tbody>标签，用于对表格主体部分的数据进行横向分组（使用rules=“groups” 表格线按分的组显示）；而<thead>和<tfoot>标签在表格中只能出现一次。

<table width="400" border="1" rules="groups" >
  <caption>
    企业员工薪水绩效表
  </caption>
  <thead>
      <tr>
        <th>员工编号</th><th>员工岗位</th>
        <th>基本工资</th><th>本月绩效</th>
      </tr>
  </thead>
  <tbody>
      <tr align="center">
        <td>1</td><td>123</td>
        <td>123</td><td>123</td>
      </tr>
      <tr align="center">
        <td>2</td><td>123</td>
        <td>123</td><td>123</td>
      </tr>
  </tbody>
  <tbody>
      <tr align="center">
        <td>3</td><td>234</td>
        <td>234</td><td>234</td>
      </tr>
      <tr align="center">
        <td>4</td><td>234</td>
        <td>234</td><td>234</td>
      </tr>
  </tbody>
  <tfoot>
  	  <tr align="center">
  		<td></td>
  		<td></td>
  		<td>总计</td>
  		<td>xxxx</td>
      </tr>
 </tfoot>
</table>

在这里插入图片描述

1.6 表格的列分组

表格的纵向分组又称列分组
在HTML中提供了<colgroup>标签，该标签可以将表格按列进行分组
在这里插入图片描述
注意：

浏览器对align与valign属性支持不够好（我在Chrome效果显示不出来），建议通过CSS样式来实现。
<colgroup>标签由于没有内容部分，写成单标签或双标签的形式均可。

1.7 表格的嵌套

使用表格嵌套布局时，页面排版更加灵活，可以轻松设计出更加复杂而精美的效果。

<table width="100" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>
        <table width="100" border="1">
          <tr>
              <td>&nbsp;</td>
          </tr>
        </table>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>

在这里插入图片描述
注意：

在嵌套表格时，内部表格<table>应该位于外层表格的标签之间。
表格虽然允许多重嵌套，但在页面设计时，当嵌套层次太多时不利于搜索引擎对页面内容的检索；因此，表格嵌套的层次不能过深，一般不要超过3~4层。

2.框架

框架（frame）能够将浏览器窗口划分为多个独立的窗格，每个窗格包含一个独立的HTML页面
用户可以通过框架加载或重新加载单个窗格内容，而不需要重新加载浏览器窗口的所有内容。相对框架而言，整个浏览器窗口对应的框架集合称为框架集（frameset）
在HTML中，使用框架集标签<frameset>来划分页面的框架，使用属性rows或cols说明框架的行数或列数以及所占窗口的比例

<frameset rows="行高度所占窗口的像素或比例,.." 
          cols="列宽度所占窗口的像素或比例,.." >
    <frame src="..."/>
	......
</frameset>

2.1 框架集的基本结构

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>框架集的基本结构</title>
</head>
	//框架集<frameset>替代了<body>部分
    <frameset rows="60,*,100">//rows行数  三行高（60px ，剩下的， 100px）
        <frame src="引入页面的URL" />
        <frame src="引入页面的URL" />
        <frame src="引入页面的URL" />
        <noframes>
            <body>
                该浏览器不支持框架集！
            </body>
        </noframes>
    </frameset>
</html>

在这里插入图片描述

2.2 框架集的属性

框架集<frameset>主要负责整个页面的布局，属性包括行、列、边框、边框颜色、空白距离等属性，<frameset>标签内写除<frame>标签之外的标签都无效，不显示。
在这里插入图片描述
rows和cols属性的四种取值方式：

以像素为单位的绝对值
浏览器窗口的百分比
行（或列）之间的相对宽度
混合度量尺寸

2.3 框架的属性

<frame>标签用于指示框架集中每个框架的内容。

<frame src="url" name=" " ...> </frame>

其中：

HTML5 不支持 <frame> 标签
src和name是<frame/>标签的两个常用属性
属性src用于指向一个页面资源的URL路径，可以是绝对路径，也可以是相对路径
属性name为框架指定的一个名称
标签可以使用单标签形式，也可以使用双标签形式
<frame> 标签内写内容无效，不显示

<frame src="topFrame.html" name="topFrame" />
<frame src="mainFrame.html" name="mainFrame" ></frame>

在这里插入图片描述

<frameset cols="50%,50%">
  <frame src="frame_a.htm" marginheight="50"marginwidth="0" scrolling="yes" frameborder="0">
  <frame src="frame_b.htm" marginheight="0" marginwidth="20" scrolling="yes" frameborder="0">
</frameset>

在这里插入图片描述

Chrome浏览器不支持属性scrolling

2.4 框架集的嵌套

单个框架集只能实现具有行和列（类似网格）的固定结构的布局，当希望更加复杂的结构时，就需要通过嵌套框架集来实现

<frameset rows="50,*,50">
	<frameset cols="1*,1*">
		<frame name="topframe1" src="topFrame.html"/>
		<frame name="topframe2" src="topFrame.html"/>
	</frameset>
	<frameset cols="100,*120">
		<frame name="leftframe" src="leftFrame.html"/>
		<frame name="mainframe" src="mainFrame.html"/>
		<frame name="rightframe" src="rightFrame.html"/>
	</frameset>
	<frame name="bottomframe" src="bottomFrame.html"/>
</frameset>

在这里插入图片描述

2.5 内联框架

内联框架（又称行内框架），可以出现在页面的任何位置，比框架集更加灵活。
<iframe>标签内写内容无效，不显示。
内联框架是嵌入到页面中的一个区域，通过<iframe>标签引入另外一个页面资源，无需<frameset>标签协助。

<iframe src="url" name=" " width=" " height=" " ...> </iframe>

在这里插入图片描述

<body>
    iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果，那么就需要了解更多的iframe属性。
    <iframe name="myFrame" src="http://www.w3school.com.cn/tags/tag_iframe.asp" 
        frameborder="1" width="420" height="240" scrolling="yes" align="right">
    </iframe>
    不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行。现在，让我来告诉大家一种iframe动态调整高度的方法……
</body>

在这里插入图片描述

frame和iframe的区别：

frame 不能脱离 frameset 单独使用，iframe 可以；
frame 不能放到body中，否则将无法显示；
iframe 也可以嵌套在frameset ，但是必须放到body中，不嵌套在frameset 中的iframe 可以随意使用；
frame 的高度只能通过 frameset 控制，iframe 是自己本身控制，不能通过 frameset 设置；
iframe 可以放到表格中；

2.6 框架之间的链接

使用框架布局页面时，常常在框架中放置一个导航栏；当点击导航栏中的链接时，在指定的框架中加载目标页面。
每个<frame>标签都有一个name属性为框架分别指定一个名称。在导航栏中点击链接时，会根据target属性所指定的框架中加载目标页面内容。

<a>标签要写在frame展示的页面中，不能写在<frame>标签或<frameset>标签内。

<a href="goods.html" target="mainFrame">商品列表</a><br/>
<a href="contacts2.html" target="mainFrame">通讯录</a><br/>
<a href="http://www.itshixun.com" target="mainFrame">青软实训</a><br/>
<a href="http://www.itoffer.cn" target="mainFrame">锐聘</a><br/>
<a href="http://www.moocollege.cn" target="mainFrame">码客学院</a>

在这里插入图片描述

总结

表格元素主要由行、列、单元格（前三个从微观看）、标题、表头行、正文行、表尾行（后四个从宏观看）等构成
表格的基本元素是单元格，使用<td>标签表示
行是表格的水平元素，使用标签<tr>表示
表格通过<thead>、<tbody>、<tfoot>、<caption>标签对表格进行横向分组
在HTML中提供了<colgroup>标签，该标签可以对表格按列分组
整个浏览器窗口对应的框架集合称为框架集（frameset）
<frame>标签用于指示框架集中每个框架的内容
内联框架是嵌入到页面中的一个区域，通过<iframe>标签引入另外一个页面资源
在创建超链接时，通过a标签的target属性，指明新的页面应该在哪个框架中进行加载

今天也是爱大大的一天吖

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Web前端复习-2、表格与框架

1.表格表格可以将数据有效的组织在一起，并以网格的形式进行显示表格除了用【1】组织数据外，还可以【2】实现页面或局部页面的排版布局表格使用行与列的方式组织信息表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成在HTML中，通过<table>标签创建表格元素1.1表格的组成<table>  <tr> <td>单元格内容</td> .
复制链接

扫一扫