第4章HTML框架、表单、多媒体

HTML、CSS、JavaScript网页制作学无止境乐在其中第4章HTML框架、表单、多媒体4.1框架集、框架标记4.2表单标记4.3IE浏览器滚动字幕、背景音乐与多媒体4.4XHTML播放多媒体标记4.1框架集、框架标记框架可以将浏览器窗口划分为若干个区域，在每个区域内显示一个独立的页面，使用框架可以在一个浏览器同时显示多个不同的独立页面，可以方便地进行网页导航。但如果框架太多包含很多不同内容的页面可能会让用户感到困惑而顾此失彼。XHTML1.0的Frameset框架型DTD保留了框架，而标准的XHTML1.1则不再支持框架。因此使用框架集的XHTML文档必须指定为FramesetDTD框架型XHTML1.0文档。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN框架集文档的基本结构框架集文档实际上并不包含任何页面内容，它只是告诉浏览器将浏览器窗口如何排列、每个框架加载哪个HTML页面。htmlhead…/headframeset—框架集framesrc=页面1/—框架1framesrc=页面2/—框架2……frameset—子框架集framesrc=页面/—子框架……/framesetiframesrc=页面/—浮动框架—也可用于bodynoframes—不支持框架时显示的页面内容body……/body||ahref=页面/a/noframes/frameset/html注意：框架集frameset不允许与body标记同时使用，只有在为不支持框架的浏览器而设置的noframes标记内可包含body4.1.2框架集标记framesetframesetrows||cols=框架(集)1大小,框架(集)2大小,…framesrc=HTML页面文件/—框架iframesrc=HTML页面文件/—浮动框架noframes不支持框架时显示的页面内容/noframes……/framesetframeset标记定义框架集，用于包含多个框架(窗口)，指定框架数量、尺寸、间距、颜色及排列方式—可内嵌框架集。rows按行纵向划分—各框架上下排列cols按列横向划分—各框架左右排列注意：rows、cols属性不要同时使用，否则容易引起混乱。rows||cols属性值的个数是包含框架或子框架集的个数，属性值的个数为框架数量，属性值的大小为框架的尺寸，可使用数字(像素)、%浏览器或父框架百分比、*表示剩余空间—多个*则平均分配。例如：cols=80,*,30%表示3列3个框架，第1个80像素，第3个占窗口30%，第2个为剩余空间。rowscols框架集标记其他属性framespacing设置框架集中框架之间的间隔宽度，也就是框架轮廓之外的外边距宽度，默认2(像素)frameborder设置框架集中框架外边距是否可见，取值1外边距颜色可见、取值0外边距颜色不可见—透明白色的空白区域bordercolor设置框架集中框架外边距的颜色，默认与边框一体—凸起灰白色。如果framespacing外边距或frameborder可见性设置为0，则颜色设置无效。注意：框架集frameset用frameborder设置框架外边距的可见性，而框架frame用frameborder设置边框的可见性，在IE7浏览器中这两个属性的设置会相互影响。一般情况下框架集frameborder默认为1—外边距可见，但如果框架集中所有框架都用frameborder=0设置轮廓线不可见，则框架集frameborder将默认为0—外边距不可见，此时如果显示外边距颜色则必须设置frameborder=1。内嵌框架集默认采用外层父框架集的设置，也可独立设置覆盖父框架集的设置。4.1.3框架标记frame/framesrc=页面文件URL/按顺序定义框架集中的一个框架，必须在frameset内使用。src指定显示在该框架中的页面文件URL。id||name为框架定义唯一名称—针对不同浏览器可同时使用scrolling设置滚动条：auto(默认)需要时yes总是有no没有noresize设置框架是否可调整：默认可调整、noresize固定marginheight定义框架的上下内边距—内容与边框的距离marginwidth定义框架的左右内边距frameborder设置边框是否可见：1可见(默认)0不显示如果未设置框架frameborder则继承框架集的该属性如果框架集frameborder默认或设置为1外边距可见，则所包含框架的边框默认为1可见，如果框架集设置为0则所包含框架的边框默认为0不可见—如果显示框架边框则必须设置为1。若所有框架frameborder设置为0则框架集frameborder会默认为0—外边距不可见。在框架内的页面中使用a链接时，可使用target属性将页面链接到id||name指定的任意框架或_self当前框架(默认)、_blank新窗口、_parent父框架、_top顶层浏览器窗口。ahref=URLtarget=目标框架id或name链接文本/a4.1.4不支持框架标记noframesnoframes不支持框架时显示的页面内容/noframesnoframes标签必须用于frameset标记内，仅为不支持框架的浏览器提供备用显示页面，对支持框架浏览器无效—忽略noframes标记内可以使用body定义完整独立的页面—或者直接超链接到某个页面。例如：framesetframesrc=页面/……noframesbodyp对不起，您的浏览器不支持框架网页的显示。br/—可在此定义相关的页面，或者使用：ahref=URL点击这里/a查看其它相关页面。/p/body/noframes/frameset【例h4-1.html】框架示例用rows设计上下3行的框架集，框架外边距蓝色5像素。第1个框架高度100，无滚动条不可调整大小。第2个框架高度为剩余浏览器高度总有滚动条、没有边框轮廓线。第3个框架高度为浏览器25%，自动使用滚动条(默认)、水平与垂直内边距50像素。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN按行使用框架/title/headframesetrows=100,*,25%framespacing=5bordercolor=blueframesrc=../cha3/h3-22.htmlscrolling=nonoresize=noresize/framesrc=../cha3/h3-13.htmlscrolling=yesframeborder=0frameborder=0/framesrc=../cha3/h3-27.htmlscrolling=autoframeborder=0marginwidth=50marginheight=50/noframesbodyp对不起，您的浏览器不支持框架网页的显示。ahref=../cha3/h3-27.html点击这里/a查看相关页面。/p/body/noframes/frameset/html【例h4-2.html】用默认属性按列使用框架!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN按列使用框架/title/headframesetcols=120,*,25%framesrc=../cha3/h3-7.html/framesrc=../cha3/h3-8.html/framesrc=../cha3/h3-11.html/noframesbody浏览器不支持框架ahref=../cha3/h3-8.html点击这里/a显示页面/body/noframes/frameset/html【例h4-3.html】使用框架嵌套!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN框架嵌套/title/headframesetcols=220,*framespacing=5bordercolor=blueframesrc=../cha3/h3-11.html/framesetrows=40%,60%framespacing=3bordercolor=redframesrc=../cha3/h3-22.html/framesrc=../cha3/h3-27.html//framesetnoframesbody浏览器不支持框架ahref=#点击这里/a显示页面/body/noframes/frameset/html【例】利用框架实现导航1、创建框架集页面h4-4.html，注意设置框架的id||name属性!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN导航框架/title/headframesetcols=230,*framespacing=3bordercolor=blueframesrc=h4-5.html/!--链接导航页面文件--framesetrows=40%,60%frameid=topname=topsrc=../cha3/h3-22.html/frameid=bottomname=bottomsrc=../cha3/h3-27.html//framesetnoframesbody浏览器不支持框架ahref=#点击这里/a显示页面/body/noframes/frameset/html【例】利用框架实现导航—导航页面h4-5.html注意用超链接target属性指定框架的id||name。另外本文档使用CSS设置取消了默认超链接的底划线和颜色变化。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN导航页面/titlestyletype=text/cssa{font-size:16pt;color:#000;text-decoration:none;}/style/headbodystyle=background:Cyan;!--设置整个页面背景颜色--divulliahref=../cha3/h3-27.htmltarget=top页面布局top/a/liliahref=../cha3/h3-22.htmltarget=bottom书目介绍bo