HTML-列表、表格和媒体元素的简单使用

列表

• 无序列表

<!--声明无序列表-->
<ul>
	<!--声明列表项-->
      <li>西游记</li>
      <li>水浒传</li>
      <li>红楼梦</li>
      <li>三国演义</li>
 </ul>

一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

• 有序列表

<!--声明有序列表-->
<ol>
	<!--声明列表项-->
      <li>西游记</li>
      <li>水浒传</li>
      <li>红楼梦</li>
      <li>三国演义</li>
 </ol>

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

• 定义列表

<!--声明定义列表-->
<dl>
	<!--声明列表项-->
    <dt>水果</dt>
    <!--声明列表内容-->
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

表格

<table border="1">
    <!--colspan 跨列合并，合并几列，colspan="n",将下边要合并的列屏蔽掉（横着合并）-->
    <!--rowspan 跨行合并，合并几列，rowspan="n",将下边要合并的行屏蔽掉（竖着合并）-->
    <!--    <tr>-->
 <!--th标签在表格中是居中，字体加粗-->
<!--        <th>总页面流量</th>-->
<!--        <th>共计来访</th>-->
<!--        <th>会员</th>-->
<!--        <th>游客</th>-->
<!--    </tr>-->
    
    <tr>
        <!--合并3列-->
        <td colspan="3" rowspan="2">1行1列</td>
<!--        <td>1行2列</td>-->
<!--        <td>1行3列</td>-->
    </tr>
    <tr>
        <td>2行1列</td>
        <!--合并第二行的第2列和第3列-->
        <td colspan="2">2行2列</td>
<!--        <td>2行3列</td>-->
    </tr>
    <tr>
        <!--合并第3行的第1列和第2列-->
        <td colspan="2">3行1列</td>
<!--        <td>3行2列</td>-->
        <td>3行3列</td>
    </tr>
    <tr>
        <td>4行1列</td>
        <td>4行2列</td>
        <td>5行3列</td>
    </tr>
    <tr>
        <td>5行1列</td>
        <td>5行2列</td>
        <td>5行3列</td>
    </tr>
</table>

视频元素和音频元素

<!--
    视频
-->
<!--
    controls 控件
    loop 循环播放
    autoplay 自动播放
    muted 无声
-->
<video controls loop autoplay muted width="400" height="400">
    <source src="./source元素/video.mp4">
    <source src="./source元素/video.webm">

</video>
<!--
   音频
-->
<!--
    controls 控件
    loop 循环播放
-->
<audio controls>
    <source src="music/music.mp3"/>
    <source src="music/music.ogg"/>
</audio>