一、学习路线
二、表格
- 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>
- src和name是
- 3.4 框架集的嵌套
- 单个框架集只能实现具有行和列(类似网格)的固定结构的布局,当希望更加复杂的结构时,就需要通过嵌套框架集来实现
- 单个框架集只能实现具有行和列(类似网格)的固定结构的布局,当希望更加复杂的结构时,就需要通过嵌套框架集来实现
- 3.5 内联框架
- 内联框架(又称行内框架),可以出现在页面的任何位置,比框架集更加灵活。
- 内联框架是嵌入到页面中的一个区域,通过
<iframe >标签
引入另外一个页面资源,无需<frameset >标签
协助。
<iframe src="url" name=" " width=" " height=" " ...> </iframe>
<iframe> 标签
创建包含另一个文档的行内框架。- 在 HTML 5 中,仅仅支持 src 属性
<iframe src="/index.html"></iframe>