P5、HTML基础_列表、表格和媒体元素

列表

• 无序列表：特殊符号开头
• 有序列表：有顺序开头（123456……）
• 定义列表：图片配文字内容

无序列表

 <ul>
        <li>文本内容或图片</li>
    </ul>

特点：

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

有序列表

<ol>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

特点：

1. 有顺序，每个标签独占一行（块元素）
2. 默认标签前面有顺序标记
3. 一般用于排序类型的列表如考卷、问卷选项等

定义列表

 <dl>声明定义列表
        <dt>文章标题</dt>（相当于标题）
        <dd>文本1</dd>
        <dd>文本2</dd>
        <dd>文本3</dd>

    </dl>

特点：

1. 没有顺序，每个标签独占一行（块元素）
2. 默认没有标记
3. 一般用于一个标题下有一个或者多个列表项的情况

表格

• 单元格
• 行
• 列
  三种元素组成一个表格
  

语法：

  <table border="1"> border--加上表格方框线
        <tr>
            <td>第一个单元格</td>
            <td>第二个单元格</td>
        </tr>
        <tr>
            <td>第三个单元格</td>
            <td>第四个单元格</td>
        </tr>
    </table>

拓展一：
<td></td>普通单元格
<th></th>字体加粗单元格

拓展二：
跨行与跨列
跨行rowspan：
<td rowspan="n"></td>n代表一个单元格所占的行数随之下一行进行删除

跨列colspan：
<td colspan="n"></td>n代表一个单元格所占的列数随之下一列进行删除
实例：

HTML5媒体元素

HTML5媒体元素中有音频audio、视频video两大类

视频语法

<video src="视频路径" controls></video>
    媒体播放控件：
    controls:播放暂停控件
    loop：循环播放控件
    autoplay：自动播放控件

目前浏览器支持的格式

拓展：
一般多个浏览器可能只支持同一个媒体播放，这时就需要组合方式让所有浏览器支持播放

1. ogg与MPEG4
2. webm与MPEG4

 <video controls>
        <source src="地址" type="">
        <source src="地址" type="">
    </video>

音频语法

  <audio src="地址"></audio>

目前浏览器支持的格式

音频组合方式与视频基本一致！