HTML5-表格、列表、媒体元素

表格

由 < table > 标签来定义

• 每个表格均有若干行（由 < tr > 标签定义）

• 每行被分割为若干单元格（由 < td > 标签定义）

• 字母 td 指表格数据（table data），即数据单元格的内容

• 数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

     <table>	              定义表格
   	<th>	              定义表格的表头
      <tr>	              定义表格的行
      <td>	              定义表格单元
  

跨列：clospan="n" 跨行：rowspan="n"

<caption>	          定义表格标题
<colgroup>	          定义表格列的组
<col>	      		  定义用于表格列的属性
<thead>		  	  	  定义表格的页眉
<tbody>				  定义表格的主体
<tfoot>	 			  定义表格的页脚

列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表使用 < ul > 标签，每个列表项< li >

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

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签，每个列表项 <li> 。列表项使用数字来标记

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

自定义列表不仅仅是一列项目，而是项目及其注释的组合
申明自定义列表<dl> ，自定义列表头 <dt> ，自定义列表数据 <dd> 

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

音频&视频

音频最好的解决方法：HTML5 < audio > 元素会尝试以 mp3 或 ogg 来播放音频。
如果失败，代码将回退尝试 < embed > 元素。

<audio controls="controls" height="100" width="100">
    <source src="song.mp3" type="audio/mp3" />
    <source src="song.ogg" type="audio/ogg" />
	<embed height="100" width="100" src="song.mp3" />
</audio>

视频最好的解决方法：HTML 5 + < object > + < embed >

   <video width="320" height="240" controls="controls">
      <source src="movie.mp4" type="video/mp4" />
   	  <source src="movie.ogg" type="video/ogg" />
      <source src="movie.webm" type="video/webm" />
    <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
    </object>
    </video>

HTML5结构元素

<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>

< iframe >内联框架

< iframe >属性（实现页面间的相互跳转）
在被打开的框架上加name属性
在超链接上设置target目标窗口属性为希望显示的框架窗口名

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

<iframe name="baidu" frameborder="1" height="200" width="900"></iframe>
<p><a href="http://www.baidu.com" target="baidu">点击打开百度</a></p>