HTML框架.docx

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