列表、表格与媒体元素（详解及使用）

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

---

目录

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

一、列表

1.无序列表

2.有序列表

3.定义列表

二、表格

1.表格属性

2.跨列、跨行标签

3.H5中table示例

三、媒体元素

1.视频元素（video）

2.音频元素（audio）

四、iframe内联框架使用（常用）

总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、列表

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

1.无序列表

        特性：无序，每个<li>标签独占一行，默认<li>标签项前面有实心小圆点，一般用于无序类型的列表。

<ul>

        <li>无序列表</li>

</ul>

2.有序列表

        特性：有序，每个<li>标签独占一行，默认<li>标签项前面有顺序标记，一般用于排序类型的列表。

<ol>

        <li>有序列表</li>

</ol>

3.定义列表

        <dt>声明列表项，<dd>列表内容

        特性：无序，每个<dt><dd>标签独占一行，默认无标记，一般用于一个标题下有一个或多个列表的情况。

<dl>

       <dt>水果</dt>

      <dd>苹果</dd>

      <dd>桃子</dd>

      <dd>香蕉</dd>

</dl>

---

二、表格

简单通用，结构稳定。使用<table></table>标签进行制作。

1.表格属性

修改表格的样式，需要在table标签里面进行属性的修改，如下所示。

<!-- 表格 -->
    <table>
      <!-- 表格属性的修改 -->
      <table align="center" border="1" cellpadding="0" cellspacing="0" width="200" height="200">
      <tr>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>11</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>男</td>
        <td>22</td>
      </tr>
      <tr>
        <td>王小美</td>
        <td>女</td>
        <td>18</td>
      </tr>
    </table>

2.跨列、跨行标签

跨列：colspan	<td colspan="3" align="center">跨列</td>
跨行：rowspan	<td rowspan="2" align="center">跨行</td>

代码紧跟表格属性对比：

       <tr>
        <td colspan="3" align="center">跨列</td>
      </tr>
      <tr>
        <td rowspan="2" align="center">跨行</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td >&nbsp;</td>
        <td>&nbsp;</td>
      </tr>

2-1 实例展示

3.H5中table示例

    <table border="1" width="400">
      <thead>
        <th>学号</th>
        <th>姓名</th>
        <th>成绩</th>
      </thead>
      <tbody>
        <tr>
          <td>101</td>
          <td>张三</td>
          <td>11</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>李四</td>
          <td>88</td>
        </tr>
        <tr>
          <td>1003</td>
          <td>王五</td>
          <td>109</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计</td>
          <td colspan="2">88</td>
        </tr>
      </tfoot>
    </table>

3-1  实例展示

---

三、媒体元素

1.视频元素（video）

  <video src="视频路径" controls></video>

controls:提供播放、暂停和音量的控件。

2.音频元素（audio）

<audio src="音频路径" controls></audio >

controls:提供播放、暂停和音量的控件。

四、iframe内联框架使用（常用）

作用：实现页面间的相互跳转

语法：  <iframe src="<!-- 引用页面地址 -->" name="<!-- 框架标识名 -->"></iframe>

页面中跳转：

在被打开的框架上加上name属性，在超链接上设置target目标窗口属性为希望展示的框架窗口名。

<a href="https://m.baidu.com/" target="baidu">点击打开百度</a><br />

<hr />

<iframe src="" name="baidu" style="width: 100%; height: 600px"></iframe>

      <br />

---

总结

提示：这里对文章进行总结：

练习：练习2

例如：以上就是今天要讲的内容，本文仅仅简单介绍了HTML中列表、表格与媒体元素的使用。