Cristiano前端学习之表格与框架

一、学习路线
二、表格

• 2.1 概述
  • 1、表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。
  • 2、在HTML中，通过<table>标签创建表格元素
• 2.2 组成结构

	<table> 
  		<!-- 一行可以包含多个单元格 -->
  		<tr>  行是表格的水平元素，使用<tr>标签表示
    		<td>单元格内容</td>  单元格是表格的基本元素，使用<td>标签表示
    		<td>单元格内容</td>
    	<!--更多单元格-->
    	......
  		</tr>
   		<!--更多行-->
   		......
	</table>

• 2.3 表格的基本属性 在<table>标签里面声明

  • 1、属性cellpadding表示单元格边界与单元格内容之间的距离
  • 2、cellspacing表示单元格与单元格之间的距离
    

• 2.4 单元格标签

  • 单元格是表的基本元素，包括<td>和<th>标签
  • <td>标签多用来包含表格中的数据部分，而<th>标签用来包含表格的标题部分
  • 单元格常用的属性有水平对齐、垂直对齐、水平跨度、垂直跨度、宽度、高度、背景颜色等
    
    
  • 标签<th>用来定义表格头部信息，多用于表格的第一行或第一列，其内容通常使用粗体并水平居中显示
    
  • 大部分浏览器都会忽略空白单元格（即<td></td>之间没有内容）；
    当空白单元格式时，需要在单元格标签内加入一个空白实体引用 ，以确保浏览器能正确显示该单元格

• 2.5 行标签<tr></tr>标签

  • 行是表格的水平元素，一行可以包含一个或多个单元格
  • 在HTML中，使用<tr>标签进行界定，<td>与<th>标签位于<tr></tr>标签之间
  • 表格除了能对单元格进行设置外，还可以对行进行设置，常用的属性有水平对齐、背景颜色、垂直对齐、边框颜色等
  • 注意：在同时设置bordercolor、bordercolordark、bordercolorlight三个属性时，bordercolor边框颜色将会被其他两项覆盖

• 2.6 表格的行分组

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

• 2.7 表格的列分组

  • 表格的纵向分组又称列分组
  • 在HTML中提供了<colgroup>标签，该标签可以将表格按列进行分组
    
    
  • 注意事项：浏览器对align与valign属性支持不够好，建议通过CSS样式来实现。<colgroup>标签由于没有内容部分，写成单标签或双标签的形式均可。

• 2.8 表格的嵌套

  • 使用表格嵌套布局时，页面排版更加灵活，可以轻松设计出更加复杂而精美的效果。
  • 在嵌套表格时，内部表格<table>应该位于外层表格的<td></td>标签之间。
  • 表格虽然允许多重嵌套，但在页面设计时，当嵌套层次太多时不利于搜索引擎对页面内容的检索；因此，表格嵌套的层次不能过深，一般不要超过3~4层。
    

三、框架

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

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

• 3.2 框架集的属性
  • 框架集<frameset>主要负责整个页面的布局，属性包括行、列、边框、边框颜色、空白距离等属性
    
    
  • rows和cols属性的四种取值形式: 上述rows="60,,100"表示三个界面的高度：第一个是60，第三个是100，第二个为剩余部分的， 为一个通配符，表示剩余部分
    • 以像素为单位的绝对值
    • 浏览器窗口的百分比
    • 行（或列）之间的相对宽度
    • 混合度量尺寸
      
• 3.3 框架的属性
  • <frame>标签 用于指示框架集中每个框架的内容。
  • 语法：<frame src="url" name=" " ...> </frame>
    其中：
    • src和name是<frame />标签的两个常用属性
    • 属性src用于指向一个页面资源的URL路径，可以是绝对路径，也可以是相对路径
    • 属性name为框架指定一个名称
    • <frame />标签可以使用单标签形式，也可以使用双标签形式
      • <frame src="topFrame.html" name="topFrame" />
      • <frame src="mainFrame.html" name="mainFrame" ></frame>
        
        
• 3.4 框架集的嵌套
  • 单个框架集只能实现具有行和列（类似网格）的固定结构的布局，当希望更加复杂的结构时，就需要通过嵌套框架集来实现
    
• 3.5 内联框架
  • 内联框架（又称行内框架），可以出现在页面的任何位置，比框架集更加灵活。
  • 内联框架是嵌入到页面中的一个区域，通过<iframe >标签引入另外一个页面资源，无需<frameset >标签协助。
    <iframe src="url" name=" " width=" " height=" " ...> </iframe>
    • <iframe> 标签创建包含另一个文档的行内框架。
    • 在 HTML 5 中，仅仅支持 src 属性 <iframe src="/index.html"></iframe>