列表，表格，与媒体元素

列表

一.无序列表

基本语法

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

无序列表的特性

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

示例

二.有序列表

基本语法

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

有序列表的特性

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

示例

三.定义列表

基本语法

<dl>声明定义列表
    <dt>...</dt>声明列表项
    <dd>...</dd>定义列表项内容
</dl>

定义列表的特性

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

示例

表格

一.表格的基本语法

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

二.表格的跨行

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

三.表格的跨列

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

四.表格的跨行和跨列

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

五.示例

媒体元素

一.视频元素(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>

示例

内联框架

一.语法

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

二.示例