1、HTML 框架 - frame 标签目录1. HTML 框架简述 1. 框架的优点2. 框架的缺点2. HTML 框架结构与语法 1. 框架的 DTD2. 框架结构3. frame 标签HTML 框架简述一个浏览器窗体可以通过几个页面的组合来显示。我们可以使用框架来完成(frames)这项工作。(框架可以把 HTML 文档分为多个页面)框架页使用了表格的方式组合，可以分为数行与数列。框架的优点 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度) 方便制作导航栏框架的缺点 会产生很多页面，不容易管理 不容易打印 浏览器的后退按钮无效 代码复杂,无法
2、被一些搜索引擎索引到 多数小型的移动设备（PDA 手机）无法完全显示框架 多框架的页面会增加服务器的 http 请求 由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃猴子提示: 目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用框架了。HTML 框架结构与语法框架的 DTD使用框架页时要使用它特有的 DTD(HTML 文档结构)HTML 框架使用 frameset 标签把浏览器的窗体分为多个行与列的框架页，每个页面又使用了 frame 标签定义，同时应该使用 noframes 定义浏览器不支持框架时显示的内容。本节将介绍 frame 标签，下节介绍 fr
3、ameset 标签(引用网址:http:/ frameset 的 rows 属性(120, *, 80)定义了一个三行的框架，第一行120 像素，第三行 80 像素，第二行是整个页面减去第一行与第三行剩下的像素。frameset 里面包含三个 frame，每个 frame 都使用了 src 属性定义了框架页所包含的页面，最后的 noframes 定义了浏览器不支持框架时所显示的内容。frame 标签frame 标签 - 定义 frameset 标签中每个框架页的内容 frame 标签是单独出现的， 引用网址:http:/ 属性: o Common - 一般属性o frameborder - 定
4、义了内容页的边框,取值为(1|0),缺省值为 1 1 - 在每个页面之间都显示边框 0 - 不显示边框o longdesc - 定义框架页的说明o marginwidth - 定义了框架中 HTML 文件显示的左右边界的宽度,取值为 px,缺省值由浏览器决定o marginheight - 定义了框架中 HTML 文件显示的上下边界的矿度,取值为 px,缺省值由浏览器决定o name - 在一个框架页链接到另一框架页时使用(另一个框架页可以使用 target 定义链接页)o noresize - 定义了浏览者是否可以通过拖拽改变框架页尺寸,取值为(noresize)o scrolling -
5、定义是否有滚动条,取值为(yes|no|auto),缺省值为 auto yes - 显示滚动条 no - 不显示滚动条 auto - 当需要时再显示滚动条o src - 定义了内容页 URL示例HTML 框架示例 - 可以尝试编辑 HTML 像素框架示例 HTML 百分比框架示例 HTML 星号的框架示例 HTML 相对百分比框架 HTML 三列的框架示例 HTML 两行*三列的框架示例 HTML 四行的框架示例 HTML iframe 标签示例 HTML iframe 标签百分比示例 HTML 框架中的链接示例(外部链接) HTML 框架中的链接示例(内部链接) HTML 框架中指定位置的链
6、接示例 HTML 框架中的链接示例通过导航页链接到页面的指定位置 HTML 多框架链接 HTML base 标签在 HTML 框架中的示例 HTML 嵌套的框架示例From “HTML 框架 - frame 标签 - HTML 教程,XHTML 教程“1.HTML frameset 标签目录1. frameset 中 rows 与 cols 取值方法 1. 一个确定的值(单位像素)2. 一个相对于浏览器窗口的百分比的值3. 使用星号(剩余的窗体)4. 使用相对百分比定义5. 更加复杂的示例frameset 标签 - 代替 body 标签定义了框架页,并且定义了框架将分为多少行与多少列 fram
7、eset 标签是成对出现的,以开始,结束 在框架页中 frameset 代替了 body 标签，因此框架页中不能包含 body 使用框架时应该声明支持框架的文档类型 引用网址:http:/ 属性: o Common - 一般属性o cols - 定义了框架含有多少列与列的大小(每个值使用逗号分隔),取值为象素 px 或者百分比%o rows - 定义了框架含有多少行与行的大小(每个值使用逗号分隔),取值为象素 px 或者百分比%o border - 定义 frame 定义的框架页的边框(单位像素),使用 css实现o frameborder - 定义框架页是否边框(此属性应写在 frame 标
8、签内部,不应在此出现)o framespacing - 定义框架页之间间隔的距离,使用 css 实现frameset 中 rows 与 cols 取值方法当一个框架只有一行或一列时，那么它们对应的数值都是 100%.一个确定的值(单位像素)例如:50定义了上行,中行与下行,并且它们各占 50px?上面的解释是错误的,通过下面的示例我们会发现浏览器被三(平均)分了，所以要定义三行各占 50 像素应这样定义。一个相对于浏览器窗口的百分比的值例如:50%定义了上行与下行,并且它们各占页面的 50%使用星号(剩余的窗体)例如:*定义了上行为 50 像素,下行占除了 50 像素的剩余窗体使用相对百分比定
9、义例如:1*定义了上行为窗体高度的 25%,下行为窗体高度的 75%更加复杂的示例定义了水平的前,中,后列,中列为 250px 象素,前列与后列分别占剩余的 25%与75%定义了一个 2 行*3 列的框架下面这个例子我们假设页面高 1000px,第一行的 30%为 300px,中上行为 400px,剩下的 300px 被下面两个分配,“2*“是两倍的意思,“*“等价与“1*“,所以中下行为 100px,下行为 200pxHTML frameset 标签示例 - 可以尝试编辑 HTML 像素框架示例 HTML 百分比框架示例 HTML 星号的框架示例 HTML 相对百分比框架 HTML 三列的框
10、架示例 HTML 两行*三列的框架示例 HTML 四行的框架示例2.HTML noframes 标签noframes 标签 - 对不支持框架的设备进行提示,或相关操作 noframes 标签是成对出现的,以开始,结束 引用网址:http:/ 由于 frameset 内不能包含 body 标签，因此 noframes 内部必须包含body 标签示例梦之都使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问梦之都。延伸阅读 在 HTML 内部嵌入 JavaScript 代码 HTML noscript 属性3.HTML iframe 标签iframe 标签 - HTML 内联框架
11、 iframe 标签是成对出现的,以开始,结束 iframe 标签内的内容可以做为浏览器不支持 iframe 标签时显示 引用网址:http:/ 属性 o Common - 一般属性o name - 定义了内容页名称,此名称在框架页内链接时使用到o src - 定义了内容页 URL(同 frame 标签)o frameborder - 定义了内容页的边框,取值为(1|0),缺省值为 1 1 - 在每个页面之间都显示边框 0 - 不显示边框o height - 框架的高度,取值像素或百分比o width - 框架的宽度,取值像素或百分比o marginwidth - 定义了框架中 HTML 文件
12、显示的左右边界的宽度,取值为 px,缺省值由浏览器决定o marginheight - 定义了框架中 HTML 文件显示的上下边界的宽度,取值为 px,缺省值由浏览器决定o scrolling - 定义是否有滚动条,取值为(yes|no|auto),缺省值为 auto yes - 显示滚动条 no - 不显示滚动条 auto - 当需要时再显示滚动条o align - 垂直或水平对齐方式o longdesc - 定义框架页的说明示例梦之都使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问梦之都。使用像素定义 iframe 框架大小梦之都使用了框架技术，但是您的浏览器不支持框
13、架，请升级您的浏览器以便正常访问梦之都。使用百分比定义 iframe 框架大小HTML iframe 标签示例 - 可以尝试编辑 HTML iframe 标签示例 HTML iframe 标签百分比示例4.HTML 框架链接框架常用在需要导航的网页结构中，比如一个窗口分为两个框架页(导航框架页与内容框架页)，通过点击导航框架页的链接，可以显示不同的内容框架页。在框架页中可以实现相互的链接。此功能需要使用链接 a 的 target 属性,与链接的 name 属性。引用网址:http:/ a上面是一些框架链接的示例，应注意 name 属性的使用。使用 HTML base 标签统一定义框架中链接的
14、name 属性，见下面示例。HTML 框架链接示例 - 可以尝试编辑 HTML 框架中的链接示例(外部链接) HTML 框架中的链接示例(内部链接) HTML 框架中指定位置的链接示例 HTML 框架中的链接示例通过导航页链接到页面的指定位置 HTML 多框架链接 HTML base 标签在 HTML 框架中的示例延伸阅读 HTML 链接 HTML base 标签 HTML target 属性From “HTML 框架链接 - HTML 框架 - HTML 教程,XHTML 教程“5.HTML 嵌套框架框架可以嵌套，可以实现网页的分层。梦之都使用了框架技术，但是您的浏览器不支持框架，请升级您的浏览器以便正常访问梦之都。上面是一个经典的示例，定义了三行两列的框架。一个页面通常分为上部，中部与下部，而中部又分为左侧导航与右侧内容。HTML 嵌套框架示例 - 可以尝试编辑 HTML 嵌套的框架示例
