一、列表

HTML中常用的列表有无序列表和有序列表。

其中无序列表由UL和LI标签组成，UL代表整个列表，LI代表列表中的每一项。如下：

无序列表：

<h2>三国名将-无序列表</h2>
<ul type="disc">
    <li>关羽</li>
    <li>张飞</li>
    <li>赵云</li>
</ul>

备注：UL中的type属性决定了列表项前面小图标的样子，square:正方形,取值还可以是disc或circle,分别代表实心圆和空心圆。

其中有序列表由OL和LI标签组成，OL代表整个列表，LI代表列表中的每一项。如下：

有序列表：

<h2>三国名将-有序列表</h2>
<ol type="1">
    <li>关羽</li>
    <li>张飞</li>
    <li>赵云</li>
</ol>

备注：UL中的type属性决定了有序列表前面代表顺序的写法样式，type=i或I，列表符号为小写或大写罗马字符;type=a或A，列表符号为英文小写或大写字母; type=1,列表符号为阿拉伯数字。

列表嵌套：

<h2>三国名将</h2>
<ul>
    <li>刘备军团
        <ul>
            <li>关羽</li>
            <li>张飞</li>
            <li>赵云</li>
        </ul>
    </li>
    <li>曹操军团
        <ul>
            <li>许褚</li>
            <li>典韦</li>
            <li>曹仁</li>
        </ul>
    </li>
    <li>孙权军团
        <ul>
            <li>太史慈</li>
            <li>黄盖</li>
            <li>周瑜</li>
        </ul>
    </li>
</ul>

二、表格

HTML中表格主要由table,tr,td三个标签组成，其中table代表整个表格，tr代表一行，td代表一行中的某一个单元格，如下代码是一个4行4列的表格：

<table border="1" width="800" align="center">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td align="center">关羽</td>
        <td>男</td>
        <td>25</td>
        <td>喝酒</td>
    </tr>
    <tr>
        <td>张飞</td>
        <td>男</td>
        <td>26</td>
        <td>抽烟</td>             
    </tr>
    <tr>
        <td>赵云</td>
        <td>男</td>
        <td>27</td>
        <td>烫头</td>             
    </tr>
</table>

备注：

（1）其中第一行的th代表表头，里面的文字会有加粗，居中的效果。

（2）<td align="center">关羽</td>，这里的align设置单元格里面文字内容的水平对齐方式，分别为left（左对齐）,center（中对齐）,right（右对齐）。

（3）<table border="1" width="800" align="center">，这里的代码，其中border属性设置整个表格的边框宽度，width属性设置整个表格的宽度，align属性设置整个表格相对与外部的对齐方式，分别为left（左对齐）,center（中对齐）,right（右对齐），此处的align和td单元格的align意义不同。

表格的标题及背景颜色的设置，如下：

<table border="1" width="1000" align="center">
    <caption>第一季度数码产品销售统计表</caption>
    <tr bgcolor="coral">
        <th>商品名称</th>
        <th>1月</th>
        <th>2月</th>
        <th>3月</th>
        <th>小计</th>
    </tr>
    <tr bgcolor="goldenrod">
        <td>苹果</td>
        <td>5000</td>
        <td>5000</td>
        <td>5000</td>
        <td>15000</td>
    </tr>
    <tr bgcolor="coral">
        <td>小米</td>
        <td>5000</td>
        <td>5000</td>
        <td>5000</td>
        <td>15000</td>          
    </tr>
</table>

备注：

（1）其中<caption>第一季度数码产品销售统计表</caption>设置表格的标题，会在表格的上方居中显示。

（2）bgcolor属性设置背景颜色，写在table标签里面代表设置整个表格背景颜色，写在tr里面代表设置整行背景颜色，写在td里面代表设置当前单元格的背景颜色。

表格的单元格合并，其中分为合并列（colspan）与合并行（rowspan），如下：

<table width="600" border="1" align="center">
    <tr>
        <td colspan="3" align="center">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>95</td>
    </tr>
    <tr>
        <td rowspan="2">李四</td>
        <td>语文</td>
        <td>88</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>91</td>
    </tr>
</table>

备注：

（1）<td colspan="3" align="center">学生成绩</td> 代表此单元格，横向合并3列

（2）<td rowspan="2">张三</td> 此处代表此单元格，垂直方向合并了2行。

三、媒体元素

插入视频基础语法：

<video src="video/hxn.mp4" controls="controls"></video>

以上写法由于视频格式问题，可能在某些浏览器不兼容，可以按照如下写法进行。

<video controls="controls" autoplay="autoplay" muted="muted">
    <source src="video/hxn.mp4">
    <source src="video/hxn.webm">
</video>

controls="controls" ：显示视频播放，暂停，停止等控件按钮。

autoplay="autoplay"：视频自动播放。

muted="muted"：静音。

插入音频基本语法：

<audio controls="controls" src="audio/music.mp3"></audio>

以上写法由于音频格式问题，可能在某些浏览器不兼容，可以按照如下写法进行。

<audio controls="controls">
    <source src="audio/music.mp3" />
    <source src="audio/music.ogg" />
</audio>

controls，autoplay，muted属性含义与视频标签中相同。

备注：

无论是插入视频，还是音频，由于不同浏览器对文件格式的支持不同，所以我们一般通过source标签引入多个文件，保证在多个浏览器上都能正常播放。主流浏览器对文件格式的支持如下：

四、浮动框架

浮动框架可以在一个网页的某个区域中加载另外一个网页：

<iframe src="Demo04.html" width="1000" height="700" frameborder="no" name="myIframe"></iframe>

上述代码表示在当前网页的某个区域加载Demo04.html网页内容。

超级链接与浮动框架的结合：

如果想实现点击超级链接在浮动框架中打开链接的网页，可以参照如下代码：

<a href="Demo01.html" target="myIframe">列表</a> | 
<a href="Demo02.html" target="myIframe">表格</a> |
<a href="Demo03.html" target="myIframe">音频</a> |
<a href="Demo04.html" target="myIframe">视频</a> 
<br /><br />
<iframe src="Demo04.html" width="1000" height="700" frameborder="no" name="myIframe"></iframe>

为了保证点击超级链接后，新网页内容在浮动框架中显示，我们必须将超级链接的target属性值设置成和浮动框架的name值一致。