列表、表格与媒体元素

列表

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

• 列表的分类
  无序列表
  有序列表
  定义列表

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

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

• 定义列表的特性
  没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
  默认没有标记
  一般用于一个标题下有一个或多个列表项的情况

小结 列表对比

表格<table>

• 为什么使用表格
  简单通用
  结构稳定
  基本结构

–语法：

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

table:表格标签
tr:行标签
td：元格标签

-表格的跨列

<table>
  <tr>
    <td colspan="n">单元格内容</td>
  </tr>
  <tr>
    <td>单元格内容</td>
     ……
  </tr>
   ......
</table>

colspan：所跨的列数

-表格的跨列

<table >
  <tr>
    <td rowspan="n">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

rowspan：所跨的行数 

-表格的跨行和跨列

<tr>
        <td colspan="3">学生成绩</td>
</tr>
<tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>

HTML5的媒体元素

• 视频元素
  video
• 音频元素
  audio
  <video src="视频路径" controls></video>
  controls：提供播放、暂停和音量的控件
  

  ---

主流浏览器支持的视频格式

---

HTML5的结构元素

---

<iframe>内联框架

–语法：<iframe src="path" name="mainFrame" ></iframe>
–提示：可以设置src的属性值为http://www.bdqn.cn，在这个页面中也可以打开一个线上的网页

–<iframe>属性（实现页面间的相互跳转）
在被打开的框架上加name属性

– 在超链接上设置target目标窗口属性为希望显示的框架窗口名

---