HTML与CSS基础第五课—HTML的空格、换行、横线相关知识

HTML的空格、换行、横线相关知识

简单示例（空格、br、hr、 ）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>空格、换行和横线</title>
</head>
<body>
    <h1>前端从零到架构师</h1>
    <!-- 空格测试 -->
    <p>第一句在这里。           后面连着按了四个空格。</p>
    <!-- 换行测试 -->
    <p>换行测试换行测试换行测试
        换行测试2换行测试2换行测试2
    </p>
    <!-- br换行测试 -->
    <p>同一段里要换行，用 br<br>同一段里要换行，用 br</p>
    <p>这是新的一段。段与段的空隙来自两个 p。</p>
    <!-- hr横线测试 -->
    <hr>
    <!-- 多个空格测试 -->
    <p>价格写成 99 元，多个空格测试&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多个空格测试2</p>
</body>
</html>

从代码中，我们可以看到，HTML针对空格、回车、换行，都有自己的一套处理方式。

• 连续空格，只会展示一个空格。
• 会车换行，在html中是不生效的。
• <br>，是html中的特定换行标签。
•  ，是html中的特定空格，如果想表达多个空格的时候，可以使用  。
• <hr>，是html中的特定横线。

标签介绍（概念和特征）

浏览器读正文时，会把源码里连续的空格、制表和回车收成一个普通空格。所以多按几下空格，页面上不会空出一截；多按几次回车，也不会多出一段。

写法	页面上是什么
连续空格、回车	多半只剩一个空格
回车	不生效
<br>	同一段里换一行
<hr>	话题换了，画出一条横线
&nbsp;	一个不会被拆开的空格

<br> 是空元素，没有结束标签，不要写 </br>。它只换行，不开始新的一段。

<hr> 也是空元素。它表示话题从这里断开，浏览器把它画成一条横线。

  是一个不换行空格（non-breaking space）。连写很多个  ，只是得到很多个不换行空格。

要点总结

在html中，空格用 表示，换行用<br>表示，横线用<hr>表示。

下一篇：想在页面上看见 <p> 这两个字符，为什么一刷新就找不到？