一.列表:信息资源展现的一种形式，使信息结构化和条理化，并且以列表的形式展现出来
1.1无序列表
语法：
<ul>
<li>女装/男装/内衣</li>
<li>鞋靴/箱包/配件</li>
<li>童装玩具/孕产/用品</li>
</ul>
特点：1.没有顺序，每个li元素独占一行（块级元素）
2.默认每个li元素前有一个实心的小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
注意：
1.遵循W3C标准，ul标签下只能有li标签，但是li标签下可以包含任何标签
1.2有序列表
语法：
<ol>
<li>李强</li>
<li>李强2</li>
</ol>
特点：1.有顺序，每个li元素独占一行
2.默认每个li元素前有顺序标识1,2,3
3.一般用于排序类型的列表，例如：问卷调查，
1.3定义列表
语法：
<dl>
<dt>标题1</dt>
<dd>标题1的内容1</dd>
<dd>标题1的内容2</dd>
<dt>标题2</dt>
<dd>标题2的内容1</dd>
<dd>标题2的内容2</dd>
</dl>
特点：1.没有顺序，每个dt和dd标签独占一行
2.默认没有标记
3.一般用于一个标题下有 一个或者多个列表选
上机训练01:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无序列表的使用</title> </head> <body> <h1>热搜  更多</h1> <ul> <li><img src="image01/img1.png" width="160"height="100"title="没有"><br><p>推荐活动|原创音乐现金榜T榜</p></li> <li><img src="image01/img2.png" width="160"height="100"title="没有"><br><p>推荐节目|《TAImusic》爆笑来袭</p></li> <li><img src="image01/img3.png" width="160"height="100"title="没有"><br><p>推荐歌单|继续宠爱张国荣</p></li> <li><img src="image01/img4.png" width="160"height="100"title="没有"><br><p>推荐活动|330金属音乐巡演 成都小酒馆音乐空间</p></li> </ul> </body> </html>
上机训练02:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>音乐排行榜</title> </head> <body> <h1>音乐排行榜</h1> <ol> <li><a href="">潇洒走一回</a>  <img src="image02/pic1.png"></li> <li><a href="">偏偏喜欢你</a>  <img src="image02/pic1.png"></li> <li><a href="">酒干倘卖无</a>  <img src="image02/pic1.png"></li> <li><a href="">不说再见</a>     <img src="image02/pic1.png"></li> <li><a href="">舍不得你</a>     <img src="image02/pic1.png"></li> <li><a href="">请跟我来</a>     <img src="image02/pic1.png"></li> </body> </html>
上机训练03:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>流量调查表</title> </head> <body> <h2>流量调查表<h2> <table border="3"> <tr> <th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th> </tr> <tr> <td>9756488</td> <td>97656</td> <td>7538087</td> <td>43364677</td> </tr> <tr> <td>46776686</td> <td>85544</td> <td>69357</td> <td>568787</td> </tr> <tr> <td>7538087</td> <td>546774</td> <td>476897</td> <td>334545</td> </tr> <tr> <td>平均每人浏览</td> <td colspan="3">1.58</td> </tr> </body> </html>
上机训练04:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>北大青鸟宣传片</title> </head> <body> <video controls="controls"> <source src="video/vedio.avi"> <source src="video/vedio.mp4"> <source src="video/video.webm"> </video> </body> </html>
上机训练05:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>iframe的使用</title> </head> <body> <h3>使用iframe嵌套网页</h3> <p> <a href="https://www.baidu.com/index.php?tn=site888_2_pg" target="mainFrame">点击打开百度</a><br/> <a href="http://360.xueshihou.org/" target="mainFrame">点击打开北大青鸟</a><br/> <a href="sheng_01.html" target="mainFrame">点击打开了一个HTML页面</a><br/> </p> <iframe name="mainFrame" width="800px" height="400px"/> </body>
简答4
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>品牌全知道</title> </head> <body> <img src="image06/iknowshouye.jpg"> <h3>品牌全知道</h3> <ul> <li><img src="image06/icon-1.jpg">理肤泉敏感全知道</li> <li><img src="image06/icon-2.jpg">薇姿健康肌肤全知道</li> <li><img src="image06/icon-3.jpg">中信银行全知道</li> <li><img src="image06/icon-4.gif">Windows7全知道</li> <li><img src="image06/icon-5.jpg">海信电视全知道</li> <li><img src="image06/icon-6.jpg">多美滋全知道</li> <li><img src="image06/icon-7.jpg">三星手机全知道</li> </ul> </body> </html>
简答5:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贵美商城-商品购买页</title> </head> <body> <table border="3" > <tr > <td width="1400px" height="200"></td> </tr> <tr> <td width="1400px" height="600"> </td> </tr> <tr> <td width="1400px" height="200"> </td> </tr> </table> </body> </html>