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

愚人钊呀

已于 2023-06-20 17:21:11 修改

阅读量53

点赞数

分类专栏： HTML 文章标签： html css3 学习前端 vscode

于 2023-04-25 16:09:36 首次发布

本文链接：https://blog.csdn.net/qq_44114187/article/details/130360636

版权

HTML 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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

一、列表

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

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>

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>

三、媒体元素

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 />

实例展示