09、HTML 教程 - 我用HTML为你写诗

1. 任务背景

我相信不少学习编程的同学,在某个时刻,都想给暗恋的她(他)做一个网页吧。

上面写一首优美且富有内涵的诗,再配上几张帅到爆表的图片,挺有格调啊。

本节咱就用HTML写首诗吧。

2. 任务目标

使用HTML编写一个网页,在网页上展示一首诗歌。

3. 相关知识点

3.1 先选择一首喜欢的诗歌

你们喜欢啥我不晓得,我本人是特别喜欢普希金的《假如生活欺骗了你》:

假如生活欺骗了你
不要悲伤,不要心急
忧郁的日子里需要寂静
相信吧,那快乐的日子即将来临

3.2 网页直接回车换行是没用的

通过之前的学习,我们已知body标签中间的部分会展示在网页上。

于是试下这样的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>普希金诗歌一首</title>
</head>
<body>
    假如生活欺骗了你
    不要悲伤,不要心急
    忧郁的日子里须要镇静
    相信吧,快乐的日子将会来临
</body>
</html>

上面代码对应效果如下:
 
发现了吗,网页代码中的回车换行,实际是无效的。

3.3 使用段落标签

可以使用HTML中的段落标签,将诗句划分段落。

段落的英文单位为paragraph,我们自然会想到,HTML使用<paragraph>作为段落的标签,但是并非如此。

因为paragraph这个单词实在是有点长,太难记了,所以我严重的怀疑HTML创立者因为这个原因,将其简化为了<p>标签。

所以HTML中,使用<p>标签来描述一个段落。

4. 任务实操

有了段落之后,我们就可以做一个完整的网页了,可以轻松的实现分段功能。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>普希金诗歌一首</title>
</head>
<body>
    <p>假如生活欺骗了你</p>
    <p>不要悲伤,不要心急</p>
    <p>忧郁的日子里须要镇静</p>
    <p>相信吧,快乐的日子将会来临</p>
</body>
</html>

效果如下,可见有了段落,页面的排版更加的井井有条了。
 

5. 任务总结

HTML学习的基础就是标签,通过标签实现各种功能。