网页开发入门｜05 综合练习一：图文展示页面

本节课是一次综合练习，我们将综合运用前几节课中学到的内容，来做一个用于展示古诗词的页面。

这也是一次PBL（项目制学习）的旅程。尽管我们已经掌握的知识，可以为项目的推进指明大的方向，但真实的项目中充满了细节，这些细节往往会在学习的过程中被有意无意的忽略掉。

可是魔鬼藏在细节里，这些被忽略的细节才是区分我们「好像学会了」和「真的学会了」的关键。

更重要的是，真实项目的过程是探索未知的过程，我们将学会当面对新问题时，如何获取新的知识。

项目目标

现在，我们拿到了一份来自设计师的设计稿，如下图。

这是一篇古诗词赏析的页面，主要包含五个部分：标题、作者和朝代、正文、标签，最后还有一张作者的图片。

通常设计稿中要有每一处具体尺寸的标注信息，如字号有多大，间距有多宽，色号到底是多少之类的。这些信息需要使用专门的软件查看，所以本练习中，让我们暂时忽略这些问题。

接下来，让我们先在workspace中创建一个新文件poem.html，然后一部分一部分的实现本页面。

标题

让我们先看一下「标题」这一部分。

诗词的标题「登鹳雀楼」是一个字体大小比正文略大一些的、粗体的文本，并且独占一行。

「独占一行」可以用块级元素解决，「粗体」我们之前了解过，可以使用b标签来实现，如何把字体调大呢？

根据之前已经学到过的内容，我们可以合理猜测，这应该可以通过某一个标签或者某一个属性来解决。

当我们遇到一个具体问题，不知道该用什么方法实现的时候，第一选择就是查文档。通常情况下，官方的文档都会对相关问题的实现方法给到说明。

推荐大家到W3C School或MDN Web Docs查阅HTML相关的文档。

让我们看一下文档中，对于「字体大小」的说明。

通过查阅文档我们发现，字体大小可以使用font-size属性来进行调整，但它同时也清晰的说明了，如果我们是要标记一个标题，更应该使用<h1> - <h6>标签。

通常情况下，我们应该采纳官方的建议，除非我们已经非常熟悉这门技术，了解不这样做的代价。

显然，我们还是一个新手，所以这次我们就乖乖的听话吧，先去了解一下<h1> - <h6>标签是什么。

可见<h1> - <h6>可以用于标记标题，而且是块级元素。

好的，接下来让我们使用<h1>来试一下效果。为了对比，我们也同时加上无任何标记的正文。

<h1>登鹳雀楼</h1>
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

看起来还不错，h1一个标签把「字体大小」、「粗体」、「独占一行」三个问题都解决了。

作者和朝代

再来看一下「作者和朝代」这一部分。

这部分的字号比正文略小，颜色是略浅一些的灰色。作者的名字被突出显示为蓝色，显然是一个超链接。他们整体独占了一行。

「作者和朝代」并不是一个标题，所以我们可以放心的使用font-size属性来调整文本的大小了。

需要说明的是，文档此处所指的属性是Property而非我们之前所学到的Attribute，指的是元素style属性中某一个样式，而不是元素的属性。为了避免歧义，在后文中将使用「样式属性」一词称呼前者。

浏览器中默认的字体大小通常为16px，所以我们可以将这行的字体大小设置为14px，让他看起来小一点。

但设置字体是更好的做法是使用em作为字体大小的单位，W3C的文档中也推荐了这种方式。

1em表示当前字体大小，2em表示是原字体的二倍大小。与 px不同，em还可以为小数，0.5em表示原字体大小的一半。

我们此处使用0.9em，让这行字比正文稍微小一点。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em">【作者】王之涣  【朝代】唐</div>
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

接下来修改颜色，我们已经比较熟悉了，可以使用color样式属性。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">【作者】王之涣  【朝代】唐</div>
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

最后，让我们为作者名添加一个超链接，跳转到对应百科页面。为了增强可读性，我们对代码也进行一些换行。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

