Html学习笔记（3）框架/表格
2011-11-30 00:06
169 查看
参考文献： 《HTML, CSS, JavaScript 整合详解》 王津涛 编著，机械工业出版社
1. 框架在主流浏览器中得到广泛支持，符合HTML4标准，使用框架的优点：①提高网站的使用性能；②缩短下载时间；③得到主流浏览器的广泛支持；④将导航元素与内容分开，方便更新网页
似乎一般框架实例没有<body>标签，而使用<frameset>标签和<frame>标签，<frameset>标签不包含文本、图形等内容，而用来定义一个框架集，将多个框架集成在一起，每个框架其实就是一个相对独立的文档
<frameset>标签的属性
注：pixels是像素值；%是占父级框架的百分比；*是剩下的宽度（如果需要实现多个框架在浏览器中按相同的宽度显示，可以通过“*”变量实现）
<frameset cols=”*,*” rows=”200,*”>
<frame src=”red.html”/>
<frame src=”green.html”/>
</frameset>
2. 框架格式化主要涉及框架边界的隐藏、调整框架边距、显示或隐藏滚动条、设置框架边界颜色等
注：① 默认情况下，所有框架都带有边界，可以通过<frame>标签的属性frameborder=
“0”消除边框的显示，但仅仅消除边框的三维效果，还须使用<frameset>的border=“0”，才能消除边框的显示（设置边界宽度时要同时使用这两个属性）
<frameset cols=”*,*” border=”0”>
<frame src=”red.html” frameborder=”0”/>
<frame src=”green.html” frameborder=”0”/>
</frameset>
② border、bordercolor属性不符合HTML4.0规范
3. <frameset>可以嵌套使用
4. 内嵌套框架<iframe>，就是在HTML文档中的一个区域插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样，内嵌套框架通常又称为浮动框架，不需要在单独的网页中创建框架集
注：<iframe>是HTML4标准中定义的标准标签，仅在IE3.0及更高版本中支持
例：
<iframe src=”url”name=”float frame” height=”100” width=”200” align=”right”>This is inline iframe your browser may not supper inline frame.</iframe>
中间部分为替换文本，当浏览器不支持内嵌套框架时，显示该文本
5. 创建网站链接导航
实现框架导航功能，要因人name、target属性，name属性标识一个框架，target属性在锚点<a>中使用，指定这个链接要载入到哪个框架中
<frameset cols="20%,*">
<frame name="navigation" src="navigation.htm"></frame>
<frame name="show" src="show.htm"></frame>
</frameset>
<body>
<ul>
<li><a href="http://www.sina.com.cn" target="show">新浪首页</a></li>
<li><a href="http://www.yahoo.com.cn" target="show">雅虎首页</a></li>
…
</ul>
</body>
导航的另一种应用方式：当网页的页面较长且该页面由几个部分组成时，为了更快地找到阅读的部分，使用导航来实现快速跳转到页面的指定部分
示例代码：<a href="content.htm#S1" target="content">Section1</a>
注意本示例锚点的引用
6. 并非所有的浏览器都支持框架，所以建立框架之前，需要提供一定量的非框架信息，需要<noframes>标签来完成，不设置该标签时，对于不支持框架的浏览器显示空白，为了让用户明白发生的情况，通常需要一条简短的替代信息，向用户解释页面无法浏览的原因
<noframes>
<body>
<p>This page uses frames. The current browser you are using dose not support frames.</p>
</body>
</noframes>
7. HTML表格
① 设置表格的边框、背景、单元格背景
a) <table>标签的border属性，以像素为单位，为0时不显示表格边框
b) bordercolor、bgcolor、background属性不是HTML推荐标准
② 设置表格大小及单元格大小：可以通过width和height属性设置表格大小或单元格的大小，设置表格单元格大小时只需要设置某一行的第一个单元格的宽度和高度即可，改行的其他单元格会自动设置成与第一个单元格一致的大小
③ 设置表格对齐方式及表格数据对齐方式
a) table的align默认左对齐，left、right、center
b) 在HTML4.01中不推荐使用table元素的align属性，XTHML1.0严密型DTD也不支持table元素的align属性
c) 使用align和valign（top、middle、bottom、baseline）属性可以分别设置表格单元格的水平和垂直对齐方式，如果在<tr>标签中使用，将影响整行数据单元的对齐方式，如果在<td>标签中使用则只影响该单元格数据的对齐方式
④ cellspancing属性与cellpadding属性
a) cellspancing：设置表格单元格之间的间距
b) cellpadding：设置表格单元格内数据填充间距
c) 单元格内数据填充距离将影响数据的对齐方式
⑤ frame属性与rules属性
用border属性设置表格边框，会影响整个表格效果，它只对表格周围的边框宽度起作用，对不同行的间隔，可以通过frame设定表格的外边框，通过rules设定
a) frame属性值包括：void（无边框）、above（上边框）、below（下边框）、lhs（左边框）、rhs（右边框）、hsides（横向边框）、vsides（纵向边框）、box（默认边框）、border（普通表格边框）
frame属性必须结合border属性一起使用
b) rules属性值包括：all（默认）、cols（列间边框，无行间边框）、rows（行间边框，无列间边框）、none（无内边框）、groups（列组和行组边框）
c) 表格跨行和跨列（合并单元格）
⑥ 添加表格标题
a) 使用<caption>标签可以为每个表格指定唯一的标题，标题通常放在表格的正上方， <caption>标签要放在<table>标签之后，且表格标题不能多于一个
b) caption元素的align属性在HTML4.01中不被推荐，在XHTML严密型DTD不被支持
<table border="1">
<caption align="center">出货单据</caption>
<tr>
……
</tr>
……
</table>
⑦ 表格高级标签
使用表格的高级标签可以为表格中相似的区域添加边界
⑧ <colgroup>标签的常用属性
<table border="1">
<caption align="center">出货单据</caption>
<colgroup span="2">
<col width="120" />
<col align="right" />
</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>
⑨ 使用表格进行网页布局（似乎比较OUT~）
1. 框架在主流浏览器中得到广泛支持，符合HTML4标准，使用框架的优点：①提高网站的使用性能；②缩短下载时间；③得到主流浏览器的广泛支持；④将导航元素与内容分开，方便更新网页
似乎一般框架实例没有<body>标签，而使用<frameset>标签和<frame>标签，<frameset>标签不包含文本、图形等内容，而用来定义一个框架集，将多个框架集成在一起，每个框架其实就是一个相对独立的文档
<frameset>标签的属性
| 属性 | 值 |
| cols（定义框架集中的列数以及大小） | pixels; %; * |
| rows（定义框架集中的行数以及大小） | pixels; %; * |
<frameset cols=”*,*” rows=”200,*”>
<frame src=”red.html”/>
<frame src=”green.html”/>
</frameset>
2. 框架格式化主要涉及框架边界的隐藏、调整框架边距、显示或隐藏滚动条、设置框架边界颜色等
| 属性 | 说明 |
| frameborder=”…” | 显示或隐藏框架边框，与border仪器使用，值可以为1（显示）或0（隐藏）；也可以是yes或no |
| border=”…” | 显示或隐藏框架的边，与frameborder一起使用，值为0或像素数 |
| scrolling=”…” | 显示或隐藏框架滚动条，yes（显示），no（隐藏），auto（默认，自动显示或隐藏） |
| noresize=” noresize” | 禁止用户调整框架尺寸，默认可调整 |
| marginheight=”…” | 设置框架上、下边距 |
| marginwidth=”…” | 设置框架左、右边距 |
| bordercolor=”…” | 设置框架边界颜色 |
“0”消除边框的显示，但仅仅消除边框的三维效果，还须使用<frameset>的border=“0”，才能消除边框的显示（设置边界宽度时要同时使用这两个属性）
<frameset cols=”*,*” border=”0”>
<frame src=”red.html” frameborder=”0”/>
<frame src=”green.html” frameborder=”0”/>
</frameset>
② border、bordercolor属性不符合HTML4.0规范
3. <frameset>可以嵌套使用
4. 内嵌套框架<iframe>，就是在HTML文档中的一个区域插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样，内嵌套框架通常又称为浮动框架，不需要在单独的网页中创建框架集
注：<iframe>是HTML4标准中定义的标准标签，仅在IE3.0及更高版本中支持
| 属性 | 说明 |
| src=”url” | 用标准url指出作为框架内容的源文件 |
| frameborder=”…” | 设置和隐藏框架的边界 |
| scrolling=”…” | 设置框架滚动条，yes（显示），no（隐藏），auto（默认，自动显示或隐藏） |
| name=”…” | 标记框架，便于成为目标或从其他框架或窗口中引用 |
| marginheight=”…” | 设置框架内容上、下边距的像素值 |
| marginwidth=”…” | 设置框架内容左、右边距的像素值 |
| height=”…” | 以像素为单位指定框架的高度 |
| width=”…” | 以像素为单位指定框架的宽度 |
| align=”…” | left、middle、right、top、bottom |
<iframe src=”url”name=”float frame” height=”100” width=”200” align=”right”>This is inline iframe your browser may not supper inline frame.</iframe>
中间部分为替换文本，当浏览器不支持内嵌套框架时，显示该文本
5. 创建网站链接导航
实现框架导航功能，要因人name、target属性，name属性标识一个框架，target属性在锚点<a>中使用，指定这个链接要载入到哪个框架中
<frameset cols="20%,*">
<frame name="navigation" src="navigation.htm"></frame>
<frame name="show" src="show.htm"></frame>
</frameset>
<body>
<ul>
<li><a href="http://www.sina.com.cn" target="show">新浪首页</a></li>
<li><a href="http://www.yahoo.com.cn" target="show">雅虎首页</a></li>
…
</ul>
</body>
导航的另一种应用方式：当网页的页面较长且该页面由几个部分组成时，为了更快地找到阅读的部分，使用导航来实现快速跳转到页面的指定部分
示例代码：<a href="content.htm#S1" target="content">Section1</a>
注意本示例锚点的引用
6. 并非所有的浏览器都支持框架，所以建立框架之前，需要提供一定量的非框架信息，需要<noframes>标签来完成，不设置该标签时，对于不支持框架的浏览器显示空白，为了让用户明白发生的情况，通常需要一条简短的替代信息，向用户解释页面无法浏览的原因
<noframes>
<body>
<p>This page uses frames. The current browser you are using dose not support frames.</p>
</body>
</noframes>
7. HTML表格
| 标签 | 说明 |
| table | 定义一个表格 |
| tr | 定义表格中的行 |
| td | 定义表格中的数据单元格 |
| th | 定义表格中的表头单元格 |
a) <table>标签的border属性，以像素为单位，为0时不显示表格边框
b) bordercolor、bgcolor、background属性不是HTML推荐标准
② 设置表格大小及单元格大小：可以通过width和height属性设置表格大小或单元格的大小，设置表格单元格大小时只需要设置某一行的第一个单元格的宽度和高度即可，改行的其他单元格会自动设置成与第一个单元格一致的大小
③ 设置表格对齐方式及表格数据对齐方式
a) table的align默认左对齐，left、right、center
b) 在HTML4.01中不推荐使用table元素的align属性，XTHML1.0严密型DTD也不支持table元素的align属性
c) 使用align和valign（top、middle、bottom、baseline）属性可以分别设置表格单元格的水平和垂直对齐方式，如果在<tr>标签中使用，将影响整行数据单元的对齐方式，如果在<td>标签中使用则只影响该单元格数据的对齐方式
④ cellspancing属性与cellpadding属性
a) cellspancing：设置表格单元格之间的间距
b) cellpadding：设置表格单元格内数据填充间距
c) 单元格内数据填充距离将影响数据的对齐方式
⑤ frame属性与rules属性
用border属性设置表格边框，会影响整个表格效果，它只对表格周围的边框宽度起作用，对不同行的间隔，可以通过frame设定表格的外边框，通过rules设定
a) frame属性值包括：void（无边框）、above（上边框）、below（下边框）、lhs（左边框）、rhs（右边框）、hsides（横向边框）、vsides（纵向边框）、box（默认边框）、border（普通表格边框）
frame属性必须结合border属性一起使用
b) rules属性值包括：all（默认）、cols（列间边框，无行间边框）、rows（行间边框，无列间边框）、none（无内边框）、groups（列组和行组边框）
c) 表格跨行和跨列（合并单元格）
| 属性 | 说明 |
| colspan | 指明单元格有多少列的跨度，在<th>和<td>中使用 |
| rowspan | 指明单元格有多少行的跨度，在<th>和<td>中使用 |
a) 使用<caption>标签可以为每个表格指定唯一的标题，标题通常放在表格的正上方， <caption>标签要放在<table>标签之后，且表格标题不能多于一个
b) caption元素的align属性在HTML4.01中不被推荐，在XHTML严密型DTD不被支持
<table border="1">
<caption align="center">出货单据</caption>
<tr>
……
</tr>
……
</table>
⑦ 表格高级标签
使用表格的高级标签可以为表格中相似的区域添加边界
| 标签 | 说明 |
| thead | 定义表格标题区域 |
| tbody | 定义表格内容区域 |
| tfoot | 定义表格脚标区域 |
| colgroup | 定义列组 |
| col | 为表格中的一个或多个列定义属性值，只能在colgroup里使用 |
| 属性 | 属性值 | 说明 |
| width | %; pixels | 定义列的宽度 |
| span | number | 定义所要跨度的数量 |
| align | right；left；center；justify；char | 单元格内或列内文字水平对齐方式 |
| valign | top；middle；bottom；baseline | 单元格内或列内文字垂直对齐方式 |
<caption align="center">出货单据</caption>
<colgroup span="2">
<col width="120" />
<col align="right" />
</colgroup>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>
⑨ 使用表格进行网页布局（似乎比较OUT~）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Bootstrap响应式前端框架笔记三——代码与表格
- HTML学习——框架 表格 表单 图像
- bootstrap框架学习笔记一（模板，排版-段落-列表-表格部分）
- Laravel框架学习笔记（二）项目实战之模型（Models）
- Easyui笔记4：实现表格内combobox数据的动态切换（getEditor的使用）
- java开发框架_ZK使用笔记二
- 响应式前端框架Bootstrap系列（4）表格
- 【慕课笔记】第五章 JAVA中的集合框架（中） 第3节 学生选课——删除Map中的学生
- 孙鑫MFC笔记教程(3)--MFC应用程序框架
- Zookeeper学习笔记：Zookeeper--分布式框架
- 关于layui数据表格的分页操作的学习笔记。
- 微信小程序开发学习笔记002--微信小程序框架解密
- [JAVA学习笔记-89]Executor框架的详细解读
- (32)Java学习笔记——集合框架 / Collection 接口 / Iterator 迭代器
- 表格标签，图片标签，框架标签，表单标签
- Struts2 框架学习第二天笔记
- 论坛源码推荐（8月8日）：懒人笔记iOS客户端开源,适用于Swift的BDD类型测试框架
- YII框架分析笔记8：CDataProvider
- [转]prototype.js开发笔记（针对Ajax的JS框架Prototype的使用介绍）
- HTML学习笔记（三）--框架/部分基础/实体