一、课堂练习
练习1：制作树形列表
<body>
<h2>我的电脑文件列表</h2>
<ul type="disc">
<li>
我的电脑
<ul type="circle">
<li>
本地磁盘(C:)
<ul type="square">
<li>我的文档</li>
<li>我的收藏</li>
</ul>
</li>
</ul>
<ul type="circle">
<li>
本地磁盘(D:)
<ul type="square">
<li>我的游戏</li>
<li>我的资料</li>
<li>我的电影</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
练习2：模拟试卷
<body>
<h1>HTML在线考试试题</h1>
<ol type="1">
<li>
HTML中，换行使用的标签是（）。
<ol type="a">
<li><br /></li>
<li><p></li>
<li><hr /></li>
<li><img /></li>
</ol>
</li>
<li>
<img />标签的（）属性用于指定图像的地址。
<ol type="a">
<li>alt</li>
<li>href</li>
<li>src</li>
<li>addr</li>
</ol>
</li>
<li>
创建一个超级链接使用的是（）标签。
<ol type="a">
<li><a></li>
<li><ol></li>
<li><img /></li>
<li><hr /></li>
</ol>
</li>
<li>
<img />标签的（）属性用来设置图片与旁边内容的水平距离。
<ol type="a">
<li>hspace</li>
<li>vspace</li>
<li>border</li>
<li>alt</li>
</ol>
</li>
<li>
下面HTML结构中，不属于列表结构的是（）。
<ol type="a">
<li>ul-li</li>
<li>ol-li</li>
<li>dl-dt-dd</li>
<li>p-br</li>
</ol>
</li>
练习3：易趣商品列表
<body>
<img src="图片素材/header.jpg">
<p>首页 > 中国馆 > 女装/女士精品 > 所有商品</p>
<img src="图片素材/list_header.jpg">
<h2>热点推荐</h2>
<dl>
<dt><img src="图片素材/photo_01.jpg"</dt>
<dd>一口价：49.00
全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<dl>
<dt><img src="图片素材/photo_02.jpg"</dt>
<dd>一口价：35.00
2011新款T恤短袖 t恤女短袖 影子熊猫</dd>
</dl>
<dl>
<dt><img src="图片素材/photo_03.jpg"</dt>
<dd>一口价一口价：48.00
钉珠蝴蝶结秋冬背心呢料裙911 -4366</dd>
</dl>
<dl>
<dt><img src="图片素材/photo_04.jpg"</dt>
<dd>一口价：88.00
2011 春装 新款 女装 假两件拼接修身包臀裙 洋装 长袖连衣裙</dd>
</dl>
<dl>
<dt><img src="图片素材/photo_05.jpg"</dt>
<dd>一口价：169.00
卖家推荐 2011春装新款 时尚韩版 假两件式 百褶 连衣裙 0210806 热销款</dd>
</dl>
<dl>
<dt><img src="图片素材/photo_06.jpg"</dt>
<dd>一口价：98.00
波西米亚 民族风格 扎染珠片 多穿裙 沙滩</dd>
</dl>
Copyright © 2010 易趣版权所有
</body>
二、课后作业
1、百度品牌全知道
<body>
<img src="images/iknowshouye.jpg"
<h2>品牌全知道</h2>
<ul type="disc">
<li><p><img src="images/icon-1.jpg">理肤泉敏感全知道</p></li>
<li><p><img src="images/icon-2.jpg">薇姿健康皮肤全知道</p></li>
<li><p><img src="images/icon-3.jpg">中信银行全知道</p></li>
<li><p><img src="images/icon-4.jpg">Windows7全知道</p></li>
<li><p><img src="images/icon-5.jpg">海信电视全知道</p></li>
<li><p><img src="images/icon-6.jpg">多美滋全知道</p></li>
<li><p><img src="images/icon-7.jpg">三星手机全知道</p></li>
</ul>
</body>
网友评论