一、列表
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标签引入多个文件，保证在多个浏览器上都能正常播放。主流浏览器对文件格式的支持如下：
| IE | Firefox | Opera | Chrome | Safari | |
|---|---|---|---|---|---|
| Ogg | 不支持 | 3.5+ | 10.5+ | 5.0+ | 不支持 |
| MPEG4 | 9.0+ | 不支持 | 不支持 | 5.0+ | 3.0+ |
| WebM | 不支持 | 4.0+ | 10.6+ | 6.0+ | 不支持 |
四、浮动框架
浮动框架可以在一个网页的某个区域中加载另外一个网页：
<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值一致。
