03 制作课程播放页面 知识链接.pptxVIP

03制作课程播放页面

知识链接01.HTML5列表02.HTML5表格03.HTML5媒体元素

HTML5列表01

HTML5列表列表是HTML5中一个经典的数据形式，用来表现具有相同优先级的内容,如导航栏、商品列表、文章列表等。列表可以分为：无顺序要求的无序列表，有顺序要求的有序列表，用来定义概念的定义列表。

HTML5列表无序列表无序列表由ul标签和li标签组成，使用ul标签作为无序列表的声明，使用li标签作为每个列表项，其结构语法如下：ulli第1项/lili第2项/lili第3项/li/ul无序列表的特性如下：（1）没有顺序，每个li标签独占一行，属于块元素。（2）默认li标签列表项前面有一个实心小圆点。无序列表一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

HTML5列表有序列表有序列表由ol标签和li标签组成，使用ol标签作为有序列表的声明，使用li标签作为每个列表项。其结构语法如下：olli第1项/lili第2项/lili第3项/li/ol有序列表的特性如下。（1）有顺序，每个li标签独占一行，属于块元素。（2）默认li标签列表项前面有顺序标记。有序列表一般用于排序类型的列表，如试卷、问卷选项等。

HTML5列表定义列表定义列表是一种特殊的列表形式，它是标题与列表项的结合。定义列表由dl标签、dt标签、dd标签组成。使用dl标签作为定义列表的声明，使用dt作为每个定义的标题，使用dd标签作为定义的说明dldt标题一/dtdd第1项/dddd第2项/dddt标题二/dtdd第1项/dd/dl定义列表的特性如下。（1）没有顺序，每个dt标签、dd标签独占一行，属于块元素。（2）默认没有标记。定义列表一般用于一个标题下有一个或多个列表项的情况。

HTML5表格02

HTML5表格表格是块状元素，设计该标签的初衷是用于显示表格数据。例如，学校中常见的考试成绩单、选修课课表、企业中常见的工资账单等。由于表格行列的简单结构，以及在生活中的广泛使用，因此对它的理解和编写都很方便。

HTML5表格

HTML5表格基础结构按照表格的结构来划分，有以下区域与概念:?表格标题：表格的标题，通常出现在表格上方并居中，文字默认加粗。?表格头部：表格头部用来区分表格结构，通常为表格的最上方，包含了对应下方列的列标题。?表格主体：表格主体用来区分表格结构，表示数据内容区域。?表格尾部：表格尾部用来区分表格结构，通常为表格的最下方，包含表格的备注信息等。?单元格：单元格是表格的最小单位，一个或多个单元格纵横排列组成了表格。?行：一个或多个单元格横向堆叠形成行。?列：一个或多个单元格纵向堆叠形成列。

HTML5表格基础结构HTML5中使用以下标签来制作表格：table定义表格，包裹整个包裹区域caption定义表格标题，表格上方水平居中的标题内容thead定义表格头部，通常包裹列标题内容tbody定义表格主体，主要包含数据内容tfoot定义表格尾部，表格最下方部分，通常包裹注释内容tr定义表格行，表格一行，用来包裹单元格th定义标题单元格，表示列标题的单元格td定义普通单元格，表示数据内容的单元格

[案例]制作表格我们一起来完成一个案例，制作一个3行3列的表格，效果如下图所示：表格由表格标题、表格头部、表格主体3部分构成。先完成table标签，根据是否需要边框来设定table标签的border属性值（设定围绕表格的边框的宽度），然后在table标签中完成caption、thead、tbody的结构。然后设定表格标题内容，在thead标签和tbody标签中使用tr标签划分行。在thead标签的tr标签中使用th标签设定标题单元格内容，在其他tr标签中使用td标签设定普通单元格内容。

视频演示案例制作表格

合并单元格现实中往往需要较复杂的表格，有时就需要把多个单元格合并为一个单元格，这要用到表格的跨行与跨列功能。跨行是指单元格的纵向合并，使用rowspan属性设定跨行，对应值为合并的单元格个数。跨列是指单元格的横向合并，使用colspan属性设定跨列，对应值为合并的单元格个数。

[案例]合并单元格tableborder=2caption表格标题/captiontheadtrth1行1列的标题/thth1行2列的标题/thth1行3列的标题/th/tr/th