15、HTML 教程 - 换行

1. 任务背景

我们之前学习过段落标签<div>,该标签会独占一块,在后面会产生换行效果。

我们也可以直接使用换行标签<br>,该标签的作用就是立即生成一个换行。

2. 任务目标

学习<br>标签的使用方法

3. 相关知识点

目前学过的p、div、br标签都可以换行,但是前两者成对使用,必须有开始标签和结束标签,而br可以单独使用。

4. 任务实操

比如我们想写一首诗,让诗歌的每一句都独占一行,此时我们可以用<div>标签如下实现:

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

效果如下:
 

如果使用换行标签,代码如下:

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

效果如下,可以发现,跟上面使用div的效果是一样的。
 

5. 任务总结

虽然br跟div功能差不多,但是br还是有个优势的——代码量少啊。

在实际网页开发中,div和br用途还是有不小区别的,div用于划分区域,而br是在一个区域内产生一个换行的效果。

当然初学者阶段,了解一下就足够了。