HTML5列表、表格、媒体、结构元素、iframe

列表：

无序列表：

语法：

<ul>

<li>........</li>

<li>........</li>

<li>........</li>

</ul>

特性：

无序，块元素（独占一行）、默认内容之前加上实心小圆点

应用场景：

导航、侧边栏新闻、有规律的图文组合模块等。

有序列表：

语法：

<ol>

<li>.......</li>

<li>.......</li>

<li>.......</li>

</ol>

特性：

有序、块元素、内容之前默认阿拉伯数字递增

应用场景：

一般用于排序类型的列表，如试卷、问卷选项等。

定义列表：

语法：

<dl>

<dt>标题一</dt>

<dd>.......</dd>

<dd>.......</dd>

<dt>标题二</dt>

<dd>.......</dd>

<dd>.......</dd>

</dl>

特性：

无序、每个dt/dd标签独占一行、默认没有标记

应用场景：

一般用于一个标题下有一个或多个列表项的情况

表格：

表格的基本结构：

单元格、行、列

语法：

<table>

<tr>

<th>第1个单元格的内容</th>

<th>第2个单元格的内容</th>（一般用于表格标题）

.......

</tr>

<tr>

<td>第1个单元格的内容</td>

<td>第2个单元格的内容</td>

. .....

</tr>

</table>

<table border="2">：设置表格的边框属性

跨列：

单元格的横向合并

语法：

<td colspan="所需跨列的列数">单元格内容</td>

跨行：

单元格纵向合并

语法：

<td rowspan="所需跨行的行数">单元格内容</td>

媒体元素：

视频：

语法：

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

controls为控件属性（播放、暂停、音量控制、下载等），属性还可以添加width/height等

注意：

由于各个浏览器所支持的视频格式会有差异，所以需要引入source属性

例：

<video controls>

<source src="xxxxx.webm"/>

<source src="xxxxx.mp4"/>

您的浏览器不支持video（提示语句）

</video>

音频：

基本语法和视频相同<audio></audio>

结构元素：

<header></header>

标记头部区域的内容

<section></section>

一般用于网页主体内容

<footer></footer>

标记脚部区域的内容

iframe框架:

应用场景：

主要作用是使页面的部分内容用框架实现，一般用于在页面中引用站外的页面内容。

语法：

<iframe sre="引用页面地址" name="框架标识名" ...></iframe>

使用示例：

（1）在被打开的框架上加name属性

<iframe name="mainFrame" src="subFrame/the_second.html"/>

（2）在超链接上设置target目标窗口属性为希望现实的框架窗口名

<a href="subFrame/the_second.html" target="mainFrame" >...</a>