文字排版

文字排版

网页文字内容要想工整显示,有些时候离不开排版标记。比如段落 <p>、换行 <br/>

1 换行标记 <br/>

它是一个单标记,没有结束标记。一个 <br/> 代表一次换行,多个 <br/> 可以实现多次换行。可以放在文字中间。

<body>
《西江月·夜行黄沙道中》<br/><br/>
明月别枝惊鹊,清风半夜鸣蝉。稻花香里说丰年,听取蛙声一片。 <br/>
七八个星天外,两三点雨山前。旧时茅店社林边,路转溪桥忽见
</body>Code language: HTML, XML (xml)

2 段落标记 <p>

段落标记使用 <p></p> 包裹一段文字,浏览器会在段落前后自动添加间距。

<body>
<p>
天边的明月升上了树梢,惊飞了栖息在枝头的喜鹊。清凉的晚风仿佛传来了远处的蝉叫声。在稻花的香气里,人们谈论着丰收的年景,耳边传来一阵阵青蛙的叫声,好像在说着丰收年。
天空中轻云漂浮,闪烁的星星时隐时现,山前下起了淅淅沥沥的小雨,从前那熟悉的茅店小屋依然坐落在土地庙附近的树林中,山路一转,曾经那记忆深刻的溪流小桥呈现在他的眼前。
</p>
</body>Code language: HTML, XML (xml)

本节完整代码

<!DOCTYPE html>
<html>
    <head>
        <title>标题栏</title>
    </head>
    <body>
       <p>
        《西江月·夜行黄沙道中》<br/><br/>
        明月别枝惊鹊,清风半夜鸣蝉。<br/>
        稻花香里说丰年,听取蛙声一片。<br/>
        七八个星天外,两三点雨山前。<br/>
        旧时茅店社林边,路转溪桥忽见    
        </p> 
        <p>
        天边的明月升上了树梢,惊飞了栖息在枝头的喜鹊。清凉的晚风仿佛传来了远处的蝉叫声。在稻花的香气里,人们谈论着丰收的年景,耳边传来一阵阵青蛙的叫声,好像在说着丰收年。
        天空中轻云漂浮,闪烁的星星时隐时现,山前下起了淅淅沥沥的小雨,从前那熟悉的茅店小屋依然坐落在土地庙附近的树林中,山路一转,曾经那记忆深刻的溪流小桥呈现在他的眼前。
        </p>  
    </body>
</html>Code language: HTML, XML (xml)

补充说明

  • <br/> 是单标签(自闭合),用于强制换行,适合诗词、地址等需要固定换行的场景
  • <p> 是块级元素,浏览器默认在段落前后添加 margin 间距,使内容层次分明
  • <br/><p> 的区别:<br/> 只换行不分段,<p> 换行且分段(有段落间距)
  • 不要用多个 <br/> 来实现段落间距,应该用 <p> 标签配合 CSS 的 margin 控制
  • 现代 HTML5 中 <br> 也可以不写斜杠,但写 <br/> 更规范

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注