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

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

一，列表

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

• 列表主要有三种：有序列表，无序列表，定义列表。

• 列表的使用是二个及以上的标签配合使用。

1.有序列表：

有序列表的特性：

• 有顺序，每个<li>标签独占一行（块元素）。
• 默认<li>标签项前面有顺序标记。
• 一般用于排序类型的列表，如试卷、问卷选项等。

​ 有序列表可通过在<ol>中添加type属性，改变列表的序号：例如：可改为a,A,i等；

​ 有序列表的使用：<ol> <li>列表内容1</li> <li>列表内容2</li> </ol>；

​ 浏览器运行效果：

2.无序列表：

无序列表的特性:

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

​ 无序列表可通过在<ul>中添加type属性，改变列表的序号：circle等；

​ 无序列表的使用：<ul> <li>列表内容1</li> <li>列表内容2</li> </ul>

​ 浏览器运行效果：

3.定义列表：

​ 定义列表的使用：<dl> <dt>标题</dt> <dd>列表内容1</dd> <dd>列表内容2</dd></dl>

​ 浏览器运行效果：

二，表格

为什么使用表格:

• 简单通用
• 结构稳定

​ 其实我们遇到很多网页数据的回显都要用到表格，特别是前后端分离，我们后端要把数据封装好，在前端表格中回显，这是很多后台管理系统要做的事。

1.表格的使用

​ 表格的使用：<table> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td></tr></table>

​ 运行结果：

​ 这样的表格是不是有点和我们的Excal表格不太一样呢，别着急，我们在table中添加border属性就可以了。

​ 添加border属性后：<table border="1"> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> <tr> <td>单元格4</td> <td>单元格5</td> <td>单元格6</td></tr></table>

​ 运行结果：

2.表格的跨列和跨行

​ 跨列和跨行都要在<td>中添加属性，跨列添加：colspan="n",跨行添加：rowspan="n"

​ 跨列和跨行需要多练多敲，找到规律就好了，下面我们来看一个案例；

<table border="1">
			<tr align="center">
				<td colspan="3">aaa</td>
				<td>bbb</td>
				<td>ccc</td>
			</tr>
			<tr align="center">
				<td>ddd</td>
				<td rowspan="3" valign="top">eee</td>
				<td>fff</td>
				<td colspan="2" rowspan="2" valign="top">ggg</td>

				
			</tr>
			<tr align="center">
				<td>hhh</td>
				<td>iii</td>
				
			</tr>
			<tr align="center">
				<td>jjj</td>
				<td>kkk</td>
				<td>mmm</td>
				<td>nnn</td>
			</tr>
		</table>

运行结果为：

我在第二组tr中的第二对td上使用了rowspan=’3′，即表示该单元格将占据3行的位置。这是很好理解的，需要占几行就使用rowspan等于几。

也许难以理解的是接下来的几组tr中的td。为什么每一行只有一对td？

还记得我们前面说过每行中的td数目必须对等吗？观察上面的代码，我们不难发现，一个正常的行(tr)一共包含五个单元格，即五组td。也就是说上述代码中的每组tr标签中的td数目应该是5对。

由于我们在第二组tr中的第2个td使用了rowspan属性，也就是说该单元格占据了多行位置。那么接下来的相应的行数的对应单元格就不需要再通过td表示了。

比如说第三行(代码中的第三组tr)，由于这一行的第二个单元格被第二行的第二个单元格占掉了，那么结果呢？结果就是这一行只剩下四个单元格的位置了，第二行的第四个td也占了两个单元格，因此我们在接下来的几组tr中只写了二对td标签。

在web项目开发过程中灵活使用colspan和rowspan，不仅可以是页面布局更加整洁，而且可以使得代码更简洁。

3.表格的一些属性

​ ⑴align和valign:这两个属性可以让文本移动，align可以让文本水平移动，valign可以让文本垂直移动；属性值有：left（靠左，默认值），center（居中），right（靠右）。

​ ⑵border：调整边框线粗细，属性值为数字，默认单位为：px(像素)。

三，媒体元素video（视频）和audio（音频）

1. video

​ !](https://img-blog.csdnimg.cn/21a91131677542b2bda3164d727b666e.png#pic_center)

​ 如上图所示：video 也需要src指定目标文件路径，属性controls是提供视频窗口下方的进度条，暂停等其他的控件。

​ 每个浏览器对video的渲染都不一样，有兴趣的可以自己在IE和谷歌或者其他的浏览器中试一试，他们的效果是不一样的，而且对视频格式的支持也不一样，可以参考下图（仅供参考）。

​ 由于每个浏览器支持的格式都不太一样，所以我们要准备备选方案：

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

​ 上述代码的多个<source></source>标签代表着如果浏览器不支持.webm的格式那么就会向下解析.mp4格式的视频，属于备选方案，我们的<source></source>标签可以有多个，以便兼容各个浏览器。

主要属性

autoplay：打开网页时自动播放。

loop:循环播放，适用于播放短小的宣传片。

controls：添加视频控件。

2. audio

​ audio和video的用法和属性一致。

四，HTML 5的结构元素

​ HTML 5推荐使用了一些标志性结构型的标签，方便开发人员的读代码和操作。

​ 这些标签并无意义，只是作为标志性的结构型标签，便于前端工程师的划分结构布局。

五，iframe 内联框架

1.iframe的基本使用

<iframe src="path" name="mainFrame" ></iframe>

​ 其中path为引用的路径，可以为外部路径也可以是内部路径。外部路径记得添加http://，mainFrame是框架标识名。

<iframe name="mainFrame" src="subframe/the_second.html" />
<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>

​ 我们可以通过a标签和iframe标签的配合使用来达到一框多用的目的，这样也符合复用的原则，我们的网页就可以互相嵌套使用。

2.iframe的一些属性

width和height：我们可以使用这两个属性，改变内联框架的长和宽。

六，总结