- ·上一篇内容:HTML 标题
- ·下一篇内容:HTML style属性
HTML 段落
与书籍一样,HTML文档中也有段落,而且HTML文档中的段落在形式上与书籍中的段落相似,它们都占据着一个矩形区域。在默认情况下,这个矩形区域不会与其它元素并排在一行上。
HTML中的段落元素
在HTML中使用<p>元素来定义一个段落。
在使用时,每个段落以<p>开始,以</p>结尾。
每个段落都会在新行上开始。
下面是一个例子:
<p> 立夏日南风大作二首 </p>
<p> 宋·项安世 </p>
<p>满城杨柳绿依依,背著春风自在飞。</p>
<p>却是杨花有才思,一时收拾伴春归。</p>
<p> 宋·项安世 </p>
<p>满城杨柳绿依依,背著春风自在飞。</p>
<p>却是杨花有才思,一时收拾伴春归。</p>
上面这个例子是一首诗。在排版上用意是想让题目,作者都位于整体内容的中间,事实是这样的吗?
下面是在谷歌113版64位浏览器中浏览的效果。
很显然,浏览器并没有像我们编排的那样显示内容。
HTML 段落的显示
(1)HTML段落会占据整行,在该行上不会显示其它内容;
(2)浏览器在显示时会在段落上边和下边添加一定的空间,以使内容看上去更加美观;
(3)浏览器会忽略段落前后的空白以及段落内多余的空白行;
(4)浏览器会忽略段落中的直接换行。
上面那个例子可以说明,浏览器在显示时忽略了段落内容前后多余的空白。
下面使用另外一个例子来说明这个问题。
HTML 段落最后一例
这个例子综合演示有关空行、换行、空白的例子。
<h3>再 别 康 桥</h3>
<p> 轻轻的我走了,</p>
<p> 正如我轻轻的来;</p>
<p> 我轻轻的招手,</p>
<p> 作别西天的云彩。</p>
<p> 那河畔的金柳,</p>
<p> 是夕阳中的新娘;</p>
<p> 波光里的艳影,
在我的心头荡漾。</p>
<p> 软泥上的青荇,
油油的在水底招摇;</p>
<p> 在康河的柔波里,
我甘心做一条水草!</p>
<p> 那榆荫下的一潭,
不是清泉,
是天上虹,
揉碎在浮藻间,
沉淀着彩虹似的梦。</p>
<p> 寻梦?撑一支长蒿,</p>
<p> 向青草更青处漫溯,</p>
<p> 满载一船星辉, 在星辉斑斓里放歌。</p>
<p> 但我不能放歌, 悄悄是别离的笙箫;</p>
<p> 夏虫也为我沉默, 沉默是今晚的康桥!</p>
<p> 悄悄的我走了, 正如我悄悄的来;</p>
<p> 我挥一挥衣袖, 不带走一片云彩。</p>
<p></p>
<p> 轻轻的我走了,</p>
<p> 正如我轻轻的来;</p>
<p> 我轻轻的招手,</p>
<p> 作别西天的云彩。</p>
<p> 那河畔的金柳,</p>
<p> 是夕阳中的新娘;</p>
<p> 波光里的艳影,
在我的心头荡漾。</p>
<p> 软泥上的青荇,
油油的在水底招摇;</p>
<p> 在康河的柔波里,
我甘心做一条水草!</p>
<p> 那榆荫下的一潭,
不是清泉,
是天上虹,
揉碎在浮藻间,
沉淀着彩虹似的梦。</p>
<p> 寻梦?撑一支长蒿,</p>
<p> 向青草更青处漫溯,</p>
<p> 满载一船星辉, 在星辉斑斓里放歌。</p>
<p> 但我不能放歌, 悄悄是别离的笙箫;</p>
<p> 夏虫也为我沉默, 沉默是今晚的康桥!</p>
<p> 悄悄的我走了, 正如我悄悄的来;</p>
<p> 我挥一挥衣袖, 不带走一片云彩。</p>
<p></p>
读者点击预览HTML 段落效果,自行查看和分析。
微信搜索“优雅的代码”关注本站的公众号,或直接使用微信扫描下面二维码关注本站公众号,以获取最新内容。
个人成长离不开各位的关注,你的关注就是我继续前行的动力。