3.2　超链接标记小案例：做一个个人博客主页

首先，从一个简单的博客网页开始学习一下超链接标记的用法。

任务描述：个人博客主页中，有文字和图片，还能打开文章的链接，进而打开链接一篇具体文章的页面，效果如图3.2所示。

图片素材准备：准备一张头像图片myAvatar.jpg，将其保存在根目录test/imgs文件夹下。

操作步骤：在test文件夹中，右击打开Notepad++，新建01.html，并输入如图3.3所示的代码，输入完毕后保存。最后，用Chrome浏览器打开，查看网页效果。

思考时间

停一下，给自己2分钟时间，找找HTML代码与网页内容的对应关系。

时间到，相信聪明的你很容易就找到对应关系了，每一块内容都由一对或单个＜标记名＞包围，由于这是你的第一个网页，所以还是先跟着我来看一下每一行代码的含义。如果你已经很熟悉HTML，则可以跳过该节。

代码行1：＜!doctype html＞这是对HTML版本的声明，所有HTML5版本的网页，必须在文档的第一行声明，这里大小写都可以。

代码行2：＜html＞是对HTML文档的定义标签，它也是双标记。它的作用是包围网页相关的所有代码。

代码行3-6：＜head＞是HTML文档的头部声明区，该区一般用于定义文档内容的字符集格式，声明CSS样式，定义网页的标题＜title＞等。这里字符集为utf-8，表示支持中文内容的显示，关于CSS样式的声明和引入之后的章节再细聊。＜head＞内的所有内容都不会出现在网页主体中，它只是会影响整个HTML文档中内容的格式和样式。

代码行7：＜body＞是正文部分，它是HTML文档的重中之重，因为与网页中内容相关的代码都在这里。

代码行8：＜h1＞一级标题标签，文字会被加粗且字号变大，align=“center”是文字居中的属性。相关的标题标签实际有6级，从h1到h6，标题文字的大小依次变小，并且标题行之间的间距也越来越小。

代码行9：＜img＞是图片标签，又称单标记，也可以写作＜img/＞。为了显示图片，我们需要告诉浏览器图片的存储路径，而它是通过src属性来定义的。类似的，width和height也是img标签的属性，负责定义图片显示的宽度和高度，单位是像素（px）。

代码行10-11：＜p＞是段落标签，表示开启一个段落的内容。＜b＞是将文字加粗显示。

代码行12-13：＜a＞超链接标签，href是超链接的跳转地址属性。

代码行14：一定要记得在html中，很多标记都是成对出现的；因此，一定不要忘记＜body＞对应的结束标签＜/body＞。

代码行15：＜/html＞是＜html＞标签的结束标记。

至此，就完成了第一个网页的开发，你的网页是否实现了如图3.3所示的效果呢？如果是，那么恭喜你了。如果不是，最可能出问题的就是图片的显示问题。

图片无法正常显示

首先，需要排除标签的拼写错误，常见的错误是将src写成scr。如果确认无误，则要查看图片的存放位置，在test文件下，有一个01.html和imgs文件夹，图片应该在imgs文件夹下。如果都没有问题，则仔细检查图片名称是否写对，建议图片名称最好用英文，且通过重命名后复制的方式获取，以避免手动拼写错误。

这个小案例虽然简单，却涵盖了一个HTML文档应有的基本框架，包括文档声明、＜html＞、＜head＞、＜body＞等标签。在以后的任务中，为了节省空间，将不会再介绍和展示基本框架代码。

网页出现乱码怎么办？

问：在Notepad++中运行01.html，却发现网页中显示一堆乱码？

答：不要着急，这是由于Notepad++的默认设置问题，你可以按照图3.4修改设置。即在工具栏中找到“设置”→“首选项设置”，将新建文档的编码格式由默认的ANSI改为UTF-8，这个问题就可以迎刃而解了。