第三节：基本信息模块
本节中，我们来开发基本信息模块：
生活照
找一张身活照，然后想办法复制到我们实验室的电脑上，并放置到与index.html位置相同的位置上。比如，我找到了一张，起个名字叫：duolaiameng.png（文件名.扩展名）。
插入图片
插入图片，我们使用的是img图片(image)标签。
插入图片标签img后，我们还要告诉这个标签：要插入的图片在哪。这样操作是通过设置img标签的src属性来完成的。
<body>
<h1>Hello World!</h1>
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<img src="duolaiameng.png" />
</body>[注意] 在本节中，我们只展示body中的内容。这表示：body标签外的代码不变。所以上述代码，相当于：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<h1>Hello World!</h1>
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<img src="duolaiameng.png" />
</body>
</html>刷新页面：
是的，图片标签不需要界定结束位置，是一个自闭合标签。在编写代码时，我们更愿意在自闭合标签的最右侧形成一个 />（比如前面的：<img src="duolaiameng.png" />）来表明：这就是一个自闭合标签！
src(source)）是指引用的图片的位置，我们只所以常常把网络中存在图片，叫做图片资源，也正是由于src是source的缩写的原因。
增加介绍
我们使用一个段落标签p来增加介绍信息。
<body>
<h1>Hello World!</h1>
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<img src="duolaiameng.png" />
<p>梦云智软件开发团队. 2014.12.20. 3792535@qq.com</p>
</body>如果用户安装了收发邮箱的客户端，比如说”foxmail”，我们更希望能够给用户提供这样的便利，即：点击邮箱地址直接给我们发送邮箱。html是通过a标签来做到这点的。
<p><a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
a = anchor，译为锚的意思。在网页中，大多用于页面间以及页面内跳转。由于锚的存在，使得我们可以在网页间跳来跳去，而不必去关心每个网的地址都是什么。这也像我们在大海中发现了宝贝，怕下次找不到咱，而在宝贝的位置上下了一个锚；这也像我们打游戏中的传送门，我们点击了传送门，就会自动的被传送到门的另一侧。
a标签具有一个href属性，全称为：Hypertext Reference,其中Hypertext即，我们html中的第一个ht,译为超文本。所以我们的html又叫做超文本(Hypertext)标记(Markup)语言(Language)，而href又叫做超文本引用。是的,href拥有着和html缩写相同的单词，可见其在html语言中的重要性。
href除了可以进行页面间，页面内的跳转外，如上面我们使用的，还可以用于触发邮件发送的客户端，从而进行邮件的发送。点我们如上设置好后，点击我们的邮箱地址，不出意外的，操作系统将自动为我们启用一个发送邮件的客户端。比如:outlook
美化感受
随着模块的增多，用户会越来越眼花缭乱。为此，我们使用一个原始，但却有效的方案来解决这个问题 – 水平分隔线(horizontal rule) – <hr />
在基本信息模块的前面和后面，各增加一条，以达到视觉的隔离效果。
<body>
<h1>Hello World!</h1>
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<hr />
<img src="duolaiameng.png" />
<p>梦云智软件开发团队. 2014.12.20. <a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
<hr />
</body>
我们在照顾用户的浏览感受的同时，也照顾一下我们自己的感受。随着代码的增加，我们越来越多期望能够快速的读懂自己的代码了。这需要靠适度的空行及注释完帮助我们。
<body>
<h1>Hello World!</h1>
<!-- 导航 -->
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<hr />
<!-- 导航 结束 -->
<!-- 基本信息 -->
<img src="duolaiameng.png" />
<p>梦云智软件开发团队. 2014.12.20. <a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
<hr />
<!-- 基本信息 结束 -->
</body>刷新网页，发现没有发生任务的变化。是的，注释的作用只是帮助工程师来更好的理解代码。除此以外，并不会产生其它的作用。
正如你看到的，在html中，我们使用<!--做为注释的开始，使用-->做为注释的结束。同时，聪明的sublime也会用颜色来告诉你哪些是注释，哪些是代码。
最终完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- 导航 -->
<table>
<tr>
<td>自我介绍</td>
<td>所学课程</td>
<td>我的建议</td>
<td>友情链接</td>
<td>生活中的我</td>
</tr>
</table>
<hr />
<!-- 导航 结束 -->
<!-- 基本信息 -->
<img src="duolaiameng.png" />
<p>梦云智软件开发团队. 2014.12.20. <a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
<hr />
<!-- 基本信息 结束 -->
</body>
</html>
总结：
在本节中，我们学习使用了图片标签img, 并使用img标签的src属性来说明了图片的位置；锚点标签a，并使用href属性来说明了超文本链接引用的位置，最后在href中使用mailto:来达到了启用邮件客户端发送邮件的目的。紧接着，我们使用hr标签来产生了两条水平分隔性，使用<!-- -->标签为软件工程师们增加了注释。
是的，就是这html,就是MarkUp(标记 标签)，就是 超文本标记语言 – html。