文字排版
网页文字内容要想工整显示,有些时候离不开排版标记。比如段落 <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/>更规范