《使用HTML5实现响应式布局》第四章-HTML5多媒体和表格-理论学习资料.pptxVIP

第四章HTML5多媒体和表格

理论内容列表标签表格和框架插入多媒体元素

1.列表标签列表是网页中常见的内容组织和表现效果。使用列表标签可以制作导航栏、新闻标题列表、排行榜等列表

列表标签HTML5有3种列表：无序列表有序列表定义列表

列表标签ul是无序列表的起始标签，英文全称unorderedlist。ul许多个li标签定义的列表项目....../ulli标签用于列举具体的列表项目，英文全称list。无论是有序列表还是无序列表，列表项目均用li标签列出

列表标签ol是有序列表的起始标签，英文全称orderedlistol许多个li标签定义的列表项目....../ol有序列表中的项目符号是数字或字母序列

列表标签ulliul称为无序列表标签。/lili无序列表中的项目符号是几何图形/li/uloltype=1start=2liol称为有序列表标签。/lilili称为列表项目。/lili有序列表中的项目符号是数字或字母序列。/li/ol有序列表无序列表

2.表格和框架创建表格在网页中，除了使用列表组织内容，还常用表格呈现基于行列展示效果的内容。

表格表格常通过三种标签构建，分别是表格标签table、行标签tr、单元格标签tdtable tr td单元格内的文字/td ...... /tr/table表格行单元格

表格表格的常见属性见下表属性说明border显示表格的边框scope设置表头width设置表格的总体宽度align单元格水平对齐cellspacing单元格间距cellpadding单元格边距

表格tableborder=1caption东部地区的人均GDP下降/captiontrthscope=col第一季度/ththscope=col第二季度/ththscope=col第三季度/ththscope=col第四季度/th/trtrtd20.4/tdtd27.4/tdtd90/tdtd20.4/td/tr/table表格边框表格标题表格表头

表格表格可分组显示使用colgroup标签用于定义表格列的分组thead标签，用于定义表格的表头tfoot标签，用于定义表格的表注底部tbody标签，用于定义表格主体。tableborder=1width=100%caption副食品清单/captioncolgroupspan=1style=background:#1FCEEF;/colgroupspan=2style=background:#EFEFEF;/thead tr!--省略--/tr/theadtfoot tr!--省略--/tr/tfoottbody tr!--省略--/tr/tbody/table背景色表头底部主体列分组

表格表格行列合并表格可以实现行列合并，只需在tr、th或td中加入rowspan或colspan属性colspan表示跨越的列数，rowspan表示跨越的行数tdcolspan=#tdrowspan=#

表格tablewidth=100%tr throwspan=3值班人员/th/tr!--省略--/tabletablewidth=100%tr thcolspan=3值班人员/th/tr!--省略--/table表格宽度合并3行合并3列

框架之前所学的所有HTML5文档均为单框架文档，即在一个浏览器中每一次仅显示一个HTML5页面。但有时设计者需要更为灵活的功能，希望能够在浏览器上一次显示多页面，相互配合，相互转换，这样需要使用框架。 用框架嵌入广告用框架嵌入广告

框架HTML5的框架标签是iframeiframe是InlineFrame的意思，用iframe/iframe可以将框架置于一个HTML5页面内。iframe内嵌框架可以完全由设计者定义宽度和高度，并且可以放置在网页的任何位置。iframe属性=属性值 替换显示的内容/iframe

框架iframe常见的属性属性说明src表示框架引用的地址frameborder表示框架是否显示边框scrolling表示框架是否显示滚动条width表示框架的显示宽度height表示框架的显示高度

框架bodypiframe可以在HTML5页面里显示另一个网页。/pp使用iframe显示百度页面。/piframesrc=width=900height=300frameborder=1scrolling=no