这一节，我们继续用纯HTML来做一个实战小案例。
我找了一个图书详情的页面，就像这样：
这一小节，我们用纯HTML标签，来实现一下这个图书详情的内容。
目录
1 布局分析
我们看这张设计图，
- 这是一个左右结构；
- 左侧是一张图书的封面图；
- 右侧是一个整体结构，然后又分上下结构排列；
- 图书名称、作者介绍、图书简介；
- 再下面是价格，折扣，以及原价；
脑子里一定要有一个心理构思，大概的布局，就像这样：
扫描二维码关注公众号，回复：
17441421 查看本文章
2 用到的标签
下面我们分析一下会使用到的标签：
- 左右结构，目前想到的是横向排列的行内元素，但不太合适，在不使用CSS的时候，我们可以考虑 table 布局，这可以做成一行两列的；
- 右侧呢，分上下布局，第一行的标题，我们可以使用 h2 标签，标题嘛，很合适；
- 下面2行可以使用段落，也就是 P 标签；
- 第四行，我们看设计图，有一个横线，可以想到 hr 标签，对吧；
- 第五行，是几个横向排列的，可以想到 span
- 第五行最后有个删除字，想到 del 标签。
3 实战代码
下面，我们来真是写一下代码，一定要自己练着写，代码是练出来的，不是看出来的，一定记住。多写：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个网页</title>
<style type="text/css">
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="./files/imgs/book.png" />
</td>
<td width="500">
<h2>动手学深度学习（PyTorch版）</h2>
<p>阿斯顿·张（Aston Zhang）[美]扎卡里·C. 立顿（Zachary C. Lipton） 李沐（Mu Li） [德]亚历山大·J. 斯莫拉（Alexander J. Smola）</p>
<p>《动手学深度学习》全新PyTorch版本，李沐和亚马逊科学家阿斯顿·张等大咖作者强强联合之作，机器学习、深度学习领域重磅教程，交互式实战环境，配套资源丰富！</p>
<hr/>
<div>
<span>￥</span>
<span>87.84</span>
<span>[8.0折]</span>
<span><del>[定价:109.8元]</del></span>
</div>
</td>
</tr>
</table>
</body>
</html>4 实战效果
