一张网页或者说一个html，就像一本书里的一页一样向访问者展示各种各样丰富多彩的信息。比如一本诗集，它的每一页都充满了文字，插图，注解，他们都像读者传达了各种各样的信息，而文字就是每一页内容的核心部分。html也是如此，那么如何在html中像书本一样给读者展现丰富的文字内容呢？这里就需要用到功能强大，无处不在的文字标签了。下面我们就开始在html中实现诗集的一页，下面就是我们要实现的效果：
静夜思
作者：李 白
床前明月光，
疑似地上霜。
举头望明月，
低头思故乡。
李白：唐代诗人
第一页
首先一首诗不可少的就是标题，标题的文字和内容里的文字是有区别的，字号要比内容要大，字体加粗。在html中，只需要使用<h1>标签就可以使文字达到这个效果，下面看看代码：
<h1>静夜思</h1>
是不是很简单，这就是html的强大之处，只需要一个标签就能实现标题的效果。
有些细心的读者会发现这个标签有个数字1，那么是不是还有2,3,4呢？答案是肯定的，在html中有从h1~h6六个标题标签，随着数字的增大，字号会逐渐变小。当有些文章不仅有标题，还有副标题，小标题时，这些标签就可以达到效果了。大家可以试一试以下代码在浏览器中看看效果：
<h1>静夜思</h1> <h2>静夜思</h2> <h3>静夜思</h3> <h4>静夜思</h4> <h5>静夜思</h5> <h6>静夜思</h6>
实现了标题的效果，那么我们要输入作者了，这里使用了一个新的标签<span>:
<span>作者：李白</span>
使用<span>这个标签和不使用标签直接输入在实际上看是没有区别的，那么我们为什么要使用这个标签呢？在html中，各种文字的内容最好都放在标签里，这样当我们之后使用css改变它们的样式时就会十分方便。举个简单的例子，当我们想把“作者：李白”这几个字变成红色时，只需要对这个span标签进行css的设置就可以了，详细的等到讲解css时会介绍。
接下来要实现古诗的正文部分了，每一句古诗，都可以当作文章的一段，那么html中表示段落的标签是哪个呢？就是这个<p>标签，使用它可以定义段落：
<p>床前明月光，</p> <p>疑似地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p>
以上就实现了一首诗的展示页面。
正文内容结束了，在一首诗的页面里，是不是应该还有注释和页码呢？这些和正文内容无关的信息在书本中会用一条长长的横线将它们与正文隔开，在html中，要实现这样一条水平线就需要使用<hr>标签了，值得注意的是<hr>标签和其它的标签不一样的地方是它不需要写闭合标签:
<hr>
之后用我们刚学习的<span>标签填上注释：
<span>李白：唐代诗人</span>
之后再用span标签添加页码：
<span>第一页</span>
这里我们发现，页码和注释出现在了同一行，这是因为span标签是行内元素，而之前的那些标签是块元素，他们之间的区别之一就是，块元素会自动换行行内元素则不会。当然它们还有很多区别，会在之后的章节详细介绍。
那么我们想实现换行该怎么办呢？这里只需要使用<br>标签，html中会将<br>标签视为换行，它和<hr>标签一样，是不需要闭合标签的。
这样我们就实现了一页完整的古诗页，以下是全部的代码：
<html> <head> <meta charset="utf-8"> <title>123</title> </head> <body> <h1>静夜思</h1> <span>作者：李白</span> <p>床前明月光，</p> <p>疑似地上霜。</p> <p>举头望明月，</p> <p>低头思故乡。</p> <hr> <span>李白：唐代诗人</span><br><span>第一页</span> </body> </html>
课后练习：通过今天学习，尝试着使用文字标签做一下诗集的第二页，杜甫的登高吧！
3008
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
