第七节：生活中的我模块
本节上，让我们共同完成“照片墙”模块，即“生活中的我”模块。照片墙我们也不陌生，比如说百度的图片搜索，最终便是以照片墙的形式展现给我们的。
我们看到，第一张图片就像一块砖一样，最终形成了照片墙。
我们也要做照片墙，和百度给我们的稍有不同，百度的照片墙，是一行一行的提供给我们的。比如，我们红色框出第一行，用绿色框出第三行。
而我们的个人简历，是一列一列提供给我们的。
比如我们红色圈出第一列，用绿色圈出第二列。
当然，无论是行为主，还是列为主，我们都可以使用我们前面学过的表格的方式来成功的开发出照片墙。
初始化
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<hr />
<!-- 生活中的我 结束 -->准备素材
我准备了3个图片素材：400px(像素) * 280px(像素)一张，400px * 140px 两张。 如下：
并把上述三张图片，放至到index.html所在路径。
制作表格
在制作照片墙的过程中，我们遵循的原则是：由大到小，先行后列。
按上述原则，我们对照片墙进行第一步分解，即开发一个1行2列的表格。如下图:
代码如下：
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->
插入图片
和在上节中为a标签加图片一样，我们直接将图片插入到表格数据单元td中。
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td>第一行第二列</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->效果如下:
我们看到，表格中的第一列中加入了图片，第二中仍然是文字。
建立子表格
第二列中，我们需要将其转化为一个2行1列的表格。即:
在td标签中，除了前面我们接触到的，可以加入文字、图片外，还可以加入其它的标签来实现更多的展示效果。比如，我们在这里在td中加入table标签。
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td><table></table></td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->为了使代码更易读，我们对上述代码进行格式化。代码的格式化对代码进行换行，也多了一些空格，但没有关系，因为浏览器会自动的忽略这些换行与空格，以保证格式化后的效果与格式化前一模一样。
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td>
<table></table>
</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->然后，我们在子table标签中加入两个行标签tr, 实现2行。
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td>
<table>
<tr></tr>
<tr></tr>
</table>
</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->在每一行中，都增加一列：
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td>
<table>
<tr>
<td>第一行，第一列</td>
</tr>
<tr>
<td>第二行，第一列</td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->效果如下：
插入图片
和前面一样，我们将两个小图片分别插入到第一行，第一列与第二行，第一列的位置上。
<!-- 生活中的我 -->
<h2>生活中的我</h2>
<table>
<tr>
<td><img src="400*280.png" /></td>
<td>
<table>
<tr>
<td><img src="400*140-1.png" /></td>
</tr>
<tr>
<td><img src="400*140-2.png" /></td>
</tr>
</table>
</td>
</tr>
</table>
<hr />
<!-- 生活中的我 结束 -->效果如下：
至此，一个小的照片墙开发便开发成功了。
总结
我们使用了table标签中嵌套table标签的方法来实现了照片墙。在将照片墙转化为table时，我们遵循的原则是：由大到小，先行后列。tabel嵌套成功后，直接插入了img标签来实现了显示照片的目的。在实际的开发中，我们也会大量的使用标签嵌套的方法来实现更加复杂的效果。
至此，一个简单的个人简历便开发完毕了。通过对本章的学习，我们不难发现。html在初级学习阶段，更多的是对标签的记忆和使用。我们需要了解到底有多少种标签，每种标签又能实现什么样的功能。其实不仅是html，其它语言的学习也是一样的，有一些约定的东西，需要我们进行一定的记忆。我们这里的记忆，并不是指当我们需要使用某一种标签时，能够默写出这个标签，能够熟悉这个标签每个属性的写法。而是，我们需要第一时间内确定html是否有实现这个功能的标签，确定这点后，我们需要进行搜索，来查看这个标签的用法及属性，最终借助搜索工具来实现的我们的开发。
简单的事情重复做，你就是专家!
当我们重复的够多的时候，有一天你会突然发现，不经意间，我们竟然记住了所有常用的标签，而且对标签的属性也了如指掌。
还等什么，赶快打开菜鸟教程，让我们从一个菜鸟开始，感受html的伟大魅力吧！
菜鸟教程： http://www.runoob.com/
推荐图书：Head First HTML与CSS（第2版） [Head First HTML and CSS,Second Edition]
写在最后：
html可以认为是计算机工程中，最简单的语言。它是其它语言的基础, 如果我们有机会接触手机开发，你会发现在ios开发及android开发中，其视图的布局思想与html大同小异；如果我们有机会接触B/S架构下的应用程序开发，你会发现html是你所需要掌握的必备技能；如果我们有机会接触微信小程序开发，你也会在其布局中找到html的身影。何止如此？我们在C++的MFC中，VB，VF的视图中，同样可以看到相同的视图布局思想。
招募
助理人员2名:
- 追踪，发现、反馈实验指导中的代码错误，并最终进行BUG修改
- 查找实验指导中的语法、语病、错别字并进行修改
要求：
- 成功安装
jekyll - 课余时间充足
jekyll： 没有域名，没有服务器，便可以拥有自己主页的神奇工具。当然了，本实验指导也是在强大的jekyll驱动下完成的。
安装成功后，将安装成功的截图与个人基本信息一并发送至邮箱: 3792535@qq.com，额满为止。还等什么？现在就去安装jekyll吧，期待你安装成功的好消息！