HTML5（2）

HTML5列表

一、列表定义

1.列表定义：列表是一种特别的对象集合（信息资源的展示形式）

2.集合定义：集中在一起，再合二为一（聚集）

3.聚集定义：多个列（信息资源）排在一起

4.信息资源定义：一堆数据，可能是字符，可能是图片

5.HTML5如何实现列表

三种方式：

（1）无序列表     （2）有序列表     （3）定义列表

二、无序列表

1.定义：没有顺序

2.代码结构：

<ul>  </ul>

<li>  </li> 

三、无序列表特性

1.没有顺序，每个<li>标签独占一行（块元素）

2.默认<li>标签项前面有个实心小圆点

3.应用场景：常应用在导航功能中

四、有序列表

1.定义：有顺序

2.代码结构：

<ol>  </ol>

<li>  </li> 

五、有序列表特性

1.有顺序，每个<li>标签独占一行（块元素）

2.默认<li>标签项前面有顺序标记

3.应用场景：一般用于排序类的列表，如试卷、问卷选项等

六、定义列表

1.定义：定义某种关系（包含和被包含的关系）

2.代码结构：

<dl>  </dl>

<dt>  </dt>

<dd>  </dd>

七、定义列表特性

1.没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）

2.默认没有标记

3.一般用于一个标题下有一个或者多个列表项的情况（如果存在包含和被包含的关系就可以使用定义列表）

八、三种类型的列表区别

无序列表：<ul>为标签，<li>为列表项

有序列表：<ol>为标签，<li>为列表项

定义列表：<dl>为标签，<dt>为列表项，<dd>为内容

HTML5表格

一、表格

1.表格定义：有行有列，多个单元格组成

2.表格缘由：可以清晰地将多个信息资源组合在一起

3.特点：简单通用、结构稳定

二、表格语法结构

代码：<table broder="1px"> 

                 <tr>  <td>xx</td>  <td>xx</td>  </tr> 

                 <tr>  <td>xx</td>  <td>xx</td>  </tr>     

           </table>

table：表格标签名称

border：边界

1px：1像素

tr：表格中的行标签

td：表格中的单元格标签（列标签）

三、表格的跨列

col：column列

<table border="1px">

     <tr>  <td colspan="2">xx</td>  </tr>

     <tr>  <td>xx</td>  <td>xx</td>  </tr>     

 </table>

四、表格的跨行

row：行

<table border="1px">

     <tr>  <td rowspan="2">xx</td>  <td>xx</td>  </tr>

     <tr>  <td>xx</td>  </tr>

</table>

HTML5媒体元素

一、HTML媒体元素应用场景

一般是应用于网站中的音乐文件或是视频文件

二、HTML5媒体元素标签的种类

（1）video视频元素

（2）audio音频元素

三、Vidio

代码：<video controls="controls">

                  <source src="video/video.webm" type="video/webm"/></source>

           </video>

四、Audio

代码：<audio controls="controls">

                   <source src="music.ogg" type="audio/ogg"/></source>

           </audio>