这一节，我们继续用纯HTML来做一个实战小案例。
我找了一个图书详情的页面，就像这样：
这一小节，我们用纯HTML标签，来实现一下这个图书详情的内容。
目录
1 布局分析
2 用到的标签
3 实战代码
1 布局分析
我们看这张设计图，
- 这是一个左右结构；
- 左侧是一张图书的封面图；
- 右侧是一个整体结构，然后又分上下结构排列；
- 图书名称、作者介绍、图书简介；
- 再下面是价格，折扣，以及原价；
脑子里一定要有一个心理构思，大概的布局，就像这样：
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 实战效果
