HTML列表、表格与媒体元素

列表、表格与媒体元素

1.列表

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

②列表的分类

列表	标签	特点
无序列表	ul>li	没有顺序，每个<li>标签独占一行（块元素）；默认<li>标签项前面有个实心小圆点
有序列表	ol>li	有顺序，每个<li>标签独占一行（块元素）；默认<li>标签项前面有顺序标记
定义列表	dl>dt+dd	没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）；默认没有标记

Ⅰ.无序列表

    <ul><!--声明无序列表-->
		    <li>...</li><!--声明列表项-->
	</ul>

例:

        <ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
		</ul>	

Ⅱ.有序列表

    <ul><!--声明有序列表-->
		    <li>...</li><!--声明列表项-->
	</ul>

例

		<ol>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
		</ol>

Ⅲ.定义列表

    <dl><!--声明有序列表-->
		    <dt>...</dt><!--声明列表项-->
		    <dd>...</dt><!--定义列表项内容-->
	</ul>

例

		<dl>
			<dt>水果</dt>
			<dd>苹果</dd>
			<dd>橘子</dd>
			<dd>香蕉</dd>
		</dl>

2.表格

①表格的基本语法

例

```html
<table border="1"><!--border可以显示出表格的边框-->
			<tr>
				<td>11</td>
				<td>12</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>

<table border="1"><!--border可以显示出表格的边框-->
			<tr>
				<th>一</th><!--th表示表头标签-->
				<th>二</th>
				<th>三</th>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td>23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
				<td>33</td>
			</tr>
		</table>

2.表格的跨行与跨列
Ⅰ.跨列

<colspan=“n”>为跨行标签，n表示跨的行数
例

<table border="1"><!--border可以显示出表格的边框-->
			<tr>
				<th colspan="2">学生成绩</th><!--th表示表头标签-->
			</tr>
			<tr>
				<td>语文</td>
				<td>61</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>99</td>
			</tr>
		</table>

Ⅱ.跨行

<table border="1"><!--border可以显示出表格的边框-->
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>61</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>99</td>
			</tr>
		</table>

3.HTML的媒体元素

Ⅰ.视频元素 video
基本语法

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

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

Ⅱ.音频元素 audio
基本语法

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

<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
    你的浏览器不支持audio元素
</audio>

<video src="视频路径"  controls<!--控制播放按钮--> autoplay<!--自动播放--> loop="loop"<!--循环播放-->></video>

3.HTML的结构元素

Ⅰ.结构元素

Ⅱ.<iframe>内联框架

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

例

<iframe src="http://www.baidu.com" name="mainFrame" ></iframe>