使用语言开发商业站点tp02.pptx

第二章列表、表格与媒体元素

预习检查在HTML5中支持哪几种列表，如何表示？如果希望实现表格的跨行和跨列设置，需要设置表格的哪些属性？如何在页面中使用音频元素和视频元素？为什么要使用HTML5结构标签来布局网页？集中测试2/42

回顾与作业点评如果一个网页中的文字出现乱码可能是什么原因造成的？在网页中打开超链接页面在目标窗口中打开的常用两种方式是什么？找出下面代码的错误之处点评作业的提交情况和共性问题h1北京是中国的p首都p香山的strong红叶/strong在秋季非常漂亮/p/h1/p作业点评回顾h1北京是中国的p首都/p/h13/42

本章任务使用列表展示数据使用表格展示数据使用媒体元素在网页中播放视频使用HTML5结构元素进行网页布局4/42

本章目标会使用有序列表、无序列表、定义列表实现数据展示会使用表格实现数据展示会使用媒体元素在网页中播放视频会使用HTML5结构元素进行网页布局5/42

列表什么是列表列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息列表的分类无序列表有序列表定义列表有序列表无序列表定义列表6/42

列表的应用6-1无序列表ulli范冰冰演藏族女孩/lili撞死两个人后自拍/lili诗隆甜蜜出游/lili一线城市楼市退烧/li/ul声明无序列表声明列表项演示示例1：无序列表示例7/42

列表的应用6-2无序列表的特性没有顺序，每个li标签独占一行（块元素）默认li标签项前面有个实心小圆点一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等8/42

列表的应用6-3有序列表olli范冰冰演藏族女孩/lili撞死两个人后自拍/lili诗隆甜蜜出游/lili一线城市楼市退烧/li/ol声明列表项声明有序列表演示示例2：有序列表示例9/42

列表的应用6-4有序列表的特性有顺序，每个li标签独占一行（块元素）默认li标签项前面有顺序标记一般用于排序类型的列表，如试卷、问卷选项等10/42

列表的应用6-5定义列表dldt水果/dtdd苹果/dddd桃子/dddd李子/dd/dl声明定义列表声明列表项定义列表项内容演示示例3：定义列表示例11/42

列表的应用6-6定义列表的特性没有顺序，每个dt标签、dd标签独占一行（块元素）默认没有标记一般用于一个标题下有一个或多个列表项的情况12/42

小结列表对比类型说明项目符号无序列表以ul标签来实现以li标签表示列表项无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容有序列表以ol标签来实现以li标签表示列表项有序列表ol-li一般用于显示带有顺序编号的特定场合定义类表以dl标签来实现以dt标签定义列表项以dd标签定义内容定义列表一般适用于带有标题和标题解释性内容的场合13/42

学员操作—制作音乐排行榜需求说明使用无序列表制作音乐排行榜热门活动标签嵌套及标签语义化使用，理解标签语义化练习完成时间：15分钟提示14/42

学员操作—制作音乐排行榜需求说明使用有序列表制作音乐排行榜练习完成时间：10分钟15/42

常见问题及解决办法代码规范问题调试技巧共性问题集中讲解共性问题集中讲解16/42

表格为什么使用表格简单通用结构稳定基本结构单元格行列17/42

表格的基本语法tabletrtd第1个单元格的内容/tdtd第2个单元格的内容/td……/trtrtd第1个单元格的内容/tdtd第2个单元格的内容/td……/tr/table表格标签语法行标签单元格标签演示示例4：基本表格18/42

表格的跨行和跨列3-1表格的跨列tabletrtdcolspan=n单元格内容/td/trtrtd单元格内容/td……/tr....../table所跨的列数演示示例5：表格的跨列示例19/42

表格的跨行和跨列3-2表格的跨行tabletrtdrowspan=nnbsp;/tdtdnbsp;/td/trtrtdnbsp;/td/tr/table所跨的行数演示示例6：表格的跨行示例20/42

表格的跨行和跨列3-2表格的跨行和跨列……trtdcolspan=3学生成绩/td/trtrtdrowspan=2张三/tdtd语文/tdtd98/td/tr……跨列跨