有了前面的技术和知识准备，下面去完成场景中的任务。
1.3.1 实现工作场景 1 的任务
使用 Dreamweaver 编辑工具编写 HTML 代码，实现如图 1.29 所示的页面效果，注意内容 间的层次结构。
图 1.29 基本块级标签练习 场景任务 1 参考代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>李清照宋词赏析</title>
</head>
<body>
<h1>李清照宋词赏析</h1>
<hr />
<h2>目录</h2>
<p>第一首：如梦令</p>
<p>第二首：一剪梅</p>
<hr />
<h3>如梦令</h3>
<p>作者：李清照</p>
<p>昨夜雨疏风骤，</p>
<p>浓睡不消残酒，</p>
<p>试问卷帘人，</p>
<p>却道海棠依旧。</p>
<p>知否，</p>
<p>知否，</p>
<p>应是绿肥红瘦。</p>
<hr />
<h4>【李清照简介】</h4>
<p>山东省济南章丘人，号易安居士。宋代女词人，婉约词派代表，有“千古第一才女”之称。...</p>
</body>
</html>
1.3.2 实现工作场景 2 的任务
使用 Dreamweaver 编辑工具编写 HTML 代码，实现如图 1.30 所示的页面效果。使用<div>
分区标签作为整个页面内容的容器，然后放置标题、无序列表、有序列表等。块级标签都支持 嵌套。例如，无序列表可以再嵌套无序列表。
图 1.30 常用于页面布局的块级标签练习
场景任务 2 参考代码
<html>
<head>
<title>部分块级标签使用</title>
</head>
<body>
<div>
<h3>商品信息</h3>
<h4>产品类别</h4>
<hr/>
<ul>
<li>护肤品
<ul><li>洁面</li><li>精华</li><li>面膜</li></ul>
</li>
<li>饰品</li>
<li>营养健康</li>
<li>女装</li>
</ul>
<hr/>
<dl>
<dt>膜法世家免洗面膜</dt>
<dd>膜法世家樱桃睡眠免洗面膜 100g 不睡去黄保湿美白</dd>
<dd>价格：129 元</dd>
<dd>所在地：广州</dd>
</dl>
<hr/>
<h4>购物流程</h4>
<ol>
<li>确认购买信息</li>
<li>付款到芙蓉</li>
<li>确认收货</li>
<li>付款给商家</li>
<li>双方评价</li>
</ol>
</div>
</body>
</html>
1.3.3 实现工作场景 3 的任务
对于场景的任务我们通过分析，应该整体使用自定义列表，将图片作为术语标题<dt>，文 字内容作为术语描述<dd>，范围标签<span>用于标识行内的 10 这个数字，“促销信息”用标 题标签修饰。
图 1.31 行级元素 场景任务 3 参考代码
</html>
<head>
<title>上机练习-行级元素</title>
</head>
<body>
<h1>促销信息</h1>
<dl>
<dt><img src="images/jiemian3.jpg" alt="相宜本草" title="相宜本草"/></dt>
<dd>相宜本草</dd>
<dd>滋润型的洁面产品，适合中至干性，混合性肌肤，秋冬等干燥季节</dd>
<dd>跳楼疯抢价<span style="color:red;font-size:60px;">10</span>元起 </dd>
</dl>
</body>
</html>