第二章 列表、表格与媒体元素
目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、列表
定义:列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。
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> </td>
<td> </td>
</tr>
<tr>
<td > </td>
<td> </td>
</tr>
![](https://i-blog.csdnimg.cn/blog_migrate/88cb06bec0aa3be03790f7d32c7e61dd.png)
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>
![](https://i-blog.csdnimg.cn/blog_migrate/1834da1087d297b917721c939fdef306.png)
三、媒体元素
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中列表、表格与媒体元素的使用。