这个超链接默认有个下划线，并不是我们想要的效果。查阅文档，发现text-decoration是用来设置文字装饰的样式属性。

最终我们这部分的代码如下：

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

正文

正文部分比较简单，没有什么特殊的样式，基本上就是把文字分为两行，可以简单的使用两个div来解决。

但这里更加推荐使用p标签，是段落paragraph的缩写。p相比div有更加明确的语义，更重要的是p有默认的段间距，看起来更加美观一些。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>

另外设计稿中，正文部分与之前的部分之间还有一行浅浅的横线，也就是一个分隔符。分隔符可以使用hr标签来实现，是 水平分隔线horizontal rule的缩写。

hr与br类似，无法包围任何的内容，所以也只有开始标签，没有结束标签。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<hr>
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>

标签

设计图中标签的部分，其实也就是一排超链接。

如何添加超链接大家已经比较熟悉了，直接上代码。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<hr>
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
<div>
  标签：
  <a href="#">写景</a>
  <a href="#">登楼</a>
  <a href="#">唐诗三百首</a>
  <a href="#">哲理</a>
  <a href="#">黄河</a>
  <a href="#">场景</a>
  <a href="#">励志</a>
  <a href="#">景色</a>
  <a href="#">山水</a>
  <a href="#">数字</a>
</div>

此处有个小技巧，当我们不知道超链接所引用的URL时，可以使用#表示当前页面。此外，#还可以用于页内锚点跳转，我们后面课程再详聊。

与作者部分类似，我们同样需要将超链接的下划线去掉，并且把字号变小。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<hr />
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
<div style="font-size: 0.9em">
  标签：
  <a href="#" style="text-decoration: none">写景</a>
  <a href="#" style="text-decoration: none">登楼</a>
  <a href="#" style="text-decoration: none">唐诗三百首</a>
  <a href="#" style="text-decoration: none">哲理</a>
  <a href="#" style="text-decoration: none">黄河</a>
  <a href="#" style="text-decoration: none">场景</a>
  <a href="#" style="text-decoration: none">励志</a>
  <a href="#" style="text-decoration: none">景色</a>
  <a href="#" style="text-decoration: none">山水</a>
  <a href="#" style="text-decoration: none">数字</a>
</div>

最后让我们为这部分的超链接加上背景颜色。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<hr />
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
<div style="font-size: 0.9em">
  标签：
  <a href="#" style="text-decoration: none; background-color: lightgray">写景</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">登楼</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">唐诗三百首</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">哲理</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">黄河</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">场景</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">励志</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">景色</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">山水</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">数字</a>
</div>

作者照片

设计图中最后的一部分还有一张作者的图片，图片与上文之间还有一些间距。

所以，使用p标签嵌套img标签即可。

<h1>登鹳雀楼</h1>
<div style="font-size: 0.9em; color: gray">
	【作者】
	<a href="https://baike.baidu.com/item/王之涣"
    style="text-decoration: none">王之涣</a>
	【朝代】唐
</div>
<hr />
<p>白日依山尽，黄河入海流。</p>
<p>欲穷千里目，更上一层楼。</p>
<div style="font-size: 0.9em">
  标签：
  <a href="#" style="text-decoration: none; background-color: lightgray">写景</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">登楼</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">唐诗三百首</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">哲理</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">黄河</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">场景</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">励志</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">景色</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">山水</a>
  <a href="#" style="text-decoration: none; background-color: lightgray">数字</a>
</div>
<p>
  <img src="assets/王之涣.jpg" alt="王之涣">
</p>

小结

好了，至此本次综合练习就暂告一个段落，希望通过本次的项目，你了解了如何使用HTML代码来实现一个图文页面，更重要的是了解了当遇到新问题时，如何去查找文档的基本方法。

对比设计稿和我们最终的成稿，从细节来说还有很多不足，如颜色不准确，间距也不准确。这是因为，目前我们还没有学到一些重要的知识。让我们带上这些问题，迈向下一段学习旅途。

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。